diff --git a/.changeset/old-donkeys-report.md b/.changeset/old-donkeys-report.md new file mode 100644 index 00000000..9c1a2188 --- /dev/null +++ b/.changeset/old-donkeys-report.md @@ -0,0 +1,5 @@ +--- +"@status-im/components": patch +--- + +update toast options diff --git a/packages/components/src/toast/toast-container.tsx b/packages/components/src/toast/toast-container.tsx index ed15f6e1..b22ee151 100644 --- a/packages/components/src/toast/toast-container.tsx +++ b/packages/components/src/toast/toast-container.tsx @@ -7,33 +7,44 @@ import { create } from 'zustand' import { Toast } from './toast' import type { ToastProps } from './toast' +import type { ToastProps as RootProps } from '@radix-ui/react-toast' + +type ToastRootProps = Partial> & { + originType?: RootProps['type'] +} + +type Options = ToastRootProps & Pick type ToastState = { - toast: ToastProps | null + toast: (ToastProps & ToastRootProps) | null dismiss: () => void - positive: ( - message: string, - actionProps?: Pick - ) => void - negative: ( - message: string, - actionProps?: Pick - ) => void - custom: ( - message: string, - icon: React.ReactElement, - actionProps?: Pick - ) => void + positive: (message: string, options?: Options) => void + negative: (message: string, options?: Options) => void + custom: (message: string, icon: React.ReactElement, options?: Options) => void } const useStore = create()(set => ({ toast: null, - positive: (message, actionProps) => - set({ toast: { ...actionProps, message, type: 'positive' } }), - negative: (message, actionProps) => - set({ toast: { ...actionProps, message, type: 'negative' } }), - custom: (message, icon, actionProps) => - set({ toast: { ...actionProps, message, icon } }), + positive: (message, options) => + set({ + toast: { + message, + ...options, + type: 'positive', + }, + }), + negative: (message, options) => + set({ + toast: { + message, + ...options, + type: 'negative', + }, + }), + custom: (message, icon, options) => + set({ + toast: { message, icon, ...options }, + }), dismiss: () => set({ toast: null }), })) @@ -50,14 +61,23 @@ const ToastContainer = () => { } } + const { duration, originType, ...restProps } = store.toast + return ( event.preventDefault()} + onSwipeMove={event => event.preventDefault()} + onSwipeCancel={event => event.preventDefault()} + onSwipeEnd={event => event.preventDefault()} + duration={duration} + type={originType} > - + @@ -72,6 +92,7 @@ const useToast = () => { positive: store.positive, negative: store.negative, custom: store.custom, + dismiss: store.dismiss, }), [store] ) diff --git a/packages/components/src/toast/toast.tsx b/packages/components/src/toast/toast.tsx index dd0c6058..daabf294 100644 --- a/packages/components/src/toast/toast.tsx +++ b/packages/components/src/toast/toast.tsx @@ -38,7 +38,7 @@ const Toast = (props: Props) => { return ( - + {renderIcon()}