feat: refactor allowClear (#965)

* feat: refactor allowClear

* feat: refactor allowClear

* docs: update docs

* feat: optimize code

* feat: test case

Author: kiner-tang

README.md

@@ -76,34 +76,34 @@ export default () => (
 | animation | dropdown animation name. only support slide-up now | String | '' |
 | transitionName | dropdown css animation name | String | '' |
 | choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
-| dropdownMatchSelectWidth | whether dropdown's width is same with select | bool | true |
+| dropdownMatchSelectWidth | whether dropdown's width is same with select | boolean | true |
 | dropdownClassName | additional className applied to dropdown | String | - |
 | dropdownStyle | additional style applied to dropdown | React.CSSProperties | {} |
 | dropdownAlign | additional align applied to dropdown | [AlignType](https://github.com/react-component/trigger/blob/728d7e92394aa4b3214650f743fc47e1382dfa68/src/interface.ts#L25-L80) | {} |
 | dropdownMenuStyle | additional style applied to dropdown menu | Object | React.CSSProperties |
 | notFoundContent | specify content to show when no result matches. | ReactNode | 'Not Found' |
 | tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? |  |
-| open | control select open | bool |  |
-| defaultOpen | control select default open | bool |  |
+| open | control select open | boolean |  |
+| defaultOpen | control select default open | boolean |  |
 | placeholder | select placeholder | React Node |  |
-| showSearch | whether show search input in single mode | bool | true |
-| allowClear | whether allowClear | bool | false |
-| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
+| showSearch | whether show search input in single mode | boolean | true |
+| allowClear | whether allowClear | boolean | { clearIcon?: ReactNode } | false |
+| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean | false |
 | tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |
 | maxTagTextLength | max tag text length to show | number | - |
 | maxTagCount | max tag count to show | number | - |
 | maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
-| combobox | enable combobox mode(can not set multiple at the same time) | bool | false |
-| multiple | whether multiple select | bool | false |
-| disabled | whether disabled select | bool | false |
-| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) |
+| combobox | enable combobox mode(can not set multiple at the same time) | boolean | false |
+| multiple | whether multiple select | boolean | false |
+| disabled | whether disabled select | boolean | false |
+| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean | true/Function(inputValue:string, option:Option) |
 | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
 | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - |
 | optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' |
 | defaultValue | initial selected option(s) | String \| String[] | - |
 | value | current selected option(s) | String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[] | - |
-| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | Bool | false |
-| backfill | whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
+| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | boolean | false |
+| backfill | whether backfill select option to search input (Only works in single and combobox mode) | boolean | false |
 | onChange | called when select an option or input value change(combobox) | function(value, option:Option \| Option[]) | - |
 | onSearch | called when input changed | function | - |
 | onBlur | called when blur | function | - |
@@ -112,19 +112,19 @@ export default () => (
 | onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - |
 | onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - |
 | onInputKeyDown | called when key down on input | Function(event) | - |
-| defaultActiveFirstOption | whether active first option by default | bool | true |
+| defaultActiveFirstOption | whether active first option by default | boolean | true |
 | getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
 | getInputElement | customize input element | function(): Element | - |
 | showAction | actions trigger the dropdown to show | String[]? | - |
-| autoFocus | focus select after mount | Bool | - |
+| autoFocus | focus select after mount | boolean | - |
 | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
 | suffixIcon | specify the select arrow icon | ReactNode | - |
 | clearIcon | specify the clear icon | ReactNode | - |
 | removeIcon | specify the remove icon | ReactNode | - |
 | menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |
 | dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - |
-| loading | show loading icon in arrow | Boolean | false |
-| virtual | Disable virtual scroll | Boolean | true |
+| loading | show loading icon in arrow | boolean | false |
+| virtual | Disable virtual scroll | boolean | true |
 | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
 
 ### Methods
@@ -139,7 +139,7 @@ export default () => (
 | name | description | type | default |
 | --- | --- | --- | --- |
 | className | additional class to option | String | '' |
-| disabled | no effect for click or keydown for this item | bool | false |
+| disabled | no effect for click or keydown for this item | boolean | false |
 | key | if react want you to set key, then key is same as value, you can omit value | String/number | - |
 | value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - |
 | title | if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property | String | - |

package.json

@@ -59,6 +59,7 @@
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.3",
+    "babel-jest": "^29.6.1",
     "cross-env": "^7.0.0",
     "dumi": "^1.1.32",
     "enzyme": "^3.3.0",

src/BaseSelect.tsx

@@ -17,6 +17,11 @@ import type { RefTriggerProps } from './SelectTrigger';
 import SelectTrigger from './SelectTrigger';
 import TransBtn from './TransBtn';
 import { getSeparatedContent } from './utils/valueUtil';
+import type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType } from './interface';
+import { useAllowClear } from './hooks/useAllowClear';
+import { warning } from 'rc-util';
+
+export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType };
 
 const DEFAULT_OMIT_PROPS = [
   'value',
@@ -32,19 +37,6 @@ const DEFAULT_OMIT_PROPS = [
   'onPopupScroll',
   'tabIndex',
 ] as const;
-
-export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
-
-export type RenderDOMFunc = (props: any) => HTMLElement;
-
-export type Mode = 'multiple' | 'tags' | 'combobox';
-
-export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
-
-export type RawValueType = string | number;
-
-export type DisplayInfoType = 'add' | 'remove' | 'clear';
-
 export interface RefOptionListProps {
   onKeyDown: React.KeyboardEventHandler;
   onKeyUp: React.KeyboardEventHandler;
@@ -59,14 +51,6 @@ export type CustomTagProps = {
   closable: boolean;
 };
 
-export interface DisplayValueType {
-  key?: React.Key;
-  value?: RawValueType;
-  label?: React.ReactNode;
-  title?: string | number;
-  disabled?: boolean;
-}
-
 export interface BaseSelectRef {
   focus: () => void;
   blur: () => void;
@@ -104,10 +88,10 @@ export interface BaseSelectPrivateProps {
     searchValue: string,
     info: {
       source:
-        | 'typing' //User typing
-        | 'effect' // Code logic trigger
-        | 'submit' // tag mode only
-        | 'blur'; // Not trigger event
+      | 'typing' //User typing
+      | 'effect' // Code logic trigger
+      | 'submit' // tag mode only
+      | 'blur'; // Not trigger event
     },
   ) => void;
   /** Trigger when search text match the `tokenSeparators`. Will provide split content */
@@ -168,9 +152,12 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   tokenSeparators?: string[];
 
   // >>> Icons
-  allowClear?: boolean;
+  allowClear?: boolean | { clearIcon?: RenderNode };
   suffixIcon?: RenderNode;
-  /** Clear all icon */
+  /** 
+   * Clear all icon 
+   * @deprecated Please use `allowClear` instead
+   **/
   clearIcon?: RenderNode;
   /** Selector remove icon */
   removeIcon?: RenderNode;
@@ -697,7 +684,12 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
   }
 
   // ============================= Clear ==============================
-  let clearNode: React.ReactNode;
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !props.clearIcon,
+      '`clearIcon` will be removed in future. Please use `allowClear` instead.',
+    );
+  }
   const onClearMouseDown: React.MouseEventHandler<HTMLSpanElement> = () => {
     onClear?.();
 
@@ -710,22 +702,21 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
     onInternalSearch('', false, false);
   };
 
-  if (
-    !disabled &&
-    allowClear &&
-    (displayValues.length || mergedSearchValue) &&
-    !(mode === 'combobox' && mergedSearchValue === '')
-  ) {
-    clearNode = (
-      <TransBtn
-        className={`${prefixCls}-clear`}
-        onMouseDown={onClearMouseDown}
-        customizeIcon={clearIcon}
-      >
-        ×
-      </TransBtn>
-    );
-  }
+  const {
+    allowClear: mergedAllowClear,
+    clearIcon: clearNode
+  } = useAllowClear(
+    prefixCls,
+    onClearMouseDown,
+    displayValues,
+    allowClear,
+    clearIcon,
+    disabled,
+    
+    mergedSearchValue,
+    mode,
+  );
+
 
   // =========================== OptionList ===========================
   const optionList = <OptionList ref={listRef} />;
@@ -839,7 +830,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
         )}
         {selectorNode}
         {arrowNode}
-        {clearNode}
+        {mergedAllowClear && clearNode}
       </div>
     );
   }

src/hooks/useAllowClear.tsx

@@ -0,0 +1,48 @@
+import TransBtn from '../TransBtn';
+import type { DisplayValueType, Mode } from '../interface';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+export function useAllowClear(
+    prefixCls,
+    onClearMouseDown,
+    displayValues: DisplayValueType[],
+    allowClear?: boolean | { clearIcon?: ReactNode },
+    clearIcon?: ReactNode,
+    disabled = false,
+    mergedSearchValue?: string,
+    mode?: Mode
+) {
+    const mergedClearIcon = React.useMemo(() => {
+        if (typeof allowClear === "object") {
+            return allowClear.clearIcon;
+        }
+        if (!!clearIcon) return clearIcon;
+    }, [allowClear, clearIcon]);
+
+
+    const mergedAllowClear = React.useMemo(() => {
+        if (
+            !disabled &&
+            !!allowClear &&
+            (displayValues.length || mergedSearchValue) &&
+            !(mode === 'combobox' && mergedSearchValue === '')
+        ) {
+            return true;
+        }
+        return false;
+    }, [allowClear, disabled, displayValues.length, mergedSearchValue, mode]);
+
+    return {
+        allowClear: mergedAllowClear,
+        clearIcon: (
+            <TransBtn
+                className={`${prefixCls}-clear`}
+                onMouseDown={onClearMouseDown}
+                customizeIcon={mergedClearIcon}
+            >
+                ×
+            </TransBtn>
+        )
+    };
+}

src/interface.ts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
-import type { RawValueType } from './BaseSelect';
 
+export type RawValueType = string | number;
 export interface FlattenOptionData<OptionType> {
   label?: React.ReactNode;
   data: OptionType;
@@ -9,3 +9,22 @@ export interface FlattenOptionData<OptionType> {
   groupOption?: boolean;
   group?: boolean;
 }
+
+export interface DisplayValueType {
+  key?: React.Key;
+  value?: RawValueType;
+  label?: React.ReactNode;
+  title?: string | number;
+  disabled?: boolean;
+}
+
+export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+
+export type RenderDOMFunc = (props: any) => HTMLElement;
+
+export type Mode = 'multiple' | 'tags' | 'combobox';
+
+export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+
+export type DisplayInfoType = 'add' | 'remove' | 'clear';
+

tests/Select.test.tsx

@@ -266,6 +266,46 @@ describe('Select.Basic', () => {
       </Select>,
     );
     expect(wrapper2.find('.rc-select-clear-icon').length).toBeFalsy();
+
+    const wrapper3 = mount(
+      <Select allowClear={{ clearIcon: <div className='custom-clear-icon'>x</div> }} value="1">
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+    expect(wrapper3.find('.custom-clear-icon').length).toBeTruthy();
+    expect(wrapper3.find('.custom-clear-icon').text()).toBe('x');
+
+    const wrapper4 = mount(
+      <Select allowClear={{ clearIcon: <div className='custom-clear-icon'>x</div> }}>
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+    expect(wrapper4.find('.custom-clear-icon').length).toBeFalsy();
+
+
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const wrapper5 = mount(
+      <Select allowClear clearIcon={<div className='custom-clear-icon'>x</div>} value="1">
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+    expect(wrapper5.find('.custom-clear-icon').length).toBeTruthy();
+    expect(wrapper5.find('.custom-clear-icon').text()).toBe('x');
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.'
+    );
+
+    const wrapper6 = mount(
+      <Select allowClear clearIcon={<div className='custom-clear-icon'>x</div>}>
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+    expect(wrapper6.find('.custom-clear-icon').length).toBeFalsy();
   });
 
   it('should direction rtl', () => {