@antscorp/antsomi-ui 2.0.6 → 2.0.8

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

@@ -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
@@ -115,13 +116,6 @@ export function MatchesAny(props) {
         const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
     };
-    const onSelectAll = () => {
-        const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
-            !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
-        const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
-        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
-    };
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [], selectedTreeData: [] })));
     };
@@ -172,7 +166,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 => {
@@ -205,6 +199,7 @@ export function MatchesAny(props) {
             title: '',
             isLoadMore: true,
             className: 'load-more-node',
+            disabled: true,
         });
         return { treeData, matchedParents };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -214,6 +209,13 @@ export function MatchesAny(props) {
         const flattenTreeData = flatTree(treeData, 'children');
         return !(flattenTreeData === null || flattenTreeData === void 0 ? void 0 : flattenTreeData.some(item => !item.disabled));
     }, [treeData]);
+    const isDisableApply = useDeepCompareMemo(() => isEmpty(selectedTreeData), [selectedTreeData]);
+    const onSelectAll = () => {
+        const flattenTreeData = flatTree(treeData, 'children').filter(item => !item.children && !item.disabled);
+        const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
+        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
+    };
     // Renders
     const renderExtraValueLabels = () => {
         if (renderExtraValues === null || renderExtraValues === void 0 ? void 0 : renderExtraValues.length) {
@@ -233,8 +235,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, { value: searchValue, placeholder: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.toString()}...`, onAfterChange: searchValue => {
                             if (onChangeSearch) {
                                 onChangeSearch(searchValue);
                             }
@@ -295,7 +296,7 @@ export function MatchesAny(props) {
                 renderSelectedList()),
             React.createElement(Flex, { className: "matches-any__footer", align: "center", justify: "space-between" },
                 React.createElement(Flex, { align: "center", gap: 10 },
-                    React.createElement(Button, { type: "primary", onClick: onClickApply }, t(translations.apply.title).toString()),
+                    React.createElement(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply }, t(translations.apply.title).toString()),
                     React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
                 showExtendValue && (React.createElement(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue },
                     React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, t(translations.extendValue.title).toString())))))));
@@ -310,12 +311,22 @@ 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(() => {
+        if (props.searchValue && props.searchValue !== state.searchValue) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: props.searchValue || '' })));
+        }
+    }, [props.searchValue, state.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.6",
+  "version": "2.0.8",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",