refactor(toast): toast의 content를 string에서 react-node로 변경

Author: Seolhun

packages/bezier-react/src/components/Toast/Toast.stories.tsx

@@ -7,10 +7,13 @@ import { Story, Meta } from '@storybook/react'
 /* Internal depependencies */
 import { styled } from 'Foundation'
 import { iconList, getTitle } from 'Utils/storyUtils'
+import { ProgressBar } from 'Components/ProgressBar'
+import { StackItem, VStack } from 'Components/Stack'
+import { Button, ButtonColorVariant, ButtonStyleVariant } from 'Components/Button'
 import useToast from './useToast'
 import ToastProvider from './ToastProvider'
 import ToastElement from './ToastElement'
-import ToastProps, { ToastAppearance, ToastPreset } from './Toast.types'
+import ToastProps, { ToastAppearance, ToastOptions, ToastPreset } from './Toast.types'
 
 export default {
   title: getTitle(base),
@@ -206,3 +209,53 @@ export const WithZIndex: Story<ToastProps> = () => (
     </ToastProvider>
   </Container>
 )
+
+function CustomContentToastController() {
+  const toast = useToast()
+
+  const onClickCustomButtonInToast = useCallback(() => {
+    toast.removeAllToasts()
+  }, [toast])
+
+  const handleClick = useCallback((option?: ToastOptions) => {
+    toast.addToast((
+      <VStack spacing={6} align="stretch">
+        <StackItem>
+          <Button
+            text="눌러주세요. 모든 토스트가 사라집니다."
+            styleVariant={ButtonStyleVariant.Primary}
+            colorVariant={ButtonColorVariant.Blue}
+            onClick={onClickCustomButtonInToast}
+          />
+        </StackItem>
+        <StackItem>
+          <ProgressBar
+            width="100%"
+            value={Math.random()}
+          />
+        </StackItem>
+      </VStack>
+    ), {
+      preset: ToastPreset.Default,
+      ...option,
+    })
+  }, [
+    toast,
+    onClickCustomButtonInToast,
+  ])
+
+  return (
+    <div>
+      <button type="button" onClick={() => handleClick()}>default</button>
+      <button type="button" onClick={() => handleClick({ autoDismiss: false })}>never dismiss</button>
+    </div>
+  )
+}
+
+export const CustomContent: Story<ToastProps> = () => (
+  <Container id="story-wrapper">
+    <ToastProvider>
+      <CustomContentToastController />
+    </ToastProvider>
+  </Container>
+)

packages/bezier-react/src/components/Toast/Toast.styled.ts

@@ -95,12 +95,16 @@ const getEllipsisColor = (
 )
 
 export const Content = styled.div<Pick<ToastElementProps, 'actionContent' | 'onClick'>>`
+  display: flex;
+  flex: 1;
   margin: 3px 6px;
   overflow: hidden;
   color: ${({ actionContent, onClick, foundation }) => getEllipsisColor(actionContent, onClick, foundation)};
 `
 
 export const EllipsisableContent = styled.div`
+  display: flex;
+  flex: 1;
   ${ellipsis(5, LineHeightAbsoluteNumber.Lh18)};
 
   overflow: visible;

packages/bezier-react/src/components/Toast/Toast.types.ts

@@ -1,5 +1,5 @@
 /* External dependencies */
-import { ReactNode, ComponentType } from 'react'
+import React, { ReactNode, ComponentType } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
@@ -44,6 +44,9 @@ interface ToastElementOptions {
   preset?: ToastPreset
   appearance?: ToastAppearance
   iconName?: IconName
+  /**
+   * @deprecated use React.ReactNode content props instead.
+   */
   actionContent?: string
   transitionDuration: TransitionDuration
   transform: InjectedInterpolation
@@ -53,9 +56,11 @@ interface ToastElementOptions {
   onDismiss: React.MouseEventHandler
 }
 
+export type ToastContent = React.ReactNode
+
 export default interface ToastElementProps extends
   BezierComponentProps,
-  Required<ContentProps<string>>,
+  Required<ContentProps<ToastContent>>,
   ToastElementOptions {}
 
 export interface ToastProviderProps {
@@ -87,10 +92,10 @@ export const defaultOptions: ToastOptions = {
   rightSide: false,
 }
 
-export type ToastType = ToastOptions & { id: ToastId, content: string }
+export type ToastType = ToastOptions & { id: ToastId, content: ToastContent }
 
 export interface ToastContextType {
-  add: (content: string, options: ToastOptions) => ToastId
+  add: (content: ToastContent, options: ToastOptions) => ToastId
   remove: (id: ToastId) => void
   removeAll: () => void
   leftToasts: ToastType[]

packages/bezier-react/src/components/Toast/ToastController.tsx

@@ -20,7 +20,9 @@ function ToastController({
 
   const handleDismiss = useCallback(() => {
     setTransform(initPosition(placement))
-    timer.current = window.setTimeout(onDismiss, transitionDuration)
+    timer.current = window.setTimeout(() => {
+      onDismiss()
+    }, transitionDuration)
   }, [
     onDismiss,
     placement,

packages/bezier-react/src/components/Toast/ToastElement.tsx

@@ -1,6 +1,7 @@
 /* External dependencies */
 import React, { Fragment, forwardRef, Ref, useMemo } from 'react'
 import { v4 as uuid } from 'uuid'
+import { isString } from 'lodash-es'
 
 /* Internal dependencies */
 import { Typography } from 'Foundation'
@@ -27,28 +28,31 @@ const ToastElement = (
   }: ToastProps,
   forwardedRef: Ref<any>,
 ) => {
-  const newLineComponent = useMemo(() => (
-    content.split('\n').map((str, index) => {
-      if (index === 0) {
+  const ToastContentComponent = useMemo(() => {
+    if (isString(content)) {
+      return content.split('\n').map((str, index) => {
+        if (index === 0) {
+          return (
+            <Text key={uuid()} typo={Typography.Size14}>
+              { str }
+            </Text>
+          )
+        }
+
         return (
-          <Text key={uuid()} typo={Typography.Size14}>
-            { str }
-          </Text>
+          <Fragment key={uuid()}>
+            <br />
+            <Text
+              typo={Typography.Size14}
+            >
+              { str }
+            </Text>
+          </Fragment>
         )
-      }
-
-      return (
-        <Fragment key={uuid()}>
-          <br />
-          <Text
-            typo={Typography.Size14}
-          >
-            { str }
-          </Text>
-        </Fragment>
-      )
-    })
-  ), [content])
+      })
+    }
+    return content
+  }, [content])
 
   const {
     appearance: presetAppearance,
@@ -81,7 +85,7 @@ const ToastElement = (
             }}
           >
             <NormalContent>
-              { newLineComponent }
+              { ToastContentComponent }
             </NormalContent>
             { ' ' }
             { actionContent && onClick && (

packages/bezier-react/src/components/Toast/ToastProvider.tsx

@@ -15,6 +15,7 @@ import {
   ToastId,
   ToastProviderProps,
   ToastType,
+  ToastContent,
 } from './Toast.types'
 import ToastContainer from './ToastContainer'
 import ToastController from './ToastController'
@@ -32,7 +33,7 @@ function ToastProvider({
   const [leftToasts, setLeftToasts] = useState<ToastType[]>([])
   const [rightToasts, setRightToasts] = useState<ToastType[]>([])
 
-  const add = useCallback((content: string, options: ToastOptions = defaultOptions) => {
+  const add = useCallback((content: ToastContent, options: ToastOptions = defaultOptions) => {
     let result = ''
     if (options.rightSide) {
       result = rightToastService.add(content, options)
@@ -123,7 +124,7 @@ function ToastProvider({
           autoDismissTimeout={autoDismissTimeout}
           preset={preset}
           appearance={appearance}
-          content={content}
+          content={content || ''}
           iconName={iconName}
           component={ToastElement}
           onDismiss={() => handleDismiss(id, onDismiss)}

packages/bezier-react/src/components/Toast/ToastService.ts

@@ -7,6 +7,7 @@ import {
   ToastOptions,
   ToastId,
   ToastType,
+  ToastContent,
 } from './Toast.types'
 
 /* ToastService를 사용하는 이유
@@ -29,7 +30,7 @@ class ToastService {
     return this.toasts.reduce((flag, cur) => (cur.id === id ? true : flag), false)
   }
 
-  add = (content: string, options: ToastOptions = defaultOptions) => {
+  add = (content: ToastContent, options: ToastOptions = defaultOptions) => {
     const newId: ToastId = uuid()
 
     if (this.has(newId)) {

packages/bezier-react/src/components/Toast/index.ts

@@ -8,13 +8,15 @@ import ToastProps, {
   ToastOptions,
   ToastId,
   ToastType,
+  ToastContent,
 } from './Toast.types'
 
 export type {
   ToastProps,
   ToastOptions,
   ToastId,
   ToastType,
+  ToastContent,
 }
 
 export {