uiw 4.16.0 → 4.16.1

package/dist/uiw.css

@@ -1896,6 +1896,12 @@ sup.w-badge-count {
   border-top: 1px solid rgba(255, 255, 255, 0.2);
 }
 
+.w-cascader-close {
+  font-size: 15px;
+  margin-right: 1px;
+  color: #393e48;
+}
+
 .w-radio {
   vertical-align: middle;
   display: inline-block;
@@ -3920,6 +3926,13 @@ a.w-list-item:hover:not(.w-disabled) {
   cursor: not-allowed;
   resize: none;
 }
+.w-search-select-multiple-colse {
+  left: 7px;
+  font-size: 15px;
+}
+.w-search-select-singe-colse {
+  font-size: 15px;
+}
 
 .w-split {
   height: 100%;

package/dist/uiw.js

@@ -4534,6 +4534,9 @@ Menu.Divider = MenuDivider;
 
 /* harmony default export */ const react_menu_esm = (esm_Menu);
 
+;// CONCATENATED MODULE: ../react-cascader/esm/style/index.css
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const react_cascader_esm_style = ({});
 ;// CONCATENATED MODULE: ../react-cascader/esm/index.js
 
 
@@ -4543,10 +4546,15 @@ Menu.Divider = MenuDivider;
 
 
 
+
 function Cascader(props) {
   var {
+    value,
+    onChange,
+    onSearch,
+    allowClear,
     placeholder,
-    prefixCls = 'w-search-select',
+    prefixCls = 'w-cascader',
     className,
     style = {
       width: 200
@@ -4557,23 +4565,109 @@ function Cascader(props) {
   var cls = [prefixCls, className].filter(Boolean).join(' ').trim();
   var [innerIsOpen, setInnerIsOpen] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
   var [selectedValue, setSelectedValue] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]);
+  var [selectIconType, setSelectIconType] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)('');
+  var [searchText, setSearchText] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)('');
+  var [searchOn, setSearchOn] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
+  var [inputValue, setInputValue] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)('');
+  var [searchOption, setSearchOption] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)();
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    if (onSearch) {
+      var tempOptions = [];
+      iteratorOption(option, opt => {
+        var label = opt.map(m => m.label).join(' / ');
+        tempOptions.push({
+          label,
+          options: opt
+        });
+      });
+      setSearchOption(tempOptions);
+    }
+  }, [onSearch]);
+
+  var iteratorOption = function iteratorOption(options, cb, opts) {
+    if (opts === void 0) {
+      opts = [];
+    }
+
+    options.map(opt => {
+      var optsTemp = [...opts, opt];
+
+      if (opt.children) {
+        iteratorOption(opt.children, cb, optsTemp);
+      } else {
+        cb == null ? void 0 : cb(optsTemp);
+      }
+    });
+  };
+
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    if (value) {
+      var valueTemp = [];
+      var optChildren = option;
+      value == null ? void 0 : value.map(item => {
+        var findOpt = optChildren.find(opt => opt.value === item);
+        optChildren = (findOpt == null ? void 0 : findOpt.children) || [];
+        valueTemp.push(_extends({
+          label: item,
+          value: item
+        }, findOpt));
+      });
+      setSelectedValue(valueTemp);
+    }
+  }, [value]);
 
   function onVisibleChange(isOpen) {
     setInnerIsOpen(isOpen);
   }
 
+  function renderSelectIcon(type) {
+    var selectIconType;
+
+    if (type === 'enter' && allowClear && selectedValue.length > 0) {
+      selectIconType = 'close';
+    } else {
+      selectIconType = '';
+    }
+
+    setSelectIconType(selectIconType);
+  }
+
+  var searchItemClick = options => {
+    setSearchText('');
+    setInnerIsOpen(false);
+    handelChange(false, options);
+  };
+
   var handleItemClick = (optionsItem, level) => {
     selectedValue.splice(level, selectedValue.length - level, optionsItem);
-    setSelectedValue([...selectedValue]);
-    handelChange();
+    handelChange(true, selectedValue);
   };
 
-  var handelChange = () => {
+  var handelChange = (isSeleted, selectedValue) => {
+    setSelectedValue([...selectedValue]);
     var value = selectedValue.map(item => item.value);
-    props.onChange == null ? void 0 : props.onChange(value, selectedValue);
+    onChange == null ? void 0 : onChange(isSeleted, value, selectedValue);
   };
 
-  var widths = (style == null ? void 0 : style.width) * 0.6 || undefined;
+  var onClear = e => {
+    e.stopPropagation();
+    handelChange(false, []);
+  };
+
+  var handelSearch = searchText => {
+    setSearchText(searchText);
+  };
+
+  var inputChange = e => {
+    if (!innerIsOpen) {
+      setInnerIsOpen(!innerIsOpen);
+    }
+
+    var value = e.target.value;
+    onSearch && handelSearch(value);
+  };
+
+  var widths = (style == null ? void 0 : style.width) * 0.5 || undefined;
 
   var OptionIter = function OptionIter(option, level) {
     if (level === void 0) {
@@ -4595,25 +4689,26 @@ function Cascader(props) {
           fontSize: 12
         },
         children: '没有数据'
-      }) : option.map((item, index) => {
+      }) : option.map((opt, index) => {
         var _selectedValue$level;
 
-        var active = ((_selectedValue$level = selectedValue[level]) == null ? void 0 : _selectedValue$level.value) === item.value;
+        var active = ((_selectedValue$level = selectedValue[level]) == null ? void 0 : _selectedValue$level.value) === opt.value;
         return /*#__PURE__*/(0,jsx_runtime.jsx)(react_menu_esm.Item, {
           active: active,
-          text: item.label,
-          addonAfter: item.children ? /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+          text: opt.label,
+          addonAfter: opt.children ? /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
             type: "right"
           }) : undefined,
-          onClick: () => handleItemClick(item, level)
+          onClick: () => handleItemClick(opt, level)
         }, index);
       })
     }, level);
   };
 
-  var inputValue = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => {
-    return selectedValue.map(item => item.label).join(' / ');
-  }, [selectedValue.length]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    var inputValue = selectedValue.map(opt => opt.label).join(' / ');
+    setInputValue(inputValue);
+  }, [selectedValue]);
   return /*#__PURE__*/(0,jsx_runtime.jsx)(Dropdown, _extends({
     className: cls,
     trigger: "click",
@@ -4626,7 +4721,7 @@ function Cascader(props) {
   }, others, {
     onVisibleChange: onVisibleChange,
     isOpen: innerIsOpen,
-    menu: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    menu: !searchText ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       style: {
         display: 'flex'
       },
@@ -4636,14 +4731,52 @@ function Cascader(props) {
         var options = index ? (_selectedValue = selectedValue[index - 1]) == null ? void 0 : _selectedValue.children : option;
         return OptionIter(options, index);
       }).filter(m => !!m)
-    }),
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)(react_input_esm, {
-      value: inputValue,
-      onChange: () => {},
-      placeholder: placeholder,
+    }) : /*#__PURE__*/(0,jsx_runtime.jsx)(react_menu_esm, {
+      bordered: true,
       style: {
+        minHeight: 25,
+        minWidth: style == null ? void 0 : style.width,
+        overflowY: 'scroll',
         width: style == null ? void 0 : style.width
-      }
+      },
+      children: !searchOption || searchOption.length === 0 ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        style: {
+          color: '#c7c7c7',
+          fontSize: 12
+        },
+        children: '没有数据'
+      }) : searchOption.filter(opt => opt.label.includes(searchText.trim())).map((opt, index) => {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)(react_menu_esm.Item, {
+          text: opt.label,
+          onClick: () => searchItemClick(opt.options) //
+
+        }, index);
+      })
+    }),
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+      onMouseLeave: () => renderSelectIcon('leave'),
+      onMouseOver: () => renderSelectIcon('enter'),
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(react_input_esm, {
+        value: searchOn ? searchText : inputValue,
+        onChange: inputChange,
+        placeholder: searchOn ? inputValue : placeholder,
+        style: {
+          width: style == null ? void 0 : style.width
+        },
+        onFocus: () => onSearch && setSearchOn(true),
+        onBlur: () => onSearch && setSearchOn(false),
+        readOnly: !onSearch,
+        addonAfter: /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+          style: {
+            width: 'auto'
+          },
+          children: selectIconType === 'close' && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+            type: selectIconType,
+            onClick: onClear,
+            className: prefixCls + "-close"
+          })
+        })
+      })
     })
   }));
 }
@@ -8386,6 +8519,7 @@ function SearchSelect(props) {
             placeholder: selectedValue.length ? '' : placeholder
           })]
         }), !disabled && (selectIconType === 'close' || selectIconType === 'loading' && loading) && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+          className: prefixCls + "-multiple-colse",
           type: selectIconType,
           spin: loading && selectIconType === 'loading',
           onClick: resetSelectedValue
@@ -8400,6 +8534,8 @@ function SearchSelect(props) {
         placeholder: placeholder,
         addonAfter: !disabled && (selectIconType === 'close' || selectIconType === 'loading' && loading) && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
           type: selectIconType,
+          className: prefixCls + "-singe-colse",
+          color: "#393e48",
           spin: loading && selectIconType === 'loading',
           onClick: resetSelectedValue
         })
@@ -9337,7 +9473,7 @@ class ThComponent extends external_root_React_commonjs2_react_commonjs_react_amd
     var rect = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().findDOMNode(this);
     this.props.updateLocation({
       width: rect.getBoundingClientRect().width
-    }, this.props.colNum);
+    }, "" + this.props.rowNum + this.props.colNum, this.props.item.key, this.props.item.colSpan);
   }
 
   render() {
@@ -9367,7 +9503,7 @@ class ThComponent extends external_root_React_commonjs2_react_commonjs_react_amd
     }
 
     return /*#__PURE__*/(0,jsx_runtime.jsx)("th", _extends({}, thProps, {
-      style: _extends({}, thProps.style, locationFixed(fixed, locationWidth, colNum)),
+      style: _extends({}, thProps.style, locationFixed(fixed, locationWidth, "" + rowNum + colNum)),
       className: prefixCls + "-tr-children-" + ((item == null ? void 0 : item.align) || 'left') + " " + (item.className || '') + " " + cls,
       onClick: evn => onCellHead == null ? void 0 : onCellHead(item, colNum, rowNum, evn),
       children: titleNode
@@ -9491,7 +9627,8 @@ function TableTr(props) {
     hierarchy,
     indentSize,
     childrenColumnName,
-    locationWidth
+    locationWidth,
+    header
   } = props;
   var [isOpacity, setIsOpacity] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
   var [childrenIndex, setChildrenIndex] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0);
@@ -9519,6 +9656,15 @@ function TableTr(props) {
     };
   }, [expandIndex]);
 
+  var getIndex = key => {
+    var j = 0;
+    var i = header.findIndex(it => {
+      j = it.findIndex(item => item.key === key);
+      return j > -1;
+    });
+    return "" + i + j;
+  };
+
   if (!Array.isArray(data) || !data.length) {
     return null;
   }
@@ -9573,7 +9719,7 @@ function TableTr(props) {
             }
 
             return /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement)("td", _extends({}, objs, {
-              style: _extends({}, locationFixed(keyName.fixed, locationWidth, colNum)),
+              style: keyName.fixed ? _extends({}, locationFixed(keyName.fixed, locationWidth, "" + getIndex(keyName.key || 'undefined'))) : {},
               children: /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
                 className: ellipsis && ellipsis[keyName.key] ? prefixCls + "-ellipsis" : undefined,
                 children: objs.children
@@ -9637,34 +9783,71 @@ function Table(props) {
   var [locationWidth, setLocationWidth] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({});
   var finalLocationWidth = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({});
 
-  var updateLocation = (params, index) => {
+  var updateLocation = function updateLocation(params, index, key, colSpan) {
+    if (colSpan === void 0) {
+      colSpan = 0;
+    }
+
     finalLocationWidth.current = _extends({}, finalLocationWidth.current, {
-      [index]: _extends({}, finalLocationWidth.current[index], params)
+      [index]: _extends({}, finalLocationWidth.current[index], params, {
+        key: key,
+        colSpan
+      })
     });
 
-    if (index === columns.length - 1) {
+    if (index === "" + (header.length - 1) + (header[header.length - 1].length - 1)) {
       setLocationWidth(computed());
     }
   };
 
-  var computed = () => {
-    var left = 0,
-        right = 0;
+  var deepClumnsLocation = (params, fistIndex, leftOrRight, isReverse) => {
+    var initialValue = 0,
+        lastIndex = isReverse ? 0 : params.length - 1,
+        deepParams = [];
+    params.forEach(() => {
+      var abs = Math.abs(lastIndex);
+      var i = "" + fistIndex + abs;
 
-    for (var _index = 0; _index < columns.length; _index++) {
-      if (finalLocationWidth.current[_index]) {
-        finalLocationWidth.current[_index].left = left;
-        left = finalLocationWidth.current[_index].width + left;
+      if (isReverse) {
+        lastIndex += 1;
+      } else {
+        lastIndex -= 1;
       }
-    }
 
-    for (var _index2 = columns.length - 1; _index2 > -1; _index2--) {
-      if (finalLocationWidth.current[_index2]) {
-        finalLocationWidth.current[_index2].right = right;
-        right = finalLocationWidth.current[_index2].width + right;
+      if (typeof params[abs] === 'number') {
+        initialValue = params[abs] + initialValue;
+        deepParams.push(params[abs]);
+        return;
       }
-    }
 
+      if (finalLocationWidth.current[i]) {
+        finalLocationWidth.current[i][leftOrRight] = initialValue;
+        initialValue = finalLocationWidth.current[i].width + initialValue;
+      }
+
+      if (Array.isArray(params[abs].children)) {
+        deepParams.push(...params[abs].children);
+        return;
+      }
+
+      if (finalLocationWidth.current[i]) {
+        deepParams.push(finalLocationWidth.current[i].width);
+      } else {
+        var parent = header.find(it => it.find(it => it.key === params[abs].key)) || [];
+        var sub = parent.findIndex(it => it.key === params[abs].key);
+
+        if (finalLocationWidth.current["" + i[0] + sub]) {
+          // 合并单元格
+          deepParams.push(finalLocationWidth.current["" + i[0] + sub].width);
+        }
+      }
+    });
+    if (deepParams.filter(it => typeof it !== 'number').length) deepClumnsLocation(deepParams, fistIndex + 1, leftOrRight, isReverse);
+  };
+
+  var computed = () => {
+    deepClumnsLocation(columns, 0, 'left', true);
+    deepClumnsLocation(columns, 0, 'right', false);
     return finalLocationWidth.current;
   };
 
@@ -9838,6 +10021,7 @@ function Table(props) {
             rowKey: rowKey,
             locationWidth: locationWidth,
             data: data,
+            header: header,
             keys: self.keys,
             render: render,
             ellipsis: ellipsis,
@@ -9905,6 +10089,7 @@ var react_tabs_esm_excluded = ["prefixCls", "className", "children", "type", "ac
 
 
 Tabs.Pane = Pane;
+var labelWidth = 0;
 function Tabs(props) {
   var _flowNav$nav;
 
@@ -9950,12 +10135,16 @@ function Tabs(props) {
       flowNavSet(_extends({}, flowNav));
     }
   }, []);
-  var divNavRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)((node, key) => {
+  var divNavRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)((node, key, itemKey) => {
     if (node !== null) {
       node.addEventListener('click', e => {
         activeItem.current = node;
       });
       divNavWidthChange(node.getBoundingClientRect().width, key);
+
+      if (itemKey === props.activeKey && type === 'line' && labelWidth === 0) {
+        activeItem.current = node;
+      }
     }
   }, []);
 
@@ -9994,6 +10183,7 @@ function Tabs(props) {
 
   function calcSlideStyle() {
     if (activeItem.current && type === 'line') {
+      labelWidth = activeItem.current.clientWidth;
       setSlideStyle({
         width: activeItem.current.clientWidth,
         left: activeItem.current.offsetLeft
@@ -10071,7 +10261,7 @@ function Tabs(props) {
       }
 
       return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({
-        ref: _ref => divNavRef(_ref, key)
+        ref: _ref => divNavRef(_ref, key, item.key)
       }, divProps), key);
     });
   }