shineout 3.7.0-beta.25 → 3.7.0-beta.26

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.7.0-beta.25'
+  version: '3.7.0-beta.26'
 };

package/dist/shineout.js

@@ -12226,7 +12226,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.7.0-beta.25');
+/* harmony default export */ var version = ('3.7.0-beta.26');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -26018,6 +26018,11 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
       overflowX: 'hidden'
     }
   },
+  emptyHeader: {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1
+  },
   emptyWrapper: {
     minHeight: '170px',
     width: '100%',
@@ -60804,19 +60809,16 @@ var scroll_table_Scroll = function Scroll(props) {
   var scrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var wrapperRef = useForkRef(scrollRef, props.wrapperRef);
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
-      timer: null,
-      isMouseDown: false
+      isMouseDown: false,
+      lastTableHeight: 0
     }),
     context = _useRef.current;
-  // TODO: keepScrollTop考虑做成Table的新feat?
   var _props$scrollHeight = props.scrollHeight,
     scrollHeight = _props$scrollHeight === void 0 ? 0 : _props$scrollHeight,
     _props$scrollWidth = props.scrollWidth,
     scrollWidth = _props$scrollWidth === void 0 ? 0 : _props$scrollWidth,
     _props$defaultHeight = props.defaultHeight,
-    defaultHeight = _props$defaultHeight === void 0 ? 0 : _props$defaultHeight,
-    _props$keepScrollTop = props.keepScrollTop,
-    keepScrollTop = _props$keepScrollTop === void 0 ? false : _props$keepScrollTop;
+    defaultHeight = _props$defaultHeight === void 0 ? 0 : _props$defaultHeight;
   var _useResize = useResize({
       targetRef: containerRef,
       timer: 100
@@ -60842,12 +60844,14 @@ var scroll_table_Scroll = function Scroll(props) {
     overflow: props.isScrollX ? 'initial' : 'hidden',
     top: 0
   };
-
-  // 当滚动容器的高度为 0 时，paddingTop 为 0，避免滚动条抖动现象
-  var paddingTop = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
-    if (keepScrollTop) return Math.max(0, Math.floor(scrollHeight - height));
-    return height === 0 ? 0 : Math.max(0, Math.floor(scrollHeight - height));
-  }, [scrollHeight, height]);
+  var paddingTop = Math.max(0, Math.floor(scrollHeight - height));
+  if (props.isEmpty) {
+    paddingTop = 0;
+    Object.assign(scrollerStyle, {
+      display: 'flex',
+      flexDirection: 'column'
+    });
+  }
   var placeStyle = {
     paddingTop: paddingTop,
     width: scrollWidth,
@@ -60899,21 +60903,45 @@ var scroll_table_Scroll = function Scroll(props) {
       scrollRef.current.scrollTop += scrollTop;
     }
   });
+  var scrollRoleProps = objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
+    role: 'scroll'
+  })), {}, {
+    style: scrollerStyle,
+    onScroll: handleScroll,
+    ref: wrapperRef,
+    onMouseDown: function onMouseDown() {
+      context.isMouseDown = true;
+    },
+    onMouseUp: function onMouseUp() {
+      context.isMouseDown = false;
+    }
+  });
+
+  // 非定高的Table但依旧采用了virtual渲染方式，需要渲染出全部的data
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (!props.tableRef.current) return;
+    var rootTableHeight = props.tableRef.current.clientHeight;
+    // 判断Table的根节点dom高度是否发生变化，如果变化了，则是因为不定高，被内部元素撑高了导致的
+    if (paddingTop > 0 && context.lastTableHeight > 0 && context.lastTableHeight !== rootTableHeight) {
+      props.setFakeVirtual(true);
+      context.lastTableHeight = 0;
+    } else {
+      context.lastTableHeight = rootTableHeight;
+    }
+  }, [paddingTop]);
+  if (props.isEmpty) {
+    return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, scrollRoleProps), {}, {
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        style: {
+          width: scrollWidth
+        }
+      }), props.children]
+    }));
+  }
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     className: props.className,
     style: props.style,
-    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
-      role: 'scroll'
-    })), {}, {
-      style: scrollerStyle,
-      onScroll: handleScroll,
-      ref: wrapperRef,
-      onMouseDown: function onMouseDown() {
-        context.isMouseDown = true;
-      },
-      onMouseUp: function onMouseUp() {
-        context.isMouseDown = false;
-      },
+    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, scrollRoleProps), {}, {
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
         role: 'scroll-container'
       })), {}, {
@@ -61425,7 +61453,6 @@ var useTableLayout = function useTableLayout(props) {
     width: tableWidth,
     shouldLastColAuto: props.columnResizable && !adjust,
     scrollWidth: scrollWidth,
-    // maxScrollLeft: scrollWidth - context.clientWidth,
     resizeFlag: resizeFlag
   };
 };
@@ -62021,7 +62048,7 @@ var useTableVirtual = function useTableVirtual(props) {
   var renderData = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     if (props.disabled) return props.data;
     return toConsumableArray_default()(props.data).slice(startIndex, startIndex + finalRowsInView);
-  }, [props.data, startIndex, finalRowsInView]);
+  }, [props.data, props.disabled, startIndex, finalRowsInView]);
   var translateStyle = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     var t = innerTop + offsetY;
     if (t < 0) {
@@ -63766,6 +63793,7 @@ var emptyRef = {
   var tableClasses = props === null || props === void 0 || (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$table = _props$jssStyle.table) === null || _props$jssStyle$table === void 0 ? void 0 : _props$jssStyle$table.call(_props$jssStyle);
   var tbodyRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var theadRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var theadIdRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)("thead-container-".concat(generateUUID()));
   var tfootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var scrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var headMirrorScrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -63775,6 +63803,10 @@ var emptyRef = {
     _useState2 = slicedToArray_default()(_useState, 2),
     scrolling = _useState2[0],
     setScrolling = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState4 = slicedToArray_default()(_useState3, 2),
+    fakeVirtual = _useState4[0],
+    setFakeVirtual = _useState4[1];
   var browserScrollbarWidth = useScrollbarWidth();
   if (props.fixed) {
     table_devUseWarning.deprecated('fixed', 'virtual', 'Table');
@@ -63801,7 +63833,7 @@ var emptyRef = {
       scrollingTimer: null
     }),
     context = _useRef.current;
-  var virtual = ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
+  var virtual = !fakeVirtual && ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
 
   // 虚拟列表高度另外计算
   var _useResize = useResize({
@@ -63954,11 +63986,14 @@ var emptyRef = {
     theadAndTfootHeight: context.theadAndTfootHeight
   });
   var syncHeaderScroll = usePersistFn(function (left) {
-    var _theadRef$current2;
+    var _tableRef$current;
     if (props.hideHeader || !props.sticky) return;
-    if (theadRef && theadRef !== null && theadRef !== void 0 && theadRef.current && theadRef !== null && theadRef !== void 0 && (_theadRef$current2 = theadRef.current) !== null && _theadRef$current2 !== void 0 && _theadRef$current2.parentElement) {
-      theadRef.current.parentElement.scrollLeft = left;
-    }
+
+    // why use querySelectorAll: thead经历了Sticky组件的渲染再回来时，theadRef就丢失了
+    var theads = tableRef === null || tableRef === void 0 || (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelectorAll("[data-soui-role=".concat(theadIdRef.current, "]"));
+    theads === null || theads === void 0 || theads.forEach(function (item) {
+      item.scrollLeft = left;
+    });
   });
 
   // 简单表格的滚动事件
@@ -64019,6 +64054,7 @@ var emptyRef = {
     }
     return null;
   };
+  var $empty = renderEmpty();
   var renderTable = function renderTable() {
     var _props$summary, _sticky$top, _props$data3;
     var Group = /*#__PURE__*/(0,jsx_runtime.jsx)(table_colgroup, {
@@ -64096,16 +64132,22 @@ var emptyRef = {
       target: sticky === null || sticky === void 0 ? void 0 : sticky.target,
       top: (_sticky$top = sticky === null || sticky === void 0 ? void 0 : sticky.top) !== null && _sticky$top !== void 0 ? _sticky$top : 0,
       css: sticky === null || sticky === void 0 ? void 0 : sticky.css,
-      parent: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current
+      parent: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current,
+      onChange: function onChange(isSticky) {
+        if (isSticky) {
+          var _scrollRef$current;
+          syncHeaderScroll(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollLeft) || 0);
+        }
+      }
     };
     var isRenderVirtualTable = virtual || props.sticky || !((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length);
-    var headWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, props.sticky && isScrollY && tableClasses.scrollY, 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 && tableClasses.scrollX);
     var footWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.footWrapper);
     var renderHeadMirrorScroller = function renderHeadMirrorScroller() {
-      var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+      var _scrollRef$current2, _scrollRef$current3, _scrollRef$current4;
       if (!props.showTopScrollbar) return null;
-      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth) || 0;
-      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollWidth) || 0;
+      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth) || 0;
+      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth) || 0;
       var mirrorScrollRefWidth = scrollRefWidth + scrollBarWidth;
       var showScroll = scrollRefScrollWidth > scrollRefWidth;
       // 开启了双滚，但是没有滚动条，不显示
@@ -64130,7 +64172,7 @@ var emptyRef = {
           ref: headMirrorScrollRef,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
             style: {
-              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth,
+              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.scrollWidth,
               height: 1
             }
           })
@@ -64138,10 +64180,10 @@ var emptyRef = {
       }));
     };
     var renderBottomMirrorScroller = function renderBottomMirrorScroller() {
-      var _scrollRef$current4, _scrollRef$current5, _scrollRef$current6;
+      var _scrollRef$current5, _scrollRef$current6, _scrollRef$current7;
       if (!props.showBottomScrollbar) return null;
-      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.clientWidth) || 0;
-      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.scrollWidth) || 0;
+      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.clientWidth) || 0;
+      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 ? void 0 : _scrollRef$current6.scrollWidth) || 0;
       var mirrorScrollRefWidth = scrollRefWidth + scrollBarWidth;
       var showScroll = scrollRefScrollWidth > scrollRefWidth;
       // 开启了双滚，但是没有滚动条，不显示
@@ -64169,15 +64211,18 @@ var emptyRef = {
           ref: bottomMirrorScrollRef,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
             style: {
-              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 ? void 0 : _scrollRef$current6.scrollWidth,
+              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current7 = scrollRef.current) === null || _scrollRef$current7 === void 0 ? void 0 : _scrollRef$current7.scrollWidth,
               height: 1
             }
           })
         })
       }));
     };
-    var $headTable = /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: headWrapperClass,
+    var $headTable = /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
+      className: headWrapperClass
+    }, getDataAttribute({
+      role: theadIdRef.current
+    })), {}, {
       children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
         style: {
           width: width
@@ -64185,11 +64230,12 @@ var emptyRef = {
         ref: theadRef,
         children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(thead, objectSpread2_default()({}, headCommonProps))]
       })
-    });
+    }));
     if (isRenderVirtualTable) {
       var _props$data4;
+      var showStickyHeader = !props.hideHeader && props.sticky;
       return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-        children: [renderHeadMirrorScroller(), !props.hideHeader && props.sticky && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, stickyProps), {}, {
+        children: [renderHeadMirrorScroller(), showStickyHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, stickyProps), {}, {
           children: $headTable
         })), /*#__PURE__*/(0,jsx_runtime.jsxs)(scroll_table, {
           style: {
@@ -64205,6 +64251,9 @@ var emptyRef = {
           defaultHeight: context.emptyHeight,
           isScrollY: isScrollY,
           isScrollX: isScrollX,
+          isEmpty: !!$empty,
+          tableRef: tableRef,
+          setFakeVirtual: setFakeVirtual,
           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: {
               width: width,
@@ -64226,7 +64275,7 @@ var emptyRef = {
               ref: tfootRef,
               children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(tfoot, objectSpread2_default()({}, footCommonProps))]
             })
-          }) : null, renderEmpty()]
+          }) : null, $empty]
         }), renderBottomMirrorScroller()]
       });
     }
@@ -64242,7 +64291,7 @@ var emptyRef = {
           ref: tbodyRef,
           children: [Group, !props.hideHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(thead, objectSpread2_default()({}, headCommonProps)), bodyCommonProps.data.length === 0 ? /*#__PURE__*/(0,jsx_runtime.jsx)(TbodyEmpty, {
             children: renderEmpty()
-          }) : /*#__PURE__*/(0,jsx_runtime.jsx)(tbody, objectSpread2_default()({}, bodyCommonProps)), /*#__PURE__*/(0,jsx_runtime.jsx)(tfoot, objectSpread2_default()({}, footCommonProps))]
+          }) : /*#__PURE__*/(0,jsx_runtime.jsx)(tbody, objectSpread2_default()({}, bodyCommonProps)), showFoot && /*#__PURE__*/(0,jsx_runtime.jsx)(tfoot, objectSpread2_default()({}, footCommonProps))]
         })
       }), renderBottomMirrorScroller()]
     });
@@ -64267,10 +64316,10 @@ var emptyRef = {
 
   // handle head and  foot scroll
   var handleHeaderWheel = usePersistFn(function (e) {
-    var _theadRef$current3;
+    var _theadRef$current2;
     var scrollEl = scrollRef.current;
     if (!scrollEl) return;
-    if (!(theadRef !== null && theadRef !== void 0 && (_theadRef$current3 = theadRef.current) !== null && _theadRef$current3 !== void 0 && _theadRef$current3.parentElement)) return;
+    if (!(theadRef !== null && theadRef !== void 0 && (_theadRef$current2 = theadRef.current) !== null && _theadRef$current2 !== void 0 && _theadRef$current2.parentElement)) return;
     var max = scrollEl.scrollWidth - scrollEl.clientWidth;
     var scrollLeft = scrollEl.scrollLeft + e.deltaX;
     if (scrollLeft === scrollEl.scrollLeft) {
@@ -64281,6 +64330,12 @@ var emptyRef = {
     scrollEl.scrollLeft = left;
     theadRef.current.parentElement.scrollLeft = left;
   });
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    var _scrollRef$current8;
+    if (!props.sticky || !scrollRef.current || !isScrollX) return;
+    // sticky场景下，从空数据到有数据切换时，同步一次滚动条的位置
+    syncHeaderScroll(((_scrollRef$current8 = scrollRef.current) === null || _scrollRef$current8 === void 0 ? void 0 : _scrollRef$current8.scrollLeft) || 0);
+  }, [isScrollX, props.sticky, $empty]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // 绑定 wheel 事件
     if (props.sticky && theadRef.current && theadRef.current.parentElement) {
@@ -70759,7 +70814,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.7.0-beta.25'
+  version: '3.7.0-beta.26'
 });
 }();
 /******/ 	return __webpack_exports__;