@rc-component/tree-select 1.1.3 → 1.2.0

package/es/TreeSelect.d.ts

@@ -8,7 +8,14 @@ import { SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from './utils/strategyUtil';
 import type { SafeKey, DataNode, SimpleModeConfig, ChangeEventExtra, FieldNames, LegacyDataNode } from './interface';
 export type SemanticName = 'input' | 'prefix' | 'suffix';
 export type PopupSemantic = 'item' | 'itemTitle';
-export interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> extends Omit<BaseSelectPropsWithoutPrivate, 'mode' | 'classNames' | 'styles'> {
+export interface SearchConfig {
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
+    filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
+    treeNodeFilterProp?: string;
+}
+export interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> extends Omit<BaseSelectPropsWithoutPrivate, 'mode' | 'classNames' | 'styles' | 'showSearch'> {
     prefixCls?: string;
     id?: string;
     children?: React.ReactNode;
@@ -21,12 +28,18 @@ export interface TreeSelectProps<ValueType = any, OptionType extends DataNode =
     value?: ValueType;
     defaultValue?: ValueType;
     onChange?: (value: ValueType, labelList: React.ReactNode[], extra: ChangeEventExtra) => void;
+    showSearch?: boolean | SearchConfig;
+    /** @deprecated Use `showSearch.searchValue` instead */
     searchValue?: string;
-    /** @deprecated Use `searchValue` instead */
+    /** @deprecated Use `showSearch.searchValue` instead */
     inputValue?: string;
+    /** @deprecated Use `showSearch.onSearch` instead */
     onSearch?: (value: string) => void;
+    /** @deprecated Use `showSearch.autoClearSearchValue` instead */
     autoClearSearchValue?: boolean;
+    /** @deprecated Use `showSearch.filterTreeNode` instead */
     filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
+    /** @deprecated Use `showSearch.treeNodeFilterProp` instead */
     treeNodeFilterProp?: string;
     onSelect?: (value: ValueType, option: OptionType) => void;
     onDeselect?: (value: ValueType, option: OptionType) => void;

package/es/TreeSelect.js

@@ -18,6 +18,7 @@ import { fillAdditionalInfo, fillLegacyProps } from "./utils/legacyUtil";
 import { formatStrategyValues, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from "./utils/strategyUtil";
 import { fillFieldNames, isNil, toArray } from "./utils/valueUtil";
 import warningProps from "./utils/warningPropsUtil";
+import useSearchConfig from "./hooks/useSearchConfig";
 function isRawValue(value) {
   return !value || typeof value !== 'object';
 }
@@ -32,12 +33,7 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     onSelect,
     onDeselect,
     // Search
-    searchValue,
-    inputValue,
-    onSearch,
-    autoClearSearchValue = true,
-    filterTreeNode,
-    treeNodeFilterProp = 'value',
+    showSearch,
     // Selector
     showCheckedStrategy,
     treeNodeLabelProp,
@@ -86,6 +82,14 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mergedCheckable = treeCheckable || treeCheckStrictly;
   const mergedLabelInValue = treeCheckStrictly || labelInValue;
   const mergedMultiple = mergedCheckable || multiple;
+  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, props);
+  const {
+    searchValue,
+    onSearch,
+    autoClearSearchValue = true,
+    filterTreeNode,
+    treeNodeFilterProp = 'value'
+  } = searchConfig;
   const [internalValue, setInternalValue] = useMergedState(defaultValue, {
     value
   });
@@ -110,7 +114,7 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // =========================== Search ===========================
   const [mergedSearchValue, setSearchValue] = useMergedState('', {
-    value: searchValue !== undefined ? searchValue : inputValue,
+    value: searchValue,
     postState: search => search || ''
   });
   const onInternalSearch = searchText => {
@@ -498,7 +502,8 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     displayValues: cachedDisplayValues,
     onDisplayValuesChange: onDisplayValuesChange
     // >>> Search
-    ,
+  }, searchConfig, {
+    showSearch: mergedShowSearch,
     searchValue: mergedSearchValue,
     onSearch: onInternalSearch
     // >>> Options

package/es/hooks/useSearchConfig.d.ts

@@ -0,0 +1,2 @@
+import type { SearchConfig, TreeSelectProps } from "../TreeSelect";
+export default function useSearchConfig(showSearch: boolean | SearchConfig, props: TreeSelectProps): [boolean, SearchConfig];

package/es/hooks/useSearchConfig.js

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

package/lib/TreeSelect.d.ts

@@ -8,7 +8,14 @@ import { SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from './utils/strategyUtil';
 import type { SafeKey, DataNode, SimpleModeConfig, ChangeEventExtra, FieldNames, LegacyDataNode } from './interface';
 export type SemanticName = 'input' | 'prefix' | 'suffix';
 export type PopupSemantic = 'item' | 'itemTitle';
-export interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> extends Omit<BaseSelectPropsWithoutPrivate, 'mode' | 'classNames' | 'styles'> {
+export interface SearchConfig {
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
+    filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
+    treeNodeFilterProp?: string;
+}
+export interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> extends Omit<BaseSelectPropsWithoutPrivate, 'mode' | 'classNames' | 'styles' | 'showSearch'> {
     prefixCls?: string;
     id?: string;
     children?: React.ReactNode;
@@ -21,12 +28,18 @@ export interface TreeSelectProps<ValueType = any, OptionType extends DataNode =
     value?: ValueType;
     defaultValue?: ValueType;
     onChange?: (value: ValueType, labelList: React.ReactNode[], extra: ChangeEventExtra) => void;
+    showSearch?: boolean | SearchConfig;
+    /** @deprecated Use `showSearch.searchValue` instead */
     searchValue?: string;
-    /** @deprecated Use `searchValue` instead */
+    /** @deprecated Use `showSearch.searchValue` instead */
     inputValue?: string;
+    /** @deprecated Use `showSearch.onSearch` instead */
     onSearch?: (value: string) => void;
+    /** @deprecated Use `showSearch.autoClearSearchValue` instead */
     autoClearSearchValue?: boolean;
+    /** @deprecated Use `showSearch.filterTreeNode` instead */
     filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
+    /** @deprecated Use `showSearch.treeNodeFilterProp` instead */
     treeNodeFilterProp?: string;
     onSelect?: (value: ValueType, option: OptionType) => void;
     onDeselect?: (value: ValueType, option: OptionType) => void;

package/lib/TreeSelect.js

@@ -23,6 +23,7 @@ var _legacyUtil = require("./utils/legacyUtil");
 var _strategyUtil = require("./utils/strategyUtil");
 var _valueUtil = require("./utils/valueUtil");
 var _warningPropsUtil = _interopRequireDefault(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 }; }
@@ -41,12 +42,7 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     onSelect,
     onDeselect,
     // Search
-    searchValue,
-    inputValue,
-    onSearch,
-    autoClearSearchValue = true,
-    filterTreeNode,
-    treeNodeFilterProp = 'value',
+    showSearch,
     // Selector
     showCheckedStrategy,
     treeNodeLabelProp,
@@ -95,6 +91,14 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mergedCheckable = treeCheckable || treeCheckStrictly;
   const mergedLabelInValue = treeCheckStrictly || labelInValue;
   const mergedMultiple = mergedCheckable || multiple;
+  const [mergedShowSearch, searchConfig] = (0, _useSearchConfig.default)(showSearch, props);
+  const {
+    searchValue,
+    onSearch,
+    autoClearSearchValue = true,
+    filterTreeNode,
+    treeNodeFilterProp = 'value'
+  } = searchConfig;
   const [internalValue, setInternalValue] = (0, _useMergedState.default)(defaultValue, {
     value
   });
@@ -119,7 +123,7 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // =========================== Search ===========================
   const [mergedSearchValue, setSearchValue] = (0, _useMergedState.default)('', {
-    value: searchValue !== undefined ? searchValue : inputValue,
+    value: searchValue,
     postState: search => search || ''
   });
   const onInternalSearch = searchText => {
@@ -507,7 +511,8 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     displayValues: cachedDisplayValues,
     onDisplayValuesChange: onDisplayValuesChange
     // >>> Search
-    ,
+  }, searchConfig, {
+    showSearch: mergedShowSearch,
     searchValue: mergedSearchValue,
     onSearch: onInternalSearch
     // >>> Options

package/lib/hooks/useSearchConfig.d.ts

@@ -0,0 +1,2 @@
+import type { SearchConfig, TreeSelectProps } from "../TreeSelect";
+export default function useSearchConfig(showSearch: boolean | SearchConfig, props: TreeSelectProps): [boolean, SearchConfig];

package/lib/hooks/useSearchConfig.js

@@ -0,0 +1,32 @@
+"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 {
+    searchValue,
+    inputValue,
+    onSearch,
+    autoClearSearchValue,
+    filterTreeNode,
+    treeNodeFilterProp
+  } = props;
+  return React.useMemo(() => {
+    const isObject = typeof showSearch === 'object';
+    const searchConfig = {
+      searchValue: searchValue ?? inputValue,
+      onSearch,
+      autoClearSearchValue,
+      filterTreeNode,
+      treeNodeFilterProp,
+      ...(isObject ? showSearch : {})
+    };
+    return [isObject ? true : showSearch, searchConfig];
+  }, [showSearch, searchValue, inputValue, onSearch, autoClearSearchValue, filterTreeNode, treeNodeFilterProp]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/tree-select",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "tree-select ui component for react",
   "keywords": [
     "react",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "classnames": "2.x",
-    "@rc-component/select": "~1.0.7",
+    "@rc-component/select": "~1.1.0",
     "@rc-component/tree": "~1.0.1",
     "@rc-component/util": "^1.2.1"
   },