shineout 3.7.0-beta.7 → 3.7.0-beta.9

package/cjs/index.js

@@ -514,5 +514,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.7'
+  version: '3.7.0-beta.9'
 };

package/dist/shineout.js

@@ -12217,7 +12217,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.7');
+/* harmony default export */ var version = ('3.7.0-beta.9');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -60309,7 +60309,6 @@ var extractHeightValue = function extractHeightValue(num) {
   return undefined;
 };
 var scroll_table_Scroll = function Scroll(props) {
-  var _scrollRef$current, _scrollRef$current2;
   var containerRef = (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 wrapperRef = useForkRef(scrollRef, props.wrapperRef);
@@ -60340,10 +60339,7 @@ var scroll_table_Scroll = function Scroll(props) {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
-    // 原生css sticky机制根据最近的父元素的overflow来决定是否sticky
-    // isHeaderSticky: 这种场景非内滚的时候，设置scroll元素的overflow为initial
-    // isEmptyContent: 这种场景，把scroll元素的overflow设置为hidden,把overflow: auto转交给下面的container元素
-    overflow: props.isEmptyContent ? 'hidden' : props.isHeaderSticky && (scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === (scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight) ? 'initial' : 'auto',
+    overflow: 'auto',
     width: '100%'
   };
   var containerStyle = {
@@ -60352,9 +60348,7 @@ var scroll_table_Scroll = function Scroll(props) {
     display: 'flex',
     position: 'sticky',
     flexDirection: 'column',
-    top: 0,
-    // isEmptyContent: overflow设置为auto是为了让empty元素可以sticky left:0 生效
-    overflow: props.isEmptyContent ? 'auto' : undefined
+    top: 0
   };
 
   // 当滚动容器的高度为 0 时，paddingTop 为 0，避免滚动条抖动现象
@@ -60413,30 +60407,34 @@ var scroll_table_Scroll = function Scroll(props) {
       scrollRef.current.scrollTop += scrollTop;
     }
   });
-  return /*#__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.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
-      role: 'scroll-container'
+  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: containerStyle,
-      ref: containerRef,
-      onScroll: handleInnerScroll,
-      children: props.children
-    })), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      style: placeStyle,
-      children: "\xA0"
-    })]
-  }));
+      style: scrollerStyle,
+      onScroll: handleScroll,
+      ref: wrapperRef,
+      onMouseDown: function onMouseDown() {
+        context.isMouseDown = true;
+      },
+      onMouseUp: function onMouseUp() {
+        context.isMouseDown = false;
+      },
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
+        role: 'scroll-container'
+      })), {}, {
+        style: containerStyle,
+        ref: containerRef,
+        onScroll: handleInnerScroll,
+        children: props.children
+      })), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        style: placeStyle,
+        children: "\xA0"
+      })]
+    }))
+  });
 };
 /* harmony default export */ var scroll_table = (scroll_table_Scroll);
 ;// CONCATENATED MODULE: ../hooks/src/common/use-scrollbar-width/index.ts
@@ -63032,6 +63030,8 @@ var Tr = function Tr(props) {
 
 
 
+
+
 /* harmony default export */ var tbody = (function (props) {
   var _props$columns = props.columns,
     columns = _props$columns === void 0 ? [] : _props$columns,
@@ -63107,11 +63107,25 @@ var Tr = function Tr(props) {
       shouldCellUpdate: props.shouldCellUpdate
     }, trRenderKey);
   };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("tbody", {
-    children: (props.data || []).map(function (item, index) {
-      return renderRow(item, index);
-    })
-  });
+  var externalDependencies = typeof_default()(props.shouldCellUpdate) === 'object' && props.shouldCellUpdate.dependencies ? props.shouldCellUpdate.dependencies : [];
+  var updateFn = typeof_default()(props.shouldCellUpdate) === 'object' && 'update' in props.shouldCellUpdate ? props.shouldCellUpdate.update : props.shouldCellUpdate;
+  var $tbody = useMemo(function () {
+    return /*#__PURE__*/(0,jsx_runtime.jsx)("tbody", {
+      children: (props.data || []).map(function (item, index) {
+        return renderRow(item, index);
+      })
+    });
+  }, [props.data, currentIndex].concat(toConsumableArray_default()(externalDependencies)), updateFn ? function (prev, next) {
+    return prev.some(function (_, index) {
+      if (index === 0) {
+        return prev[index].some(function (item, idx) {
+          return updateFn(item, next[index][idx]);
+        });
+      }
+      return !shallowEqual(prev[index], next[index]);
+    }) || !props.scrolling;
+  } : undefined);
+  return $tbody;
 });
 ;// CONCATENATED MODULE: ../base/src/table/tfoot.tsx
 
@@ -63225,6 +63239,8 @@ function TbodyEmpty(_ref) {
 
 
 
+
+
 var table_excluded = ["data"];
 
 
@@ -63268,6 +63284,10 @@ var emptyRef = {
   var headMirrorScrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var bottomMirrorScrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var tableRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState2 = slicedToArray_default()(_useState, 2),
+    scrolling = _useState2[0],
+    setScrolling = _useState2[1];
   var browserScrollbarWidth = useScrollbarWidth();
   if (props.fixed) {
     table_devUseWarning.deprecated('fixed', 'virtual', 'Table');
@@ -63290,7 +63310,8 @@ var emptyRef = {
   };
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       emptyHeight: 0,
-      theadAndTfootHeight: 0
+      theadAndTfootHeight: 0,
+      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');
@@ -63439,6 +63460,12 @@ var emptyRef = {
     isRtl: isRtl,
     theadAndTfootHeight: context.theadAndTfootHeight
   });
+  var syncHeaderScroll = usePersistFn(function (left) {
+    var _theadRef$current2;
+    if (props.hideHeader || !props.sticky) return;
+    if (!(theadRef !== null && theadRef !== void 0 && (_theadRef$current2 = theadRef.current) !== null && _theadRef$current2 !== void 0 && _theadRef$current2.parentElement)) return;
+    theadRef.current.parentElement.scrollLeft = left;
+  });
 
   // 简单表格的滚动事件
   var handleBodyScroll = usePersistFn(function (e) {
@@ -63458,6 +63485,7 @@ var emptyRef = {
       var y = Math.min(target.scrollTop / maxHeight, 1);
       props.onScroll(x, y, target.scrollLeft, target.scrollTop);
     }
+    syncHeaderScroll(target.scrollLeft);
   });
 
   // 虚拟表格的滚动事件
@@ -63473,6 +63501,14 @@ var emptyRef = {
     if (props.onScroll && typeof props.onScroll === 'function') {
       props.onScroll(info.x, info.y, info.scrollLeft, info.scrollTop);
     }
+    syncHeaderScroll(info.scrollLeft);
+    if (context.scrollingTimer) {
+      clearTimeout(context.scrollingTimer);
+    }
+    setScrolling(true);
+    context.scrollingTimer = setTimeout(function () {
+      setScrolling(false);
+    }, 100);
   });
   var renderEmpty = function renderEmpty() {
     var _props$data2;
@@ -63647,30 +63683,41 @@ var emptyRef = {
         })
       }));
     };
+    var $headTable = /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+      style: {
+        width: width
+      },
+      ref: theadRef,
+      children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(thead, objectSpread2_default()({}, headCommonProps))]
+    });
     if (isRenderVirtualTable) {
-      var _props$data4, _props$data5;
+      var _props$data4;
       return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-        children: [renderHeadMirrorScroller(), /*#__PURE__*/(0,jsx_runtime.jsxs)(scroll_table, {
+        children: [renderHeadMirrorScroller(), !props.hideHeader && props.sticky && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, stickyProps), {}, {
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+            className: headWrapperClass,
+            style: {
+              overflow: 'hidden'
+            },
+            children: $headTable
+          })
+        })), /*#__PURE__*/(0,jsx_runtime.jsxs)(scroll_table, {
+          style: {
+            display: 'flex',
+            minWidth: 0,
+            minHeight: 0,
+            flex: 1
+          },
           wrapperRef: scrollRef,
           scrollWidth: width || 1,
           scrollHeight: virtual ? virtualInfo.scrollHeight : tbodyHeight,
           onScroll: handleVirtualScroll,
           defaultHeight: context.emptyHeight,
           isScrollY: isScrollY,
-          isEmptyContent: !((_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length),
-          isHeaderSticky: stickyProps === null || stickyProps === void 0 ? void 0 : stickyProps.css,
-          children: [!props.hideHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, props.sticky ? stickyProps : {}), {}, {
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-              className: headWrapperClass,
-              children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-                style: {
-                  width: width
-                },
-                ref: theadRef,
-                children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(thead, objectSpread2_default()({}, headCommonProps))]
-              })
-            })
-          })), !!((_props$data5 = props.data) !== null && _props$data5 !== void 0 && _props$data5.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+          children: [!props.hideHeader && !props.sticky && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+            className: headWrapperClass,
+            children: $headTable
+          }), !!((_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
             style: {
               width: width,
               transform: virtualInfo.translateStyle
@@ -63679,7 +63726,8 @@ var emptyRef = {
             children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(tbody, objectSpread2_default()(objectSpread2_default()({}, bodyCommonProps), {}, {
               currentIndex: virtualInfo.startIndex,
               data: virtualInfo.data,
-              setRowHeight: virtualInfo.setRowHeight
+              setRowHeight: virtualInfo.setRowHeight,
+              scrolling: scrolling
             }))]
           }), showFoot ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
             className: footWrapperClass,
@@ -63728,6 +63776,36 @@ var emptyRef = {
       align: "right"
     }, pagination), paginationInfo));
   };
+
+  // handle head and  foot scroll
+  var handleHeaderWheel = usePersistFn(function (e) {
+    var _theadRef$current3;
+    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;
+    var max = scrollEl.scrollWidth - scrollEl.clientWidth;
+    var scrollLeft = scrollEl.scrollLeft + e.deltaX;
+    if (scrollLeft === scrollEl.scrollLeft) {
+      return;
+    }
+    e.preventDefault();
+    var left = Math.min(Math.max(scrollLeft, 0), max);
+    scrollEl.scrollLeft = left;
+    theadRef.current.parentElement.scrollLeft = left;
+  });
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    // 绑定 wheel 事件
+    if (props.sticky && theadRef.current && theadRef.current.parentElement) {
+      theadRef.current.parentElement.addEventListener('wheel', handleHeaderWheel, {
+        passive: false
+      });
+    }
+    return function () {
+      if (props.sticky && theadRef.current && theadRef.current.parentElement) {
+        theadRef.current.parentElement.removeEventListener('wheel', handleHeaderWheel);
+      }
+    };
+  }, [theadRef.current, props.sticky, isScrollY]);
   var getRenderIndexByData = function getRenderIndexByData(data) {
     var originKey = typeof data === 'string' ? data : getKey(props.keygen, data);
     var index = treeData.findIndex(function (item) {
@@ -63763,7 +63841,7 @@ var emptyRef = {
   });
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
-      className: classnames_default()(tableWrapperClass, floatLeft && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.floatLeft), floatRight && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.floatRight), props.sticky && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.sticky)),
+      className: classnames_default()(tableWrapperClass, defineProperty_default()(defineProperty_default()(defineProperty_default()({}, tableClasses.sticky, props.sticky), tableClasses.floatLeft, floatLeft), tableClasses.floatRight, floatRight)),
       style: objectSpread2_default()({
         height: defaultHeight
       }, props.style)
@@ -64482,7 +64560,7 @@ var TabsHeader = function TabsHeader(props) {
 
 
 
-var tabs_excluded = ["jssStyle", "align", "children", "shape", "position", "lazy", "autoFill", "hideSplit", "collapsible", "defaultCollapsed", "onChange", "extra", "border", "splitColor", "tabBarExtraContent", "background", "activeBackground", "inactiveBackground", "defaultActive", "tabBarStyle", "color", "sticky", "allowNonPanel", "className"];
+var tabs_excluded = ["jssStyle", "align", "children", "shape", "position", "lazy", "autoFill", "hideSplit", "collapsible", "defaultCollapsed", "onChange", "extra", "border", "splitColor", "tabBarExtraContent", "background", "activeBackground", "inactiveBackground", "defaultActive", "tabBarStyle", "color", "sticky", "allowNonPanel", "renderTabsHeader", "className"];
 
 
 
@@ -64539,6 +64617,7 @@ var Tabs = function Tabs(props) {
     color = props.color,
     sticky = props.sticky,
     allowNonPanel = props.allowNonPanel,
+    renderTabsHeader = props.renderTabsHeader,
     tabsClassName = props.className,
     rest = objectWithoutProperties_default()(props, tabs_excluded);
   var shape = shapeProps && shapeProps !== 'bordered' ? shapeProps : 'card';
@@ -64699,10 +64778,18 @@ var Tabs = function Tabs(props) {
           className: classnames_default()(stickyClassName, sticky.className)
         });
       }
+      if (renderTabsHeader) {
+        return renderTabsHeader( /*#__PURE__*/(0,jsx_runtime.jsx)(src_sticky_sticky, objectSpread2_default()(objectSpread2_default()({}, stickyProps), {}, {
+          children: header
+        })), props);
+      }
       return /*#__PURE__*/(0,jsx_runtime.jsx)(src_sticky_sticky, objectSpread2_default()(objectSpread2_default()({}, stickyProps), {}, {
         children: header
       }));
     }
+    if (renderTabsHeader) {
+      return renderTabsHeader(header, props);
+    }
     return header;
   };
   var renderTabs = function renderTabs() {
@@ -70114,7 +70201,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.7.0-beta.7'
+  version: '3.7.0-beta.9'
 });
 }();
 /******/ 	return __webpack_exports__;