uiw 4.11.2 → 4.11.6

package/dist/uiw.css

@@ -3788,6 +3788,8 @@ a.w-list-item:hover:not(.w-disabled) {
 
 .w-search-select-input-contents input {
   box-shadow: none;
+  padding: 0px;
+  height: 20px;
 }
 .w-search-select-input-contents .w-input-inner:hover {
   box-shadow: none !important;
@@ -3795,6 +3797,46 @@ a.w-list-item:hover:not(.w-disabled) {
 .w-search-select-input-contents .w-input-inner:focus {
   box-shadow: none !important;
 }
+.w-search-select-inner {
+  display: flex;
+  justify-content: space-between;
+  outline: none;
+  border: none;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+  box-sizing: border-box;
+  background: #fff;
+  min-height: 30px;
+  margin: 0 !important;
+  padding: 3px 10px 3px 10px;
+  vertical-align: middle;
+  line-height: 30px;
+  color: #393e48;
+  font-weight: 400;
+  font-size: inherit;
+  transition: box-shadow 0.3s cubic-bezier(0.4, 1, 0.75, 0.9);
+  -webkit-appearance: none;
+          -moz-appearance: none;
+       appearance: none;
+}
+.w-search-select-inner:focus {
+  box-shadow: 0 0 0 1px #393e48, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+}
+.w-search-select-inner:hover {
+  box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+}
+.w-search-select-inner:focus.w-search-select-inner:hover {
+  box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+}
+.w-search-select-inner:disabled {
+  box-shadow: none;
+  background: #dddddd;
+  opacity: 0.75;
+  color: #a5a5a5;
+  cursor: not-allowed;
+  resize: none;
+}
 
 .w-split {
   height: 100%;

package/dist/uiw.js

@@ -6934,6 +6934,7 @@ FormItem.defaultProps = {
 
 
 
+
 var Form_excluded = ["prefixCls", "className", "fields", "children", "resetOnSubmit", "onSubmitError", "onChange", "onSubmit", "afterSubmit"],
     Form_excluded2 = ["children", "validator", "name", "help", "label", "labelFor", "labelClassName", "labelStyle", "inline", "initialValue"];
 
@@ -6959,7 +6960,7 @@ function newFormState(fields, cb) {
         initialValue = _cb.initialValue,
         _currentValue = _cb.currentValue;
 
-    state.initial[name] = initialValue;
+    state.initial[name] = Array.isArray(initialValue) ? _toConsumableArray(initialValue) : initialValue;
     state.current[name] = _currentValue;
   }
 
@@ -6999,15 +7000,10 @@ function Form(_ref, ref //| React.RefObject<FormRefType>,
     });
   }, []);
 
-  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(JSON.parse(JSON.stringify(initData))),
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(initData),
       _useState2 = _slicedToArray(_useState, 2),
       data = _useState2[0],
-      setDatas = _useState2[1];
-
-  var setData = function setData(values) {
-    // 解决value为数组时不进行深拷贝,initvalue无法重置问题
-    setDatas(JSON.parse(JSON.stringify(values)));
-  };
+      setData = _useState2[1];
 
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(ref, function () {
     return {
@@ -7162,17 +7158,30 @@ function Form(_ref, ref //| React.RefObject<FormRefType>,
 
   function handleReset() {
     var initial = data.initial;
+
+    var initials = _extends({}, initial);
+
+    Object.entries(initials).map(function (_ref3) {
+      var _ref5 = _slicedToArray(_ref3, 2),
+          key = _ref5[0],
+          value = _ref5[1];
+
+      if (Array.isArray(value)) {
+        initials[key] = _toConsumableArray(value);
+      }
+    });
     setData(_extends({}, data, {
-      current: initial,
+      initial: initial,
+      current: initials,
       errors: {}
     }));
   }
 
-  function controlField(_ref3) {
-    var children = _ref3.children,
-        validator = _ref3.validator,
-        name = _ref3.name,
-        other = _objectWithoutPropertiesLoose(_ref3, Form_excluded2);
+  function controlField(_ref4) {
+    var children = _ref4.children,
+        validator = _ref4.validator,
+        name = _ref4.name,
+        other = _objectWithoutPropertiesLoose(_ref4, Form_excluded2);
 
     var element = typeof children !== 'function' ? children : children({
       onChange: handleChange(name, validator),
@@ -9391,7 +9400,7 @@ var react_tag_esm_excluded = ["prefixCls", "className", "style", "title", "child
 
 
 
-var react_search_select_esm_excluded = ["allowClear", "disabled", "size", "option", "loading", "prefixCls", "className", "mode", "style", "isOpen", "value", "defaultValue", "showSearch", "placeholder", "onSearch", "onChange", "onSelect"];
+var react_search_select_esm_excluded = ["allowClear", "disabled", "size", "maxTagCount", "option", "loading", "labelInValue", "prefixCls", "className", "mode", "style", "isOpen", "value", "defaultValue", "showSearch", "placeholder", "onSearch", "onChange", "onSelect"];
 
 
 
@@ -9411,10 +9420,13 @@ function SearchSelect(props) {
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$size = props.size,
       size = _props$size === void 0 ? 'default' : _props$size,
+      maxTagCount = props.maxTagCount,
       _props$option = props.option,
       option = _props$option === void 0 ? [] : _props$option,
       _props$loading = props.loading,
       loading = _props$loading === void 0 ? false : _props$loading,
+      _props$labelInValue = props.labelInValue,
+      labelInValue = _props$labelInValue === void 0 ? false : _props$labelInValue,
       _props$prefixCls = props.prefixCls,
       prefixCls = _props$prefixCls === void 0 ? 'w-search-select' : _props$prefixCls,
       className = props.className,
@@ -9440,9 +9452,7 @@ function SearchSelect(props) {
       innerIsOpen = _useState2[0],
       setInnerIsOpen = _useState2[1];
 
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(option.filter(function (item) {
-    return item.value === value;
-  })),
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
       selectedValue = _useState4[0],
       setSelectedValue = _useState4[1];
@@ -9457,19 +9467,58 @@ function SearchSelect(props) {
       selectIconType = _useState8[0],
       setSelectIconType = _useState8[1];
 
+  var omitTagCount = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return maxTagCount && selectedValue.length > maxTagCount ? selectedValue.length - maxTagCount : 0;
+  }, [selectedValue.length]);
   var divRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var valueRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)();
   valueRef.current = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     return selectedValue;
   }, [selectedValue]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (defaultValue) {
-      var defaultMenuItem = option.filter(function (opt) {
-        return opt.value === defaultValue;
-      });
-      setSelectedValue(defaultMenuItem);
+    if (value === undefined && defaultValue !== undefined) {
+      selectedValueChange(defaultValue);
     }
   }, []);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (value !== undefined) {
+      selectedValueChange(value);
+    }
+  }, [JSON.stringify(value)]);
+
+  var getSelectOption = function getSelectOption(option, value) {
+    var findResult = option.find(function (item) {
+      return item.value === value;
+    });
+    return findResult;
+  };
+
+  function selectedValueChange(changeValue) {
+    var opts = [];
+
+    if (labelInValue) {
+      if (Array.isArray(changeValue)) {
+        opts = changeValue;
+      } else {
+        opts.push(changeValue);
+      }
+    } else {
+      if (Array.isArray(changeValue)) {
+        opts = changeValue.map(function (v) {
+          return getSelectOption(option, v);
+        });
+      } else {
+        var findResult = getSelectOption(option, changeValue);
+
+        if (findResult) {
+          setSelectedLabel(findResult.label);
+          opts.push(findResult);
+        }
+      }
+    }
+
+    setSelectedValue(opts);
+  }
 
   function removeSelectItem(index) {
     var selectedValue = valueRef.current;
@@ -9483,33 +9532,24 @@ function SearchSelect(props) {
   function handleItemClick(item) {
     setInnerIsOpen(false);
     var values = [item];
-    setSelectedValue(values);
     setSelectedLabel(item.label);
     var resultValue = item.value;
-    onSelect && onSelect(resultValue); // 支持form组件
-
-    handleSelectChange(resultValue);
+    handleChange(resultValue, values);
   }
 
-  function handleItemsClick(item) {
-    var values = [];
-    var index = selectedValue.findIndex(function (finds) {
-      return finds.value === item.value;
-    });
-
-    if (index !== -1) {
-      values = removeSelectItem(index);
-    } else {
-      values = [].concat(_toConsumableArray(selectedValue), [item]);
-    }
-
-    setSelectedValue(values);
+  function handleItemsClick(index, item) {
+    var values = index !== -1 ? removeSelectItem(index) : [].concat(_toConsumableArray(selectedValue), [item]);
     var resultValue = values.map(function (item) {
       return item.value;
     });
-    onSelect && onSelect(resultValue); // // 支持form组件
+    handleChange(resultValue, values);
+  }
 
-    handleSelectChange(resultValue);
+  function handleChange(resultValue, values) {
+    onSelect && onSelect(resultValue);
+    handleSelectChange(resultValue, values); // 支持form组件
+
+    value === undefined && setSelectedValue(values); // 如果受控于父组件则不需要内部维护状态
   } // 渲染icon
 
 
@@ -9540,17 +9580,17 @@ function SearchSelect(props) {
     setSelectedValue([]);
     setSelectedLabel('');
     setSelectIconType('');
-    handleSelectChange('');
+    handleSelectChange('', []);
   }
 
-  function handleSelectChange(value) {
-    onChange && onChange(value);
+  function handleSelectChange(value, options) {
+    if (!onChange) return;
+    onChange(labelInValue ? options : value);
   }
 
   function inputKeyDown(e) {
-    if (selectedValue.length > 0 && !!selectedLabel && e.keyCode === 8) {
-      var values = removeSelectItem(selectedValue.length - 1);
-      setSelectedValue(values);
+    if (isMultiple && selectedValue.length > 0 && !selectedLabel && e.keyCode === 8) {
+      handleItemsClick(selectedValue.length - 1);
     }
   }
 
@@ -9572,7 +9612,7 @@ function SearchSelect(props) {
       style: {
         minHeight: 25,
         maxHeight: 280,
-        minWidth: (style == null ? void 0 : style.minWidth) || 200,
+        minWidth: 200,
         overflowY: 'scroll',
         width: divRef.current ? divRef.current.offsetWidth : 'auto'
       },
@@ -9582,17 +9622,17 @@ function SearchSelect(props) {
           fontSize: 12
         },
         children: loading ? '正在加载数据...' : '没有数据'
-      }) : option.map(function (item, idx) {
-        var active = !!selectedValue.find(function (finds) {
+      }) : option.map(function (item) {
+        var index = selectedValue.findIndex(function (finds) {
           return finds.value === item.value;
         });
         return /*#__PURE__*/(0,jsx_runtime.jsx)(react_menu_esm.Item, {
-          active: active,
+          active: index !== -1,
           text: item.label,
           onClick: function onClick() {
-            return isMultiple ? handleItemsClick(item) : handleItemClick(item);
+            return isMultiple ? handleItemsClick(index, item) : handleItemClick(item);
           }
-        }, idx);
+        }, index);
       })
     }),
     children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -9604,50 +9644,71 @@ function SearchSelect(props) {
         return renderSelectIcon('leave');
       },
       style: _extends({
-        width: 'auto',
+        width: '100%',
         maxWidth: 'none'
       }, style),
-      children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        style: isMultiple ? {
-          display: 'flex',
-          flexFlow: 'wrap',
-          padding: 2,
-          borderRadius: 3,
-          boxShadow: '0px 0px 2px #333'
-        } : undefined,
-        children: [isMultiple && selectedValue.map(function (item, index) {
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(react_tag_esm, {
+      children: isMultiple ? /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        className: prefixCls + "-inner",
+        children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+          style: {
+            display: 'flex',
+            flexFlow: 'wrap'
+          },
+          children: [isMultiple && selectedValue.slice(0, maxTagCount).map(function (item, index) {
+            return /*#__PURE__*/(0,jsx_runtime.jsx)(react_tag_esm, {
+              style: {
+                height: 20,
+                margin: 1,
+                display: 'flex',
+                alignItems: 'center'
+              },
+              className: prefixCls + "-tag",
+              closable: true,
+              onClose: function onClose() {
+                return handleItemsClick(index, item);
+              },
+              color: "#ccc",
+              children: item.label
+            }, index);
+          }), !!omitTagCount && /*#__PURE__*/(0,jsx_runtime.jsxs)(react_tag_esm, {
             style: {
-              margin: '0px 3px 3px 0px',
+              height: 20,
+              margin: 1,
               display: 'flex',
               alignItems: 'center'
             },
-            closable: true,
-            onClose: function onClose() {
-              return setSelectedValue(removeSelectItem(index));
+            disabled: true,
+            children: ["+", omitTagCount, " \u2026", ' ']
+          }), /*#__PURE__*/(0,jsx_runtime.jsx)(react_input_esm, {
+            style: {
+              flex: 1
             },
-            color: "#ccc",
-            children: item.label
-          }, index);
-        }), /*#__PURE__*/(0,jsx_runtime.jsx)(react_input_esm, {
-          style: {
-            flex: 1,
-            boxShadow: 'none'
-          },
-          className: isMultiple ? prefixCls + "-input-contents" : undefined,
-          readOnly: !showSearch,
-          size: size,
-          disabled: disabled,
-          onKeyDown: inputKeyDown,
-          onChange: handleInputChange,
-          value: selectedLabel,
-          placeholder: placeholder,
-          addonAfter: (selectIconType === 'close' || selectIconType === 'loading' && loading) && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
-            type: selectIconType,
-            spin: loading && selectIconType === 'loading',
-            onClick: resetSelectedValue
-          })
+            className: prefixCls + "-input-contents",
+            readOnly: !showSearch,
+            size: size,
+            disabled: disabled,
+            onKeyDown: inputKeyDown,
+            onChange: handleInputChange,
+            value: selectedLabel,
+            placeholder: selectedValue.length ? '' : placeholder
+          })]
+        }), (selectIconType === 'close' || selectIconType === 'loading' && loading) && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+          type: selectIconType,
+          spin: loading && selectIconType === 'loading',
+          onClick: resetSelectedValue
         })]
+      }) : /*#__PURE__*/(0,jsx_runtime.jsx)(react_input_esm, {
+        readOnly: !showSearch,
+        size: size,
+        disabled: disabled,
+        onChange: handleInputChange,
+        value: selectedLabel,
+        placeholder: placeholder,
+        addonAfter: (selectIconType === 'close' || selectIconType === 'loading' && loading) && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+          type: selectIconType,
+          spin: loading && selectIconType === 'loading',
+          onClick: resetSelectedValue
+        })
       })
     })
   }));
@@ -11135,7 +11196,7 @@ var isContained = function isContained(a, b) {
   return true;
 };
 
-var getChildKeys = function getChildKeys(childs, result) {
+var getChildKeys = function getChildKeys(childs, result, depth) {
   if (childs === void 0) {
     childs = [];
   }
@@ -11146,9 +11207,10 @@ var getChildKeys = function getChildKeys(childs, result) {
 
   childs.forEach(function (item) {
     result.push(item.key);
+    if (typeof depth === 'number' && !(depth - 1)) return;
 
     if (item.children && item.children.length > 0) {
-      result = result.concat(getChildKeys(item.children));
+      result = result.concat(getChildKeys(item.children, undefined, depth ? depth - 1 : undefined));
     }
   });
   return result;
@@ -11236,6 +11298,8 @@ function Tree(props) {
       _props$onSelected = props.onSelected,
       onSelected = _props$onSelected === void 0 ? noop : _props$onSelected,
       className = props.className,
+      _props$autoExpandPare = props.autoExpandParent,
+      autoExpandParent = _props$autoExpandPare === void 0 ? true : _props$autoExpandPare,
       renderTitle = props.renderTitle,
       elementProps = _objectWithoutPropertiesLoose(props, react_tree_esm_excluded);
 
@@ -11252,11 +11316,15 @@ function Tree(props) {
 
 
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    var arrOpenKeys = getChildKeys(data);
+    var arrOpenKeys = [];
 
     if (defaultExpandAll) {
-      setCurOpenKeys(arrOpenKeys);
+      arrOpenKeys = getChildKeys(data);
+    } else if (autoExpandParent) {
+      arrOpenKeys = getChildKeys(data, undefined, 1);
     }
+
+    setCurOpenKeys(arrOpenKeys);
   }, []);
   var cls = [className, prefixCls, showLine ? prefixCls + "-line" : null].filter(Boolean).join(' ').trim();