From b56a1edc1377196c7d7989d81c3f6bd6db858ba0 Mon Sep 17 00:00:00 2001 From: Cheton Wu Date: Mon, 4 Nov 2024 15:29:24 +0800 Subject: [PATCH] docs: update drawer and modal with toast examples --- .../pages/components/toast/drawer-toast.js | 208 ------------------ .../toast/drawer-with-toast-notification.js | 206 +++++++++++++++++ .../pages/components/toast/index.page.mdx | 102 ++++++++- .../pages/components/toast/modal-toast.js | 208 ------------------ .../toast/modal-with-toast-notification.js | 206 +++++++++++++++++ 5 files changed, 503 insertions(+), 427 deletions(-) delete mode 100644 packages/react-docs/pages/components/toast/drawer-toast.js create mode 100644 packages/react-docs/pages/components/toast/drawer-with-toast-notification.js delete mode 100644 packages/react-docs/pages/components/toast/modal-toast.js create mode 100644 packages/react-docs/pages/components/toast/modal-with-toast-notification.js diff --git a/packages/react-docs/pages/components/toast/drawer-toast.js b/packages/react-docs/pages/components/toast/drawer-toast.js deleted file mode 100644 index 1187f5a45c..0000000000 --- a/packages/react-docs/pages/components/toast/drawer-toast.js +++ /dev/null @@ -1,208 +0,0 @@ -import { - Box, - Button, - Divider, - Flex, - Grid, - DrawerContent, - DrawerHeader, - DrawerBody, - DrawerFooter, - Skeleton, - Space, - Stack, - Text, - Toast, - ToastController, - ToastTransition, - useColorStyle, -} from '@tonic-ui/react'; -import { CloseSIcon } from '@tonic-ui/react-icons'; -import React, { useState } from 'react'; -import { TransitionGroup } from 'react-transition-group'; - -const MAX_TOASTS = 1; - -const CustomToastContainer = (props) => ( - -); - -let autoIncrementIndex = 0; - -const App = () => { - const [colorStyle] = useColorStyle(); - const [toasts, setToasts] = useState([]); - - const notify = (options) => { - const { - appearance, - content, - duration = null, - isClosable = true, - } = { ...options }; - - setToasts(prevState => { - const id = ++autoIncrementIndex; - const onClose = () => { - setToasts(toasts => toasts.filter(x => x.id !== id)); - }; - // You can decide how many toasts you want to show at the same time depending on your use case - const nextState = [ - ...prevState.slice(MAX_TOASTS > 1 ? -(MAX_TOASTS - 1) : prevState.length), - { - id, - appearance, - content, - duration, - isClosable, - onClose, - }, - ]; - return nextState; - }); - }; - - const closeAll = () => { - setToasts([]); - }; - - const handleClickAddToastByAppearance = (appearance) => (event) => { - const content = { - success: ( - <> - This is a success message. - The toast will be automatically dismissed after 5 seconds. - - ), - info: ( - <> - This is an info message. - The toast will remain visible until the user dismisses it. - - ), - warning: ( - <> - This is a warning message. - The toast will remain visible until the user dismisses it. - - ), - error: ( - <> - This is an error message. - The toast will remain visible until the user dismisses it. - - ), - }[appearance]; - - notify({ - appearance, - content, - duration: (appearance === 'success') ? 5000 : undefined, - }); - }; - - const handleClickCloseToasts = () => { - closeAll(); - }; - - return (<> - - - - - - - - - - - - - - - - ` element - > - {toasts.map(toast => ( - - - - {toast?.content} - - - - ))} - - - - Drawer - - - - - - - - - - - - - - - - - ); -}; - -export default App; diff --git a/packages/react-docs/pages/components/toast/drawer-with-toast-notification.js b/packages/react-docs/pages/components/toast/drawer-with-toast-notification.js new file mode 100644 index 0000000000..7a7e085e7f --- /dev/null +++ b/packages/react-docs/pages/components/toast/drawer-with-toast-notification.js @@ -0,0 +1,206 @@ +import { + Box, + Button, + Divider, + Flex, + Grid, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Skeleton, + Space, + Stack, + Text, + Toast, + ToastTransitionGroup, + ToastTransitionController, + useColorStyle, +} from '@tonic-ui/react'; +import { CloseSIcon } from '@tonic-ui/react-icons'; +import React, { useState } from 'react'; + +const MAX_TOASTS = 1; + +const InlineToastContainer = (props) => ( + +); + +let autoIncrementIndex = 0; + +const App = () => { + const [colorStyle] = useColorStyle(); + const [toasts, setToasts] = useState([]); + + const notify = (options) => { + const { + appearance, + content, + duration, + } = { ...options }; + + setToasts(prevState => { + const id = ++autoIncrementIndex; + // You can decide how many toasts you want to show at the same time depending on your use case + const nextState = [ + ...prevState.slice(MAX_TOASTS > 1 ? -(MAX_TOASTS - 1) : prevState.length), + { + id, + appearance, + content, + duration, + }, + ]; + return nextState; + }); + }; + + const closeToast = (id) => { + setToasts(toasts => toasts.filter(x => x.id !== id)); + }; + + const closeAll = () => { + setToasts([]); + }; + + const handleClickAddToastByAppearance = (appearance) => (event) => { + const content = { + success: ( + <> + This is a success message. + The toast will be automatically dismissed after 5 seconds. + + ), + info: ( + <> + This is an info message. + The toast will be automatically dismissed after 5 seconds. + + ), + warning: ( + <> + This is a warning message. + The toast will remain visible until the user dismisses it. + + ), + error: ( + <> + This is an error message. + The toast will remain visible until the user dismisses it. + + ), + }[appearance]; + + notify({ + appearance, + content, + duration: (appearance === 'success' || appearance === 'info') ? 5000 : undefined, + }); + }; + + const createCloseToastHandler = (id) => () => { + closeToast(id); + }; + + const handleClickCloseToasts = () => { + closeAll(); + }; + + return ( + <> + + + + + + + + + + + + + + + + + {toasts.map(toast => ( + + {({ onClose }) => ( + + {toast.content} + + )} + + ))} + + + + Drawer + + + + + + + + + + + + + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/toast/index.page.mdx b/packages/react-docs/pages/components/toast/index.page.mdx index d4b5c71e29..423c99b4ca 100644 --- a/packages/react-docs/pages/components/toast/index.page.mdx +++ b/packages/react-docs/pages/components/toast/index.page.mdx @@ -79,11 +79,91 @@ The placement and size of toasts are typically determined by the design of the a In this example, the toast will be positioned 48 pixels from the top of the modal or drawer, and has a minimum width of 280 pixels. If the content of the toast message is wider than 280 pixels, the toast will expand to fit the content without exceeding 80% of the width of the modal or drawer in which it is being displayed. +```jsx +const InlineToastContainer = (props) => ( + +); +``` + +```jsx + + This is a success message. + +``` + To animate the toast when it is displayed or dismissed, you can utilize `ToastTransitionController` to manage the duration the toast is shown before it is automatically dismissed. This enables you to specify a set amount of time for the toast to remain visible. -{render('./modal-toast')} +| Name | Type | Description | +| :--- | :--- | :---------- | +| id | string \| number | A unique identifier for the toast. | +| content | function | A function that renders the toast's content and accepts `{ onClose }` as a parameter to handle closing the toast. | +| duration | number | (Optional) Defines how long (in milliseconds) the toast should remain visible before automatically dismissing. Use `undefined` to keep the toast visible indefinitely. | + +Here's an example of the array of toast objects: + +```jsx +toasts = [ + { + id: 1000, + content: ({ onClose }) => ( + + This is a success message. + + ), + duration: 5000, // auto dismiss after 5 seconds + }, +]; +``` + +```jsx + + { + setToasts(toasts => toasts.filter(x => x.id !== id)); + }} + toasts={toasts} + /> + +``` -{render('./drawer-toast')} +#### Modal with toast notification + +{render('./modal-with-toast-notification')} + +#### Drawer with multiple toasts + +{render('./drawer-with-toast-notification')} ## Props @@ -115,15 +195,6 @@ To animate the toast when it is displayed or dismissed, you can utilize `ToastTr | timeout | number \| `{ appear?: number, enter?: number, exit?: number }` | `{ enter: duration.standard, exit: duration.standard }` | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | | unmountOnExit | boolean | | If `true`, it will unmount the child component when `in={false}` and the animation has finished. By default the child component stays mounted after it reaches the 'exited' state. | -### ToastTransitionGroup - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | any | | A set of `` components, that are toggled `in` and `out` as they leave. | -| appear | boolean | | A convenience prop that enables or disables appear animations for all children. Note that specifying this will override any defaults set on individual children Transitions. | -| enter | boolean | | A convenience prop that enables or disables enter animations for all children. Note that specifying this will override any defaults set on individual children Transitions. | -| exit | boolean | | A convenience prop that enables or disables exit animations for all children. Note that specifying this will override any defaults set on individual children Transitions. | - ### ToastTransitionController | Name | Type | Default | Description | @@ -133,3 +204,12 @@ To animate the toast when it is displayed or dismissed, you can utilize `ToastTr | children | ReactNode | ReactNode \| `({ onClose }) => ReactNode` | A function child can be used intead of a React element. This function is invoked with an object that includes the `onClose` prop. | | duration | number | null | The duration in milliseconds after which the toast will be automatically closed. Set to `null` to disable auto-closing. | | onClose | function | | A callback called when the toast is being closed. | + +### ToastTransitionGroup + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | any | | A set of `` components, that are toggled `in` and `out` as they leave. | +| appear | boolean | | A convenience prop that enables or disables appear animations for all children. Note that specifying this will override any defaults set on individual children Transitions. | +| enter | boolean | | A convenience prop that enables or disables enter animations for all children. Note that specifying this will override any defaults set on individual children Transitions. | +| exit | boolean | | A convenience prop that enables or disables exit animations for all children. Note that specifying this will override any defaults set on individual children Transitions. | diff --git a/packages/react-docs/pages/components/toast/modal-toast.js b/packages/react-docs/pages/components/toast/modal-toast.js deleted file mode 100644 index 5e3c5009b9..0000000000 --- a/packages/react-docs/pages/components/toast/modal-toast.js +++ /dev/null @@ -1,208 +0,0 @@ -import { - Box, - Button, - Divider, - Flex, - Grid, - ModalContent, - ModalHeader, - ModalBody, - ModalFooter, - Skeleton, - Space, - Stack, - Text, - Toast, - ToastController, - ToastTransition, - useColorStyle, -} from '@tonic-ui/react'; -import { CloseSIcon } from '@tonic-ui/react-icons'; -import React, { useState } from 'react'; -import { TransitionGroup } from 'react-transition-group'; - -const MAX_TOASTS = 1; - -const CustomToastContainer = (props) => ( - -); - -let autoIncrementIndex = 0; - -const App = () => { - const [colorStyle] = useColorStyle(); - const [toasts, setToasts] = useState([]); - - const notify = (options) => { - const { - appearance, - content, - duration = null, - isClosable = true, - } = { ...options }; - - setToasts(prevState => { - const id = ++autoIncrementIndex; - const onClose = () => { - setToasts(toasts => toasts.filter(x => x.id !== id)); - }; - // You can decide how many toasts you want to show at the same time depending on your use case - const nextState = [ - ...prevState.slice(MAX_TOASTS > 1 ? -(MAX_TOASTS - 1) : prevState.length), - { - id, - appearance, - content, - duration, - isClosable, - onClose, - }, - ]; - return nextState; - }); - }; - - const closeAll = () => { - setToasts([]); - }; - - const handleClickAddToastByAppearance = (appearance) => (event) => { - const content = { - success: ( - <> - This is a success message. - The toast will be automatically dismissed after 5 seconds. - - ), - info: ( - <> - This is an info message. - The toast will remain visible until the user dismisses it. - - ), - warning: ( - <> - This is a warning message. - The toast will remain visible until the user dismisses it. - - ), - error: ( - <> - This is an error message. - The toast will remain visible until the user dismisses it. - - ), - }[appearance]; - - notify({ - appearance, - content, - duration: (appearance === 'success') ? 5000 : undefined, - }); - }; - - const handleClickCloseToasts = () => { - closeAll(); - }; - - return (<> - - - - - - - - - - - - - - - - ` element - > - {toasts.map(toast => ( - - - - {toast?.content} - - - - ))} - - - - Modal - - - - - - - - - - - - - - - - - ); -}; - -export default App; diff --git a/packages/react-docs/pages/components/toast/modal-with-toast-notification.js b/packages/react-docs/pages/components/toast/modal-with-toast-notification.js new file mode 100644 index 0000000000..e108e1c9e3 --- /dev/null +++ b/packages/react-docs/pages/components/toast/modal-with-toast-notification.js @@ -0,0 +1,206 @@ +import { + Box, + Button, + Divider, + Flex, + Grid, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Skeleton, + Space, + Stack, + Text, + Toast, + ToastTransitionController, + ToastTransitionGroup, + useColorStyle, +} from '@tonic-ui/react'; +import { CloseSIcon } from '@tonic-ui/react-icons'; +import React, { useState } from 'react'; + +const MAX_TOASTS = 1; + +const InlineToastContainer = (props) => ( + +); + +let autoIncrementIndex = 0; + +const App = () => { + const [colorStyle] = useColorStyle(); + const [toasts, setToasts] = useState([]); + + const notify = (options) => { + const { + appearance, + content, + duration, + } = { ...options }; + + setToasts(prevState => { + const id = ++autoIncrementIndex; + // You can decide how many toasts you want to show at the same time depending on your use case + const nextState = [ + ...prevState.slice(MAX_TOASTS > 1 ? -(MAX_TOASTS - 1) : prevState.length), + { + id, + appearance, + content, + duration, + }, + ]; + return nextState; + }); + }; + + const closeToast = (id) => { + setToasts(toasts => toasts.filter(x => x.id !== id)); + }; + + const closeAll = () => { + setToasts([]); + }; + + const handleClickAddToastByAppearance = (appearance) => (event) => { + const content = { + success: ( + <> + This is a success message. + The toast will be automatically dismissed after 5 seconds. + + ), + info: ( + <> + This is an info message. + The toast will be automatically dismissed after 5 seconds. + + ), + warning: ( + <> + This is a warning message. + The toast will remain visible until the user dismisses it. + + ), + error: ( + <> + This is an error message. + The toast will remain visible until the user dismisses it. + + ), + }[appearance]; + + notify({ + appearance, + content, + duration: (appearance === 'success' || appearance === 'info') ? 5000 : undefined, + }); + }; + + const createCloseToastHandler = (id) => () => { + closeToast(id); + }; + + const handleClickCloseToasts = () => { + closeAll(); + }; + + return ( + <> + + + + + + + + + + + + + + + + + {toasts.map(toast => ( + + {({ onClose }) => ( + + {toast.content} + + )} + + ))} + + + + Modal + + + + + + + + + + + + + + + + + + ); +}; + +export default App;