From 797da5bdb005e89a4ba6c37fcea2dd758fff2e91 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Mon, 10 May 2021 15:47:03 +0800
Subject: [PATCH] fix: show clear button

---
 .../app/src/components/fields/icons/index.tsx | 64 ++++++++++---------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/packages/app/src/components/fields/icons/index.tsx b/packages/app/src/components/fields/icons/index.tsx
index af2b69e9de..d41780c5c9 100644
--- a/packages/app/src/components/fields/icons/index.tsx
+++ b/packages/app/src/components/fields/icons/index.tsx
@@ -1,42 +1,48 @@
 import React, { useState } from 'react';
 import { connect } from '@formily/react-schema-renderer';
-import { Popover, Button } from 'antd';
+import { Popover, Button, Input } from 'antd';
 import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared';
 import { icons, hasIcon, Icon as IconComponent } from '@/components/icons';
+import { CloseOutlined } from '@ant-design/icons';
 
 function IconField(props: any) {
   const { value, onChange } = props;
   const [visible, setVisible] = useState(false);
   return (
     <div>
-      <Popover
-        placement={'bottom'}
-        visible={visible}
-        onVisibleChange={val => {
-          setVisible(val);
-        }}
-        content={
-          <div>
-            {[...icons.keys()].map(key => (
-              <span
-                style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}
-                onClick={() => {
-                  onChange(key);
-                  setVisible(false);
-                }}
-              >
-                <IconComponent type={key} />
-              </span>
-            ))}
-          </div>
-        }
-        title="图标"
-        trigger="click"
-      >
-        <Button>
-          {hasIcon(value) ? <IconComponent type={value} /> : '选择图标'}
-        </Button>
-      </Popover>
+      <Input.Group compact>
+        <Popover
+          placement={'bottom'}
+          visible={visible}
+          onVisibleChange={val => {
+            setVisible(val);
+          }}
+          content={
+            <div>
+              {[...icons.keys()].map(key => (
+                <span
+                  style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}
+                  onClick={() => {
+                    onChange(key);
+                    setVisible(false);
+                  }}
+                >
+                  <IconComponent type={key} />
+                </span>
+              ))}
+            </div>
+          }
+          title="图标"
+          trigger="click"
+        >
+          <Button>
+            {hasIcon(value) ? <IconComponent type={value} /> : '选择图标'}
+          </Button>
+        </Popover>
+        {value && <Button icon={<CloseOutlined/>} onClick={e => {
+          onChange(null);
+        }}></Button>}
+      </Input.Group>
     </div>
   );
 }