Use direction prop in slider when calling onTransitionEnd

hypothesis · Apr 26, 2023 · 26942cb · 26942cb
1 parent 6cdc2f4
commit 26942cb
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/src/components/transition/Slider.tsx b/src/components/transition/Slider.tsx
@@ -56,15 +56,14 @@ const Slider: TransitionComponent = ({
   const handleTransitionEnd = useCallback(() => {
     if (visible) {
       setContainerHeight('auto');
-      onTransitionEnd?.('in');
     } else {
       // When the collapse animation completes, stop rendering the content so
       // that the browser has fewer nodes to render and the content is removed
       // from keyboard navigation.
       setContentVisible(false);
-      onTransitionEnd?.('out');
     }
-  }, [setContainerHeight, visible, onTransitionEnd]);
+    onTransitionEnd?.(direction);
+  }, [setContainerHeight, visible, onTransitionEnd, direction]);
 
   const isFullyVisible = containerHeight === 'auto';
 

diff --git a/src/pattern-library/components/patterns/transition/SliderPage.tsx b/src/pattern-library/components/patterns/transition/SliderPage.tsx
@@ -78,9 +78,8 @@ export default function SliderPage() {
 
         <Library.Pattern title="Props">
           <Library.Example title="direction">
-            This prop tells if the Slider is currently displayed (
-            <code>in</code>) or hidden (<code>out</code>). It is <code>in</code>{' '}
-            by default.
+            This prop tells if the Slider is currently expanded (<code>in</code>
+            ) or collapsed (<code>out</code>). It is <code>in</code> by default.
           </Library.Example>
 
           <Library.Example title="onTransitionEnd">