(Comp: React.ComponentType
) => + (props: P): React.JSX.Element => + {context => }; + +export const useToaster = (): ToasterHook => { + const {add} = useContext(ToastContext); + + return add; +}; diff --git a/src/toast-provider.tsx b/src/toast-provider.tsx index edb4eac..291a0f4 100644 --- a/src/toast-provider.tsx +++ b/src/toast-provider.tsx @@ -4,34 +4,50 @@ import {ToastRenderer} from './toast-renderer'; import './scss/toaster.css'; -export interface IToast { +export type IdlessToast = { content: string; - id?: number; header?: string; variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | undefined; dismissTimer?: number; dismissible?: boolean; -} +}; + +export type IToast = IdlessToast & { + id: number; +}; interface IToastContext { - add(toast: IToast): void; + add(toast: IdlessToast | IToast): void; } interface props { position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; maxItems: number; defaultTimer: number; + children: React.ReactNode; } interface state { toasts: IToast[]; } -// @ts-ignore -export const ToastContext = React.createContext(); +export const ToastContext = React.createContext({ + add: () => { + // Default implementation does nothing + }, +}); + +export const isIToast = (toast: IToast | IdlessToast): toast is IToast => { + return 'id' in toast; +}; export class ToastProvider extends React.Component { - state = {toasts: []}; + // The 'refs' property is required to satisfy the React Component type definition + // starting from @types/react v18+. Although it's unused, omitting it causes a TypeScript + // error (TS2786) due to stricter class component constructor signatures. + refs: any; + + state: {toasts: IToast[]} = {toasts: []}; public static defaultProps = { position: 'top-right', @@ -39,25 +55,24 @@ export class ToastProvider extends React.Component { defaultTimer: 4000, }; - addToast = (toast: IToast): void => { + addToast = (toast: IdlessToast | IToast): void => { if (this.state.toasts.length >= this.props.maxItems) { this.removeToastByIndex(0, this.state.toasts.length - this.props.maxItems + 1); } this.setState({ - toasts: [...this.state.toasts, {...toast, id: new Date().getTime()}], + toasts: [{...toast, id: isIToast(toast) ? toast.id : new Date().getTime()}, ...this.state.toasts], }); }; removeToastByIndex = (index: number, deleteCount = 1): void => { - let toasts = this.state.toasts; + const toasts = this.state.toasts; toasts.splice(index, deleteCount); this.setState({toasts: toasts}); }; removeToastById = (id: number): void => { for (let i = 0, j = this.state.toasts.length; i < j; i++) { - // @ts-ignore if (this.state.toasts[i].id === id) { this.removeToastByIndex(i); return; @@ -65,7 +80,7 @@ export class ToastProvider extends React.Component { } }; - render = (): JSX.Element => { + render = (): React.JSX.Element => { const context = {add: this.addToast}; return ( diff --git a/src/toast-renderer.tsx b/src/toast-renderer.tsx index db9a157..aafc7b0 100644 --- a/src/toast-renderer.tsx +++ b/src/toast-renderer.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import {AnimatePresence} from 'framer-motion'; + import Toast from './toast'; import {IToast} from './toast-provider'; @@ -10,14 +12,21 @@ interface IToastRenderer { defaultTimer: number; } -export const ToastRenderer = (props: IToastRenderer): JSX.Element => { +export const ToastRenderer = (props: IToastRenderer): React.JSX.Element => { return ( - {props.toasts.map((item, key) => { - return ( - - ); - })} + + {props.toasts.map(toast => { + return ( + + ); + })} + ); }; diff --git a/src/toast.tsx b/src/toast.tsx index 34505b8..abdd652 100644 --- a/src/toast.tsx +++ b/src/toast.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import React, {useEffect} from 'react'; -import FadeIn from 'react-fade-in'; +import {motion} from 'framer-motion'; import {Alert} from 'react-bootstrap'; import {IToast} from './toast-provider'; @@ -11,25 +11,30 @@ interface props { removeToast(id: number): void; } -export default class Toast extends React.Component { - componentDidMount = (): void => { - let {dismissTimer, id} = this.props.toast; +const Toast = ({defaultTimer, removeToast, toast}: props) => { + useEffect(() => { + const {dismissTimer, id} = toast; - setTimeout(() => this.props.removeToast(id || 0), dismissTimer || this.props.defaultTimer); - }; + setTimeout(() => removeToast(id || 0), dismissTimer || defaultTimer); + }, [toast, removeToast, defaultTimer]); - render = (): JSX.Element => { - return ( - - this.props.removeToast(this.props.toast.id || 0)} - > - {this.props.toast.header && {this.props.toast.header}} - {this.props.toast.content} - - - ); - }; -} + return ( + + removeToast(toast.id || 0)} + > + {toast.header && {toast.header}} + {toast.content} + + + ); +}; + +export default Toast; diff --git a/src/toaster.ts b/src/toaster.ts index f8e321a..39425d4 100644 --- a/src/toaster.ts +++ b/src/toaster.ts @@ -1,3 +1,13 @@ -export {IToast} from './toast-provider'; -export {withToaster} from './toast-consumer'; +import {IdlessToast, IToast} from './toast-provider'; export {ToastProvider} from './toast-provider'; +export {IToast} from './toast-provider'; + +export {withToaster, useToaster} from './toast-consumer'; + +export type ToasterProps = { + toaster: { + add(toast: IdlessToast | IToast): void; + }; +}; + +export type ToasterHook = (toast: IdlessToast | IToast) => void; diff --git a/tsconfig.json b/tsconfig.json index 2c17371..6c69e6c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,16 +1,18 @@ { "compilerOptions": { - "module": "CommonJS", + "target": "es6", + "module": "esnext", "declaration": true, - "strict": false, + "strict": true, "outDir": "./lib", - "noImplicitAny": false, + "noImplicitAny": true, "esModuleInterop": true, - "jsx": "react", + "jsx": "react-jsx", + "skipLibCheck": true, "strictNullChecks": true, - "lib": ["es5", "es2015", "es2016", "dom"], + "lib": ["es5", "es2015", "es2016", "dom", "es2020"], "moduleResolution": "node" }, "include": ["src"], "exclude": ["node_modules", "**/__tests__/*"] -} +} \ No newline at end of file diff --git a/tslint.json b/tslint.json deleted file mode 100644 index bfd627b..0000000 --- a/tslint.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": [ - "tslint-eslint-rules", - "tslint-plugin-prettier", - "tslint-config-prettier" - ], - "rules": { - "prettier": true - } -} \ No newline at end of file