1. BoolSetter bug 修复；

2. IconSetter 体验优化(新增 defaultValue 和 hasClear 等能力)；
3. Button、Icon 等组件使用 IconSetter;

packages/demo/public/assets.json

@@ -1581,12 +1581,12 @@
           "override": [
             {
               "name": "icon",
-              "setter": "StringSetter",
+              "setter": "IconSetter",
               "extraProps": {
                 "defaultValue": "success",
                 "onChange": {
                   "type": "JSFunction",
-                  "value": "(val, field, editor) => {\n  field.nodes[0].children.import({\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}"
+                  "value": "(val, field, editor) => {\n  field.nodes[0].children.import(val && {\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}"
                 }
               }
             },
@@ -5716,7 +5716,7 @@
       "props": [
         {
           "name": "type",
-          "propType": "string",
+          "propType": "icon",
           "description": "指定显示哪种图标"
         },
         {
@@ -5741,7 +5741,7 @@
               "number"
             ]
           },
-          "description": "指定图标大小\n<br/>**可选值**<br/> xxs, xs, small, medium, large, xl, xxl, xxxl, inherit",
+          "description": "指定图标大小",
           "defaultValue": "medium"
         },
         {
@@ -5752,7 +5752,23 @@
           "name": "style",
           "propType": "object"
         }
-      ]
+      ],
+      "configure": {
+        "props": {
+          "isExtends": true,
+          "override": [
+            {
+              "name": "type",
+              "setter": {
+                "componentName": "IconSetter",
+                "props": {
+                  "hasClear": false
+                }
+              }
+            }
+          ]
+        }
+      }
     },
     {
       "componentName": "Input",

packages/editor-setters/src/icon-setter/index.scss

@@ -1,24 +1,16 @@
-.lowcode-icon-box {
-  display: inline-block;
-  margin-right: -5px;
-  padding: 3px 0 3px 0;
-  width: 26px;
-  height: 26px;
-  text-align: center;
-  line-height: 20px;
-  background: #f2f2f2;
-  div {
-    width: 20px;
-    height: 20px;
-    border: 1px solid #ddd;
-  }
-}
-
-
 .lc-icon-setter{
   .next-input{
     width: auto !important;
   }
+  i {
+    min-width: 12px;
+  }
+  i:hover {
+    cursor: pointer;
+  }
+  input:hover {
+    cursor: pointer;
+  }
 }
 
 

packages/editor-setters/src/icon-setter/index.tsx

@@ -64,31 +64,68 @@ const icons = [
 ];
 interface IconSetterProps {
   value: string;
+  defaultValue: string;
+  placeholder: string;
+  hasClear: boolean;
   onChange: (icon: string) => undefined;
   icons: string[];
 }
 export default class IconSetter extends PureComponent<IconSetterProps, {}> {
   static defaultProps = {
-    value: '',
+    value: undefined,
+    defaultValue: '',
+    hasClear: true,
     icons: icons,
+    placeholder: '请点击选择 Icon',
     onChange: (icon: string) => undefined,
   };
 
-  onInputChange() {
-    console.log(this);
-  }
+  state = {
+    firstLoad: true,
+  };
 
-  onSelectIcon(icon: string) {
+  onInputChange = (icon: string) => {
     const { onChange } = this.props;
     onChange(icon);
-  }
+  };
+
+  onSelectIcon = (icon: string) => {
+    const { onChange } = this.props;
+    onChange(icon);
+  };
 
   render() {
-    const { icons, value } = this.props;
+    const { icons, value, defaultValue, onChange, placeholder, hasClear } = this.props;
+    const { firstLoad } = this.state;
+    if (firstLoad && defaultValue && typeof value === 'undefined') onChange(defaultValue);
+    this.setState({
+      firstLoad: false,
+    });
+    const currentIcon = <Icon size="xs" type={value} />;
+    const clearIcon = hasClear && (
+      <Icon
+        size="xs"
+        id="icon-clear"
+        type="delete-filling"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.onSelectIcon('');
+        }}
+      />
+    );
 
     const triggerNode = (
-      <div className="lowcode-icon-box">
-        <Icon type={value} />
+      <div>
+        <Input
+          placeholder={placeholder}
+          addonTextBefore={currentIcon}
+          onChange={this.onInputChange}
+          value={value}
+          defaultValue={defaultValue}
+          readOnly
+          addonTextAfter={clearIcon}
+        />
       </div>
     );
     const InnerBeforeNode = (
@@ -105,17 +142,13 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
         <ul className="lowcode-icon-list">
           {icons.map((icon) => (
             <li onClick={() => this.onSelectIcon(icon)}>
-              <Icon type={icon} size="large" />
+              <Icon type={icon} size="medium" />
             </li>
           ))}
         </ul>
       </Balloon>
     );
 
-    return (
-      <div className="lc-icon-setter">
-        <Input innerBefore={InnerBeforeNode} onChange={this.onInputChange} value={value} />
-      </div>
-    );
+    return <div className="lc-icon-setter">{InnerBeforeNode}</div>;
   }
 }

packages/editor-setters/src/index.tsx

@@ -19,14 +19,7 @@ export const NumberSetter = NumberPicker;
 export class BoolSetter extends Component {
   render() {
     const { onChange, value, defaultValue } = this.props;
-    return (
-      <Switch
-        checked={value || defaultValue}
-        onChange={(val) => {
-          onChange(val);
-        }}
-      />
-    );
+    return <Switch checked={value} defaultChecked={defaultValue} onChange={onChange} />;
   }
 }
 export const SelectSetter = Select;