feat(comp:select): add clearIcon (#798)

IDuxFE · Mar 11, 2022 · 57e88f0 · 57e88f0
1 parent 170c4c1
commit 57e88f0
Show file tree

Hide file tree

Showing 13 changed files with 57 additions and 10 deletions.
diff --git a/packages/components/_private/input/__tests__/input.spec.ts b/packages/components/_private/input/__tests__/input.spec.ts
@@ -1,7 +1,10 @@
 import { MountingOptions, mount } from '@vue/test-utils'
+import { h } from 'vue'
 
 import { renderWork } from '@tests'
 
+import { IxIcon } from '@idux/components/icon'
+
 import Input from '../src/Input'
 import { InputProps } from '../src/types'
 
@@ -105,6 +108,18 @@ describe('Input', () => {
     expect(wrapper.find('.ix-input-clear').exists()).toBe(false)
   })
 
+  test('clearIcon slot work', async () => {
+    const wrapper = InputMount({
+      props: { clearable: true, clearIcon: 'up' },
+      slots: {
+        clearIcon: () => h(IxIcon, { name: 'down' }),
+      },
+    })
+
+    expect(wrapper.find('.ix-input-clear').find('.ix-icon-up').exists()).toBe(false)
+    expect(wrapper.find('.ix-input-clear').find('.ix-icon-down').exists()).toBe(true)
+  })
+
   test('disabled work', async () => {
     const onFocus = jest.fn()
     const onBlur = jest.fn()

diff --git a/packages/components/_private/input/src/Input.tsx b/packages/components/_private/input/src/Input.tsx
@@ -51,7 +51,7 @@ export default defineComponent({
       const suffixNode = renderIcon(slots.suffix, suffix, `${prefixCls}-suffix`)
       const clearNode = clearable && (
         <span class={`${prefixCls}-clear${clearVisible ? ' visible' : ''}`} onClick={onClear}>
-          <IxIcon name={clearIcon} />
+          {slots.clearIcon ? slots.clearIcon() : <IxIcon name={clearIcon} />}
         </span>
       )
 

diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -217,6 +217,7 @@ export const defaultConfig: GlobalConfig = {
   select: {
     borderless: false,
     childrenKey: 'children',
+    clearIcon: 'close-circle',
     labelKey: 'label',
     size: 'md',
     suffix: 'down',

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -344,6 +344,7 @@ export interface RowConfig {
 export interface SelectConfig {
   borderless: boolean
   childrenKey: string
+  clearIcon: string
   labelKey: string
   size: FormSize
   suffix: string

diff --git a/packages/components/date-picker/docs/Index.zh.md b/packages/components/date-picker/docs/Index.zh.md
@@ -19,7 +19,7 @@ order: 0
 | `autofocus` | 默认获取焦点 | `boolean` | `false` | - | - |
 | `borderless` | 是否无边框 | `boolean` | `false` | ✅ | - |
 | `clearable` | 是否显示清除图标 | `boolean` | `false` | ✅ | - |
-| `clearIcon` | 清除按钮图标 |`string` | `'close-circle'` | ✅ | - |
+| `clearIcon` | 清除按钮图标 |`string \| #clearIcon` | `'close-circle'` | ✅ | - |
 | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
 | `disabledDate` | 不可选择的日期 | `(date: Date) => boolean` | - | - | - |
 | `format` | 展示的格式 | `string` | - | ✅ | 默认值参见 `defaultFormat`, 更多用法参考[date-fns](https://date-fns.org/v2.27.0/docs/format) |

diff --git a/packages/components/input/docs/Index.zh.md b/packages/components/input/docs/Index.zh.md
@@ -21,7 +21,7 @@ subtitle: 输入框
 | `addonBefore` | 设置前置标签 | `string \| #addonBefore` | - | - | - |
 | `borderless` | 是否显示边框 | `boolean` | `false` | ✅ | - |
 | `clearable` | 是否显示清除图标 | `boolean` | `false` | ✅ | - |
-| `clearIcon` | 设置清除图标 | `string \| #clearIcon={onClear}` | `'close-circle'` | ✅ | - |
+| `clearIcon` | 设置清除图标 | `string \| #clearIcon` | `'close-circle'` | ✅ | - |
 | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
 | `prefix` | 设置前缀图标 | `string \| #prefix` | - | - | - |
 | `readonly` | 是否只读状态 | `boolean` | `false` | - | - |

diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
@@ -165,6 +165,28 @@ describe('Select', () => {
       expect(wrapper.find('.ix-select-selector-item').text()).toBe('Jerry')
     })
 
+    test('clearIcon work', async () => {
+      const wrapper = SelectMount({ props: { clearable: true, clearIcon: 'up' } })
+
+      expect(wrapper.find('.ix-select-selector-clear').find('.ix-icon-up').exists()).toBe(true)
+
+      await wrapper.setProps({ clearIcon: 'down' })
+
+      expect(wrapper.find('.ix-select-selector-clear').find('.ix-icon-down').exists()).toBe(true)
+    })
+
+    test('clearIcon slot work', async () => {
+      const wrapper = SelectMount({
+        props: { clearable: true, clearIcon: 'up' },
+        slots: {
+          clearIcon: () => h(IxIcon, { name: 'down' }),
+        },
+      })
+
+      expect(wrapper.find('.ix-select-selector-clear').find('.ix-icon-up').exists()).toBe(false)
+      expect(wrapper.find('.ix-select-selector-clear').find('.ix-icon-down').exists()).toBe(true)
+    })
+
     test('compareFn work', async () => {
       const compareFn = (o1: string, o2: string) => !!o1 && !!o2 && o1.charAt(0) === o2.charAt(0)
       const wrapper = SelectMount({ props: { value: 't', compareFn } })

diff --git a/packages/components/select/docs/Index.zh.md b/packages/components/select/docs/Index.zh.md
@@ -22,6 +22,7 @@ order: 0
 | `borderless` | 是否无边框 | `boolean` | `false` | ✅ | - |
 | `childrenKey` | 分组选项的 key | `string` | `children` | ✅ | 仅在使用 `dataSource` 时有效 |
 | `clearable` | 是否显示清除图标 | `boolean` | `false` | - | - |
+| `clearIcon` | 设置清除图标 | `string \| #clearIcon` | `'close-circle'` | ✅ | - |
 | `compareFn` | 用于自定义判断两个 `option` 的值是否相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1 === o2` | - | 通常用于 `option` 的为对象的情况 |
 | `dataSource` | 选项数据源 | `SelectData[]` | - | - | 优先级高于 `default` 插槽, 性能会更好 |
 | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |

diff --git a/packages/components/select/src/trigger/Selector.tsx b/packages/components/select/src/trigger/Selector.tsx
@@ -25,6 +25,7 @@ export default defineComponent({
     const {
       props: selectProps,
       slots,
+      config,
       mergedPrefixCls,
       isDisabled,
       selectedValue,
@@ -65,6 +66,8 @@ export default defineComponent({
       )
     })
 
+    const clearIcon = computed(() => selectProps.clearIcon ?? config.clearIcon)
+
     return () => {
       const { clearable, suffix } = props
       const { multiple, readonly } = selectProps
@@ -118,7 +121,7 @@ export default defineComponent({
           )}
           {clearable && (
             <div class={`${prefixCls}-clear`} onClick={handleClear}>
-              <IxIcon name="close-circle" />
+              {slots.clearIcon ? slots.clearIcon() : <IxIcon name={clearIcon.value} />}
             </div>
           )}
         </div>

diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
@@ -29,6 +29,7 @@ export const selectProps = {
   borderless: IxPropTypes.bool,
   childrenKey: IxPropTypes.string,
   clearable: IxPropTypes.bool.def(false),
+  clearIcon: IxPropTypes.string,
   compareWith: IxPropTypes.func<(o1: any, o2: any) => boolean>(),
   compareFn: IxPropTypes.func<(o1: any, o2: any) => boolean>().def(defaultCompareFn),
   dataSource: IxPropTypes.array<SelectData>(),

diff --git a/packages/components/textarea/docs/Index.zh.md b/packages/components/textarea/docs/Index.zh.md
@@ -19,7 +19,7 @@ subtitle: 文本域
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
 | `autoRows` | 是否显示自适应 `rows` | `boolean \| { minRows: number, maxRows: number }` | `false` | ✅ | - |
 | `clearable` | 是否显示清除图标 | `boolean` | `false` | ✅ | - |
-| `clearIcon` | 设置清除图标 | `string \| #clearIcon={onClear}` | `'close-circle'` | ✅ | - |
+| `clearIcon` | 设置清除图标 | `string \| #clearIcon` | `'close-circle'` | ✅ | - |
 | `computeCount` | 自定义计算字符数的函数 | `(value: string) => string` | - | ✅ | 优先级高于 `maxCount` |
 | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
 | `maxCount` | 数字提示显示的最大值 | `number` | - | ✅ | 仅用于提示，不做校验控制 |

diff --git a/packages/components/textarea/src/Textarea.tsx b/packages/components/textarea/src/Textarea.tsx
@@ -140,6 +140,10 @@ function renderSuffix(
   if (!clearVisible) {
     classes += ` ${prefixCls}-suffix-hidden`
   }
-  const children = clearIconSlot?.({ onClear }) ?? <IxIcon name={clearIcon} onClick={onClear}></IxIcon>
-  return <span class={classes}>{children}</span>
+
+  return (
+    <span class={classes} onClick={onClear}>
+      {clearIconSlot ? clearIconSlot() : <IxIcon name={clearIcon}></IxIcon>}
+    </span>
+  )
 }
diff --git a/packages/components/time-picker/src/trigger/BaseTrigger.tsx b/packages/components/time-picker/src/trigger/BaseTrigger.tsx
@@ -79,9 +79,8 @@ export default defineComponent({
       }
 
       return (
-        <span class={`${mergedPrefixCls.value}-clear-icon`}>
-          {slots.clearIcon?.({ onClear }) ??
-            (props.clearIcon && <IxIcon name={props.clearIcon} onClick={onClear}></IxIcon>)}
+        <span class={`${mergedPrefixCls.value}-clear-icon`} onClick={onClear}>
+          {slots.clearIcon ? slots.clearIcon() : props.clearIcon && <IxIcon name={props.clearIcon}></IxIcon>}
         </span>
       )
     }