@zat-design/sisyphus-react 4.6.1-beta.4 → 4.6.1-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,10 +1,50 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
createContext,
|
|
4
|
+
forwardRef,
|
|
5
|
+
useContext,
|
|
6
|
+
useEffect,
|
|
7
|
+
useImperativeHandle,
|
|
8
|
+
useMemo
|
|
9
|
+
} from "react";
|
|
3
10
|
import { ProDrawer, ProModal } from "./components";
|
|
4
11
|
import ProForm from "../ProForm";
|
|
5
12
|
import { resolveDrawerSize } from "./utils";
|
|
6
13
|
import locale from "../locale";
|
|
7
14
|
const ProDrawerFormContext = createContext(null);
|
|
15
|
+
const scrollLockClassName = "pro-drawer-form-scroll-lock";
|
|
16
|
+
let openDrawerCount = 0;
|
|
17
|
+
let lockedScrollLeft = 0;
|
|
18
|
+
let lockedScrollTop = 0;
|
|
19
|
+
const lockRootScroll = () => {
|
|
20
|
+
if (typeof document === "undefined") {
|
|
21
|
+
return void 0;
|
|
22
|
+
}
|
|
23
|
+
if (openDrawerCount === 0) {
|
|
24
|
+
const scrollingElement = document.scrollingElement ?? document.documentElement;
|
|
25
|
+
lockedScrollLeft = scrollingElement.scrollLeft;
|
|
26
|
+
lockedScrollTop = scrollingElement.scrollTop;
|
|
27
|
+
document.body.style.setProperty("--pro-drawer-form-scroll-top", `-${lockedScrollTop}px`);
|
|
28
|
+
document.body.style.setProperty("--pro-drawer-form-scroll-left", `-${lockedScrollLeft}px`);
|
|
29
|
+
document.documentElement.classList.add(scrollLockClassName);
|
|
30
|
+
document.body.classList.add(scrollLockClassName);
|
|
31
|
+
}
|
|
32
|
+
openDrawerCount += 1;
|
|
33
|
+
return () => {
|
|
34
|
+
openDrawerCount = Math.max(0, openDrawerCount - 1);
|
|
35
|
+
if (openDrawerCount === 0) {
|
|
36
|
+
document.documentElement.classList.remove(scrollLockClassName);
|
|
37
|
+
document.body.classList.remove(scrollLockClassName);
|
|
38
|
+
document.body.style.removeProperty("--pro-drawer-form-scroll-top");
|
|
39
|
+
document.body.style.removeProperty("--pro-drawer-form-scroll-left");
|
|
40
|
+
if (lockedScrollLeft !== 0 || lockedScrollTop !== 0) {
|
|
41
|
+
window.scrollTo(lockedScrollLeft, lockedScrollTop);
|
|
42
|
+
}
|
|
43
|
+
lockedScrollLeft = 0;
|
|
44
|
+
lockedScrollTop = 0;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
};
|
|
8
48
|
const useProDrawerFormContext = () => useContext(ProDrawerFormContext);
|
|
9
49
|
const ProDrawerForm = forwardRef((props, ref) => {
|
|
10
50
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -27,6 +67,12 @@ const ProDrawerForm = forwardRef((props, ref) => {
|
|
|
27
67
|
} = props;
|
|
28
68
|
const nextIsView = isView || disabled;
|
|
29
69
|
const nextOkText = okText ?? (mode === "Drawer" ? (_d = (_c = locale) == null ? void 0 : _c.ProDrawerForm) == null ? void 0 : _d.save : (_f = (_e = locale) == null ? void 0 : _e.ProDrawerForm) == null ? void 0 : _f.confirm);
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
if (!open || mode !== "Drawer") {
|
|
72
|
+
return void 0;
|
|
73
|
+
}
|
|
74
|
+
return lockRootScroll();
|
|
75
|
+
}, [mode, open]);
|
|
30
76
|
const { width: deprecatedWidth, ...restPropsWithoutWidth } = restProps;
|
|
31
77
|
const width = resolveDrawerSize(size, deprecatedWidth);
|
|
32
78
|
const [form] = ProForm.useForm(originalForm);
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
@import '../../style/variables.less';
|
|
2
2
|
|
|
3
|
+
html.pro-drawer-form-scroll-lock {
|
|
4
|
+
overflow: hidden !important;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body.pro-drawer-form-scroll-lock {
|
|
8
|
+
position: fixed !important;
|
|
9
|
+
top: var(--pro-drawer-form-scroll-top, 0);
|
|
10
|
+
left: var(--pro-drawer-form-scroll-left, 0);
|
|
11
|
+
width: 100%;
|
|
12
|
+
overflow: hidden !important;
|
|
13
|
+
}
|
|
14
|
+
|
|
3
15
|
.pro-drawer {
|
|
4
16
|
.original-value-tooltip {
|
|
5
17
|
position: fixed;
|