fix(drawer): fix drawer push for mode (#2614)

* fix(drawer): fix drawer push for mode * perf(drawer): optimization code performance
Tencent · Nov 27, 2023 · 6b96937 · 6b96937
1 parent 2c033c4
commit 6b96937
Show file tree

Hide file tree

Showing 6 changed files with 329 additions and 302 deletions.
diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx
@@ -77,7 +77,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
     return dragSizeValue || sizeMap[size] || size;
   }, [dragSizeValue, size]);
 
-  useLockStyle({ ...props, sizeValue });
+  useLockStyle({ ...props, sizeValue, drawerWrapper: drawerWrapperRef.current });
   useImperativeHandle(ref, () => containerRef.current);
 
   useEffect(() => {

diff --git a/src/drawer/__tests__/drawer.test.tsx b/src/drawer/__tests__/drawer.test.tsx
@@ -80,9 +80,12 @@ describe('test Drawer', () => {
   test('Drawer mode push', () => {
     const { getByText } = render(<DrawerDemo attach="body" mode="push" />);
     fireEvent.click(getByText('Open'));
-    expect(document.body).toHaveStyle({
-      margin: '0 0 0 -300px',
-    });
+
+    setTimeout(() => {
+      expect(document.body).toHaveStyle({
+        margin: '0 0 0 -300px',
+      });
+    }, 1000);
   });
   test('Drawer onCancel', () => {
     const onCancelFn = vi.fn();

diff --git a/src/drawer/_example/attach-parent.jsx b/src/drawer/_example/attach-parent.jsx
@@ -25,44 +25,46 @@ export default function () {
         borderRadius: '2px',
       }}
     >
-      <Space direction="vertical">
-        <p>渲染在当前元素中。</p>
-        <div>
-          <span>抽屉弹出方向：</span>
-          <Radio.Group value={placement} onChange={(value) => setPlacement(value)}>
-            <Radio.Button value="left">左侧</Radio.Button>
-            <Radio.Button value="right">右侧</Radio.Button>
-            <Radio.Button value="top">上方</Radio.Button>
-            <Radio.Button value="bottom">下方</Radio.Button>
-          </Radio.Group>
-        </div>
+      <div id="demo-suf-container">
+        <Space direction="vertical">
+          <p>渲染在当前元素中。</p>
+          <div>
+            <span>抽屉弹出方向：</span>
+            <Radio.Group value={placement} onChange={(value) => setPlacement(value)}>
+              <Radio.Button value="left">左侧</Radio.Button>
+              <Radio.Button value="right">右侧</Radio.Button>
+              <Radio.Button value="top">上方</Radio.Button>
+              <Radio.Button value="bottom">下方</Radio.Button>
+            </Radio.Group>
+          </div>
 
-        <div>
-          <span>抽屉弹出模式：</span>
-          <Radio.Group value={mode} onChange={(value) => setMode(value)}>
-            <Radio.Button value="push">push</Radio.Button>
-            <Radio.Button value="overlay">overlay</Radio.Button>
-          </Radio.Group>
-        </div>
+          <div>
+            <span>抽屉弹出模式：</span>
+            <Radio.Group value={mode} onChange={(value) => setMode(value)}>
+              <Radio.Button value="push">push</Radio.Button>
+              <Radio.Button value="overlay">overlay</Radio.Button>
+            </Radio.Group>
+          </div>
 
-        <div>
-          <Button theme="primary" onClick={handleClick}>
-            Open
-          </Button>
-        </div>
+          <div>
+            <Button theme="primary" onClick={handleClick}>
+              Open
+            </Button>
+          </div>
 
-        <Drawer
-          showInAttachedElement
-          placement={placement}
-          header="Drawer"
-          visible={visible}
-          onClose={handleClose}
-          mode={mode}
-          attach="#demo-container"
-        >
-          <p>This is a drawer</p>
-        </Drawer>
-      </Space>
+          <Drawer
+            showInAttachedElement
+            placement={placement}
+            header="Drawer"
+            visible={visible}
+            onClose={handleClose}
+            mode={mode}
+            attach="#demo-suf-container"
+          >
+            <p>This is a drawer</p>
+          </Drawer>
+        </Space>
+      </div>
     </div>
   );
 }
diff --git a/src/drawer/hooks/useLockStyle.ts b/src/drawer/hooks/useLockStyle.ts
@@ -5,7 +5,7 @@ import { getScrollbarWidth } from '../../_common/js/utils/getScrollbarWidth';
 let key = 1;
 
 export default function useLockStyle(props) {
-  const { preventScrollThrough, mode, visible, showInAttachedElement, placement, sizeValue } = props;
+  const { preventScrollThrough, mode, visible, showInAttachedElement, placement, sizeValue, drawerWrapper } = props;
   const lockStyleRef = useRef<HTMLStyleElement>(null);
   const timerRef = useRef(null);
 
@@ -32,17 +32,31 @@ export default function useLockStyle(props) {
     if (!lockStyleRef.current) {
       lockStyleRef.current = document.createElement('style');
     }
+
     const hasScrollBar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
     const scrollbarWidth = hasScrollBar ? getScrollbarWidth() : 0;
     lockStyleRef.current.dataset.id = `td_drawer_${+new Date()}_${(key += 1)}`;
     lockStyleRef.current.innerHTML = `
       html body {
         overflow-y: hidden;
         transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;
-        ${mode === 'push' ? marginString : `width: calc(100% - ${scrollbarWidth}px);`}
+        ${mode === 'push' ? '' : `width: calc(100% - ${scrollbarWidth}px);`}
       }
     `;
-  }, [mode, marginString]);
+  }, [mode]);
+
+  useLayoutEffect(() => {
+    if (drawerWrapper && mode === 'push') {
+      if (visible) {
+        drawerWrapper.parentNode.style.cssText += ` 
+            transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;
+            ${marginString};}
+          `;
+      } else {
+        drawerWrapper.parentNode.style.cssText = drawerWrapper.parentNode.style.cssText.replace(/margin:.+;/, '');
+      }
+    }
+  }, [mode, marginString, drawerWrapper, visible]);
 
   useLayoutEffect(() => {
     if (typeof document === 'undefined') return;