优化 icon-picker

scss/_variables.scss

@@ -1399,13 +1399,12 @@ $Tree-inputHeight: $Form-input-height * 0.85 !default;
 
 // IconPicker
 $IconPicker-tabs-bg: #f0f3f4 !default;
-$IconPicker-tab-padding: 0 px2rem(5px) !default;
+$IconPicker-tab-padding: 0 px2rem(10px) !default;
 $IconPicker-tab-height: px2rem(30px) !default;
 $IconPicker-tab-lineHeight: px2rem(30px) !default;
 $IconPicker-tab-onActive-bg: $white !default;
 $IconPicker-content-maxHeight: px2rem(350px) !default;
-$IconPicker-singleVendor-padding: px2rem(5px) 0 px2rem(5px) px2rem(13px) !default;
+$IconPicker-padding: px2rem(5px) !default;
-$IconPicker-multiVendor-padding: px2rem(35px) 0 px2rem(5px) px2rem(13px) !default;
 $IconPicker-sugItem-width: px2rem(28px) !default;
 $IconPicker-sugItem-height: px2rem(28px) !default;
 $IconPicker-sugItem-lineHeight: px2rem(28px) !default;

scss/components/form/_icon-picker.scss

@@ -45,11 +45,6 @@
   }
 
   &-tabs {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 11;
     background: $IconPicker-tabs-bg;
   }
 
@@ -60,24 +55,19 @@
     line-height: $IconPicker-tab-lineHeight;
     cursor: pointer;
     text-align: center;
+    font-size: $fontSizeSm;
+    user-select: none;
 
     &.active {
       background: $IconPicker-tab-onActive-bg;
     }
   }
 
-  &-singleVendor {
-    padding: $IconPicker-singleVendor-padding;
-  }
-
-  &-multiVendor {
-    padding: $IconPicker-multiVendor-padding;
-  }
-
   &-sugs {
     position: relative;
+    padding: $IconPicker-padding;
     max-height: $IconPicker-content-maxHeight;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   &-sugItem {
@@ -87,6 +77,15 @@
     text-align: center;
     line-height: $IconPicker-sugItem-lineHeight;
     cursor: pointer;
+
+    &:hover {
+      background-color: $Form-select-menu-onHover-bg;
+    }
+
+    &.is-active {
+      color: $white;
+      background-color: $Form-select-menu-onActive-color;
+    }
   }
 
   &-value {

src/renderers/Form/IconPicker.tsx

@@ -204,17 +204,10 @@ export default class IconPickerControl extends React.PureComponent<
       classnames: cx,
       name,
       value,
-      noDataTip,
+      noDataTip
-      formItem
     } = this.props;
     const options = this.formatOptions();
     const vendors = this.getVendors();
-    const selectedOptions =
-      formItem && formItem.selectedOptions.length
-        ? formItem.selectedOptions
-        : value
-        ? [{label: value, value: value}]
-        : [];
 
     return (
       <Downshift
@@ -223,16 +216,13 @@ export default class IconPickerControl extends React.PureComponent<
         onChange={this.handleChange}
         onOuterClick={this.handleBlur}
         onStateChange={this.handleStateChange}
-        selectedItem={selectedOptions.map((option: Option) => option['value'])}
+        selectedItem={[value]}
       >
-        {({getInputProps, getItemProps, isOpen, inputValue, selectedItem}) => {
+        {({getInputProps, getItemProps, isOpen, inputValue}) => {
           let filteredOptions =
             inputValue && isOpen
               ? matchSorter(options, inputValue, {keys: ['label', 'value']})
               : options;
-          filteredOptions = filteredOptions.filter(
-            (option: any) => !~selectedItem.indexOf(option.value)
-          );
 
           return (
             <div
@@ -246,21 +236,17 @@ export default class IconPickerControl extends React.PureComponent<
               onClick={this.handleClick}
             >
               <div className={cx('IconPickerControl-valueWrap')}>
-                {placeholder &&
+                {placeholder && !value && !this.state.inputValue ? (
-                !selectedOptions.length &&
-                !this.state.inputValue ? (
                   <div className={cx('IconPickerControl-placeholder')}>
                     {placeholder}
                   </div>
                 ) : null}
 
-                {selectedOptions.map((option: Option, index: number) =>
+                {!value || (inputValue && isOpen) ? null : (
-                  inputValue && isOpen ? null : (
+                  <div className={cx('IconPickerControl-value')}>
-                    <div className={cx('IconPickerControl-value')} key={index}>
+                    <i className={cx(value)} />
-                      <i className={cx(`${option.value}`)} />
+                    {value}
-                      {option.label}
+                  </div>
-                    </div>
-                  )
                 )}
 
                 <input
@@ -269,7 +255,8 @@ export default class IconPickerControl extends React.PureComponent<
                     ref: this.inputRef,
                     onFocus: this.handleFocus,
                     onChange: this.handleInputChange,
-                    onKeyDown: this.handleKeyDown
+                    onKeyDown: this.handleKeyDown,
+                    value: this.state.inputValue
                   })}
                   autoComplete="off"
                 />
@@ -305,7 +292,9 @@ export default class IconPickerControl extends React.PureComponent<
                         <div
                           {...getItemProps({
                             item: option.value,
-                            className: cx(`IconPickerControl-sugItem`)
+                            className: cx(`IconPickerControl-sugItem`, {
+                              'is-active': value === option.value
+                            })
                           })}
                           key={index}
                         >