uiw 4.11.3 → 4.11.4

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

@@ -9391,7 +9391,7 @@ var react_tag_esm_excluded = ["prefixCls", "className", "style", "title", "child
 
 
 
-var react_search_select_esm_excluded = ["allowClear", "disabled", "size", "maxTagCount", "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"];
 
 
 
@@ -9416,6 +9416,8 @@ function SearchSelect(props) {
       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,
@@ -9475,24 +9477,34 @@ function SearchSelect(props) {
     }
   }, [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 (Array.isArray(changeValue)) {
-      opts = option.filter(function (item) {
-        var findResult = changeValue.find(function (v) {
-          return item.value === v;
+    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);
         });
-        return findResult;
-      });
-    } else if (!isMultiple) {
-      var findResult = option.find(function (item) {
-        return item.value === changeValue;
-      });
+      } else {
+        var findResult = getSelectOption(option, changeValue);
 
-      if (findResult) {
-        setSelectedLabel(findResult.label);
-        opts.push(findResult);
+        if (findResult) {
+          setSelectedLabel(findResult.label);
+          opts.push(findResult);
+        }
       }
     }
 
@@ -9513,10 +9525,10 @@ function SearchSelect(props) {
     var values = [item];
     setSelectedLabel(item.label);
     var resultValue = item.value;
-    value === undefined && setSelectedValue(values); // 如果存在props.value,内部不维护value状态
-
     onSelect && onSelect(resultValue);
-    handleSelectChange(resultValue); // 支持form组件
+    handleSelectChange(resultValue, values); // 支持form组件
+
+    value === undefined && setSelectedValue(values); // 如果存在props.value,内部不维护value状态
   }
 
   function handleItemsClick(item) {
@@ -9534,9 +9546,10 @@ function SearchSelect(props) {
     var resultValue = values.map(function (item) {
       return item.value;
     });
-    value === undefined && setSelectedValue(values);
     onSelect && onSelect(resultValue);
-    handleSelectChange(resultValue); // 支持form组件
+    handleSelectChange(resultValue, values); // 支持form组件
+
+    value === undefined && setSelectedValue(values);
   } // 渲染icon
 
 
@@ -9567,15 +9580,16 @@ 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) {
+    if (isMultiple && selectedValue.length > 0 && !selectedLabel && e.keyCode === 8) {
       var values = removeSelectItem(selectedValue.length - 1);
       setSelectedValue(values);
     }
@@ -9599,7 +9613,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'
       },
@@ -9609,15 +9623,13 @@ function SearchSelect(props) {
           fontSize: 12
         },
         children: loading ? '正在加载数据...' : '没有数据'
-      }) : option.map(function (item, idx) {
-        var active = !!selectedValue.find(function (finds) {
-          return finds.value === item.value;
-        });
+      }) : option.map(function (opt, idx) {
+        var active = !!getSelectOption(selectedValue, opt.value);
         return /*#__PURE__*/(0,jsx_runtime.jsx)(react_menu_esm.Item, {
           active: active,
-          text: item.label,
+          text: opt.label,
           onClick: function onClick() {
-            return isMultiple ? handleItemsClick(item) : handleItemClick(item);
+            return isMultiple ? handleItemsClick(opt) : handleItemClick(opt);
           }
         }, idx);
       })
@@ -9634,54 +9646,68 @@ function SearchSelect(props) {
         width: '100%',
         maxWidth: 'none'
       }, style),
-      children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        style: isMultiple ? {
-          display: 'flex',
-          flexFlow: 'wrap',
-          borderRadius: 3,
-          boxShadow: '0px 0px 2px #333'
-        } : undefined,
-        children: [isMultiple && selectedValue.slice(0, maxTagCount).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 setSelectedValue(removeSelectItem(index));
+              },
+              color: "#ccc",
+              children: item.label
+            }, index);
+          }), !!omitTagCount && /*#__PURE__*/(0,jsx_runtime.jsxs)(react_tag_esm, {
             style: {
-              margin: 2,
+              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);
-        }), !!omitTagCount && /*#__PURE__*/(0,jsx_runtime.jsxs)(react_tag_esm, {
-          style: {
-            margin: 2,
-            display: 'flex',
-            alignItems: 'center'
-          },
-          disabled: true,
-          children: ["+", omitTagCount, " \u2026", ' ']
-        }), /*#__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
+        })
       })
     })
   }));