@antscorp/antsomi-ui 1.3.5-beta.457 → 1.3.5-beta.458

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

@@ -16,7 +16,7 @@ import { uniqBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 // Components
 import { EmptyData, Select } from '@antscorp/antsomi-ui/es/components/molecules';
-import { Button, Flex, Icon, Input, Scrollbars, Spin, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button, Flex, Icon, Input, Popover, Scrollbars, Spin, Typography, Tooltip, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ExtendValuePopup } from './components/ExtendValuePopup';
 // Styled
 import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton } from './styled';
@@ -24,13 +24,15 @@ import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton } from './style
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Constants
-import { MATCHES_ANY_THEME, SAMPLE_DATA } from './constants';
+import { MATCHES_ANY_THEME } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Hooks
-import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
-const initialState = {};
+const initialState = {
+    isOpenPopover: false,
+};
 const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
@@ -39,11 +41,18 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export const MatchesAny = props => {
     // Props
-    const { objectName, isLoading = false, showExtendValue = true } = props, restOfProps = __rest(props, ["objectName", "isLoading", "showExtendValue"]);
+    const { objectName, isLoading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { } } = props, restOfProps = __rest(props, ["objectName", "isLoading", "showExtendValue", "items", "onApply", "onCancel"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
     const { searchValue, selectedItems } = state;
+    // Effects
+    /**
+     * Updates the `selectedItems` state when the `selectedItems` prop changes.
+     */
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: props.selectedItems })));
+    }, [props.selectedItems]);
     // Handlers
     /**
      * Adds an item and, if applicable, its leaf descendants to the list of selected items.
@@ -87,7 +96,7 @@ export const MatchesAny = props => {
         });
     };
     const onSelectAll = () => {
-        const flattenTreeData = flatTree(SAMPLE_DATA, 'children').filter(item => !item.children &&
+        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)));
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key') })));
     };
@@ -115,7 +124,7 @@ export const MatchesAny = props => {
     // Memos
     const { treeData, matchedParents } = useMemo(() => {
         const { results, matchedParents } = recursiveSearchItems({
-            list: SAMPLE_DATA,
+            list: items || [],
             searchKeys: ['title', 'key'],
             searchValue,
             childrenKey: 'children',
@@ -141,7 +150,7 @@ export const MatchesAny = props => {
         });
         const treeData = serializeTreeData(results);
         return { treeData, matchedParents };
-    }, [searchValue, selectedItems]);
+    }, [items, searchValue, selectedItems]);
     const selectedTreeData = useMemo(() => {
         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);
@@ -164,8 +173,8 @@ export const MatchesAny = props => {
                 children: serializeTreeData(item.children),
             }))))) || [];
         };
-        return serializeTreeData(SAMPLE_DATA || []).concat((extendValueSelectedItems === null || extendValueSelectedItems === void 0 ? void 0 : extendValueSelectedItems.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) })))) || []);
-    }, [selectedItems]);
+        return serializeTreeData(items || []).concat((extendValueSelectedItems === null || extendValueSelectedItems === void 0 ? void 0 : extendValueSelectedItems.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) })))) || []);
+    }, [items, selectedItems]);
     const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
         const flattenTreeData = flatTree(treeData, 'children');
@@ -180,14 +189,13 @@ export const MatchesAny = props => {
                     React.createElement(Input.CustomSearch, { placeholder: `${(_a = t(translations.global.search)) === null || _a === void 0 ? void 0 : _a.toString()}...`, onAfterChange: searchValue => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue }))) }))),
             React.createElement("div", { className: "matches-any__body" },
                 React.createElement(Flex, { align: "center", justify: "space-between" },
-                    React.createElement(Text, { strong: true }, `${objectName} (${flatTree(SAMPLE_DATA, 'children').filter(item => !item.children).length})`),
+                    React.createElement(Text, { strong: true }, `${objectName} (${flatTree(items, 'children').filter(item => !item.children).length})`),
                     React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString())),
                 React.createElement(Spin, { spinning: isLoading },
-                    React.createElement(Scrollbars, { style: { height: '100%' } },
-                        React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: matchedParents.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 })) }))))));
+                    React.createElement(Scrollbars, { style: { height: '100%' } }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: matchedParents.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 })) })) : (React.createElement(EmptyData, { showIcon: false, title: t(translations.noData).toString() })))))));
     };
     const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
@@ -195,7 +203,7 @@ export const MatchesAny = props => {
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
         React.createElement("div", { className: "matches-any__body" },
             React.createElement(Spin, { spinning: isLoading },
-                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-channel-integration", description: "Select items from the list" })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-database", description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, 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 })) })))))));
@@ -221,17 +229,28 @@ export const 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" }, t(translations.apply.title).toString()),
-                    React.createElement(Button, null, t(translations.cancel.title).toString())),
+                    React.createElement(Button, { type: "primary", onClick: () => onApply(selectedItems || []) }, t(translations.apply.title).toString()),
+                    React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
                 showExtendValue && (React.createElement(ExtendValuePopup, { onApply: onApplyExtendValue },
-                    React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, "Extend Value")))))));
+                    React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, t(translations.extendValue.title).toString())))))));
 };
 export const MatchesAnySelect = props => {
-    const { placeholder = 'Select an item', dropdownStyle, objectName } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName"]);
+    var _a, _b, _c;
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, isLoading, onChange = () => { } } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "isLoading", "onChange"]);
     // State
-    const [state, setState] = useState({});
-    // Renders
-    const renderPopoverContent = () => (React.createElement(MatchesAny, { objectName: objectName, style: { margin: '-8px 0px' } }));
-    return renderPopoverContent();
-    return (React.createElement(Select, Object.assign({}, restProps, { dropdownRender: renderPopoverContent, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { padding: 0 }) })));
+    const [state, setState] = useState(initialState);
+    // Variables
+    const { isOpenPopover } = state;
+    // Memo
+    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;
+    // Handlers
+    const onApplyMatchesAny = (selectedItems) => {
+        onChange(selectedItems);
+        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+    };
+    return (React.createElement(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { items: items, selectedItems: selectedItems, isLoading: isLoading, objectName: objectName, style: { margin: '-8px 0px' }, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))) }), overlayStyle: { width: 700 }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) },
+        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ')}` },
+            React.createElement(Select, Object.assign({}, restProps, { title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { display: 'none', padding: 0 }) })))));
 };

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

@@ -1 +1,3 @@
-export { MatchesAnySelect } from './MatchesAnySelect';
+export { MatchesAnySelect, MatchesAny } from './MatchesAnySelect';
+export type { MatchesAnyItem, MatchesAnyProps, MatchesAnySelectProps } from './types';
+export { SAMPLE_DATA as MATCHES_ANY_SAMPLE_DATA } from './constants';

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

@@ -1 +1,2 @@
-export { MatchesAnySelect } from './MatchesAnySelect';
+export { MatchesAnySelect, MatchesAny } from './MatchesAnySelect';
+export { SAMPLE_DATA as MATCHES_ANY_SAMPLE_DATA } from './constants';

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

@@ -12,9 +12,30 @@ export interface MatchesAnySelectProps extends SelectProps {
     isLoading?: boolean;
     /** Indicates whether show the extend value button */
     showExtendValue?: boolean;
+    /** An array of items. */
+    items?: MatchesAnyItem[];
+    /** An array of selected items. */
+    selectedItems?: MatchesAnyItem[];
+    /** Callback function that is called when the selected items change. */
+    onChange?: (selectedItems: MatchesAnyItem[]) => void;
 }
 export interface MatchesAnyProps extends Omit<FlexProps, 'children'> {
+    /** The name of the object, corresponding to the `objectName` property in `MatchesAnySelectProps`. */
     objectName?: MatchesAnySelectProps['objectName'];
+    /** Indicates whether the component is in a loading state, corresponding to the `isLoading` property in `MatchesAnySelectProps`. */
     isLoading?: MatchesAnySelectProps['isLoading'];
+    /** Determines whether to show the extended value, corresponding to the `showExtendValue` property in `MatchesAnySelectProps`. */
     showExtendValue?: MatchesAnySelectProps['showExtendValue'];
+    /** An array of items. */
+    items?: MatchesAnySelectProps['items'];
+    /** An array of selected items. */
+    selectedItems?: MatchesAnySelectProps['selectedItems'];
+    /**
+     * Callback function that is called when the apply action is triggered.
+     *
+     * @param selectedItems - The array of selected items.
+     */
+    onApply?: (selectedItems: MatchesAnyItem[]) => void;
+    /** Callback function that is called when the cancel action is triggered. */
+    onCancel?: () => void;
 }

package/es/test.js

@@ -20,7 +20,7 @@ import axios from 'axios';
 import { get } from 'lodash';
 import { MENU_PERMISSION } from './components/molecules/ShareAccess/constants';
 import { ConfigProvider } from './providers';
-import { DataTableTest } from './tests';
+import { DataTableTest, MatchesAnySelectTest } from './tests';
 const SHARE_ACCESS_DEFAULT_VALUE = {
     ownerId: 1600085510,
     isPublic: 1,
@@ -106,6 +106,8 @@ export const App = () => {
     const callbackSlideBar = (type, data) => {
         console.log({ type, data });
     };
+    /* MatchesAnySelect */
+    return React.createElement(MatchesAnySelectTest, null);
     /* Data Table */
     return React.createElement(DataTableTest, null);
     // --------------------------- Test Layout 2.0 -------------------------------------------

package/es/tests/MatchesAnySelect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MatchesAnySelectTest: () => React.JSX.Element;

package/es/tests/MatchesAnySelect.js

@@ -0,0 +1,10 @@
+// Libraries
+import React, { useState } from 'react';
+import { MATCHES_ANY_SAMPLE_DATA, MatchesAnySelect } from '../components';
+export const MatchesAnySelectTest = () => {
+    const [state, setState] = useState({
+        selectedItems: [],
+        items: MATCHES_ANY_SAMPLE_DATA,
+    });
+    return (React.createElement(MatchesAnySelect, { items: state.items, selectedItems: state.selectedItems, onChange: selectedItems => setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems }))) }));
+};

package/es/tests/index.d.ts

@@ -1 +1,2 @@
 export { DataTableTest } from './DataTableTest';
+export { MatchesAnySelectTest } from './MatchesAnySelect';

package/es/tests/index.js

@@ -1 +1,2 @@
 export { DataTableTest } from './DataTableTest';
+export { MatchesAnySelectTest } from './MatchesAnySelect';

package/package.json

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