@antscorp/antsomi-ui 2.0.90 → 2.0.91-text-editor-beta.1

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

@@ -23,10 +23,11 @@ import { MATCHES_ANY_THEME } from './constants';
 import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveFindParents, recursiveSearchItems, } from '@antscorp/antsomi-ui/es/utils';
-import { getSelectedTreeData } from './utils';
+import { getSelectedTreeData, NUMBER_REGEX } from './utils';
 // Icons
 import { DataIcon, ErrorIcon, LongerIcon, WarningIcon } from '../../icons';
 import { translate, translations as translationsLocale } from '@antscorp/antsomi-locales';
+import { DATA_TYPES } from '../../organism/FilterSetting/constants';
 const initialState = {
     isOpenPopover: false,
     searchValue: '',
@@ -43,12 +44,15 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { maxSelectedItem, maxLengthEachItem, objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch, ...restOfProps } = props;
+    const { dataType, maxSelectedItem, maxLengthEachItem, objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch, ...restOfProps } = props;
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     const [maxItemsError, setMaxItemsError] = useState(false);
     const [itemOverMaxLength, setItemOverMaxLength] = useState(false);
     const [isApply, setIsApply] = useState(false);
+    const [isExistString, setIsExistString] = useState(false);
+    // If data type is number or array number filter data
+    const shouldFilterNumber = dataType === DATA_TYPES.NUMBER || dataType === DATA_TYPES.ARRAY_NUMBER;
     // Variables
     const { selectedItems, selectedTreeData, isShowLoadMoreEl, expandedKeys, selectedExpandedKeys } = state;
     const { icon: listEmptyIcon = _jsx(LongerIcon, {}), description: listEmptyDescription = (_jsx("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })), ...restListEmptyProps } = listEmptyProps || {};
@@ -60,8 +64,10 @@ export function MatchesAny(props) {
             : false;
         setMaxItemsError(!!isOverMaxSelected);
         setItemOverMaxLength(!!isSomeTextTooLong);
-        if (isApply && !isOverMaxSelected && !isSomeTextTooLong)
+        if (isApply && !isOverMaxSelected && !isSomeTextTooLong) {
             setIsApply(false);
+            setIsExistString(false);
+        }
     }, [selectedItems, maxSelectedItem, maxLengthEachItem, isApply]);
     // Refs
     const { ref: loadMoreRef } = useIntersectionObserver({
@@ -147,6 +153,7 @@ export function MatchesAny(props) {
             selectedExpandedKeys: newSelectedExpandKeys,
             selectedTreeData: newSelectedTreeData,
         }));
+        setIsExistString(false);
     };
     /**
      * Removes an item and its descendants from the list of selected items.
@@ -156,6 +163,7 @@ export function MatchesAny(props) {
      *
      */
     const onRemoveItem = (item) => {
+        setIsExistString(false);
         setState(prev => {
             const newSelectedItems = prev.selectedItems?.filter(selectedItem => {
                 if (item.children) {
@@ -174,9 +182,11 @@ export function MatchesAny(props) {
         });
     };
     const onRemoveAll = () => {
+        setIsExistString(false);
         setState(prev => ({ ...prev, selectedItems: [], selectedTreeData: [] }));
     };
     const onClickApply = () => {
+        setIsExistString(false);
         if (maxItemsError || itemOverMaxLength) {
             setIsApply(true);
             return;
@@ -313,6 +323,7 @@ export function MatchesAny(props) {
             .map(item => item.key);
         const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
         const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
+        setIsExistString(false);
         setState(prev => ({
             ...prev,
             selectedItems: newSelectedItems,
@@ -359,16 +370,21 @@ export function MatchesAny(props) {
         const availableExtendValues = extendValues?.filter(value => !selectedItems?.some(item => item.title === value));
         // If there are available values to add
         if (availableExtendValues) {
+            // check extendValues has string data type
+            const isExistString = shouldFilterNumber ? availableExtendValues.some(value => !NUMBER_REGEX.test(value)) : false;
             // Create new items in the format required (MatchesAnyItem)
             const newSelectedItems = [
                 ...(selectedItems || []),
-                ...availableExtendValues.map(value => ({
+                ...(isExistString
+                    ? availableExtendValues.filter(value => NUMBER_REGEX.test(value))
+                    : availableExtendValues).map(value => ({
                     key: value,
                     title: value,
                     isExtendValue: true, // Flag to indicate that this item is an extend value
                 })),
             ];
             const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
+            setIsExistString(isExistString);
             setState(prev => ({
                 ...prev,
                 selectedItems: newSelectedItems,
@@ -376,10 +392,10 @@ export function MatchesAny(props) {
             }));
         }
     };
-    return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), isApply && (maxItemsError || itemOverMaxLength) && (_jsxs(_Fragment, { children: [_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) }), itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
+    return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), _jsxs("div", { children: [isApply && (maxItemsError || itemOverMaxLength) && (_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) })), isExistString && (_jsx(Typography, { style: { color: globalToken?.orange6 }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_VAL_NUM_VAL) }))] }), isApply && itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, shouldFilterNumber: shouldFilterNumber, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
 }
 export function MatchesAnySelect(props) {
-    const { maxSelectedItem, maxLengthEachItem, placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
+    const { dataType, maxSelectedItem, maxLengthEachItem, placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -396,7 +412,7 @@ export function MatchesAnySelect(props) {
         onChange(selectedItems, selectedTreeData);
         setState(prev => ({ ...prev, isOpenPopover: false }));
     };
-    return (_jsx(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: _jsx(MatchesAny, { maxSelectedItem: maxSelectedItem, maxLengthEachItem: maxLengthEachItem, 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 => {
+    return (_jsx(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: _jsx(MatchesAny, { maxSelectedItem: maxSelectedItem, maxLengthEachItem: maxLengthEachItem, dataType: dataType, 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 => ({ ...prev, searchValue }));
                 if (onChangeSearch)
                     onChangeSearch(searchValue);

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { type PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
 interface ExtendValuePopupProps extends PopoverProps {
     onApply?: (extendValues: string[]) => void;
+    shouldFilterNumber?: boolean;
 }
 export declare const ExtendValuePopup: React.FC<ExtendValuePopupProps>;
 export {};

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

@@ -20,10 +20,13 @@ const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
     border: 1px solid ${blue1} !important;
     border-radius: ${borderRadius}px;
   }
+  ::-webkit-input-placeholder {
+    opacity: 1 !important;
+  }
 `;
 export const ExtendValuePopup = props => {
     // Props
-    const { children, onApply = () => { }, ...restProps } = props;
+    const { shouldFilterNumber = false, children, onApply = () => { }, ...restProps } = props;
     // State
     const [state, setState] = useState({
         isOpenPopover: false,
@@ -49,5 +52,7 @@ export const ExtendValuePopup = props => {
             width: 500,
         }, trigger: ['click'], arrow: false, placement: "topRight", onOpenChange: () => setState(prev => ({ ...prev, isOpenPopover: !isOpenPopover })), ...restProps, content: _jsx(ApplyPopupContent, { title: t(translations.extendValue.title).toString(), applyButtonProps: {
                 disabled: !extendValues?.trim(),
-            }, onCancel: onClosePopover, onApply: () => form.submit(), children: _jsx(Form, { form: form, onFinish: onFinishSubmit, children: _jsx(Form.Item, { noStyle: true, name: "extendValues", children: _jsx(TextArea, { autoSize: false, bordered: false, rows: 9, placeholder: t(translations.extendValue.placeholder).toString() }) }) }) }), children: children }));
+            }, onCancel: onClosePopover, onApply: () => form.submit(), children: _jsx(Form, { form: form, onFinish: onFinishSubmit, children: _jsx(Form.Item, { noStyle: true, name: "extendValues", children: _jsx(TextArea, { autoSize: false, bordered: false, rows: 9, placeholder: t(shouldFilterNumber
+                            ? translations.extendValue.placeholderNumber
+                            : translations.extendValue.placeholder).toString() }) }) }) }), children: children }));
 };

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

@@ -28,6 +28,7 @@ export type CustomItemRenders<TItem> = {
     error?: (item: MatchesAnyItem<TItem>) => ReactNode;
 };
 export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'onChange'> {
+    dataType?: string;
     /** Maximum item can select from items list */
     maxSelectedItem?: number;
     /** Max character of each item selected
@@ -67,7 +68,7 @@ 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' | 'searchValue' | 'maxSelectedItem' | 'maxLengthEachItem'> {
+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' | 'maxSelectedItem' | 'maxLengthEachItem' | 'dataType'> {
     /** Indicates handle search out of component */
     isExternalSearch?: boolean;
     /**

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

@@ -90,3 +90,4 @@ export declare const getSelectedTreeData: (items: MatchesAnyItem<any>[], selecte
     [Symbol.iterator]: () => IterableIterator<string>;
     at: (index: number) => string | undefined;
 }[];
+export declare const NUMBER_REGEX: RegExp;

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

@@ -66,3 +66,5 @@ export const getSelectedTreeData = (items, selectedItems, selectedTreeData = [])
     ]);
     return unionBy(treeData, 'key');
 };
+// filter number data
+export const NUMBER_REGEX = /^-?\d+(\.\d+)?$/;

package/es/components/molecules/VirtualizedMenu/VirtualizedMenu.d.ts

@@ -7,13 +7,16 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string[];
+    selected: string | string[];
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;
-        pathKey: import("./types").PathKey;
+        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
+        elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: import("./types").ItemType) => React.ReactNode);
+    action: React.ReactNode | ((item: import("./types").ItemType, others: {
+        expandEl: React.ReactNode;
+    }) => React.ReactNode);
 }> & {
     mode?: "inline" | undefined;
 } & React.RefAttributes<import("./types").VirtualizedMenuBaseHandle>>;