@rc-component/select 1.0.7 → 1.1.0

package/README.md

@@ -89,7 +89,7 @@ export default () => (
 | open | control select open | boolean |  |
 | defaultOpen | control select default open | boolean |  |
 | placeholder | select placeholder | React Node |  |
-| showSearch | whether show search input in single mode | boolean | true |
+| showSearch | whether show search input in single mode | boolean \| Object | 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 | - |
@@ -99,16 +99,12 @@ export default () => (
 | 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 | 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 | - |
 | onFocus | called when focus | function | - |
 | onPopupScroll | called when menu is scrolled | function | - |
@@ -120,7 +116,6 @@ export default () => (
 | getInputElement | customize input element | function(): Element | - |
 | showAction | actions trigger the dropdown to show | String[]? | - |
 | autoFocus | focus select after mount | boolean | - |
-| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
 | prefix | specify the select prefix icon or text | ReactNode | - |
 | suffixIcon | specify the select arrow icon | ReactNode | - |
 | clearIcon | specify the clear icon | ReactNode | - |
@@ -141,6 +136,17 @@ export default () => (
 | focus | focus select programmably | -          | -      |
 | blur  | blur select programmably  | -          | -      |
 
+### showSearch
+
+| name | description | type | default |
+| --- | --- | --- | --- |
+| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
+| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean\| (inputValue: string, option: Option) => boolean | true |
+| 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) | - |
+| optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
+| searchValue | The current input "search" text | string | - |
+| onSearch | called when input changed | function | - |
+
 ### Option props
 
 | name | description | type | default |

package/es/Select.d.ts

@@ -67,13 +67,27 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 export type SemanticName = BaseSelectSemanticName;
 export type PopupSemantic = 'listItem' | 'list';
-export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
+export interface SearchConfig<OptionType> {
+    searchValue?: string;
+    autoClearSearchValue?: boolean;
+    onSearch?: (value: string) => void;
+    filterOption?: boolean | FilterFunc<OptionType>;
+    filterSort?: (optionA: OptionType, optionB: OptionType, info: {
+        searchValue: string;
+    }) => number;
+    optionFilterProp?: string;
+}
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends Omit<BaseSelectPropsWithoutPrivate, 'showSearch'> {
     prefixCls?: string;
     id?: string;
     backfill?: boolean;
     fieldNames?: FieldNames;
-    searchValue?: string;
-    onSearch?: (value: string) => void;
+    /**  @deprecated please use  showSearch.onSearch */
+    onSearch?: SearchConfig<OptionType>['onSearch'];
+    showSearch?: boolean | SearchConfig<OptionType>;
+    /**  @deprecated please use  showSearch.searchValue */
+    searchValue?: SearchConfig<OptionType>['searchValue'];
+    /**  @deprecated please use  showSearch.autoClearSearchValue */
     autoClearSearchValue?: boolean;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
@@ -83,10 +97,11 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
      * In TreeSelect, `false` will highlight match item.
      * It's by design.
      */
-    filterOption?: boolean | FilterFunc<OptionType>;
-    filterSort?: (optionA: OptionType, optionB: OptionType, info: {
-        searchValue: string;
-    }) => number;
+    /**  @deprecated please use  showSearch.filterOption */
+    filterOption?: SearchConfig<OptionType>['filterOption'];
+    /**  @deprecated please use  showSearch.filterSort */
+    filterSort?: SearchConfig<OptionType>['filterSort'];
+    /**  @deprecated please use  showSearch.optionFilterProp */
     optionFilterProp?: string;
     optionLabelProp?: string;
     children?: React.ReactNode;
@@ -110,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/es/Select.js

@@ -46,6 +46,7 @@ import useRefFunc from "./hooks/useRefFunc";
 import { hasValue, isComboNoValue, toArray } from "./utils/commonUtil";
 import { fillFieldNames, flattenOptions, injectPropsWithOption } from "./utils/valueUtil";
 import warningProps, { warningNullOptions } from "./utils/warningPropsUtil";
+import useSearchConfig from "./hooks/useSearchConfig";
 const OMIT_DOM_PROPS = ['inputValue'];
 function isRawValue(value) {
   return !value || typeof value !== 'object';
@@ -58,18 +59,12 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     backfill,
     fieldNames,
     // Search
-    searchValue,
-    onSearch,
-    autoClearSearchValue = true,
+    showSearch,
     // Select
     onSelect,
     onDeselect,
     onActive,
     popupMatchSelectWidth = true,
-    // Options
-    filterOption,
-    filterSort,
-    optionFilterProp,
     optionLabelProp,
     options,
     optionRender,
@@ -91,6 +86,15 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     styles,
     ...restProps
   } = props;
+  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, props);
+  const {
+    filterOption,
+    searchValue,
+    optionFilterProp,
+    filterSort,
+    onSearch,
+    autoClearSearchValue = true
+  } = searchConfig;
   const mergedId = useId(id);
   const multiple = isMultiple(mode);
   const childrenAsData = !!(!options && children);
@@ -476,6 +480,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     direction: direction
     // >>> Search
     ,
+    showSearch: mergedShowSearch,
     searchValue: mergedSearchValue,
     onSearch: onInternalSearch,
     autoClearSearchValue: autoClearSearchValue,

package/es/hooks/useSearchConfig.d.ts

@@ -0,0 +1,2 @@
+import type { SearchConfig, DefaultOptionType, SelectProps } from "../Select";
+export default function useSearchConfig(showSearch: boolean | SearchConfig<DefaultOptionType> | undefined, props: SelectProps): [boolean, SearchConfig<DefaultOptionType>];

package/es/hooks/useSearchConfig.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+// Convert `showSearch` to unique config
+export default function useSearchConfig(showSearch, props) {
+  const {
+    filterOption,
+    searchValue,
+    optionFilterProp,
+    filterSort,
+    onSearch,
+    autoClearSearchValue
+  } = props;
+  return React.useMemo(() => {
+    const isObject = typeof showSearch === 'object';
+    const searchConfig = {
+      filterOption,
+      searchValue,
+      optionFilterProp,
+      filterSort,
+      onSearch,
+      autoClearSearchValue,
+      ...(isObject ? showSearch : {})
+    };
+    return [isObject ? true : showSearch, searchConfig];
+  }, [showSearch, filterOption, searchValue, optionFilterProp, filterSort, onSearch, autoClearSearchValue]);
+}

package/lib/Select.d.ts

@@ -67,13 +67,27 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 export type SemanticName = BaseSelectSemanticName;
 export type PopupSemantic = 'listItem' | 'list';
-export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
+export interface SearchConfig<OptionType> {
+    searchValue?: string;
+    autoClearSearchValue?: boolean;
+    onSearch?: (value: string) => void;
+    filterOption?: boolean | FilterFunc<OptionType>;
+    filterSort?: (optionA: OptionType, optionB: OptionType, info: {
+        searchValue: string;
+    }) => number;
+    optionFilterProp?: string;
+}
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends Omit<BaseSelectPropsWithoutPrivate, 'showSearch'> {
     prefixCls?: string;
     id?: string;
     backfill?: boolean;
     fieldNames?: FieldNames;
-    searchValue?: string;
-    onSearch?: (value: string) => void;
+    /**  @deprecated please use  showSearch.onSearch */
+    onSearch?: SearchConfig<OptionType>['onSearch'];
+    showSearch?: boolean | SearchConfig<OptionType>;
+    /**  @deprecated please use  showSearch.searchValue */
+    searchValue?: SearchConfig<OptionType>['searchValue'];
+    /**  @deprecated please use  showSearch.autoClearSearchValue */
     autoClearSearchValue?: boolean;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
@@ -83,10 +97,11 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
      * In TreeSelect, `false` will highlight match item.
      * It's by design.
      */
-    filterOption?: boolean | FilterFunc<OptionType>;
-    filterSort?: (optionA: OptionType, optionB: OptionType, info: {
-        searchValue: string;
-    }) => number;
+    /**  @deprecated please use  showSearch.filterOption */
+    filterOption?: SearchConfig<OptionType>['filterOption'];
+    /**  @deprecated please use  showSearch.filterSort */
+    filterSort?: SearchConfig<OptionType>['filterSort'];
+    /**  @deprecated please use  showSearch.optionFilterProp */
     optionFilterProp?: string;
     optionLabelProp?: string;
     children?: React.ReactNode;
@@ -110,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/lib/Select.js

@@ -20,6 +20,7 @@ var _useRefFunc = _interopRequireDefault(require("./hooks/useRefFunc"));
 var _commonUtil = require("./utils/commonUtil");
 var _valueUtil = require("./utils/valueUtil");
 var _warningPropsUtil = _interopRequireWildcard(require("./utils/warningPropsUtil"));
+var _useSearchConfig = _interopRequireDefault(require("./hooks/useSearchConfig"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -65,18 +66,12 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     backfill,
     fieldNames,
     // Search
-    searchValue,
-    onSearch,
-    autoClearSearchValue = true,
+    showSearch,
     // Select
     onSelect,
     onDeselect,
     onActive,
     popupMatchSelectWidth = true,
-    // Options
-    filterOption,
-    filterSort,
-    optionFilterProp,
     optionLabelProp,
     options,
     optionRender,
@@ -98,6 +93,15 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     styles,
     ...restProps
   } = props;
+  const [mergedShowSearch, searchConfig] = (0, _useSearchConfig.default)(showSearch, props);
+  const {
+    filterOption,
+    searchValue,
+    optionFilterProp,
+    filterSort,
+    onSearch,
+    autoClearSearchValue = true
+  } = searchConfig;
   const mergedId = (0, _useId.default)(id);
   const multiple = (0, _BaseSelect.isMultiple)(mode);
   const childrenAsData = !!(!options && children);
@@ -483,6 +487,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     direction: direction
     // >>> Search
     ,
+    showSearch: mergedShowSearch,
     searchValue: mergedSearchValue,
     onSearch: onInternalSearch,
     autoClearSearchValue: autoClearSearchValue,

package/lib/hooks/useSearchConfig.d.ts

@@ -0,0 +1,2 @@
+import type { SearchConfig, DefaultOptionType, SelectProps } from "../Select";
+export default function useSearchConfig(showSearch: boolean | SearchConfig<DefaultOptionType> | undefined, props: SelectProps): [boolean, SearchConfig<DefaultOptionType>];

package/lib/hooks/useSearchConfig.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSearchConfig;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Convert `showSearch` to unique config
+function useSearchConfig(showSearch, props) {
+  const {
+    filterOption,
+    searchValue,
+    optionFilterProp,
+    filterSort,
+    onSearch,
+    autoClearSearchValue
+  } = props;
+  return React.useMemo(() => {
+    const isObject = typeof showSearch === 'object';
+    const searchConfig = {
+      filterOption,
+      searchValue,
+      optionFilterProp,
+      filterSort,
+      onSearch,
+      autoClearSearchValue,
+      ...(isObject ? showSearch : {})
+    };
+    return [isObject ? true : showSearch, searchConfig];
+  }, [showSearch, filterOption, searchValue, optionFilterProp, filterSort, onSearch, autoClearSearchValue]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"