@antscorp/antsomi-ui 2.0.7 → 2.0.9

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { ConfigProvider } from 'antd';
 import clsx from 'clsx';
 import { isEmpty, uniqBy } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 // Components
 import { Button, Flex, Icon, Input, Popover, Spin, Tooltip, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyData, PopoverSelect, Select } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -37,6 +37,7 @@ import { getSelectedTreeData } from './utils';
 import { DataIcon, WarningIcon } from '../../icons';
 const initialState = {
     isOpenPopover: false,
+    searchValue: '',
 };
 const matchesAnyInitialState = {
     searchValue: '',
@@ -48,11 +49,11 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "selectedItems", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
+    const { objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "selectedItems", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "searchValue", "isExternalSearch", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
-    const { searchValue, selectedItems, selectedTreeData, isShowLoadMoreEl } = state;
+    const { selectedItems, selectedTreeData, isShowLoadMoreEl } = state;
     const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
     const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
     // Refs
@@ -65,6 +66,7 @@ export function MatchesAny(props) {
             }
         },
     });
+    const searchInputRef = useRef(null);
     // Effects
     /**
      * Updates the `selectedItems` state when the `selectedItems` prop changes.
@@ -75,6 +77,8 @@ export function MatchesAny(props) {
     useEffect(() => {
         // Delay for show load more el
         setTimeout(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
         }, 500);
     }, []);
@@ -165,7 +169,7 @@ export function MatchesAny(props) {
         const { results, matchedParents } = recursiveSearchItems({
             list: items || [],
             searchKeys: ['title', 'key'],
-            searchValue: !onChangeSearch ? searchValue : '',
+            searchValue: !isExternalSearch ? searchValue : '',
             childrenKey: 'children',
         });
         const serializeTreeData = (list) => list.map(item => {
@@ -234,8 +238,7 @@ export function MatchesAny(props) {
                             ":"),
                         `${((_a = groupSelectProps === null || groupSelectProps === void 0 ? void 0 : groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.length) || 0} ${t(translations.global.selected)}`))),
                 React.createElement("div", { style: { width: '100%' } },
-                    React.createElement(Input.CustomSearch, { placeholder: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.toString()}...`, onAfterChange: searchValue => {
-                            setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
+                    React.createElement(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.toString()}...`, onAfterChange: searchValue => {
                             if (onChangeSearch) {
                                 onChangeSearch(searchValue);
                             }
@@ -311,12 +314,20 @@ export function MatchesAnySelect(props) {
     const value = Array.isArray(selectedItems) && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)
         ? `${(_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title)) === null || _a === void 0 ? void 0 : _a[0]}${((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _b === void 0 ? void 0 : _b.length) ? `, and +${(_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _c === void 0 ? void 0 : _c.length} more` : ''}` || []
         : undefined;
+    // Effects
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: props.searchValue || '' })));
+    }, [props.searchValue]);
     // Handlers
     const onApplyMatchesAny = (selectedItems, selectedTreeData) => {
         onChange(selectedItems, selectedTreeData);
         setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
     };
-    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
+    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { isExternalSearch: !!onChangeSearch, searchValue: state.searchValue, className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: searchValue => {
+                setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
+                if (onChangeSearch)
+                    onChangeSearch(searchValue);
+            }, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
             overflow: {
                 shiftY: 0,
                 shiftX: 0,

package/es/components/molecules/MatchAnySelect/types.d.ts

@@ -50,6 +50,8 @@ export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'o
     listEmptyProps?: EmptyDataProps;
     /** Empty UI for selected list items */
     selectedListEmptyProps?: EmptyDataProps;
+    /** Search value */
+    searchValue?: string;
     /** Callback function that is called when the selected items change. */
     onChange?: (selectedItems: MatchesAnyItem<TItem>[], selectedTreeData?: MatchesAnyItem<TItem>[]) => void;
     /** Callback function that is called when the search value changes */
@@ -57,7 +59,9 @@ export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'o
     /** Callback function that is called when the user scroll */
     onLoadMore?: () => void;
 }
-export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData'> {
+export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData' | 'searchValue'> {
+    /** Indicates handle search out of component */
+    isExternalSearch?: boolean;
     /**
      * Callback function that is called when the apply action is triggered.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",