@sheinx/base 3.8.0-beta.12 → 3.8.0-beta.14
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.
- package/cjs/form/form-field.d.ts.map +1 -1
- package/cjs/form/form-field.js +2 -1
- package/cjs/input/use-input-common.d.ts +1 -1
- package/cjs/sticky/sticky.d.ts.map +1 -1
- package/cjs/sticky/sticky.js +47 -19
- package/cjs/sticky/sticky.type.d.ts +6 -0
- package/cjs/sticky/sticky.type.d.ts.map +1 -1
- package/esm/form/form-field.d.ts.map +1 -1
- package/esm/form/form-field.js +2 -1
- package/esm/input/use-input-common.d.ts +1 -1
- package/esm/sticky/sticky.d.ts.map +1 -1
- package/esm/sticky/sticky.js +47 -19
- package/esm/sticky/sticky.type.d.ts +6 -0
- package/esm/sticky/sticky.type.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["form-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGtE,QAAA,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["form-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGtE,QAAA,MAAM,SAAS,gGAqFd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
package/cjs/form/form-field.js
CHANGED
|
@@ -27,7 +27,8 @@ var FormField = function FormField(props) {
|
|
|
27
27
|
rules: props.rules,
|
|
28
28
|
onError: props.onError,
|
|
29
29
|
bind: props.bind,
|
|
30
|
-
getValidateProps: getValidateProps
|
|
30
|
+
getValidateProps: getValidateProps,
|
|
31
|
+
clearToUndefined: props.clearToUndefined
|
|
31
32
|
});
|
|
32
33
|
var handleChange = (0, _hooks.usePersistFn)(function (value) {
|
|
33
34
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputCommonProps } from './input.type';
|
|
3
|
-
declare const useInputCommon: <Value, Props extends InputCommonProps<Value>>(props0: Props) => Omit<Props, "error" | "info" | "style" | "status" | "size" | "innerTitle" | "placeTitle" | "tip" | "value" | "onChange" | "disabled" | "width" | "defaultValue" | "popover" | "delay" | "beforeChange" | "popoverProps" | "onBlur" | "clearable" | "
|
|
3
|
+
declare const useInputCommon: <Value, Props extends InputCommonProps<Value>>(props0: Props) => Omit<Props, "error" | "info" | "style" | "status" | "size" | "innerTitle" | "placeTitle" | "tip" | "value" | "onChange" | "disabled" | "width" | "defaultValue" | "popover" | "delay" | "beforeChange" | "popoverProps" | "onBlur" | "clearable" | "clearToUndefined" | "forwardedRef" | "suffix" | "forwardRef" | "htmlName"> & {
|
|
4
4
|
name: string | undefined;
|
|
5
5
|
style: React.CSSProperties;
|
|
6
6
|
suffix: import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAGjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwbjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/cjs/sticky/sticky.js
CHANGED
|
@@ -27,23 +27,6 @@ var cssSupport = _hooks.util.cssSupport,
|
|
|
27
27
|
var supportSticky = cssSupport('position', 'sticky');
|
|
28
28
|
var defaultZIndex = exports.defaultZIndex = 900;
|
|
29
29
|
var events = ['scroll', 'pageshow', 'load', 'resize'];
|
|
30
|
-
|
|
31
|
-
// const getFirstScrollParent = (el: HTMLElement) => {
|
|
32
|
-
// let parent = el.parentNode as HTMLElement;
|
|
33
|
-
// while (parent) {
|
|
34
|
-
// if (parent === document.body || parent === document.documentElement) {
|
|
35
|
-
// parent = document.body;
|
|
36
|
-
// break;
|
|
37
|
-
// }
|
|
38
|
-
// const { overflowY } = window.getComputedStyle(parent);
|
|
39
|
-
// if (overflowY === 'scroll' || overflowY === 'auto') {
|
|
40
|
-
// break;
|
|
41
|
-
// }
|
|
42
|
-
// parent = parent.parentNode as HTMLElement;
|
|
43
|
-
// }
|
|
44
|
-
// return parent;
|
|
45
|
-
// };
|
|
46
|
-
|
|
47
30
|
var Sticky = function Sticky(props) {
|
|
48
31
|
if (props.target) {
|
|
49
32
|
devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
|
|
@@ -54,13 +37,52 @@ var Sticky = function Sticky(props) {
|
|
|
54
37
|
// 是否使用css sticky
|
|
55
38
|
var css = (props.css || props.target) && supportSticky;
|
|
56
39
|
var forceUpdate = (0, _hooks.useRender)();
|
|
40
|
+
var elementRef = (0, _react.useRef)(null);
|
|
57
41
|
var _useRef = (0, _react.useRef)({
|
|
58
42
|
target: null,
|
|
59
43
|
div: null,
|
|
60
44
|
position: '',
|
|
61
45
|
targetObserver: null,
|
|
62
46
|
parentObserver: null,
|
|
63
|
-
fixedObserver: null
|
|
47
|
+
fixedObserver: null,
|
|
48
|
+
stoped: false,
|
|
49
|
+
stopStickyFn: function stopStickyFn(e) {
|
|
50
|
+
var target = e.target;
|
|
51
|
+
if (!target || typeof target.scrollTop !== 'number') return;
|
|
52
|
+
var stopStickyPoint = -1;
|
|
53
|
+
if (typeof props.stickyBoundary === 'number') {
|
|
54
|
+
stopStickyPoint = props.stickyBoundary;
|
|
55
|
+
} else if (typeof props.stickyBoundary === 'function') {
|
|
56
|
+
var stopStickyElement = props.stickyBoundary();
|
|
57
|
+
if (!stopStickyElement) return;
|
|
58
|
+
var stopStickyRect = stopStickyElement.getBoundingClientRect();
|
|
59
|
+
var targetRect = elementRef.current.getBoundingClientRect();
|
|
60
|
+
stopStickyPoint = stopStickyRect.bottom - targetRect.bottom;
|
|
61
|
+
}
|
|
62
|
+
if (stopStickyPoint < 0) return;
|
|
63
|
+
if (target.scrollTop > stopStickyPoint) {
|
|
64
|
+
if (context.stoped) return;
|
|
65
|
+
context.stoped = true;
|
|
66
|
+
|
|
67
|
+
// 把 div 移动到 target 内部,使用 absolute 定位跟随滚动
|
|
68
|
+
if (context.div && context.target) {
|
|
69
|
+
context.target.insertBefore(context.div, context.target.firstChild);
|
|
70
|
+
var paddingLeft = Number(window.getComputedStyle(context.target).paddingLeft.replace('px', '')) || 0;
|
|
71
|
+
var borderLeftWidth = Number(window.getComputedStyle(context.target).borderLeftWidth.replace('px', '')) || 0;
|
|
72
|
+
var left = paddingLeft + borderLeftWidth;
|
|
73
|
+
context.div.style.transform = "translate(-".concat(left, "px, ").concat(stopStickyPoint, "px)");
|
|
74
|
+
}
|
|
75
|
+
} else {
|
|
76
|
+
if (!context.stoped) return;
|
|
77
|
+
context.stoped = false;
|
|
78
|
+
|
|
79
|
+
// 恢复正常吸附模式:把 div 移动到 target 外部
|
|
80
|
+
if (context.div && context.target && context.target.parentNode) {
|
|
81
|
+
context.target.parentNode.insertBefore(context.div, context.target);
|
|
82
|
+
}
|
|
83
|
+
context.div.style.transform = 'none';
|
|
84
|
+
}
|
|
85
|
+
}
|
|
64
86
|
}),
|
|
65
87
|
context = _useRef.current;
|
|
66
88
|
var _useState = (0, _react.useState)({}),
|
|
@@ -75,7 +97,6 @@ var Sticky = function Sticky(props) {
|
|
|
75
97
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
76
98
|
parentVisible = _useState6[0],
|
|
77
99
|
setParentVisible = _useState6[1];
|
|
78
|
-
var elementRef = (0, _react.useRef)(null);
|
|
79
100
|
var getTarget = function getTarget() {
|
|
80
101
|
var scrollContainer = props.scrollContainer;
|
|
81
102
|
if (typeof scrollContainer === 'string') {
|
|
@@ -254,6 +275,10 @@ var Sticky = function Sticky(props) {
|
|
|
254
275
|
context.targetObserver.disconnect();
|
|
255
276
|
context.targetObserver = null;
|
|
256
277
|
}
|
|
278
|
+
if (props.stickyBoundary) {
|
|
279
|
+
var _context$target;
|
|
280
|
+
(_context$target = context.target) === null || _context$target === void 0 || _context$target.removeEventListener('scroll', context.stopStickyFn);
|
|
281
|
+
}
|
|
257
282
|
};
|
|
258
283
|
var createObserver = function createObserver() {
|
|
259
284
|
if (!context.div) {
|
|
@@ -278,6 +303,9 @@ var Sticky = function Sticky(props) {
|
|
|
278
303
|
}
|
|
279
304
|
}
|
|
280
305
|
cancelFixedObserver();
|
|
306
|
+
if (props.stickyBoundary) {
|
|
307
|
+
context.target.addEventListener('scroll', context.stopStickyFn);
|
|
308
|
+
}
|
|
281
309
|
if (window.IntersectionObserver) {
|
|
282
310
|
var observer = new IntersectionObserver(handleTargetPosition, {
|
|
283
311
|
root: context.target,
|
|
@@ -27,6 +27,12 @@ export interface StickyProps extends Pick<CommonType, 'className' | 'style'> {
|
|
|
27
27
|
* @cn 自定义附着的目标。可以传入 HTMLElement 或者 css selector,target 必须为 Sticky 组件的祖先节点
|
|
28
28
|
*/
|
|
29
29
|
scrollContainer?: string | HTMLElement | Element | null;
|
|
30
|
+
/**
|
|
31
|
+
* @en Stop sticky at bottom of scrollContainer or when the sticky element scrolls to the specified position or the bottom of the specified element
|
|
32
|
+
* @cn sticky元素滚动到指定位置或与指定元素底部重合时,取消sticky
|
|
33
|
+
* @version 3.8.0
|
|
34
|
+
*/
|
|
35
|
+
stickyBoundary?: number | (() => HTMLElement | Element | null);
|
|
30
36
|
/**
|
|
31
37
|
* @cn sticky 父级元素, 当父元素离开视窗时,sticky 将失效
|
|
32
38
|
* @en sticky parent, when the parent element leaves the viewport, the sticky will be invalid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
|
|
1
|
+
{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;IAE/D;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["form-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGtE,QAAA,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["form-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGtE,QAAA,MAAM,SAAS,gGAqFd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
package/esm/form/form-field.js
CHANGED
|
@@ -18,7 +18,8 @@ var FormField = function FormField(props) {
|
|
|
18
18
|
rules: props.rules,
|
|
19
19
|
onError: props.onError,
|
|
20
20
|
bind: props.bind,
|
|
21
|
-
getValidateProps: getValidateProps
|
|
21
|
+
getValidateProps: getValidateProps,
|
|
22
|
+
clearToUndefined: props.clearToUndefined
|
|
22
23
|
});
|
|
23
24
|
var handleChange = usePersistFn(function (value) {
|
|
24
25
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputCommonProps } from './input.type';
|
|
3
|
-
declare const useInputCommon: <Value, Props extends InputCommonProps<Value>>(props0: Props) => Omit<Props, "error" | "info" | "style" | "status" | "size" | "innerTitle" | "placeTitle" | "tip" | "value" | "onChange" | "disabled" | "width" | "defaultValue" | "popover" | "delay" | "beforeChange" | "popoverProps" | "onBlur" | "clearable" | "
|
|
3
|
+
declare const useInputCommon: <Value, Props extends InputCommonProps<Value>>(props0: Props) => Omit<Props, "error" | "info" | "style" | "status" | "size" | "innerTitle" | "placeTitle" | "tip" | "value" | "onChange" | "disabled" | "width" | "defaultValue" | "popover" | "delay" | "beforeChange" | "popoverProps" | "onBlur" | "clearable" | "clearToUndefined" | "forwardedRef" | "suffix" | "forwardRef" | "htmlName"> & {
|
|
4
4
|
name: string | undefined;
|
|
5
5
|
style: React.CSSProperties;
|
|
6
6
|
suffix: import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAGjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwbjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/esm/sticky/sticky.js
CHANGED
|
@@ -21,23 +21,6 @@ var cssSupport = util.cssSupport,
|
|
|
21
21
|
var supportSticky = cssSupport('position', 'sticky');
|
|
22
22
|
export var defaultZIndex = 900;
|
|
23
23
|
var events = ['scroll', 'pageshow', 'load', 'resize'];
|
|
24
|
-
|
|
25
|
-
// const getFirstScrollParent = (el: HTMLElement) => {
|
|
26
|
-
// let parent = el.parentNode as HTMLElement;
|
|
27
|
-
// while (parent) {
|
|
28
|
-
// if (parent === document.body || parent === document.documentElement) {
|
|
29
|
-
// parent = document.body;
|
|
30
|
-
// break;
|
|
31
|
-
// }
|
|
32
|
-
// const { overflowY } = window.getComputedStyle(parent);
|
|
33
|
-
// if (overflowY === 'scroll' || overflowY === 'auto') {
|
|
34
|
-
// break;
|
|
35
|
-
// }
|
|
36
|
-
// parent = parent.parentNode as HTMLElement;
|
|
37
|
-
// }
|
|
38
|
-
// return parent;
|
|
39
|
-
// };
|
|
40
|
-
|
|
41
24
|
var Sticky = function Sticky(props) {
|
|
42
25
|
if (props.target) {
|
|
43
26
|
devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
|
|
@@ -48,13 +31,52 @@ var Sticky = function Sticky(props) {
|
|
|
48
31
|
// 是否使用css sticky
|
|
49
32
|
var css = (props.css || props.target) && supportSticky;
|
|
50
33
|
var forceUpdate = useRender();
|
|
34
|
+
var elementRef = useRef(null);
|
|
51
35
|
var _useRef = useRef({
|
|
52
36
|
target: null,
|
|
53
37
|
div: null,
|
|
54
38
|
position: '',
|
|
55
39
|
targetObserver: null,
|
|
56
40
|
parentObserver: null,
|
|
57
|
-
fixedObserver: null
|
|
41
|
+
fixedObserver: null,
|
|
42
|
+
stoped: false,
|
|
43
|
+
stopStickyFn: function stopStickyFn(e) {
|
|
44
|
+
var target = e.target;
|
|
45
|
+
if (!target || typeof target.scrollTop !== 'number') return;
|
|
46
|
+
var stopStickyPoint = -1;
|
|
47
|
+
if (typeof props.stickyBoundary === 'number') {
|
|
48
|
+
stopStickyPoint = props.stickyBoundary;
|
|
49
|
+
} else if (typeof props.stickyBoundary === 'function') {
|
|
50
|
+
var stopStickyElement = props.stickyBoundary();
|
|
51
|
+
if (!stopStickyElement) return;
|
|
52
|
+
var stopStickyRect = stopStickyElement.getBoundingClientRect();
|
|
53
|
+
var targetRect = elementRef.current.getBoundingClientRect();
|
|
54
|
+
stopStickyPoint = stopStickyRect.bottom - targetRect.bottom;
|
|
55
|
+
}
|
|
56
|
+
if (stopStickyPoint < 0) return;
|
|
57
|
+
if (target.scrollTop > stopStickyPoint) {
|
|
58
|
+
if (context.stoped) return;
|
|
59
|
+
context.stoped = true;
|
|
60
|
+
|
|
61
|
+
// 把 div 移动到 target 内部,使用 absolute 定位跟随滚动
|
|
62
|
+
if (context.div && context.target) {
|
|
63
|
+
context.target.insertBefore(context.div, context.target.firstChild);
|
|
64
|
+
var paddingLeft = Number(window.getComputedStyle(context.target).paddingLeft.replace('px', '')) || 0;
|
|
65
|
+
var borderLeftWidth = Number(window.getComputedStyle(context.target).borderLeftWidth.replace('px', '')) || 0;
|
|
66
|
+
var left = paddingLeft + borderLeftWidth;
|
|
67
|
+
context.div.style.transform = "translate(-".concat(left, "px, ").concat(stopStickyPoint, "px)");
|
|
68
|
+
}
|
|
69
|
+
} else {
|
|
70
|
+
if (!context.stoped) return;
|
|
71
|
+
context.stoped = false;
|
|
72
|
+
|
|
73
|
+
// 恢复正常吸附模式:把 div 移动到 target 外部
|
|
74
|
+
if (context.div && context.target && context.target.parentNode) {
|
|
75
|
+
context.target.parentNode.insertBefore(context.div, context.target);
|
|
76
|
+
}
|
|
77
|
+
context.div.style.transform = 'none';
|
|
78
|
+
}
|
|
79
|
+
}
|
|
58
80
|
}),
|
|
59
81
|
context = _useRef.current;
|
|
60
82
|
var _useState = useState({}),
|
|
@@ -69,7 +91,6 @@ var Sticky = function Sticky(props) {
|
|
|
69
91
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
70
92
|
parentVisible = _useState6[0],
|
|
71
93
|
setParentVisible = _useState6[1];
|
|
72
|
-
var elementRef = useRef(null);
|
|
73
94
|
var getTarget = function getTarget() {
|
|
74
95
|
var scrollContainer = props.scrollContainer;
|
|
75
96
|
if (typeof scrollContainer === 'string') {
|
|
@@ -248,6 +269,10 @@ var Sticky = function Sticky(props) {
|
|
|
248
269
|
context.targetObserver.disconnect();
|
|
249
270
|
context.targetObserver = null;
|
|
250
271
|
}
|
|
272
|
+
if (props.stickyBoundary) {
|
|
273
|
+
var _context$target;
|
|
274
|
+
(_context$target = context.target) === null || _context$target === void 0 || _context$target.removeEventListener('scroll', context.stopStickyFn);
|
|
275
|
+
}
|
|
251
276
|
};
|
|
252
277
|
var createObserver = function createObserver() {
|
|
253
278
|
if (!context.div) {
|
|
@@ -272,6 +297,9 @@ var Sticky = function Sticky(props) {
|
|
|
272
297
|
}
|
|
273
298
|
}
|
|
274
299
|
cancelFixedObserver();
|
|
300
|
+
if (props.stickyBoundary) {
|
|
301
|
+
context.target.addEventListener('scroll', context.stopStickyFn);
|
|
302
|
+
}
|
|
275
303
|
if (window.IntersectionObserver) {
|
|
276
304
|
var observer = new IntersectionObserver(handleTargetPosition, {
|
|
277
305
|
root: context.target,
|
|
@@ -27,6 +27,12 @@ export interface StickyProps extends Pick<CommonType, 'className' | 'style'> {
|
|
|
27
27
|
* @cn 自定义附着的目标。可以传入 HTMLElement 或者 css selector,target 必须为 Sticky 组件的祖先节点
|
|
28
28
|
*/
|
|
29
29
|
scrollContainer?: string | HTMLElement | Element | null;
|
|
30
|
+
/**
|
|
31
|
+
* @en Stop sticky at bottom of scrollContainer or when the sticky element scrolls to the specified position or the bottom of the specified element
|
|
32
|
+
* @cn sticky元素滚动到指定位置或与指定元素底部重合时,取消sticky
|
|
33
|
+
* @version 3.8.0
|
|
34
|
+
*/
|
|
35
|
+
stickyBoundary?: number | (() => HTMLElement | Element | null);
|
|
30
36
|
/**
|
|
31
37
|
* @cn sticky 父级元素, 当父元素离开视窗时,sticky 将失效
|
|
32
38
|
* @en sticky parent, when the parent element leaves the viewport, the sticky will be invalid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
|
|
1
|
+
{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;IAE/D;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sheinx/base",
|
|
3
|
-
"version": "3.8.0-beta.
|
|
3
|
+
"version": "3.8.0-beta.14",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"module": "./esm/index.js",
|
|
11
11
|
"typings": "./cjs/index.d.ts",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@sheinx/hooks": "3.8.0-beta.
|
|
13
|
+
"@sheinx/hooks": "3.8.0-beta.14",
|
|
14
14
|
"immer": "^10.0.0",
|
|
15
15
|
"classnames": "^2.0.0",
|
|
16
16
|
"@shined/reactive": "^0.1.3-alpha.0"
|