diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx index ae9ee169ce..4e4ce9f060 100644 --- a/src/drawer/Drawer.tsx +++ b/src/drawer/Drawer.tsx @@ -77,7 +77,7 @@ const Drawer = forwardRef((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 index f5f01d0903..caf7022465 100644 --- 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(); 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 index 98820ff819..da01887837 100644 --- a/src/drawer/_example/attach-parent.jsx +++ b/src/drawer/_example/attach-parent.jsx @@ -25,44 +25,46 @@ export default function () { borderRadius: '2px', }} > - -

渲染在当前元素中。

-
- 抽屉弹出方向： - setPlacement(value)}> - 左侧 - 右侧 - 上方 - 下方 - -
+
+ +

渲染在当前元素中。

+
+ 抽屉弹出方向： + setPlacement(value)}> + 左侧 + 右侧 + 上方 + 下方 + +
-
- 抽屉弹出模式： - setMode(value)}> - push - overlay - -
+
+ 抽屉弹出模式： + setMode(value)}> + push + overlay + +
-
- -
+
+ +
- -

This is a drawer

- - + +

This is a drawer

+ + +
); } diff --git a/src/drawer/hooks/useLockStyle.ts b/src/drawer/hooks/useLockStyle.ts index 3c6a74228a..26538eefdb 100644 --- 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(null); const timerRef = useRef(null); @@ -32,6 +32,7 @@ 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)}`; @@ -39,10 +40,23 @@ export default function useLockStyle(props) { 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; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index a49e79852f..2b7eec7090 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -84776,6 +84776,273 @@ exports[`csr snapshot test > csr test src/drawer/_example/attach-parent.jsx 1`]
+
+
+
+

+ 渲染在当前元素中。 +

+
+
+
+ + 抽屉弹出方向： + +
+ + + + +
+
+
+
+
+ + 抽屉弹出模式： + +
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + +
+
+ Drawer +
+
+

+ This is a drawer +

+
+
+
+ + +
+
+
+
+
+
+
+
+ , + "container":
+
+
csr test src/drawer/_example/attach-parent.jsx 1`]
- , - "container":
-
-
-
-

- 渲染在当前元素中。 -

-
-
-
- - 抽屉弹出方向： - -
- - - - -
-
-
-
-
- - 抽屉弹出模式： - -
- - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - - -
-
- Drawer -
-
-

- This is a drawer -

-
-
-
- - -
-
-
-
-
-
, "debug": [Function], "findAllByAltText": [Function], diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index b3d1e35ce2..c4fece2d4e 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -320,7 +320,7 @@ exports[`ssr snapshot test > ssr test src/divider/_example/text.jsx 1`] = `"

exports[`ssr snapshot test > ssr test src/divider/_example/vertical.jsx 1`] = `"正直

进取
合作
创新"`; -exports[`ssr snapshot test > ssr test src/drawer/_example/attach-parent.jsx 1`] = `"

渲染在当前元素中。

抽屉弹出方向：
抽屉弹出模式：
Drawer

This is a drawer

"`; +exports[`ssr snapshot test > ssr test src/drawer/_example/attach-parent.jsx 1`] = `"

渲染在当前元素中。

抽屉弹出方向：
抽屉弹出模式：
Drawer

This is a drawer

"`; exports[`ssr snapshot test > ssr test src/drawer/_example/base.jsx 1`] = `"
抽屉标题

抽屉的内容

"`;