@sheinx/base 3.8.0-beta.14 → 3.8.0-beta.16

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.
Files changed (9) hide show
  1. package/cjs/sticky/sticky.d.ts.map +1 -1
  2. package/cjs/sticky/sticky.js +102 -47
  3. package/cjs/sticky/sticky.type.d.ts +1 -1
  4. package/cjs/sticky/sticky.type.d.ts.map +1 -1
  5. package/esm/sticky/sticky.d.ts.map +1 -1
  6. package/esm/sticky/sticky.js +102 -47
  7. package/esm/sticky/sticky.type.d.ts +1 -1
  8. package/esm/sticky/sticky.type.d.ts.map +1 -1
  9. package/package.json +2 -2
package/cjs/sticky/sticky.d.ts.map CHANGED
@@ -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;AAGjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwbjC,CAAC;AAEF,eAAe,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;AAajC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwejC,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/cjs/sticky/sticky.js CHANGED
@@ -27,6 +27,16 @@ 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
+ function getStaticTop(el) {
31
+ var stopper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
32
+ var top = 0;
33
+ var currentEl = el;
34
+ while (currentEl && currentEl !== stopper) {
35
+ top += currentEl.offsetTop;
36
+ currentEl = currentEl.offsetParent;
37
+ }
38
+ return top;
39
+ }
30
40
  var Sticky = function Sticky(props) {
31
41
  if (props.target) {
32
42
  devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
@@ -37,7 +47,7 @@ var Sticky = function Sticky(props) {
37
47
  // 是否使用css sticky
38
48
  var css = (props.css || props.target) && supportSticky;
39
49
  var forceUpdate = (0, _hooks.useRender)();
40
- var elementRef = (0, _react.useRef)(null);
50
+ var fixedStickyElRef = (0, _react.useRef)(null);
41
51
  var _useRef = (0, _react.useRef)({
42
52
  target: null,
43
53
  div: null,
@@ -46,43 +56,7 @@ var Sticky = function Sticky(props) {
46
56
  parentObserver: null,
47
57
  fixedObserver: null,
48
58
  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
- }
59
+ originPosition: null
86
60
  }),
87
61
  context = _useRef.current;
88
62
  var _useState = (0, _react.useState)({}),
@@ -97,6 +71,78 @@ var Sticky = function Sticky(props) {
97
71
  _useState6 = _slicedToArray(_useState5, 2),
98
72
  parentVisible = _useState6[0],
99
73
  setParentVisible = _useState6[1];
74
+ var elementRef = (0, _react.useRef)(null);
75
+ var onStickyBoundaryChange = (0, _hooks.usePersistFn)(function (e) {
76
+ var target = e.target;
77
+ var isDocument = !context.target || context.target === document.documentElement;
78
+ var scrollTop = isDocument ? window.scrollY : target.scrollTop;
79
+ if (!target || typeof scrollTop !== 'number') return;
80
+ var stopStickyPoint = -1;
81
+ var baseTop = 0;
82
+ var absoluteTop = 0;
83
+ var absoluteLeft = 0;
84
+ var stopStickyElement = null;
85
+ if (typeof props.stickyBoundary === 'number') {
86
+ stopStickyPoint = props.stickyBoundary;
87
+ } else if (typeof props.stickyBoundary === 'function') {
88
+ stopStickyElement = props.stickyBoundary();
89
+ if (!stopStickyElement) return;
90
+ var stopStickyRect = stopStickyElement.getBoundingClientRect();
91
+ var targetRect = elementRef.current.getBoundingClientRect();
92
+ if (context.target === document.documentElement || !context.target) {
93
+ baseTop = getStaticTop(elementRef.current) - (props.top || 0);
94
+ absoluteTop = stopStickyRect.bottom - targetRect.bottom;
95
+ absoluteLeft = stopStickyRect.left - targetRect.left;
96
+ }
97
+ stopStickyPoint = stopStickyRect.bottom - targetRect.bottom + baseTop;
98
+ }
99
+ if (stopStickyPoint < 0) return;
100
+ if (scrollTop > stopStickyPoint) {
101
+ if (context.stoped) return;
102
+ context.stoped = true;
103
+
104
+ // 把 div 移动到 target 内部，使用 absolute 定位跟随滚动
105
+ if (context.div && context.target) {
106
+ context.target.insertBefore(context.div, context.target.firstChild);
107
+ var paddingLeft = Number(window.getComputedStyle(context.target).paddingLeft.replace('px', '')) || 0;
108
+ var borderLeftWidth = Number(window.getComputedStyle(context.target).borderLeftWidth.replace('px', '')) || 0;
109
+ var left = paddingLeft + borderLeftWidth;
110
+ context.div.style.transform = "translate(-".concat(left, "px, ").concat(stopStickyPoint, "px)");
111
+ } else {
112
+ if (stopStickyElement) {
113
+ if (!fixedStickyElRef.current) return;
114
+ // 存储原始位置到 context 中
115
+ if (!context.originPosition) {
116
+ var originStyle = window.getComputedStyle(fixedStickyElRef.current);
117
+ context.originPosition = {
118
+ top: originStyle.top,
119
+ left: originStyle.left
120
+ };
121
+ }
122
+
123
+ // 直接操作DOM的原因是：不闪烁且性能更好
124
+ stopStickyElement.style.transform = "translateZ(0)";
125
+ fixedStickyElRef.current.style.top = "".concat(absoluteTop, "px");
126
+ fixedStickyElRef.current.style.left = "".concat(absoluteLeft, "px");
127
+ }
128
+ // 暂不支持 props.stickyBoundary 为 number 的fixed定位情况
129
+ }
130
+ } else {
131
+ if (!context.stoped) return;
132
+ context.stoped = false;
133
+
134
+ // 恢复正常吸附模式：把 div 移动到 target 外部
135
+ if (context.div && context.target && context.target.parentNode) {
136
+ context.target.parentNode.insertBefore(context.div, context.target);
137
+ context.div.style.transform = 'none';
138
+ } else if (stopStickyElement && fixedStickyElRef.current && context.originPosition) {
139
+ stopStickyElement.style.transform = "none";
140
+ fixedStickyElRef.current.style.top = context.originPosition.top;
141
+ fixedStickyElRef.current.style.left = context.originPosition.left;
142
+ context.originPosition = null; // 清理状态
143
+ }
144
+ }
145
+ });
100
146
  var getTarget = function getTarget() {
101
147
  var scrollContainer = props.scrollContainer;
102
148
  if (typeof scrollContainer === 'string') {
@@ -275,10 +321,6 @@ var Sticky = function Sticky(props) {
275
321
  context.targetObserver.disconnect();
276
322
  context.targetObserver = null;
277
323
  }
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
- }
282
324
  };
283
325
  var createObserver = function createObserver() {
284
326
  if (!context.div) {
@@ -303,9 +345,6 @@ var Sticky = function Sticky(props) {
303
345
  }
304
346
  }
305
347
  cancelFixedObserver();
306
- if (props.stickyBoundary) {
307
- context.target.addEventListener('scroll', context.stopStickyFn);
308
- }
309
348
  if (window.IntersectionObserver) {
310
349
  var observer = new IntersectionObserver(handleTargetPosition, {
311
350
  root: context.target,
@@ -345,6 +384,10 @@ var Sticky = function Sticky(props) {
345
384
  context.div.remove();
346
385
  context.div = null;
347
386
  }
387
+ if (props.stickyBoundary) {
388
+ var _context$target;
389
+ (_context$target = context.target) === null || _context$target === void 0 || _context$target.removeEventListener('scroll', onStickyBoundaryChange);
390
+ }
348
391
  };
349
392
  var createFixedEvents = function createFixedEvents() {
350
393
  createFixedObserver();
@@ -357,6 +400,10 @@ var Sticky = function Sticky(props) {
357
400
  events.forEach(function (event) {
358
401
  window.removeEventListener(event, handleFixedPosition);
359
402
  });
403
+ if (props.stickyBoundary) {
404
+ var _context$target2;
405
+ (_context$target2 = context.target) === null || _context$target2 === void 0 || _context$target2.removeEventListener('scroll', onStickyBoundaryChange);
406
+ }
360
407
  };
361
408
  var handleElementRef = function handleElementRef(el) {
362
409
  if (el) {
@@ -384,7 +431,15 @@ var Sticky = function Sticky(props) {
384
431
  context.target = target;
385
432
  forceUpdate();
386
433
  }
387
- if (context.target) {
434
+ if (props.stickyBoundary) {
435
+ if (!context.target || context.target === document.documentElement) {
436
+ window.addEventListener('scroll', onStickyBoundaryChange);
437
+ } else {
438
+ var _context$target3;
439
+ (_context$target3 = context.target) === null || _context$target3 === void 0 || _context$target3.addEventListener('scroll', onStickyBoundaryChange);
440
+ }
441
+ }
442
+ if (context.target && context.target !== document.documentElement) {
388
443
  createTargetEvents();
389
444
  return cancelTargetEvents;
390
445
  } else {
@@ -405,7 +460,6 @@ var Sticky = function Sticky(props) {
405
460
  if (props.onChange) {
406
461
  props.onChange(show);
407
462
  }
408
- ;
409
463
  }, [show]);
410
464
 
411
465
  // 纯css方法 直接使用css
@@ -430,6 +484,7 @@ var Sticky = function Sticky(props) {
430
484
  style: _objectSpread(_objectSpread({
431
485
  zIndex: defaultZIndex
432
486
  }, style), elementSize),
487
+ ref: fixedStickyElRef,
433
488
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
434
489
  className: props.className,
435
490
  style: props.style,
package/cjs/sticky/sticky.type.d.ts CHANGED
@@ -32,7 +32,7 @@ export interface StickyProps extends Pick<CommonType, 'className' | 'style'> {
32
32
  * @cn sticky元素滚动到指定位置或与指定元素底部重合时，取消sticky
33
33
  * @version 3.8.0
34
34
  */
35
- stickyBoundary?: number | (() => HTMLElement | Element | null);
35
+ stickyBoundary?: number | (() => HTMLElement | null);
36
36
  /**
37
37
  * @cn sticky 父级元素, 当父元素离开视窗时，sticky 将失效
38
38
  * @en sticky parent, when the parent element leaves the viewport, the sticky will be invalid
package/cjs/sticky/sticky.type.d.ts.map CHANGED
@@ -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;;;;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
+ {"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,IAAI,CAAC,CAAC;IAErD;;;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/esm/sticky/sticky.d.ts.map CHANGED
@@ -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;AAGjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwbjC,CAAC;AAEF,eAAe,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;AAajC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwejC,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/esm/sticky/sticky.js CHANGED
@@ -21,6 +21,16 @@ 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
+ function getStaticTop(el) {
25
+ var stopper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
26
+ var top = 0;
27
+ var currentEl = el;
28
+ while (currentEl && currentEl !== stopper) {
29
+ top += currentEl.offsetTop;
30
+ currentEl = currentEl.offsetParent;
31
+ }
32
+ return top;
33
+ }
24
34
  var Sticky = function Sticky(props) {
25
35
  if (props.target) {
26
36
  devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
@@ -31,7 +41,7 @@ var Sticky = function Sticky(props) {
31
41
  // 是否使用css sticky
32
42
  var css = (props.css || props.target) && supportSticky;
33
43
  var forceUpdate = useRender();
34
- var elementRef = useRef(null);
44
+ var fixedStickyElRef = useRef(null);
35
45
  var _useRef = useRef({
36
46
  target: null,
37
47
  div: null,
@@ -40,43 +50,7 @@ var Sticky = function Sticky(props) {
40
50
  parentObserver: null,
41
51
  fixedObserver: null,
42
52
  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
- }
53
+ originPosition: null
80
54
  }),
81
55
  context = _useRef.current;
82
56
  var _useState = useState({}),
@@ -91,6 +65,78 @@ var Sticky = function Sticky(props) {
91
65
  _useState6 = _slicedToArray(_useState5, 2),
92
66
  parentVisible = _useState6[0],
93
67
  setParentVisible = _useState6[1];
68
+ var elementRef = useRef(null);
69
+ var onStickyBoundaryChange = usePersistFn(function (e) {
70
+ var target = e.target;
71
+ var isDocument = !context.target || context.target === document.documentElement;
72
+ var scrollTop = isDocument ? window.scrollY : target.scrollTop;
73
+ if (!target || typeof scrollTop !== 'number') return;
74
+ var stopStickyPoint = -1;
75
+ var baseTop = 0;
76
+ var absoluteTop = 0;
77
+ var absoluteLeft = 0;
78
+ var stopStickyElement = null;
79
+ if (typeof props.stickyBoundary === 'number') {
80
+ stopStickyPoint = props.stickyBoundary;
81
+ } else if (typeof props.stickyBoundary === 'function') {
82
+ stopStickyElement = props.stickyBoundary();
83
+ if (!stopStickyElement) return;
84
+ var stopStickyRect = stopStickyElement.getBoundingClientRect();
85
+ var targetRect = elementRef.current.getBoundingClientRect();
86
+ if (context.target === document.documentElement || !context.target) {
87
+ baseTop = getStaticTop(elementRef.current) - (props.top || 0);
88
+ absoluteTop = stopStickyRect.bottom - targetRect.bottom;
89
+ absoluteLeft = stopStickyRect.left - targetRect.left;
90
+ }
91
+ stopStickyPoint = stopStickyRect.bottom - targetRect.bottom + baseTop;
92
+ }
93
+ if (stopStickyPoint < 0) return;
94
+ if (scrollTop > stopStickyPoint) {
95
+ if (context.stoped) return;
96
+ context.stoped = true;
97
+
98
+ // 把 div 移动到 target 内部，使用 absolute 定位跟随滚动
99
+ if (context.div && context.target) {
100
+ context.target.insertBefore(context.div, context.target.firstChild);
101
+ var paddingLeft = Number(window.getComputedStyle(context.target).paddingLeft.replace('px', '')) || 0;
102
+ var borderLeftWidth = Number(window.getComputedStyle(context.target).borderLeftWidth.replace('px', '')) || 0;
103
+ var left = paddingLeft + borderLeftWidth;
104
+ context.div.style.transform = "translate(-".concat(left, "px, ").concat(stopStickyPoint, "px)");
105
+ } else {
106
+ if (stopStickyElement) {
107
+ if (!fixedStickyElRef.current) return;
108
+ // 存储原始位置到 context 中
109
+ if (!context.originPosition) {
110
+ var originStyle = window.getComputedStyle(fixedStickyElRef.current);
111
+ context.originPosition = {
112
+ top: originStyle.top,
113
+ left: originStyle.left
114
+ };
115
+ }
116
+
117
+ // 直接操作DOM的原因是：不闪烁且性能更好
118
+ stopStickyElement.style.transform = "translateZ(0)";
119
+ fixedStickyElRef.current.style.top = "".concat(absoluteTop, "px");
120
+ fixedStickyElRef.current.style.left = "".concat(absoluteLeft, "px");
121
+ }
122
+ // 暂不支持 props.stickyBoundary 为 number 的fixed定位情况
123
+ }
124
+ } else {
125
+ if (!context.stoped) return;
126
+ context.stoped = false;
127
+
128
+ // 恢复正常吸附模式：把 div 移动到 target 外部
129
+ if (context.div && context.target && context.target.parentNode) {
130
+ context.target.parentNode.insertBefore(context.div, context.target);
131
+ context.div.style.transform = 'none';
132
+ } else if (stopStickyElement && fixedStickyElRef.current && context.originPosition) {
133
+ stopStickyElement.style.transform = "none";
134
+ fixedStickyElRef.current.style.top = context.originPosition.top;
135
+ fixedStickyElRef.current.style.left = context.originPosition.left;
136
+ context.originPosition = null; // 清理状态
137
+ }
138
+ }
139
+ });
94
140
  var getTarget = function getTarget() {
95
141
  var scrollContainer = props.scrollContainer;
96
142
  if (typeof scrollContainer === 'string') {
@@ -269,10 +315,6 @@ var Sticky = function Sticky(props) {
269
315
  context.targetObserver.disconnect();
270
316
  context.targetObserver = null;
271
317
  }
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
- }
276
318
  };
277
319
  var createObserver = function createObserver() {
278
320
  if (!context.div) {
@@ -297,9 +339,6 @@ var Sticky = function Sticky(props) {
297
339
  }
298
340
  }
299
341
  cancelFixedObserver();
300
- if (props.stickyBoundary) {
301
- context.target.addEventListener('scroll', context.stopStickyFn);
302
- }
303
342
  if (window.IntersectionObserver) {
304
343
  var observer = new IntersectionObserver(handleTargetPosition, {
305
344
  root: context.target,
@@ -339,6 +378,10 @@ var Sticky = function Sticky(props) {
339
378
  context.div.remove();
340
379
  context.div = null;
341
380
  }
381
+ if (props.stickyBoundary) {
382
+ var _context$target;
383
+ (_context$target = context.target) === null || _context$target === void 0 || _context$target.removeEventListener('scroll', onStickyBoundaryChange);
384
+ }
342
385
  };
343
386
  var createFixedEvents = function createFixedEvents() {
344
387
  createFixedObserver();
@@ -351,6 +394,10 @@ var Sticky = function Sticky(props) {
351
394
  events.forEach(function (event) {
352
395
  window.removeEventListener(event, handleFixedPosition);
353
396
  });
397
+ if (props.stickyBoundary) {
398
+ var _context$target2;
399
+ (_context$target2 = context.target) === null || _context$target2 === void 0 || _context$target2.removeEventListener('scroll', onStickyBoundaryChange);
400
+ }
354
401
  };
355
402
  var handleElementRef = function handleElementRef(el) {
356
403
  if (el) {
@@ -378,7 +425,15 @@ var Sticky = function Sticky(props) {
378
425
  context.target = target;
379
426
  forceUpdate();
380
427
  }
381
- if (context.target) {
428
+ if (props.stickyBoundary) {
429
+ if (!context.target || context.target === document.documentElement) {
430
+ window.addEventListener('scroll', onStickyBoundaryChange);
431
+ } else {
432
+ var _context$target3;
433
+ (_context$target3 = context.target) === null || _context$target3 === void 0 || _context$target3.addEventListener('scroll', onStickyBoundaryChange);
434
+ }
435
+ }
436
+ if (context.target && context.target !== document.documentElement) {
382
437
  createTargetEvents();
383
438
  return cancelTargetEvents;
384
439
  } else {
@@ -399,7 +454,6 @@ var Sticky = function Sticky(props) {
399
454
  if (props.onChange) {
400
455
  props.onChange(show);
401
456
  }
402
- ;
403
457
  }, [show]);
404
458
 
405
459
  // 纯css方法 直接使用css
@@ -424,6 +478,7 @@ var Sticky = function Sticky(props) {
424
478
  style: _objectSpread(_objectSpread({
425
479
  zIndex: defaultZIndex
426
480
  }, style), elementSize),
481
+ ref: fixedStickyElRef,
427
482
  children: /*#__PURE__*/_jsx("div", {
428
483
  className: props.className,
429
484
  style: props.style,
package/esm/sticky/sticky.type.d.ts CHANGED
@@ -32,7 +32,7 @@ export interface StickyProps extends Pick<CommonType, 'className' | 'style'> {
32
32
  * @cn sticky元素滚动到指定位置或与指定元素底部重合时，取消sticky
33
33
  * @version 3.8.0
34
34
  */
35
- stickyBoundary?: number | (() => HTMLElement | Element | null);
35
+ stickyBoundary?: number | (() => HTMLElement | null);
36
36
  /**
37
37
  * @cn sticky 父级元素, 当父元素离开视窗时，sticky 将失效
38
38
  * @en sticky parent, when the parent element leaves the viewport, the sticky will be invalid
package/esm/sticky/sticky.type.d.ts.map CHANGED
@@ -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;;;;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
+ {"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,IAAI,CAAC,CAAC;IAErD;;;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.14",
3
+ "version": "3.8.0-beta.16",
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.14",
13
+ "@sheinx/hooks": "3.8.0-beta.16",
14
14
  "immer": "^10.0.0",
15
15
  "classnames": "^2.0.0",
16
16
  "@shined/reactive": "^0.1.3-alpha.0"