fix(Drawer): initial hidden state when keepMouted enabled (#324)

* fix(Drawer): initial hidden state when keepMouted true * chore(Drawer): update test screenshots
gravity-ui · Oct 11, 2024 · 114a0d0 · 114a0d0
1 parent 9f455f7
commit 114a0d0
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 4 deletions.
diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss
@@ -77,7 +77,8 @@ $block: '.#{variables.$ns}drawer';
     }
 
     &__item-transition-exit-done,
-    &__item-transition_direction_right-exit-done {
+    &__item-transition_direction_right-exit-done,
+    &__item_hidden {
         visibility: hidden;
     }
 

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -80,8 +80,10 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
             keepMounted = false,
         } = props;
 
+        const [isInitialRender, setInitialRender] = React.useState(true);
         const itemRef = React.useRef<HTMLDivElement>(null);
         const handleRef = useForkRef(ref, itemRef);
+
         const cssDirection = direction === 'left' ? undefined : direction;
 
         const {resizedWidth, resizerHandlers} = useResizableDrawerItem({
@@ -92,6 +94,10 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
             onResize,
         });
 
+        React.useEffect(() => {
+            setInitialRender(true);
+        }, [direction]);
+
         const resizerElement = resizable ? (
             <div className={b('resizer', {direction})} {...resizerHandlers}>
                 <div className={b('resizer-handle')} />
@@ -106,10 +112,16 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
                 unmountOnExit={!keepMounted}
                 classNames={b('item-transition', {direction: cssDirection})}
                 nodeRef={itemRef}
+                onEnter={() => setInitialRender(false)}
+                onExit={() => setInitialRender(false)}
             >
                 <div
                     ref={handleRef}
-                    className={b('item', {direction: cssDirection}, className)}
+                    className={b(
+                        'item',
+                        {direction: cssDirection, hidden: isInitialRender && !visible},
+                        [className],
+                    )}
                     style={{width: resizable ? `${resizedWidth}px` : undefined}}
                 >
                     {resizerElement}

diff --git a/....test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png b/....test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png
diff --git a/...al.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png b/...al.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png
diff --git a/...test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png b/...test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png
diff --git a/...l.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png b/...l.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png
diff --git a/src/components/Drawer/__stories__/DrawerShowcase.tsx b/src/components/Drawer/__stories__/DrawerShowcase.tsx
@@ -16,8 +16,8 @@ export function DrawerShowcase() {
     const [direction, setDirection] = React.useState<string>('left');
     const [direction2, setDirection2] = React.useState<string>('left');
 
-    const [keepMountedGlobal, setKeepMountedGlobal] = React.useState<boolean>(false);
-    const [keepMounted1, setKeepMounted1] = React.useState<boolean>(false);
+    const [keepMountedGlobal, setKeepMountedGlobal] = React.useState<boolean>(true);
+    const [keepMounted1, setKeepMounted1] = React.useState<boolean>(true);
 
     const hideAll = React.useCallback(() => {
         setVisible1(false);