shineout 3.9.14 → 3.9.15-beta.1

package/cjs/index.js

@@ -522,5 +522,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.9.14'
+  version: '3.9.15-beta.1'
 };

package/dist/shineout.js

@@ -12326,7 +12326,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.9.14');
+/* harmony default export */ var version = ('3.9.15-beta.1');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -66294,12 +66294,89 @@ var useTableSort = function useTableSort(props) {
   };
 };
 /* harmony default export */ var use_table_sort = (useTableSort);
+;// CONCATENATED MODULE: ../hooks/src/components/use-table/use-table-virtual-external.tsx
+
+
+
+var useTableVirtualExternal = function useTableVirtualExternal(props) {
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    _useState2 = slicedToArray_default()(_useState, 2),
+    headerOffset = _useState2[0],
+    setHeaderOffset = _useState2[1];
+  var externalStickyRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var tableOffsetRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);
+  var handleExternalScroll = usePersistFn(function () {
+    var _props$tableRef, _externalStickyRef$cu;
+    if (props.disabled) return;
+    var container = props.virtualScrollContainer();
+    var tableEl = (_props$tableRef = props.tableRef) === null || _props$tableRef === void 0 ? void 0 : _props$tableRef.current;
+    if (!container || !tableEl) return;
+    if (tableOffsetRef.current === 0) {
+      if (container === document.documentElement || container === document.body) {
+        tableOffsetRef.current = tableEl.getBoundingClientRect().top + window.scrollY;
+      } else {
+        tableOffsetRef.current = tableEl.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+      }
+    }
+    var rawScrollTop;
+    if (container === document.documentElement || container === document.body) {
+      var rect = tableEl.getBoundingClientRect();
+      rawScrollTop = -rect.top;
+    } else {
+      var containerRect = container.getBoundingClientRect();
+      var tableRect = tableEl.getBoundingClientRect();
+      rawScrollTop = containerRect.top - tableRect.top;
+    }
+    if (rawScrollTop < 0) rawScrollTop = 0;
+    var sumHeight = props.getContentHeight(props.dataLength - 1);
+    var viewportHeight = ((_externalStickyRef$cu = externalStickyRef.current) === null || _externalStickyRef$cu === void 0 ? void 0 : _externalStickyRef$cu.clientHeight) || container.clientHeight;
+    var scrollTop;
+    var max;
+    if (props.externalStickyHeader) {
+      max = sumHeight - props.tfootHeight - viewportHeight;
+      scrollTop = rawScrollTop;
+    } else {
+      var newHeaderOffset = Math.min(rawScrollTop, props.theadHeight);
+      if (newHeaderOffset !== headerOffset) {
+        setHeaderOffset(newHeaderOffset);
+      }
+      max = sumHeight - props.theadHeight - props.tfootHeight - viewportHeight;
+      scrollTop = rawScrollTop - props.theadHeight;
+      if (scrollTop < 0) scrollTop = 0;
+    }
+    if (max > 0 && scrollTop > max) {
+      scrollTop = max;
+    }
+    props.updateIndexAndTopFromTop(scrollTop);
+  });
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (props.disabled) return;
+    var container = props.virtualScrollContainer();
+    if (!container) return;
+    var scrollTarget = container === document.documentElement || container === document.body ? window : container;
+    scrollTarget.addEventListener('scroll', handleExternalScroll, {
+      passive: true
+    });
+    handleExternalScroll();
+    return function () {
+      scrollTarget.removeEventListener('scroll', handleExternalScroll);
+    };
+  }, [props.disabled, props.dataLength]);
+  return {
+    externalStickyRef: externalStickyRef,
+    headerOffset: headerOffset,
+    tableOffsetRef: tableOffsetRef
+  };
+};
+/* harmony default export */ var use_table_virtual_external = (useTableVirtualExternal);
 ;// CONCATENATED MODULE: ../hooks/src/components/use-table/use-table-virtual.tsx
 
 
 
 
 
+
+
 // 找出最大的连续数字的个数
 function getMaxRowSpanLength(input) {
   var map = new Map();
@@ -66438,8 +66515,8 @@ var useTableVirtual = function useTableVirtual(props) {
       setHeight(getContentHeight(props.data.length - 1));
     }
     var preIndex = context.preIndex;
-    // 解决: 从下往上滚 由于高度变化会导致滚动条跳动
-    if (preIndex && preIndex > startIndex && startIndex === index) {
+    // 解决: 从下往上滚 由于高度变化会导致滚动条跳动（仅内部滚动需要）
+    if (!props.virtualScrollContainer && preIndex && preIndex > startIndex && startIndex === index) {
       // 发生在顶部
       if (context.heightCallback) return;
       var offset = height - (beforeHeight || props.rowHeight);
@@ -66689,6 +66766,20 @@ var useTableVirtual = function useTableVirtual(props) {
     }
     return "translate3d(0, ".concat(0 - t, "px, 0)");
   }, [innerTop]);
+  var isExternalScroll = !!props.virtualScrollContainer;
+  var externalInfo = use_table_virtual_external({
+    disabled: props.disabled || !isExternalScroll,
+    dataLength: props.data.length,
+    theadHeight: props.theadHeight,
+    tfootHeight: props.tfootHeight,
+    externalStickyHeader: props.externalStickyHeader,
+    virtualScrollContainer: props.virtualScrollContainer || function () {
+      return null;
+    },
+    tableRef: props.tableRef,
+    getContentHeight: getContentHeight,
+    updateIndexAndTopFromTop: updateIndexAndTopFromTop
+  });
   return {
     scrollHeight: scrollHeight,
     startIndex: startIndex,
@@ -66699,7 +66790,11 @@ var useTableVirtual = function useTableVirtual(props) {
     scrollToIndex: scrollToIndex,
     scrollColumnByLeft: scrollColumnByLeft,
     scrollColumnIntoView: scrollColumnIntoView,
-    rowSpanInfo: rowSpanInfo
+    rowSpanInfo: rowSpanInfo,
+    isExternalScroll: isExternalScroll,
+    externalStickyRef: externalInfo.externalStickyRef,
+    headerOffset: externalInfo.headerOffset,
+    tableOffsetRef: externalInfo.tableOffsetRef
   };
 };
 /* harmony default export */ var use_table_virtual = (useTableVirtual);
@@ -68571,7 +68666,7 @@ function Table(props) {
       scrollingTimer: null
     }),
     context = _useRef.current;
-  var virtual = !fakeVirtual && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
+  var virtual = !fakeVirtual && props.rowsInView !== 0 && (!!props.virtual || !!props.virtualScrollContainer || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
     if (!virtual) return;
     if (!tableRef.current) return;
@@ -68589,7 +68684,7 @@ function Table(props) {
     tbodyHeight = _useResize.height;
 
   // default height
-  var defaultHeight = virtual && !props.height ? '100%' : props.height;
+  var defaultHeight = virtual && !props.height && !props.virtualScrollContainer ? '100%' : props.height;
   var selection = use_table_select({
     cellSelectable: props.cellSelectable
   });
@@ -68765,7 +68860,10 @@ function Table(props) {
     scrollLeft: props.scrollLeft,
     isRtl: isRtl,
     theadHeight: context.theadHeight,
-    tfootHeight: context.tfootHeight
+    tfootHeight: context.tfootHeight,
+    virtualScrollContainer: props.virtualScrollContainer,
+    tableRef: tableRef,
+    externalStickyHeader: !!props.virtualScrollContainer && !!props.sticky
   });
   var syncHeaderScroll = usePersistFn(function (left) {
     var _tableRef$current;
@@ -68946,7 +69044,7 @@ function Table(props) {
       }
     };
     var isRenderVirtualTable = virtual || props.sticky || !((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length);
-    var headWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, !!$empty && tableClasses.emptyHeader, props.sticky && isScrollY && tableClasses.scrollY, props.sticky && isScrollY && browserScrollbarWidth === 0 && tableClasses.overlayScrollbar, props.sticky && !isScrollY && tableClasses.scrollX);
+    var headWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, !!$empty && tableClasses.emptyHeader, props.sticky && isScrollY && tableClasses.scrollY, props.sticky && isScrollY && browserScrollbarWidth === 0 && tableClasses.overlayScrollbar, props.sticky && !isScrollY && !virtualInfo.isExternalScroll && tableClasses.scrollX);
     var footWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.footWrapper);
     var renderHeadMirrorScroller = function renderHeadMirrorScroller() {
       var _scrollRef$current2, _scrollRef$current3, _scrollRef$current4;
@@ -69037,8 +69135,55 @@ function Table(props) {
       })
     }));
     if (isRenderVirtualTable) {
-      var _props$data3, _virtualInfo$rowSpanI;
+      var _props$data4, _virtualInfo$rowSpanI2;
       var showStickyHeader = !props.hideHeader && props.sticky;
+      if (virtualInfo.isExternalScroll) {
+        var _props$sticky$top, _props$virtualScrollC, _props$data3, _virtualInfo$rowSpanI;
+        var tableOffset = virtualInfo.tableOffsetRef.current;
+        var stickyTop = typeof_default()(props.sticky) === 'object' ? (_props$sticky$top = props.sticky.top) !== null && _props$sticky$top !== void 0 ? _props$sticky$top : 0 : 0;
+        var stickyTopOffset = stickyTop - tableOffset;
+        var externalContainer = (_props$virtualScrollC = props.virtualScrollContainer) === null || _props$virtualScrollC === void 0 ? void 0 : _props$virtualScrollC.call(props);
+        var stickyDivHeight = externalContainer ? externalContainer.clientHeight - stickyTopOffset : undefined;
+        return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          style: {
+            position: 'relative',
+            height: virtualInfo.scrollHeight
+          },
+          children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+            ref: virtualInfo.externalStickyRef,
+            style: {
+              position: 'sticky',
+              top: stickyTopOffset,
+              height: stickyDivHeight,
+              overflowX: 'auto',
+              overflowY: 'hidden'
+            },
+            children: [!props.hideHeader && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+              style: {
+                position: 'relative',
+                zIndex: 1,
+                marginTop: props.sticky ? 0 : -virtualInfo.headerOffset
+              },
+              children: $headTable
+            }), !!((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+              style: objectSpread2_default()(objectSpread2_default()({}, tableStyle), {}, {
+                transform: virtualInfo.translateStyle,
+                willChange: 'transform'
+              }),
+              ref: tbodyRef,
+              children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(tbody, objectSpread2_default()(objectSpread2_default()({}, bodyCommonProps), {}, {
+                currentRowIndex: virtualInfo.startIndex,
+                currentColIndex: currentColIndex,
+                data: virtualInfo.data,
+                originData: treeData,
+                rowSpanIndexArray: (_virtualInfo$rowSpanI = virtualInfo.rowSpanInfo) === null || _virtualInfo$rowSpanI === void 0 ? void 0 : _virtualInfo$rowSpanI.rowSpanIndexArray,
+                setRowHeight: virtualInfo.setRowHeight,
+                scrolling: scrolling
+              }))]
+            }), $empty]
+          })
+        });
+      }
       return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
         children: [renderHeadMirrorScroller(), showStickyHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, stickyProps), {}, {
           children: $headTable
@@ -69059,7 +69204,7 @@ function Table(props) {
           isEmpty: !!$empty,
           tableRef: tableRef,
           setFakeVirtual: scrollAble ? undefined : setFakeVirtual,
-          children: [!props.hideHeader && !props.sticky && $headTable, !!((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+          children: [!props.hideHeader && !props.sticky && $headTable, !!((_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
             style: objectSpread2_default()(objectSpread2_default()({}, tableStyle), {}, {
               transform: virtualInfo.translateStyle
             }),
@@ -69069,7 +69214,7 @@ function Table(props) {
               currentColIndex: currentColIndex,
               data: virtualInfo.data,
               originData: treeData,
-              rowSpanIndexArray: (_virtualInfo$rowSpanI = virtualInfo.rowSpanInfo) === null || _virtualInfo$rowSpanI === void 0 ? void 0 : _virtualInfo$rowSpanI.rowSpanIndexArray,
+              rowSpanIndexArray: (_virtualInfo$rowSpanI2 = virtualInfo.rowSpanInfo) === null || _virtualInfo$rowSpanI2 === void 0 ? void 0 : _virtualInfo$rowSpanI2.rowSpanIndexArray,
               setRowHeight: virtualInfo.setRowHeight,
               scrolling: scrolling
             }))]
@@ -75770,7 +75915,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.9.14'
+  version: '3.9.15-beta.1'
 });
 }();
 /******/ 	return __webpack_exports__;