Cogoport / cogo-toast

Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons
https://cogoport.github.io/cogo-toast
MIT License
673 stars 2 forks source link

TypeScript typings #11

Closed sebastien-p closed 5 years ago

sebastien-p commented 5 years ago

Hi, thanks for this project! I integrated it in some app of mine which is coded in React+TypeScript so I had to create my own type definitions file since you don't provide one. Here it is, in case you may be interested:

declare module 'cogo-toast' {
  import { ReactNode, MouseEventHandler } from 'react';

  export type Options = Partial<{
    hideAfter: number;
    position: 'top-left'
      | 'top-center'
      | 'top-right'
      | 'bottom-left'
      | 'bottom-center'
      | 'bottom-right';
    heading: string;
    icon: ReactNode;
    bar: Partial<{
      size: string;
      style: 'solid' | 'dashed' | 'dotted';
      color: string;
    }>;
    onClick: MouseEventHandler;
  }>;

  export type HideToastFunction = () => void;

  export type Method = {
    (message: string, options?: Options & { hideAfter: 0 }): HideToastFunction;
    (message: string, options?: Options): Promise<void>;
  };

  namespace toast {
    export const loading: Method;
    export const success: Method;
    export const error: Method;
    export const warn: Method;
    export const info: Method;
  }

  export default toast;
}
anmdotdev commented 5 years ago

That's great @sebastien-p If you can put this in a pull request, I ll be more then happy to merge it :)

anmdotdev commented 5 years ago

Merged in #12 for v2.0.0

sebastien-p commented 5 years ago

Hi, thanks for the merge :)

I didn't open a PR because, while using declare module 'cogo-toast' seems to work, I think the following would be more correct for typings provided by a library:

import { ReactNode, MouseEventHandler } from 'react';

export type Options = Partial<{
  hideAfter: number;
  position:
    | 'top-left'
    | 'top-center'
    | 'top-right'
    | 'bottom-left'
    | 'bottom-center'
    | 'bottom-right';
  heading: string;
  icon: ReactNode;
  bar: Partial<{
    size: string;
    style: 'solid' | 'dashed' | 'dotted';
    color: string;
  }>;
  onClick: MouseEventHandler;
}>;

export type HideToastFunction = () => void;

export type Method = {
  (message: string, options?: Options & { hideAfter: 0 }): HideToastFunction;
  (message: string, options?: Options): Promise<void>;
};

declare namespace toast {
  export const loading: Method;
  export const success: Method;
  export const error: Method;
  export const warn: Method;
  export const info: Method;
}

export default toast;