small fixes

intermine · Oct 14, 2021 · 2f603df · 2f603df
1 parent cc013b4
commit 2f603df
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 30 deletions.
diff --git a/src/alert-group/alert-group.tsx b/src/alert-group/alert-group.tsx
@@ -234,7 +234,7 @@ export const AlertGroup = (props: AlertGroupProps): JSX.Element => {
                         { [classes.collapsible]: isChildOpen },
                         classesProps.collapsible
                     )}
-                    isOpen={isChildOpen}
+                    in={isChildOpen}
                 >
                     {alert}
                 </Collapsible>

diff --git a/src/collapsible/collapsible.tsx b/src/collapsible/collapsible.tsx
@@ -17,7 +17,7 @@ export interface CollapsibleProps
     /**
      * To open or close collapsible.
      */
-    isOpen?: boolean
+    in?: boolean
     /**
      * Ref to collapsible container.
      */
@@ -52,7 +52,7 @@ const CollapsibleRoot = createStyledComponent<'div', CollapsibleProps>(
     (theme, props) => {
         const {
             csx = {},
-            isOpen = false,
+            in: _in = false,
             animationDuration,
             isExtendStyleFromThemeVars = true,
         } = props
@@ -61,7 +61,7 @@ const CollapsibleRoot = createStyledComponent<'div', CollapsibleProps>(
         return {
             boxSizing: 'border-box',
             height: 0,
-            opacity: isOpen ? 1 : 0,
+            opacity: _in ? 1 : 0,
             overflow: 'hidden',
             transition: `${animationDuration}ms`,
             ...(isExtendStyleFromThemeVars &&
@@ -86,7 +86,7 @@ export const Collapsible = (props: CollapsibleProps): JSX.Element => {
         children,
         classes = {},
         className,
-        isOpen = false,
+        in: _in = false,
         animationDuration: animationDurationProp,
         ...rest
     } = props
@@ -99,7 +99,7 @@ export const Collapsible = (props: CollapsibleProps): JSX.Element => {
     const onIsOpenChange = () => {
         if (!ref.current) return
 
-        if (isOpen) {
+        if (_in) {
             const height = ref.current.scrollHeight ?? 0
             ref.current.style.height = `${height}px`
         } else {
@@ -119,19 +119,23 @@ export const Collapsible = (props: CollapsibleProps): JSX.Element => {
 
     useLayoutEffect(() => {
         onIsOpenChange()
-    }, [isOpen, ref])
+    }, [_in, ref])
 
     return (
-        <Transition in={isOpen} timeout={animationDuration}>
-            <CollapsibleRoot
-                ref={collapsibleRef}
-                className={cx(className, classes.root)}
-                animationDuration={animationDuration}
-                isOpen={isOpen}
-                {...rest}
-            >
-                {children}
-            </CollapsibleRoot>
+        <Transition in={_in} timeout={animationDuration} {...rest}>
+            {(state) => {
+                return (
+                    <CollapsibleRoot
+                        ref={collapsibleRef}
+                        className={cx(className, classes.root)}
+                        animationDuration={animationDuration}
+                        in={state === 'entered' || state === 'entering'}
+                        {...rest}
+                    >
+                        {children}
+                    </CollapsibleRoot>
+                )
+            }}
         </Transition>
     )
 }

diff --git a/src/stepper/stepper.stories.tsx b/src/stepper/stepper.stories.tsx
@@ -67,7 +67,7 @@ const Template: Story = (args) => {
             setStep(step - 1)
             setStepsStatus((prev) => ({
                 ...prev,
-                [step - 1]: 'none',
+                [step - 1]: undefined,
             }))
         }
     }

diff --git a/src/zoom/zoom.stories.tsx b/src/zoom/zoom.stories.tsx
@@ -10,8 +10,9 @@ export default {
 }
 
 const Template: Story = (props) => {
+    const { timeout = 200, ...rest } = props
     return (
-        <Zoom {...props}>
+        <Zoom timeout={timeout} {...props}>
             <Box
                 isContentCenter
                 csx={{
@@ -44,6 +45,6 @@ const Template: Story = (props) => {
 
 export const Default = Template.bind({})
 Default.args = {
-    isOpen: false,
+    in: false,
     timeout: 200,
 }
diff --git a/src/zoom/zoom.tsx b/src/zoom/zoom.tsx
@@ -9,14 +9,7 @@ import {
 
 import { createStyle } from '../styles'
 
-export type ZoomProps = {
-    /**
-     * @default false
-     */
-    isOpen?: boolean
-    timeout?: TransitionProps['timeout']
-    children?: TransitionProps['children']
-}
+export type ZoomProps = TransitionProps
 
 type StyleProps = {
     timeout: TransitionProps['timeout']
@@ -66,12 +59,12 @@ const useStyles = createStyle({
 })
 
 export const Zoom = (props: ZoomProps): JSX.Element => {
-    const { isOpen = false, timeout = 200, children, ...rest } = props
+    const { in: _in, timeout = 200, children, ...rest } = props
 
     const classes = (useStyles({ timeout }) as unknown) as any
 
     return (
-        <Transition in={isOpen} timeout={timeout} {...rest}>
+        <Transition in={_in} timeout={timeout} {...rest}>
             {(state: TransitionStatus, childProps: any) => {
                 return cloneElement(children as any, {
                     className: cx(childProps, classes[state]),