@antscorp/antsomi-ui 2.0.8 → 2.0.10

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

@@ -9,13 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/* eslint-disable react/no-danger */
 /* eslint-disable react/function-component-definition */
 /* eslint-disable react/destructuring-assignment */
 // Libraries
 import { ConfigProvider } from 'antd';
 import clsx from 'clsx';
 import { isEmpty, uniqBy } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, 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';
@@ -34,7 +35,7 @@ import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } fr
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
 import { getSelectedTreeData } from './utils';
 // Icons
-import { DataIcon, WarningIcon } from '../../icons';
+import { DataIcon, LongerIcon, WarningIcon } from '../../icons';
 const initialState = {
     isOpenPopover: false,
     searchValue: '',
@@ -54,7 +55,7 @@ export function MatchesAny(props) {
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
     const { selectedItems, selectedTreeData, isShowLoadMoreEl } = state;
-    const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
+    const _a = listEmptyProps || {}, { icon: listEmptyIcon = React.createElement(LongerIcon, null), description: listEmptyDescription = (React.createElement("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })) } = _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
     const { ref: loadMoreRef } = useIntersectionObserver({
@@ -66,6 +67,7 @@ export function MatchesAny(props) {
             }
         },
     });
+    const searchInputRef = useRef(null);
     // Effects
     /**
      * Updates the `selectedItems` state when the `selectedItems` prop changes.
@@ -73,17 +75,29 @@ export function MatchesAny(props) {
     useDeepCompareEffect(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: selectedItemsProp })));
     }, [selectedItemsProp]);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
+        var _a;
+        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         // Delay for show load more el
-        setTimeout(() => {
-            setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
-        }, 500);
-    }, []);
+        if (!isEmpty(items)) {
+            setTimeout(() => {
+                setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
+            }, 500);
+        }
+    }, [items]);
     useDeepCompareEffect(() => {
+        // If `selectedTreeData` prop is not empty, update the `selectedTreeData` state directly.
         if (!isEmpty(selectedTreeDataProp)) {
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedTreeData: selectedTreeDataProp })));
         }
-    }, [selectedTreeDataProp]);
+        // If `selectedTreeData` prop is empty and `selectedItems` prop is not empty,
+        // calculate the `selectedTreeData` from the `selectedItems` prop and update the state.
+        else if (!isEmpty(selectedItemsProp)) {
+            const newSelectedTreeData = getSelectedTreeData(items || [], selectedItemsProp || []);
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedTreeData: newSelectedTreeData })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedTreeDataProp, selectedItemsProp]);
     // Handlers
     const onSelectItem = (item) => {
         let newSelectedItems = [...(selectedItems || [])];
@@ -235,7 +249,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, { value: searchValue, placeholder: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.toString()}...`, onAfterChange: 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);
                             }
@@ -246,17 +260,15 @@ export function MatchesAny(props) {
                     React.createElement(Flex, { align: "center", gap: 10 },
                         renderExtraValueLabels(),
                         React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString()))),
-                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) > 1 ? (React.createElement(React.Fragment, null,
-                    React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
-                            ? matchedParents.map(item => item.key)
-                            : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
-                                transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
-                                transition: 'transform 0.3s ease',
-                            }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), titleRender: (item) => isShowLoadMoreEl && item.isLoadMore ? (React.createElement("div", { ref: loadMoreRef })) : (renderItemNodeTitle({
-                            item,
-                            onSelectItem,
-                        })), height: 396 }),
-                    isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps)))))));
+                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) > 1 ? (React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
+                        ? matchedParents.map(item => item.key)
+                        : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                            transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                            transition: 'transform 0.3s ease',
+                        }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), titleRender: (item) => isShowLoadMoreEl && item.isLoadMore ? (React.createElement("div", { ref: loadMoreRef })) : (renderItemNodeTitle({
+                        item,
+                        onSelectItem,
+                    })), height: 396 })) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps)))))));
     };
     const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
@@ -313,10 +325,8 @@ export function MatchesAnySelect(props) {
         : undefined;
     // Effects
     useDeepCompareEffect(() => {
-        if (props.searchValue && props.searchValue !== state.searchValue) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: props.searchValue || '' })));
-        }
-    }, [props.searchValue, state.searchValue]);
+        setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: props.searchValue || '' })));
+    }, [props.searchValue]);
     // Handlers
     const onApplyMatchesAny = (selectedItems, selectedTreeData) => {
         onChange(selectedItems, selectedTreeData);

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

@@ -16,6 +16,9 @@ const customMergeTreeData = (key) => (target, source) => {
 export const getSelectedTreeData = (items, selectedItems, selectedTreeData = []) => {
     const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
     const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
+    const notFoundItems = !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length)
+        ? notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.filter(item => !(items === null || items === void 0 ? void 0 : items.some(i => i.key === item.key)))
+        : [];
     const serializeTreeData = (list) => {
         var _a;
         return ((_a = list
@@ -38,5 +41,5 @@ export const getSelectedTreeData = (items, selectedItems, selectedTreeData = [])
     const mergeItems = deepmerge(selectedTreeData || [], items || [], {
         arrayMerge: customMergeTreeData('key'),
     });
-    return serializeTreeData(mergeItems).concat(extendValueSelectedItems);
+    return serializeTreeData(mergeItems).concat([...notFoundItems, ...extendValueSelectedItems]);
 };

package/es/locales/en/translation.json

@@ -209,6 +209,9 @@
             "addDynamicContent": "Add dynamic content"
         }
     },
+    "matchesAnySelect": {
+        "noData": "You don't have any value <br /> Click Extend Value to add value"
+    },
     "linear": "Linear",
     "radial": "Radial",
     "gradientStyle": "Gradient Style",

package/es/locales/i18n.d.ts

@@ -211,6 +211,9 @@ export declare const translationsJson: {
                     addDynamicContent: string;
                 };
             };
+            matchesAnySelect: {
+                noData: string;
+            };
             linear: string;
             radial: string;
             gradientStyle: string;
@@ -832,6 +835,9 @@ export declare const translationsJson: {
                 title: string;
                 placeholder: string;
             };
+            matchesAnySelect: {
+                noData: string;
+            };
             leftMenu: {
                 pageTitle: {
                     recommendation: string;

package/es/locales/translations.d.ts

@@ -211,6 +211,9 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
             addDynamicContent: string;
         };
     };
+    matchesAnySelect: {
+        noData: string;
+    };
     linear: string;
     radial: string;
     gradientStyle: string;

package/es/locales/vi/translation.json

@@ -146,6 +146,9 @@
         "title": "Mở rộng giá trị",
         "placeholder": "Nhập hoặc dán nhiều giá trị cách nhau bằng Enter"
     },
+    "matchesAnySelect": {
+        "noData": "Bạn không có giá trị nào <br /> Bấm vào Extend Value để thêm giá trị"
+    },
     "leftMenu": {
         "pageTitle": {
             "recommendation": "Gợi ý",

package/package.json

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