@sheinx/hooks 3.9.14 → 3.9.15-beta.1

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 (13) hide show
  1. package/cjs/components/use-table/use-table-virtual-external.d.ts +19 -0
  2. package/cjs/components/use-table/use-table-virtual-external.d.ts.map +1 -0
  3. package/cjs/components/use-table/use-table-virtual-external.js +85 -0
  4. package/cjs/components/use-table/use-table-virtual.d.ts +7 -0
  5. package/cjs/components/use-table/use-table-virtual.d.ts.map +1 -1
  6. package/cjs/components/use-table/use-table-virtual.js +23 -3
  7. package/esm/components/use-table/use-table-virtual-external.d.ts +19 -0
  8. package/esm/components/use-table/use-table-virtual-external.d.ts.map +1 -0
  9. package/esm/components/use-table/use-table-virtual-external.js +79 -0
  10. package/esm/components/use-table/use-table-virtual.d.ts +7 -0
  11. package/esm/components/use-table/use-table-virtual.d.ts.map +1 -1
  12. package/esm/components/use-table/use-table-virtual.js +23 -3
  13. package/package.json +1 -1
package/cjs/components/use-table/use-table-virtual-external.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ interface UseTableVirtualExternalProps {
3
+ disabled?: boolean;
4
+ dataLength: number;
5
+ theadHeight: number;
6
+ tfootHeight: number;
7
+ externalStickyHeader?: boolean;
8
+ virtualScrollContainer: () => HTMLElement | null;
9
+ tableRef?: React.RefObject<HTMLDivElement>;
10
+ getContentHeight: (index: number) => number;
11
+ updateIndexAndTopFromTop: (scrollTop: number) => void;
12
+ }
13
+ declare const useTableVirtualExternal: (props: UseTableVirtualExternalProps) => {
14
+ externalStickyRef: import("react").RefObject<HTMLDivElement>;
15
+ headerOffset: number;
16
+ tableOffsetRef: import("react").MutableRefObject<number>;
17
+ };
18
+ export default useTableVirtualExternal;
19
+ //# sourceMappingURL=use-table-virtual-external.d.ts.map
package/cjs/components/use-table/use-table-virtual-external.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-table-virtual-external.d.ts","sourceRoot":"","sources":["use-table-virtual-external.tsx"],"names":[],"mappings":";AAGA,UAAU,4BAA4B;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sBAAsB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,QAAA,MAAM,uBAAuB,UAAW,4BAA4B;;;;CAyEnE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
package/cjs/components/use-table/use-table-virtual-external.js ADDED
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _usePersistFn = require("../../common/use-persist-fn");
8
+ var _react = require("react");
9
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
10
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
11
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
12
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
13
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
14
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
+ var useTableVirtualExternal = function useTableVirtualExternal(props) {
16
+ var _useState = (0, _react.useState)(0),
17
+ _useState2 = _slicedToArray(_useState, 2),
18
+ headerOffset = _useState2[0],
19
+ setHeaderOffset = _useState2[1];
20
+ var externalStickyRef = (0, _react.useRef)(null);
21
+ var tableOffsetRef = (0, _react.useRef)(0);
22
+ var handleExternalScroll = (0, _usePersistFn.usePersistFn)(function () {
23
+ var _props$tableRef, _externalStickyRef$cu;
24
+ if (props.disabled) return;
25
+ var container = props.virtualScrollContainer();
26
+ var tableEl = (_props$tableRef = props.tableRef) === null || _props$tableRef === void 0 ? void 0 : _props$tableRef.current;
27
+ if (!container || !tableEl) return;
28
+ if (tableOffsetRef.current === 0) {
29
+ if (container === document.documentElement || container === document.body) {
30
+ tableOffsetRef.current = tableEl.getBoundingClientRect().top + window.scrollY;
31
+ } else {
32
+ tableOffsetRef.current = tableEl.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
33
+ }
34
+ }
35
+ var rawScrollTop;
36
+ if (container === document.documentElement || container === document.body) {
37
+ var rect = tableEl.getBoundingClientRect();
38
+ rawScrollTop = -rect.top;
39
+ } else {
40
+ var containerRect = container.getBoundingClientRect();
41
+ var tableRect = tableEl.getBoundingClientRect();
42
+ rawScrollTop = containerRect.top - tableRect.top;
43
+ }
44
+ if (rawScrollTop < 0) rawScrollTop = 0;
45
+ var sumHeight = props.getContentHeight(props.dataLength - 1);
46
+ var viewportHeight = ((_externalStickyRef$cu = externalStickyRef.current) === null || _externalStickyRef$cu === void 0 ? void 0 : _externalStickyRef$cu.clientHeight) || container.clientHeight;
47
+ var scrollTop;
48
+ var max;
49
+ if (props.externalStickyHeader) {
50
+ max = sumHeight - props.tfootHeight - viewportHeight;
51
+ scrollTop = rawScrollTop;
52
+ } else {
53
+ var newHeaderOffset = Math.min(rawScrollTop, props.theadHeight);
54
+ if (newHeaderOffset !== headerOffset) {
55
+ setHeaderOffset(newHeaderOffset);
56
+ }
57
+ max = sumHeight - props.theadHeight - props.tfootHeight - viewportHeight;
58
+ scrollTop = rawScrollTop - props.theadHeight;
59
+ if (scrollTop < 0) scrollTop = 0;
60
+ }
61
+ if (max > 0 && scrollTop > max) {
62
+ scrollTop = max;
63
+ }
64
+ props.updateIndexAndTopFromTop(scrollTop);
65
+ });
66
+ (0, _react.useEffect)(function () {
67
+ if (props.disabled) return;
68
+ var container = props.virtualScrollContainer();
69
+ if (!container) return;
70
+ var scrollTarget = container === document.documentElement || container === document.body ? window : container;
71
+ scrollTarget.addEventListener('scroll', handleExternalScroll, {
72
+ passive: true
73
+ });
74
+ handleExternalScroll();
75
+ return function () {
76
+ scrollTarget.removeEventListener('scroll', handleExternalScroll);
77
+ };
78
+ }, [props.disabled, props.dataLength]);
79
+ return {
80
+ externalStickyRef: externalStickyRef,
81
+ headerOffset: headerOffset,
82
+ tableOffsetRef: tableOffsetRef
83
+ };
84
+ };
85
+ var _default = exports.default = useTableVirtualExternal;
package/cjs/components/use-table/use-table-virtual.d.ts CHANGED
@@ -15,6 +15,9 @@ interface UseTableVirtualProps {
15
15
  colgroup: (number | string | undefined)[];
16
16
  theadHeight: number;
17
17
  tfootHeight: number;
18
+ virtualScrollContainer?: () => HTMLElement | null;
19
+ tableRef?: React.RefObject<HTMLDivElement>;
20
+ externalStickyHeader?: boolean;
18
21
  }
19
22
  declare const useTableVirtual: (props: UseTableVirtualProps) => {
20
23
  scrollHeight: number;
@@ -36,6 +39,10 @@ declare const useTableVirtual: (props: UseTableVirtualProps) => {
36
39
  rowSpanIndexArray: number[];
37
40
  maxRowSpan: number;
38
41
  } | null;
42
+ isExternalScroll: boolean;
43
+ externalStickyRef: import("react").RefObject<HTMLDivElement>;
44
+ headerOffset: number;
45
+ tableOffsetRef: import("react").MutableRefObject<number>;
39
46
  };
40
47
  export default useTableVirtual;
41
48
  //# sourceMappingURL=use-table-virtual.d.ts.map
package/cjs/components/use-table/use-table-virtual.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-table-virtual.d.ts","sourceRoot":"","sources":["use-table-virtual.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAWrD,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AACD,QAAA,MAAM,eAAe,UAAW,oBAAoB;;;;;;oBAoNpC,MAAM;mBACP,MAAM;WACd,MAAM;gBACD,MAAM;kBACJ,OAAO;;0BArHuB,MAAM,UAAU,MAAM;2BAwJrB,MAAM,aAAa,MAAM,IAAI;qCAoBnB,MAAM;mCAUR,MAAM,GAAG,MAAM;;;;;CA4GnE,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"use-table-virtual.d.ts","sourceRoot":"","sources":["use-table-virtual.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AACD,QAAA,MAAM,eAAe,UAAW,oBAAoB;;;;;;oBAoNpC,MAAM;mBACP,MAAM;WACd,MAAM;gBACD,MAAM;kBACJ,OAAO;;0BArHuB,MAAM,UAAU,MAAM;2BAwJrB,MAAM,aAAa,MAAM,IAAI;qCAoBnB,MAAM;mCAUR,MAAM,GAAG,MAAM;;;;;;;;;CA8HnE,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/cjs/components/use-table/use-table-virtual.js CHANGED
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _usePersistFn = require("../../common/use-persist-fn");
8
8
  var _react = require("react");
9
+ var _useTableVirtualExternal = _interopRequireDefault(require("./use-table-virtual-external"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
11
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
10
12
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
11
13
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
@@ -155,8 +157,8 @@ var useTableVirtual = function useTableVirtual(props) {
155
157
  setHeight(getContentHeight(props.data.length - 1));
156
158
  }
157
159
  var preIndex = context.preIndex;
158
- // 解决: 从下往上滚 由于高度变化会导致滚动条跳动
159
- if (preIndex && preIndex > startIndex && startIndex === index) {
160
+ // 解决: 从下往上滚 由于高度变化会导致滚动条跳动（仅内部滚动需要）
161
+ if (!props.virtualScrollContainer && preIndex && preIndex > startIndex && startIndex === index) {
160
162
  // 发生在顶部
161
163
  if (context.heightCallback) return;
162
164
  var offset = height - (beforeHeight || props.rowHeight);
@@ -406,6 +408,20 @@ var useTableVirtual = function useTableVirtual(props) {
406
408
  }
407
409
  return "translate3d(0, ".concat(0 - t, "px, 0)");
408
410
  }, [innerTop]);
411
+ var isExternalScroll = !!props.virtualScrollContainer;
412
+ var externalInfo = (0, _useTableVirtualExternal.default)({
413
+ disabled: props.disabled || !isExternalScroll,
414
+ dataLength: props.data.length,
415
+ theadHeight: props.theadHeight,
416
+ tfootHeight: props.tfootHeight,
417
+ externalStickyHeader: props.externalStickyHeader,
418
+ virtualScrollContainer: props.virtualScrollContainer || function () {
419
+ return null;
420
+ },
421
+ tableRef: props.tableRef,
422
+ getContentHeight: getContentHeight,
423
+ updateIndexAndTopFromTop: updateIndexAndTopFromTop
424
+ });
409
425
  return {
410
426
  scrollHeight: scrollHeight,
411
427
  startIndex: startIndex,
@@ -416,7 +432,11 @@ var useTableVirtual = function useTableVirtual(props) {
416
432
  scrollToIndex: scrollToIndex,
417
433
  scrollColumnByLeft: scrollColumnByLeft,
418
434
  scrollColumnIntoView: scrollColumnIntoView,
419
- rowSpanInfo: rowSpanInfo
435
+ rowSpanInfo: rowSpanInfo,
436
+ isExternalScroll: isExternalScroll,
437
+ externalStickyRef: externalInfo.externalStickyRef,
438
+ headerOffset: externalInfo.headerOffset,
439
+ tableOffsetRef: externalInfo.tableOffsetRef
420
440
  };
421
441
  };
422
442
  var _default = exports.default = useTableVirtual;
package/esm/components/use-table/use-table-virtual-external.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ interface UseTableVirtualExternalProps {
3
+ disabled?: boolean;
4
+ dataLength: number;
5
+ theadHeight: number;
6
+ tfootHeight: number;
7
+ externalStickyHeader?: boolean;
8
+ virtualScrollContainer: () => HTMLElement | null;
9
+ tableRef?: React.RefObject<HTMLDivElement>;
10
+ getContentHeight: (index: number) => number;
11
+ updateIndexAndTopFromTop: (scrollTop: number) => void;
12
+ }
13
+ declare const useTableVirtualExternal: (props: UseTableVirtualExternalProps) => {
14
+ externalStickyRef: import("react").RefObject<HTMLDivElement>;
15
+ headerOffset: number;
16
+ tableOffsetRef: import("react").MutableRefObject<number>;
17
+ };
18
+ export default useTableVirtualExternal;
19
+ //# sourceMappingURL=use-table-virtual-external.d.ts.map
package/esm/components/use-table/use-table-virtual-external.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-table-virtual-external.d.ts","sourceRoot":"","sources":["use-table-virtual-external.tsx"],"names":[],"mappings":";AAGA,UAAU,4BAA4B;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sBAAsB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,QAAA,MAAM,uBAAuB,UAAW,4BAA4B;;;;CAyEnE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
package/esm/components/use-table/use-table-virtual-external.js ADDED
@@ -0,0 +1,79 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { usePersistFn } from "../../common/use-persist-fn";
8
+ import { useState, useRef, useEffect } from 'react';
9
+ var useTableVirtualExternal = function useTableVirtualExternal(props) {
10
+ var _useState = useState(0),
11
+ _useState2 = _slicedToArray(_useState, 2),
12
+ headerOffset = _useState2[0],
13
+ setHeaderOffset = _useState2[1];
14
+ var externalStickyRef = useRef(null);
15
+ var tableOffsetRef = useRef(0);
16
+ var handleExternalScroll = usePersistFn(function () {
17
+ var _props$tableRef, _externalStickyRef$cu;
18
+ if (props.disabled) return;
19
+ var container = props.virtualScrollContainer();
20
+ var tableEl = (_props$tableRef = props.tableRef) === null || _props$tableRef === void 0 ? void 0 : _props$tableRef.current;
21
+ if (!container || !tableEl) return;
22
+ if (tableOffsetRef.current === 0) {
23
+ if (container === document.documentElement || container === document.body) {
24
+ tableOffsetRef.current = tableEl.getBoundingClientRect().top + window.scrollY;
25
+ } else {
26
+ tableOffsetRef.current = tableEl.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
27
+ }
28
+ }
29
+ var rawScrollTop;
30
+ if (container === document.documentElement || container === document.body) {
31
+ var rect = tableEl.getBoundingClientRect();
32
+ rawScrollTop = -rect.top;
33
+ } else {
34
+ var containerRect = container.getBoundingClientRect();
35
+ var tableRect = tableEl.getBoundingClientRect();
36
+ rawScrollTop = containerRect.top - tableRect.top;
37
+ }
38
+ if (rawScrollTop < 0) rawScrollTop = 0;
39
+ var sumHeight = props.getContentHeight(props.dataLength - 1);
40
+ var viewportHeight = ((_externalStickyRef$cu = externalStickyRef.current) === null || _externalStickyRef$cu === void 0 ? void 0 : _externalStickyRef$cu.clientHeight) || container.clientHeight;
41
+ var scrollTop;
42
+ var max;
43
+ if (props.externalStickyHeader) {
44
+ max = sumHeight - props.tfootHeight - viewportHeight;
45
+ scrollTop = rawScrollTop;
46
+ } else {
47
+ var newHeaderOffset = Math.min(rawScrollTop, props.theadHeight);
48
+ if (newHeaderOffset !== headerOffset) {
49
+ setHeaderOffset(newHeaderOffset);
50
+ }
51
+ max = sumHeight - props.theadHeight - props.tfootHeight - viewportHeight;
52
+ scrollTop = rawScrollTop - props.theadHeight;
53
+ if (scrollTop < 0) scrollTop = 0;
54
+ }
55
+ if (max > 0 && scrollTop > max) {
56
+ scrollTop = max;
57
+ }
58
+ props.updateIndexAndTopFromTop(scrollTop);
59
+ });
60
+ useEffect(function () {
61
+ if (props.disabled) return;
62
+ var container = props.virtualScrollContainer();
63
+ if (!container) return;
64
+ var scrollTarget = container === document.documentElement || container === document.body ? window : container;
65
+ scrollTarget.addEventListener('scroll', handleExternalScroll, {
66
+ passive: true
67
+ });
68
+ handleExternalScroll();
69
+ return function () {
70
+ scrollTarget.removeEventListener('scroll', handleExternalScroll);
71
+ };
72
+ }, [props.disabled, props.dataLength]);
73
+ return {
74
+ externalStickyRef: externalStickyRef,
75
+ headerOffset: headerOffset,
76
+ tableOffsetRef: tableOffsetRef
77
+ };
78
+ };
79
+ export default useTableVirtualExternal;
package/esm/components/use-table/use-table-virtual.d.ts CHANGED
@@ -15,6 +15,9 @@ interface UseTableVirtualProps {
15
15
  colgroup: (number | string | undefined)[];
16
16
  theadHeight: number;
17
17
  tfootHeight: number;
18
+ virtualScrollContainer?: () => HTMLElement | null;
19
+ tableRef?: React.RefObject<HTMLDivElement>;
20
+ externalStickyHeader?: boolean;
18
21
  }
19
22
  declare const useTableVirtual: (props: UseTableVirtualProps) => {
20
23
  scrollHeight: number;
@@ -36,6 +39,10 @@ declare const useTableVirtual: (props: UseTableVirtualProps) => {
36
39
  rowSpanIndexArray: number[];
37
40
  maxRowSpan: number;
38
41
  } | null;
42
+ isExternalScroll: boolean;
43
+ externalStickyRef: import("react").RefObject<HTMLDivElement>;
44
+ headerOffset: number;
45
+ tableOffsetRef: import("react").MutableRefObject<number>;
39
46
  };
40
47
  export default useTableVirtual;
41
48
  //# sourceMappingURL=use-table-virtual.d.ts.map
package/esm/components/use-table/use-table-virtual.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-table-virtual.d.ts","sourceRoot":"","sources":["use-table-virtual.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAWrD,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AACD,QAAA,MAAM,eAAe,UAAW,oBAAoB;;;;;;oBAoNpC,MAAM;mBACP,MAAM;WACd,MAAM;gBACD,MAAM;kBACJ,OAAO;;0BArHuB,MAAM,UAAU,MAAM;2BAwJrB,MAAM,aAAa,MAAM,IAAI;qCAoBnB,MAAM;mCAUR,MAAM,GAAG,MAAM;;;;;CA4GnE,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"use-table-virtual.d.ts","sourceRoot":"","sources":["use-table-virtual.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AACD,QAAA,MAAM,eAAe,UAAW,oBAAoB;;;;;;oBAoNpC,MAAM;mBACP,MAAM;WACd,MAAM;gBACD,MAAM;kBACJ,OAAO;;0BArHuB,MAAM,UAAU,MAAM;2BAwJrB,MAAM,aAAa,MAAM,IAAI;qCAoBnB,MAAM;mCAUR,MAAM,GAAG,MAAM;;;;;;;;;CA8HnE,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/esm/components/use-table/use-table-virtual.js CHANGED
@@ -11,6 +11,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
11
11
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
12
12
  import { usePersistFn } from "../../common/use-persist-fn";
13
13
  import { useState, useRef, useEffect, useMemo } from 'react';
14
+ import useTableVirtualExternal from "./use-table-virtual-external";
15
+
14
16
  // 找出最大的连续数字的个数
15
17
  function getMaxRowSpanLength(input) {
16
18
  var map = new Map();
@@ -149,8 +151,8 @@ var useTableVirtual = function useTableVirtual(props) {
149
151
  setHeight(getContentHeight(props.data.length - 1));
150
152
  }
151
153
  var preIndex = context.preIndex;
152
- // 解决: 从下往上滚 由于高度变化会导致滚动条跳动
153
- if (preIndex && preIndex > startIndex && startIndex === index) {
154
+ // 解决: 从下往上滚 由于高度变化会导致滚动条跳动（仅内部滚动需要）
155
+ if (!props.virtualScrollContainer && preIndex && preIndex > startIndex && startIndex === index) {
154
156
  // 发生在顶部
155
157
  if (context.heightCallback) return;
156
158
  var offset = height - (beforeHeight || props.rowHeight);
@@ -400,6 +402,20 @@ var useTableVirtual = function useTableVirtual(props) {
400
402
  }
401
403
  return "translate3d(0, ".concat(0 - t, "px, 0)");
402
404
  }, [innerTop]);
405
+ var isExternalScroll = !!props.virtualScrollContainer;
406
+ var externalInfo = useTableVirtualExternal({
407
+ disabled: props.disabled || !isExternalScroll,
408
+ dataLength: props.data.length,
409
+ theadHeight: props.theadHeight,
410
+ tfootHeight: props.tfootHeight,
411
+ externalStickyHeader: props.externalStickyHeader,
412
+ virtualScrollContainer: props.virtualScrollContainer || function () {
413
+ return null;
414
+ },
415
+ tableRef: props.tableRef,
416
+ getContentHeight: getContentHeight,
417
+ updateIndexAndTopFromTop: updateIndexAndTopFromTop
418
+ });
403
419
  return {
404
420
  scrollHeight: scrollHeight,
405
421
  startIndex: startIndex,
@@ -410,7 +426,11 @@ var useTableVirtual = function useTableVirtual(props) {
410
426
  scrollToIndex: scrollToIndex,
411
427
  scrollColumnByLeft: scrollColumnByLeft,
412
428
  scrollColumnIntoView: scrollColumnIntoView,
413
- rowSpanInfo: rowSpanInfo
429
+ rowSpanInfo: rowSpanInfo,
430
+ isExternalScroll: isExternalScroll,
431
+ externalStickyRef: externalInfo.externalStickyRef,
432
+ headerOffset: externalInfo.headerOffset,
433
+ tableOffsetRef: externalInfo.tableOffsetRef
414
434
  };
415
435
  };
416
436
  export default useTableVirtual;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/hooks",
3
- "version": "3.9.14",
3
+ "version": "3.9.15-beta.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",