fix: changed props name timeout to duration

yamada-ui · Jul 2, 2023 · 7b3e3e2 · 7b3e3e2
1 parent 826f934
commit 7b3e3e2
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 50 deletions.
diff --git a/.changeset/cyan-tips-cheat.md b/.changeset/cyan-tips-cheat.md
@@ -0,0 +1,5 @@
+---
+'@yamada-ui/providers': minor
+---
+
+Changed props name timeout to duration.
diff --git a/packages/providers/src/loading-provider.tsx b/packages/providers/src/loading-provider.tsx
@@ -67,13 +67,13 @@ type LoadingContext = {
 
 type LoadingProps = {
   message: ReactNode | undefined
-  timeout: number | null
+  duration: number | null
 }
 
 type LoadingState = {
   loadingCount: number
   message: ReactNode | undefined
-  timeout: number | null
+  duration: number | null
 }
 
 export type LoadingProviderProps = PropsWithChildren<ThemeConfig['loading']>
@@ -172,36 +172,36 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
   const [screenLoading, setScreenLoading] = useState<LoadingState>({
     loadingCount: screen?.initialState ? 1 : 0,
     message: undefined,
-    timeout: screen?.timeout ?? null,
+    duration: screen?.duration ?? null,
   })
   const isPageLoadingRef = useRef<boolean>(false)
   const [pageLoading, setPageLoading] = useState<LoadingState>({
     loadingCount: page?.initialState ? 1 : 0,
     message: undefined,
-    timeout: page?.timeout ?? null,
+    duration: page?.duration ?? null,
   })
   const isBackgroundLoadingRef = useRef<boolean>(false)
   const [backgroundLoading, setBackgroundLoading] = useState<LoadingState>({
     loadingCount: background?.initialState ? 1 : 0,
     message: undefined,
-    timeout: background?.timeout ?? null,
+    duration: background?.duration ?? null,
   })
   const isCustomLoadingRef = useRef<boolean>(false)
   const [customLoading, setCustomLoading] = useState<LoadingState>({
     loadingCount: custom?.initialState ? 1 : 0,
     message: undefined,
-    timeout: custom?.timeout ?? null,
+    duration: custom?.duration ?? null,
   })
 
   const screenLoadingFunc: LoadingContextProps = useMemo(
     () => ({
       isLoading: () => isScreenLoadingRef.current,
-      start: ({ message, timeout = screenLoading.timeout ?? null } = {}) => {
+      start: ({ message, duration = screenLoading.duration ?? null } = {}) => {
         isScreenLoadingRef.current = true
         setScreenLoading(({ loadingCount }) => ({
           loadingCount: incrementCount(loadingCount),
           message,
-          timeout,
+          duration,
         }))
       },
       update: (next) => setScreenLoading((prev) => ({ ...prev, ...next })),
@@ -210,7 +210,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
         setScreenLoading(({ loadingCount }) => ({
           loadingCount: decrementCount(loadingCount),
           message: undefined,
-          timeout: screen?.timeout ?? null,
+          duration: screen?.duration ?? null,
         }))
       },
     }),
@@ -220,12 +220,12 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
   const pageLoadingFunc: LoadingContextProps = useMemo(
     () => ({
       isLoading: () => isPageLoadingRef.current,
-      start: ({ message, timeout = pageLoading.timeout ?? null } = {}) => {
+      start: ({ message, duration = pageLoading.duration ?? null } = {}) => {
         isPageLoadingRef.current = true
         setPageLoading(({ loadingCount }) => ({
           loadingCount: incrementCount(loadingCount),
           message,
-          timeout,
+          duration,
         }))
       },
       update: (next) => setPageLoading((prev) => ({ ...prev, ...next })),
@@ -234,7 +234,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
         setPageLoading(({ loadingCount }) => ({
           loadingCount: decrementCount(loadingCount),
           message: undefined,
-          timeout: page?.timeout ?? null,
+          duration: page?.duration ?? null,
         }))
       },
     }),
@@ -244,12 +244,12 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
   const backgroundLoadingFunc: LoadingContextProps = useMemo(
     () => ({
       isLoading: () => isBackgroundLoadingRef.current,
-      start: ({ message, timeout = backgroundLoading.timeout ?? null } = {}) => {
+      start: ({ message, duration = backgroundLoading.duration ?? null } = {}) => {
         isBackgroundLoadingRef.current = true
         setBackgroundLoading(({ loadingCount }) => ({
           loadingCount: incrementCount(loadingCount),
           message,
-          timeout,
+          duration,
         }))
       },
       update: (next) => setBackgroundLoading((prev) => ({ ...prev, ...next })),
@@ -258,7 +258,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
         setBackgroundLoading(({ loadingCount }) => ({
           loadingCount: decrementCount(loadingCount),
           message: undefined,
-          timeout: background?.timeout ?? null,
+          duration: background?.duration ?? null,
         }))
       },
     }),
@@ -268,12 +268,12 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
   const customLoadingFunc: LoadingContextProps = useMemo(
     () => ({
       isLoading: () => isCustomLoadingRef.current,
-      start: ({ message, timeout = customLoading.timeout ?? null } = {}) => {
+      start: ({ message, duration = customLoading.duration ?? null } = {}) => {
         isCustomLoadingRef.current = true
         setCustomLoading(({ loadingCount }) => ({
           loadingCount: incrementCount(loadingCount),
           message,
-          timeout,
+          duration,
         }))
       },
       update: (next) => setCustomLoading((prev) => ({ ...prev, ...next })),
@@ -282,7 +282,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
         setCustomLoading(({ loadingCount }) => ({
           loadingCount: decrementCount(loadingCount),
           message: undefined,
-          timeout: custom?.timeout ?? null,
+          duration: custom?.duration ?? null,
         }))
       },
     }),
@@ -311,28 +311,28 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
       setScreenLoading({
         loadingCount: screen?.initialState ? 1 : 0,
         message: undefined,
-        timeout: screen?.timeout ?? null,
+        duration: screen?.duration ?? null,
       })
 
     if (page)
       setPageLoading({
         loadingCount: page?.initialState ? 1 : 0,
         message: undefined,
-        timeout: page?.timeout ?? null,
+        duration: page?.duration ?? null,
       })
 
     if (background)
       setBackgroundLoading({
         loadingCount: background?.initialState ? 1 : 0,
         message: undefined,
-        timeout: background?.timeout ?? null,
+        duration: background?.duration ?? null,
       })
 
     if (custom)
       setCustomLoading({
         loadingCount: custom?.initialState ? 1 : 0,
         message: undefined,
-        timeout: custom?.timeout ?? null,
+        duration: custom?.duration ?? null,
       })
   }, [screen, page, background, custom])
 
@@ -358,7 +358,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
                       icon: screen?.icon,
                       text: screen?.text,
                       message: screenLoading.message,
-                      timeout: screenLoading.timeout,
+                      duration: screenLoading.duration,
                       onFinish: screenLoadingFunc.finish,
                     }}
                   />
@@ -369,7 +369,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
                       icon: screen?.icon,
                       text: screen?.text,
                       message: screenLoading.message,
-                      timeout: screenLoading.timeout,
+                      duration: screenLoading.duration,
                       onFinish: screenLoadingFunc.finish,
                     }}
                   />
@@ -400,7 +400,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
                       icon: page?.icon,
                       text: page?.text,
                       message: pageLoading.message,
-                      timeout: pageLoading.timeout,
+                      duration: pageLoading.duration,
                       onFinish: pageLoadingFunc.finish,
                     }}
                   />
@@ -411,7 +411,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
                       icon: page?.icon,
                       text: page?.text,
                       message: pageLoading.message,
-                      timeout: pageLoading.timeout,
+                      duration: pageLoading.duration,
                       onFinish: pageLoadingFunc.finish,
                     }}
                   />
@@ -442,7 +442,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
                       icon: background?.icon,
                       text: background?.text,
                       message: backgroundLoading.message,
-                      timeout: backgroundLoading.timeout,
+                      duration: backgroundLoading.duration,
                       onFinish: backgroundLoadingFunc.finish,
                     }}
                   />
@@ -453,7 +453,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
                       icon: background?.icon,
                       text: background?.text,
                       message: backgroundLoading.message,
-                      timeout: backgroundLoading.timeout,
+                      duration: backgroundLoading.duration,
                       onFinish: backgroundLoadingFunc.finish,
                     }}
                   />
@@ -478,7 +478,7 @@ const LoadingControl: FC<LoadingControlProps> = ({ screen, page, background, cus
                   icon: custom?.icon,
                   text: custom?.text,
                   message: customLoading.message,
-                  timeout: customLoading.timeout,
+                  duration: customLoading.duration,
                   onFinish: customLoadingFunc.finish,
                 }}
               />
@@ -552,7 +552,7 @@ const getMotionProps = (
 })
 
 const LoadingScreenComponent = memo(
-  ({ initialState, icon, text, message, timeout, onFinish }: LoadingComponentProps) => {
+  ({ initialState, icon, text, message, duration, onFinish }: LoadingComponentProps) => {
     const css: CSSUIObject = {
       maxW: 'md',
       display: 'flex',
@@ -562,7 +562,7 @@ const LoadingScreenComponent = memo(
       gap: 'sm',
     }
 
-    useTimeout(onFinish, timeout)
+    useTimeout(onFinish, duration)
 
     return (
       <ui.div
@@ -591,7 +591,7 @@ const LoadingScreenComponent = memo(
 LoadingScreenComponent.displayName = 'LoadingScreenComponent'
 
 const LoadingPageComponent = memo(
-  ({ initialState, icon, text, message, timeout, onFinish }: LoadingComponentProps) => {
+  ({ initialState, icon, text, message, duration, onFinish }: LoadingComponentProps) => {
     const css: CSSUIObject = {
       bg: ['white', 'black'],
       maxW: 'md',
@@ -605,7 +605,7 @@ const LoadingPageComponent = memo(
       boxShadow: ['lg', 'dark-lg'],
     }
 
-    useTimeout(onFinish, timeout)
+    useTimeout(onFinish, duration)
 
     return (
       <ui.div
@@ -639,7 +639,7 @@ const LoadingPageComponent = memo(
 LoadingPageComponent.displayName = 'LoadingPageComponent'
 
 const LoadingBackgroundComponent = memo(
-  ({ initialState, icon, text, message, timeout, onFinish }: LoadingComponentProps) => {
+  ({ initialState, icon, text, message, duration, onFinish }: LoadingComponentProps) => {
     const css: CSSUIObject = {
       position: 'fixed',
       right: 'md',
@@ -656,7 +656,7 @@ const LoadingBackgroundComponent = memo(
       boxShadow: ['3xl', 'dark-lg'],
     }
 
-    useTimeout(onFinish, timeout)
+    useTimeout(onFinish, duration)
 
     return (
       <ui.div

diff --git a/stories/hooks/use-loading.stories.tsx b/stories/hooks/use-loading.stories.tsx
@@ -29,9 +29,9 @@ export const withTimeout = () => {
   return (
     <Center w='calc(100vw - 16px * 2)' h='calc(100vh - 16px * 2)'>
       <Wrap gap='md'>
-        <Button onClick={() => screen.start({ timeout: 5000 })}>Start screen loading</Button>
-        <Button onClick={() => page.start({ timeout: 5000 })}>Start page loading</Button>
-        <Button onClick={() => background.start({ timeout: 5000 })}>
+        <Button onClick={() => screen.start({ duration: 5000 })}>Start screen loading</Button>
+        <Button onClick={() => page.start({ duration: 5000 })}>Start page loading</Button>
+        <Button onClick={() => background.start({ duration: 5000 })}>
           Start background loading
         </Button>
       </Wrap>
@@ -45,13 +45,13 @@ export const withMessage = () => {
   return (
     <Center w='calc(100vw - 16px * 2)' h='calc(100vh - 16px * 2)'>
       <Wrap gap='md'>
-        <Button onClick={() => screen.start({ message: 'Loading', timeout: 5000 })}>
+        <Button onClick={() => screen.start({ message: 'Loading', duration: 5000 })}>
           Start screen loading
         </Button>
-        <Button onClick={() => page.start({ message: 'Loading', timeout: 5000 })}>
+        <Button onClick={() => page.start({ message: 'Loading', duration: 5000 })}>
           Start page loading
         </Button>
-        <Button onClick={() => background.start({ message: 'Loading', timeout: 5000 })}>
+        <Button onClick={() => background.start({ message: 'Loading', duration: 5000 })}>
           Start background loading
         </Button>
       </Wrap>
@@ -87,7 +87,7 @@ export const updateMessage = () => {
       <Wrap gap='md'>
         <Button
           onClick={() => {
-            screen.start({ message: 'Loading', timeout: 10000 })
+            screen.start({ message: 'Loading', duration: 10000 })
 
             setTimeout(() => {
               screen.update({ message: 'Please wait' })
@@ -99,7 +99,7 @@ export const updateMessage = () => {
 
         <Button
           onClick={() => {
-            page.start({ message: 'Loading', timeout: 10000 })
+            page.start({ message: 'Loading', duration: 10000 })
 
             setTimeout(() => {
               page.update({ message: 'Please wait' })
@@ -111,7 +111,7 @@ export const updateMessage = () => {
 
         <Button
           onClick={() => {
-            background.start({ message: 'Loading', timeout: 10000 })
+            background.start({ message: 'Loading', duration: 10000 })
 
             setTimeout(() => {
               background.update({ message: 'Please wait' })

diff --git a/stories/system/theme/loading.stories.tsx b/stories/system/theme/loading.stories.tsx
@@ -30,19 +30,19 @@ export const basic = () => {
         icon: {
           variant: 'grid',
         },
-        timeout: 5000,
+        duration: 5000,
       },
       page: {
         icon: {
           variant: 'grid',
         },
-        timeout: 5000,
+        duration: 5000,
       },
       background: {
         icon: {
           variant: 'grid',
         },
-        timeout: 5000,
+        duration: 5000,
       },
     },
   })
@@ -87,8 +87,8 @@ export const useCustomLoading = () => {
   const config = extendConfig({
     loading: {
       custom: {
-        component: ({ initialState, message, timeout, onFinish }) => {
-          useTimeout(onFinish, timeout)
+        component: ({ initialState, message, duration, onFinish }) => {
+          useTimeout(onFinish, duration)
 
           return (
             <Motion
@@ -244,7 +244,7 @@ const CustomApp: FC = () => {
   return (
     <Center w='calc(100vw - 16px * 2)' h='calc(100vh - 16px * 2)'>
       <Wrap gap='md'>
-        <Button onClick={() => custom.start({ timeout: 10000 })}>Start custom loading</Button>
+        <Button onClick={() => custom.start({ duration: 10000 })}>Start custom loading</Button>
       </Wrap>
     </Center>
   )