fix(ui-layout-view): use transition events instead of timeout fallback

ReTable · Dec 22, 2023 · c68eb61 · c68eb61
1 parent 72c7669
commit c68eb61
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/components/ui-layout-view/src/UiLayoutView.const.ts b/components/ui-layout-view/src/UiLayoutView.const.ts
diff --git a/components/ui-layout-view/src/UiLayoutView.tsx b/components/ui-layout-view/src/UiLayoutView.tsx
@@ -5,9 +5,12 @@ import { CSSTransition } from 'react-transition-group';
 
 import { container, leftSidebarStates, panels, rightSidebarStates, root } from './UiLayoutView.css';
 
-import { DURATION } from './UiLayoutView.const';
 import { Props } from './UiLayoutView.types';
 
+const endListener = (node: HTMLElement, done: () => void) => {
+  node.addEventListener('transitionend', done, false);
+};
+
 export function UiLayoutView({
   rootClassName,
   bodyClassName,
@@ -26,16 +29,14 @@ export function UiLayoutView({
   return (
     <div className={clsx(root, rootClassName)} ref={forwardedRef}>
       <CSSTransition
-        in={isLeftSidebarVisible}
-        timeout={DURATION}
+        addEndListener={endListener}
         classNames={leftSidebarStates}
-        nodeRef={ref}
+        in={isLeftSidebarVisible}
       >
         <CSSTransition
-          in={isRightSidebarVisible}
-          timeout={DURATION}
+          addEndListener={endListener}
           classNames={rightSidebarStates}
-          nodeRef={ref}
+          in={isRightSidebarVisible}
         >
           <div ref={ref} className={clsx(container)}>
             {hasLeftSidebar && (