shineout 3.8.0-beta.17 → 3.8.0-beta.19

package/README-zh_CN.md

@@ -11,7 +11,7 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/shineout"><img src="https://img.shields.io/npm/v/shineout.svg?style=flat-square"></a>
   <a href="https://www.npmjs.com/package/shineout"><img src="https://img.shields.io/npm/dm/shineout.svg?style=flat-square"></a>
-  <img src="https://img.shields.io/badge/React-%3E%3D16.8.0-green.svg?style=flat-square">
+  <img src="https://img.shields.io/badge/React-%3E%3D16.14.0-green.svg?style=flat-square">
 </p>
 
 ## ✨ 特性

package/README.md

@@ -11,7 +11,7 @@ English | [简体中文](./README-zh_CN.md)
 <p align="center">
   <a href="https://www.npmjs.com/package/shineout"><img src="https://img.shields.io/npm/v/shineout.svg?style=flat-square"></a>
   <a href="https://www.npmjs.com/package/shineout"><img src="https://img.shields.io/npm/dm/shineout.svg?style=flat-square"></a>
-  <img src="https://img.shields.io/badge/React-%3E%3D16.8.0-green.svg?style=flat-square">
+  <img src="https://img.shields.io/badge/React-%3E%3D16.14.0-green.svg?style=flat-square">
 </p>
 
 ## ✨ Features

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.8.0-beta.17'
+  version: '3.8.0-beta.19'
 };

package/dist/shineout.js

@@ -12234,7 +12234,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.8.0-beta.17');
+/* harmony default export */ var version = ('3.8.0-beta.19');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -24084,7 +24084,6 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
     height: 32,
     padding: "".concat(src.selectHeaderPaddingY, " ").concat(src.selectHeaderPaddingX),
     borderBottom: "1px solid ".concat(src.selectHeaderBorderColor),
-    marginBottom: 4,
     '& $columnsCheckbox': {
       marginRight: 0,
       marginLeft: 4,
@@ -26356,7 +26355,7 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
         boxSizing: 'border-box',
         lineHeight: src.lineHeightDynamic,
         '$bordered&': {
-          '&::after': {
+          '&:not(:last-child)::after': {
             content: '""',
             position: 'absolute',
             zIndex: cellBaseIndex,
@@ -26700,6 +26699,9 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
       color: src.tableFilterIconActiveColor
     }
   },
+  filterOpened: {
+    background: src.buttonSecondaryHoverBackgroundColor
+  },
   filterContainer: {
     minWidth: '120px'
   },
@@ -26712,7 +26714,19 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
   filterBody: {
     padding: "".concat(src.tableFilterBodyPaddingY, " ").concat(src.tableFilterBodyPaddingX),
     maxHeight: '300px',
-    overflow: 'auto'
+    overflow: 'auto',
+    // 特调Tree在Table filter中样式，以满足设计要求
+    '& [class*=tree-content-wrapper]': {
+      paddingTop: 1,
+      paddingBottom: 1
+    },
+    '&& [class*=tree-checkbox]': {
+      alignSelf: 'center'
+    },
+    '& [class*=tree-text]': {
+      paddingTop: 5,
+      paddingBottom: 5
+    }
   },
   filterFooter: {
     display: 'flex',
@@ -30518,20 +30532,20 @@ var usePopup = function usePopup(props) {
     }
   };
   var handleMouseEnter = use_persist_fn(function (e) {
-    var _targetEvents$onMouse, _targetRef$current;
+    var _targetEvents$onMouse, _targetRef$current, _popupRef$current2;
     targetEvents === null || targetEvents === void 0 || (_targetEvents$onMouse = targetEvents.onMouseEnter) === null || _targetEvents$onMouse === void 0 || _targetEvents$onMouse.call(targetEvents, e);
     if (trigger !== 'hover') return;
     var isParentContainsCurrent = (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.contains(e.target);
-    if (isParentContainsCurrent) {
+    if (isParentContainsCurrent || popupRef !== null && popupRef !== void 0 && (_popupRef$current2 = popupRef.current) !== null && _popupRef$current2 !== void 0 && _popupRef$current2.contains(e.target)) {
       handleHoverToggle(true);
     }
   });
   var handleMouseLeave = use_persist_fn(function (e) {
-    var _targetEvents$onMouse2, _popupRef$current2;
+    var _targetEvents$onMouse2, _popupRef$current3;
     targetEvents === null || targetEvents === void 0 || (_targetEvents$onMouse2 = targetEvents.onMouseLeave) === null || _targetEvents$onMouse2 === void 0 || _targetEvents$onMouse2.call(targetEvents, e);
     if (trigger !== 'hover') return;
     // @ts-ignore
-    if (e.relatedTarget instanceof HTMLElement && (_popupRef$current2 = popupRef.current) !== null && _popupRef$current2 !== void 0 && _popupRef$current2.contains(e.relatedTarget)) {
+    if (e.relatedTarget instanceof HTMLElement && (_popupRef$current3 = popupRef.current) !== null && _popupRef$current3 !== void 0 && _popupRef$current3.contains(e.relatedTarget)) {
       return;
     }
     handleHoverToggle(false);
@@ -31188,6 +31202,23 @@ var getCurrentCSSZoom = function getCurrentCSSZoom() {
 //     height: rect.height * zoomRatio,
 //   }
 // }
+
+var getScrollPosition = function getScrollPosition(element) {
+  if (!element) return {
+    scrollTop: 0,
+    scrollLeft: 0
+  };
+  if (element === document.documentElement || element === document.body) {
+    return {
+      scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
+      scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
+    };
+  }
+  return {
+    scrollTop: element.scrollTop,
+    scrollLeft: element.scrollLeft
+  };
+};
 ;// CONCATENATED MODULE: ../hooks/src/common/use-position-style/index.ts
 
 
@@ -31444,17 +31475,18 @@ var usePositionStyle = function usePositionStyle(config) {
     };
   };
   var getAbsoluteStyle = function getAbsoluteStyle(position) {
-    var _scrollElRef$current, _scrollElRef$current2, _scrollElRef$current3;
+    var _scrollElRef$current;
     if (!parentElRef.current) return {
       style: hideStyle
     };
     var rect = context.parentRect;
     var needCheck = !show || !shallow_equal(context.prevParentPosition, parentElNewPosition);
-    var scrollTop = (scrollElRef === null || scrollElRef === void 0 || (_scrollElRef$current = scrollElRef.current) === null || _scrollElRef$current === void 0 ? void 0 : _scrollElRef$current.scrollTop) || 0;
-    var scrollLeft = (scrollElRef === null || scrollElRef === void 0 || (_scrollElRef$current2 = scrollElRef.current) === null || _scrollElRef$current2 === void 0 ? void 0 : _scrollElRef$current2.scrollLeft) || 0;
-    if (needCheck && scrollElRef !== null && scrollElRef !== void 0 && scrollElRef.current && (_scrollElRef$current3 = scrollElRef.current) !== null && _scrollElRef$current3 !== void 0 && _scrollElRef$current3.contains(parentElRef.current)) {
-      var _scrollElRef$current4;
-      var visibleRect = ((_scrollElRef$current4 = scrollElRef.current) === null || _scrollElRef$current4 === void 0 ? void 0 : _scrollElRef$current4.getBoundingClientRect()) || {};
+    var _getScrollPosition = getScrollPosition(scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current),
+      scrollTop = _getScrollPosition.scrollTop,
+      scrollLeft = _getScrollPosition.scrollLeft;
+    if (needCheck && scrollElRef !== null && scrollElRef !== void 0 && scrollElRef.current && (_scrollElRef$current = scrollElRef.current) !== null && _scrollElRef$current !== void 0 && _scrollElRef$current.contains(parentElRef.current)) {
+      var _scrollElRef$current2;
+      var visibleRect = ((_scrollElRef$current2 = scrollElRef.current) === null || _scrollElRef$current2 === void 0 ? void 0 : _scrollElRef$current2.getBoundingClientRect()) || {};
       if (rect.bottom < visibleRect.top || rect.top > visibleRect.bottom + scrollTop || rect.right < visibleRect.left || rect.left > visibleRect.right + scrollLeft) {
         return {
           style: hideStyle
@@ -31528,7 +31560,9 @@ var usePositionStyle = function usePositionStyle(config) {
     }
 
     // 当父元素的滚动容器滚动时，判断是否需要更新弹出层位置，包括是否隐藏弹出层（通过hideStyle隐藏，不是show状态）
-    context.prevParentPosition = parentElNewPosition;
+    if (show) {
+      context.prevParentPosition = parentElNewPosition;
+    }
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(updateStyle, [show, position, absolute, updateKey, fixedWidth, parentElNewPosition, popupElSize]);
   return {
@@ -36637,9 +36671,11 @@ function escapeRegExp() {
   timeOfDayValues: ['上午', '下午'],
   ok: '确定',
   cancel: '取消',
+  reset: '重置',
   noData: '暂无数据',
   selectAll: '全选',
   loading: '加载中...',
+  searchPlaceholder: '在筛选项中搜索',
   rules: {
     required: {
       array: '{title} 不能为空',
@@ -36703,9 +36739,11 @@ function escapeRegExp() {
   timeOfDayValues: ['a.m.', 'p.m.'],
   ok: 'Ok',
   cancel: 'Cancel',
+  reset: 'Reset',
   noData: 'Data not found',
   selectAll: 'Select All',
   loading: 'loading...',
+  searchPlaceholder: 'Search in filter options',
   rules: {
     required: {
       array: 'Please select {title}',
@@ -39720,9 +39758,9 @@ var useTree = function useTree(props) {
     var _context$value;
     if (mode !== MODE.MODE_0) return;
     (_context$value = context.value) === null || _context$value === void 0 || _context$value.forEach(function (id) {
-      var _ref3 = context.pathMap.get(id),
-        children = _ref3.children;
-      if (children.length) {
+      var node = context.pathMap.get(id);
+      var children = node === null || node === void 0 ? void 0 : node.children;
+      if (children && children.length) {
         var noCheckedChildren = children.filter(function (cid) {
           var _context$value2;
           return !((_context$value2 = context.value) !== null && _context$value2 !== void 0 && _context$value2.includes(cid));
@@ -40206,7 +40244,8 @@ var VirtualList = function VirtualList(props) {
       preIndex: null,
       topTimer: null,
       rateTimer: null,
-      shouldUpdateHeight: true
+      shouldUpdateHeight: true,
+      prevWrapperRefHeight: 0
     }),
     context = _useRef.current;
   var getContentHeight = function getContentHeight(index) {
@@ -40366,11 +40405,14 @@ var VirtualList = function VirtualList(props) {
     context.preIndex = startIndex;
   }, [startIndex]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
-    if (keepScrollHeight) return;
+    var _wrapperRef$current2;
+    var currentWrapperRefHeight = ((_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.clientHeight) || 0;
+    if (keepScrollHeight && currentWrapperRefHeight === context.prevWrapperRefHeight) return;
     if (keepScrollTop) return;
     // 数据变化的时候清空掉 preIndex, 如果之前有缓存的index, setRowHeight 会有问题
     setTop(0);
     setStartIndex(0);
+    context.prevWrapperRefHeight = currentWrapperRefHeight;
     return function () {
       context.preIndex = null;
     };
@@ -41540,25 +41582,44 @@ function getResetMore(onFilter, container, doms) {
   var hideMargin = parsePxToNumber(hideElStyle.marginLeft) + parsePxToNumber(hideElStyle.marginRight);
   var num = 0;
   var sumWidth = 0;
-  for (var i = 0; i < doms.length; i++) {
-    var _item2 = doms[i];
-    var itemStyle = getComputedStyle(_item2);
-    var itemWidth = _item2.offsetWidth + parsePxToNumber(itemStyle.marginLeft) + parsePxToNumber(itemStyle.marginRight);
-    sumWidth += itemWidth;
-    var moreWidth = 0;
-    var resetNum = items.length - 1 - i;
-    if (resetNum > 0) {
-      var reset = "+".concat(resetNum);
-      hideEl.childNodes[0].innerText = reset;
-      moreWidth = hideEl.offsetWidth + hideMargin;
-    }
-    if (sumWidth > contentWidth - moreWidth) {
-      num = i;
-      break;
-    }
+  var itemWidthArr = items.map(function (item) {
+    var itemStyle = getComputedStyle(item);
+    var itemLen = item.offsetWidth + parsePxToNumber(itemStyle.marginLeft) + parsePxToNumber(itemStyle.marginRight);
+    sumWidth += itemLen;
+    return itemLen;
+  });
+  if (sumWidth <= contentWidth) {
     num = -1;
+  } else {
+    var len = 0;
+    for (var i = 0; i < itemWidthArr.length; i++) {
+      var itemLen = itemWidthArr[i];
+      // number length
+      var resetNum = items.length - 1 - i;
+      var moreWidth = void 0;
+      if (resetNum <= 0) {
+        moreWidth = 0;
+      } else {
+        var reset = "+".concat(resetNum);
+        hideEl.childNodes[0].innerText = reset;
+        // (+num) width
+        moreWidth = hideEl.offsetWidth + hideMargin;
+      }
+      len += itemLen;
+      if (len > contentWidth - moreWidth) {
+        break;
+      }
+      num += 1;
+      if (i === items.length - 1) {
+        // not show more
+        num = -1;
+      }
+    }
+  }
+  // at least show one
+  if (num === 0 && itemWidthArr[0]) {
+    num = 1;
   }
-  ;
   return num;
 }
 var More = function More(props) {
@@ -42695,8 +42756,8 @@ var Cascader = function Cascader(props0) {
     }
   }, [data]);
 
-  // 修复外部受控打开的场景下，从外部修改value导致的面板勾选情况没有及时同步
-  if (openProp && !shallowEqual(value, datum.getValue())) {
+  // 修复外部受控打开或renderOptionList做全选的场景下，从外部修改value导致的面板勾选情况没有及时同步
+  if ((openProp || props.renderOptionList) && !shallowEqual(value, datum.getValue())) {
     datum.setValue(value);
   }
   ;
@@ -42705,9 +42766,6 @@ var Cascader = function Cascader(props0) {
     datum.setValue(value);
     if (!open) return;
     updatePathByValue();
-    if (props.renderOptionList) {
-      updatePath();
-    }
   }, [value, open]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (filterText !== undefined) {
@@ -46122,7 +46180,9 @@ var useTime = function useTime(props) {
     _props$secondStep = props.secondStep,
     secondStep = _props$secondStep === void 0 ? 1 : _props$secondStep,
     staticMin = props.staticMin,
-    staticMax = props.staticMax;
+    staticMax = props.staticMax,
+    position = props.position,
+    rangeDate = props.rangeDate;
   var min = util.resetTimeByFormat(mi, format, options);
   var max = util.resetTimeByFormat(ma, format, options);
   var current = props.value || util.newDate(undefined, options);
@@ -46148,7 +46208,7 @@ var useTime = function useTime(props) {
       disabledTime = props.disabledTime;
     if (disabledTime) {
       var _time = util.format(date, util.TIME_FORMAT, options);
-      if (typeof disabledTime === 'function') return disabledTime(_time);
+      if (typeof disabledTime === 'function') return disabledTime(_time, position, rangeDate === null || rangeDate === void 0 ? void 0 : rangeDate[0], rangeDate === null || rangeDate === void 0 ? void 0 : rangeDate[1]);
       return disabledTime === _time;
     }
     var isDis = disabled && typeof disabled === 'function' ? disabled(date) : false;
@@ -46499,7 +46559,9 @@ var Time = function Time(props) {
       disabledTime: props.disabledTime,
       hourStep: props.hourStep,
       minuteStep: props.minuteStep,
-      secondStep: props.secondStep
+      secondStep: props.secondStep,
+      position: props.position,
+      rangeDate: props.rangeDate
     }),
     func = _useTimePick.func,
     times = _useTimePick.times;
@@ -51015,7 +51077,7 @@ var useForm = function useForm(props) {
     var _props$onChange;
     var newValue = typeof change === 'function' ? utils_immer_produce(context.value, change) : change;
     context.value = newValue;
-    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, deepClone(context.value));
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, newValue);
   });
   var scrollToField = use_persist_fn(function (name) {
     var _document;
@@ -55558,7 +55620,8 @@ var VirtualNode = function VirtualNode(props) {
     className: rootClass,
     dir: config.direction,
     style: {
-      paddingLeft: level * indent
+      paddingLeft: level * indent,
+      height: props.lineHeight
     },
     children: [$indents, /*#__PURE__*/(0,jsx_runtime.jsx)(tree_content, {
       virtual: true,
@@ -55842,7 +55905,8 @@ var TreeVirtual = function TreeVirtual(props) {
       onNodeClick: onNodeClick,
       onToggle: onToggle,
       onChange: onChange,
-      size: datum.size
+      size: datum.size,
+      lineHeight: lineHeight
     }, id);
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(virtual_scroll_list, {
@@ -56525,7 +56589,8 @@ var ColumnsList = function ColumnsList(props) {
       colNum: columns,
       lineHeight: lineHeight,
       rowsInView: itemsInView,
-      renderItem: renderItem
+      renderItem: renderItem,
+      paddingY: 4
     });
   };
   var renderSelectAll = function renderSelectAll() {
@@ -56933,7 +56998,8 @@ function Select(props0) {
     if (hideCreate) {
       // optionListRef.current?.hoverMove(filterData.length - 1, true);
     }
-    onFilter === null || onFilter === void 0 || onFilter(trim ? text.trim() : text, from);
+    // onFilter?.(trim ? text.trim() : text, from);
+    onFilter === null || onFilter === void 0 || onFilter(text.trim(), from);
   };
   var handleOptionClick = function handleOptionClick() {
     if (multiple) return;
@@ -63684,8 +63750,11 @@ var useTableGroup = function useTableGroup(props) {
 
 
 
+
 var FilterFooter = function FilterFooter(props) {
   var tableClasses = props.tableClasses;
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("footer", {
     className: tableClasses.filterFooter,
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)(base_src_button_button, {
@@ -63694,18 +63763,21 @@ var FilterFooter = function FilterFooter(props) {
       size: "small",
       onClick: props.onReset,
       disabled: !props.resetable,
-      children: "\u91CD\u7F6E"
+      mode: "outline",
+      children: getLocale(locale, 'reset')
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_button_button, {
       jssStyle: props.jssStyle,
       size: "small",
       type: "primary",
       onClick: props.onConfirm,
-      children: "\u786E\u5B9A"
+      children: getLocale(locale, 'ok')
     })]
   });
 };
 var FilterSelect = function FilterSelect(props) {
   var _props$filterInfo;
+  var _useConfig2 = useConfig(),
+    locale = _useConfig2.locale;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = slicedToArray_default()(_useState, 2),
     popoverVisible = _useState2[0],
@@ -63784,7 +63856,7 @@ var FilterSelect = function FilterSelect(props) {
     jssStyle: props.jssStyle,
     shape: "circle",
     size: "small",
-    className: classnames_default()(tableClasses.filterIconContainer, (currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) && tableClasses.filterActive),
+    className: classnames_default()(tableClasses.filterIconContainer, (currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) && tableClasses.filterActive, popoverVisible && tableClasses.filterOpened),
     style: {
       border: 'none'
     },
@@ -63802,13 +63874,14 @@ var FilterSelect = function FilterSelect(props) {
         children: [(config === null || config === void 0 ? void 0 : config.search) && /*#__PURE__*/(0,jsx_runtime.jsx)("header", {
           className: tableClasses.filterHeader,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_input_input, {
+            showClear: true,
             value: inputText,
             onChange: function onChange(v) {
               if (onFilter) onFilter(v || '');
               setInputText(v);
             },
             jssStyle: props.jssStyle,
-            placeholder: "\u5728\u7B5B\u9009\u9879\u4E2D\u641C\u7D22",
+            placeholder: getLocale(locale, 'searchPlaceholder'),
             className: tableClasses.filterInput,
             prefix: /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
               className: tableClasses.filterInputIcon,
@@ -63844,6 +63917,8 @@ var FilterSelect = function FilterSelect(props) {
 };
 var FilterSearch = function FilterSearch(props) {
   var _props$filterInfo2;
+  var _useConfig3 = useConfig(),
+    locale = _useConfig3.locale;
   var tableClasses = props.tableClasses,
     filter = props.filter;
   var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
@@ -63890,7 +63965,7 @@ var FilterSearch = function FilterSearch(props) {
     jssStyle: props.jssStyle,
     shape: "circle",
     size: "small",
-    className: classnames_default()(tableClasses.filterIconContainer, (currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) && tableClasses.filterActive),
+    className: classnames_default()(tableClasses.filterIconContainer, (currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) && tableClasses.filterActive, popoverVisible && tableClasses.filterOpened),
     style: {
       border: 'none'
     },
@@ -63909,7 +63984,7 @@ var FilterSearch = function FilterSearch(props) {
           className: tableClasses.filterHeader,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_input_input, {
             jssStyle: props.jssStyle,
-            placeholder: "\u5728\u7B5B\u9009\u9879\u4E2D\u641C\u7D22",
+            placeholder: getLocale(locale, 'searchPlaceholder'),
             className: tableClasses.filterInput,
             prefix: /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
               className: tableClasses.filterInputIcon,
@@ -63918,7 +63993,8 @@ var FilterSearch = function FilterSearch(props) {
             value: tempValue,
             onChange: setTempValue,
             onEnterPress: onConfirm,
-            forwardRef: inputRef
+            forwardRef: inputRef,
+            showClear: true
           })
         }), /*#__PURE__*/(0,jsx_runtime.jsx)(FilterFooter, {
           jssStyle: props.jssStyle,
@@ -72163,7 +72239,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.8.0-beta.17'
+  version: '3.8.0-beta.19'
 });
 }();
 /******/ 	return __webpack_exports__;