Add search in Select and TreeSelect

Author: iron-tech-space

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.69
+
+- Add search in Select and TreeSelect
+
 ## 0.0.68
 
 - Add `response.data` as second param in onFinish func after requestSaveForm in `Form`

dist/index.es.js

@@ -276,8 +276,15 @@ var Select = function Select(props) {
 	var childProps = getObjectExcludedProps(props, excludeProps);
 	return React.createElement(
 		_Select,
-		_extends({}, childProps, {
+		_extends({
+			showArrow: true,
 			showSearch: true,
+			allowClear: true,
+			filterOption: false,
+			autoClearSearchValue: true
+
+		}, childProps, {
+
 			searchValue: _searchValue,
 			style: { width: widthControl }
 			// listHeight={heightPopup}
@@ -400,7 +407,7 @@ Select.defaultProps = {
 	options: [],
 	widthControl: '100%',
 	pageSize: 50,
-	searchParamName: 'searchValue'
+	searchParamName: 'name'
 };
 
 export default Select;

dist/index.es.js.map

@@ -39,10 +39,18 @@ var TreeSelect = function TreeSelect(props) {
         _useState4 = _slicedToArray(_useState3, 2),
         _treeData = _useState4[0],
         _setTreeData = _useState4[1];
+    /** Строка поиска */
+
+
+    var _useState5 = useState(undefined),
+        _useState6 = _slicedToArray(_useState5, 2),
+        _searchValue = _useState6[0],
+        _setSearchValue = _useState6[1];
 
     var isMounted = useMounted();
 
     useEffect(function () {
+        _setSearchValue(defaultSearchValue);
         _loadOptions({
             sortBy: defaultSortBy,
             filter: defaultFilter,
@@ -54,6 +62,7 @@ var TreeSelect = function TreeSelect(props) {
     useEffect(function () {
         // console.log("Change sortBy, filter, searchValue", sortBy, filter, searchValue);
         if (isMounted) {
+            _setSearchValue(searchValue);
             _loadOptions({
                 sortBy: sortBy,
                 filter: filter,
@@ -63,6 +72,17 @@ var TreeSelect = function TreeSelect(props) {
         }
     }, [sortBy, filter, searchValue]);
 
+    var onSearch = function onSearch(value) {
+        // console.log('TreeSelect onSearch => ', value);
+        _setSearchValue(value);
+        _loadOptions({
+            sortBy: defaultSortBy,
+            filter: defaultFilter,
+            searchValue: value,
+            reload: true
+        });
+    };
+
     var getSort = function getSort(sortBy) {
         return sortBy && sortBy.key ? sortBy.key + ',' + sortBy.order : null;
     };
@@ -97,6 +117,7 @@ var TreeSelect = function TreeSelect(props) {
                 // console.log("infinity then response", response);
                 var result = response.data;
                 _setTreeData(_optionConverter(result));
+                _setLoading(false);
             }).catch(function (error) {
                 notificationError(error, 'Ошибка загрузки данных');
                 // _setRowsHandler(_options); // _setRows
@@ -107,13 +128,23 @@ var TreeSelect = function TreeSelect(props) {
     };
 
     var childProps = getObjectExcludedProps(props, excludeProps);
-    return React.createElement(_TreeSelect, _extends({}, childProps, {
+    return React.createElement(_TreeSelect, _extends({
+        showArrow: true,
+        showSearch: true,
+        allowClear: true,
+        filterTreeNode: false,
+        autoClearSearchValue: true,
+        treeDefaultExpandAll: true
+
+    }, childProps, {
+
+        searchValue: _searchValue,
+        onSearch: onSearch,
         maxTagCount: 0,
         maxTagPlaceholder: function maxTagPlaceholder(omittedValues) {
             return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: " + omittedValues.length;
         },
-        treeData: _treeData,
-        showArrow: true
+        treeData: _treeData
         // loadData={onLoadData}
     }));
 };
@@ -173,7 +204,8 @@ TreeSelect.defaultProps = {
     defaultSortBy: undefined,
     defaultFilter: {},
     defaultSearchValue: undefined,
-    requestLoadRows: undefined
+    requestLoadRows: undefined,
+    searchParamName: 'name'
 };
 
 export default TreeSelect;

dist/index.js

@@ -1,6 +1,6 @@
 {
 	"name": "rt-design",
-	"version": "0.0.68",
+	"version": "0.0.69",
 	"description": "React technical design library",
 	"author": "Iron tech space",
 	"license": "MIT",

dist/index.js.map

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import PropTypes from "prop-types";
-import {Select as AntSelect} from "antd";
+import { Select as AntSelect } from "antd";
 import {
 	getObjectExcludedProps,
 	notificationError, useMounted
@@ -247,8 +247,14 @@ const Select = props => {
 	const childProps = getObjectExcludedProps(props, excludeProps);
     return (
 		<AntSelect
-			{...childProps}
+			showArrow={true}
 			showSearch={true}
+			allowClear={true}
+			filterOption={false}
+			autoClearSearchValue={true}
+
+			{...childProps}
+
 			searchValue={_searchValue}
 			style={{ width: widthControl }}
 			// listHeight={heightPopup}
@@ -351,7 +357,7 @@ Select.defaultProps = {
 	options: [],
 	widthControl: '100%',
 	pageSize: 50,
-	searchParamName: 'searchValue',
+	searchParamName: 'name',
 }
 
 export default Select;