@antscorp/antsomi-ui 1.3.5-beta.852 → 1.3.5-beta.853

package/es/components/atoms/IconField/IconField.d.ts

@@ -0,0 +1,5 @@
+type IconFieldProps = {
+    dataType: string | number;
+};
+export declare const IconField: (props: IconFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/atoms/IconField/IconField.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIELD_DATA_TYPE } from './constants';
+import { Icon } from '../Icon';
+export const IconField = (props) => {
+    const { dataType } = props;
+    switch (dataType) {
+        case FIELD_DATA_TYPE.STRING.name:
+        case FIELD_DATA_TYPE.STRING.value:
+        case FIELD_DATA_TYPE.TEXT.name:
+        case FIELD_DATA_TYPE.TEXT.value:
+            return _jsx(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+        case FIELD_DATA_TYPE.BOOLEAN.name:
+        case FIELD_DATA_TYPE.BOOLEAN.value:
+            return _jsx(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.NUMBER.name:
+        case FIELD_DATA_TYPE.NUMBER.value:
+            return _jsx(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.DATE_TIME.name:
+        case FIELD_DATA_TYPE.DATE_TIME.value:
+            return _jsx(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
+        default:
+            return _jsx(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+    }
+};

package/es/components/atoms/IconField/index.d.ts

@@ -0,0 +1 @@
+export { IconField } from './IconField';

package/es/components/atoms/IconField/index.js

@@ -0,0 +1 @@
+export { IconField } from './IconField';

package/es/components/atoms/index.d.ts

@@ -31,6 +31,7 @@ export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
 export { Image } from './Image';
+export { IconField } from './IconField';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';

package/es/components/atoms/index.js

@@ -31,6 +31,7 @@ export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
 export { Image } from './Image';
+export { IconField } from './IconField';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';

package/es/components/molecules/EditingList/EditingList.js

@@ -4,26 +4,20 @@ import { Flex, List, Typography } from 'antd';
 import { EditingListRoot, AmountSelected, StyledAddBtn, StyledList } from './styled';
 import { useMemo, useState } from 'react';
 import { InputSearch } from '../InputSearch';
-import { PopoverSelect } from '../SearchPopover';
+import { PopoverSelect, defaultSearch as defaultPopoverSelectSearch } from '../SearchPopover';
 import { AddIcon, DeleteRemoveTrashIcon } from '../../icons';
-import { Button } from '../../atoms';
-import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { Button, Spin } from '../../atoms';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { EmptyData } from '../EmptyData';
 import { translate, translations } from '@antscorp/antsomi-locales';
 import clsx from 'clsx';
+import { isEmpty } from 'lodash';
 export const EditingList = (props) => {
-    const { addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, onChange, } = props;
+    const { isLoading = false, addBtnLabel = 'Add', showNum = true, options = [], selected = [], title, removable = true, className, onChange, emptyDescription, } = props;
     const [search, setSearch] = useState('');
     const debounceSearch = useDebounce(search);
     const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
-    const filterdOptions = useMemo(() => selectedOptions.filter(opt => {
-        let content = `${opt.key}`;
-        if (typeof opt.label === 'string') {
-            content += opt.label;
-        }
-        return searchStringQuery(content, debounceSearch);
-    }), [selectedOptions, debounceSearch]);
+    const filterdOptions = useMemo(() => selectedOptions.filter(opt => defaultPopoverSelectSearch(opt, debounceSearch)), [selectedOptions, debounceSearch]);
     const isSelectAll = selectedOptions.length === options.length;
     const handleRemove = (removedKey) => {
         const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
@@ -35,5 +29,14 @@ export const EditingList = (props) => {
         }
         return label;
     };
-    return (_jsxs(EditingListRoot, { className: clsx(className), vertical: true, gap: 8, children: [title && (_jsxs(Flex, { align: "center", gap: 8, children: [_jsx(Typography.Text, { strong: true, children: title }), showNum && (_jsxs(AmountSelected, { children: ["(", selectedOptions.length, "/", options.length, ")"] }))] })), _jsx(InputSearch, { placeholder: "Search...", onChange: e => setSearch(e.target.value) }), filterdOptions.length > 0 ? (_jsx(StyledList, { split: false, children: filterdOptions.map(opt => (_jsxs(List.Item, { children: [renderLabel(opt.label), removable && (_jsx(Button, { className: "delete-btn", type: "link", icon: _jsx(DeleteRemoveTrashIcon, { size: 24, color: globalToken?.colorText }), onClick: () => handleRemove(opt.key) }))] }, opt.key))) })) : (_jsx(EmptyData, { showIcon: false, description: translate(translations.noData).toString() })), !isSelectAll && (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, children: _jsxs(StyledAddBtn, { role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }))] }));
+    const renderList = () => {
+        if (isLoading) {
+            return _jsx(Spin, { indicatorSize: 24 });
+        }
+        if (isEmpty(filterdOptions)) {
+            return (_jsx(EmptyData, { showIcon: false, description: emptyDescription || translate(translations.noData).toString() }));
+        }
+        return (_jsx(StyledList, { split: false, children: filterdOptions.map(opt => (_jsxs(List.Item, { children: [renderLabel(opt.label), removable && (_jsx(Button, { className: "delete-btn", type: "link", icon: _jsx(DeleteRemoveTrashIcon, { size: 20, color: globalToken?.colorText }), onClick: () => handleRemove(opt.key) }))] }, opt.key))) }));
+    };
+    return (_jsxs(EditingListRoot, { className: clsx(className), vertical: true, gap: 8, children: [title && (_jsxs(Flex, { align: "center", gap: 8, children: [_jsx(Typography.Text, { strong: true, children: title }), showNum && (_jsxs(AmountSelected, { children: ["(", selectedOptions.length, "/", options.length, ")"] }))] })), _jsx(InputSearch, { placeholder: "Search...", onChange: e => setSearch(e.target.value) }), renderList(), !isSelectAll && !isLoading && (_jsx(PopoverSelect, { options: options, selected: selected, onApply: onChange, children: _jsxs(StyledAddBtn, { role: "button", children: [_jsx(AddIcon, {}), addBtnLabel] }) }))] }));
 };

package/es/components/molecules/EditingList/styled.js

@@ -12,8 +12,8 @@ export const StyledList = styled(List) `
       margin: 8px 0;
       min-height: 30px;
       flex-wrap: nowrap;
-      padding-inline: 10px;
-      border-radius: 8px;
+      padding-inline: 8px;
+      border-radius: 5px;
 
       &:first-child {
         margin-top: 0px;

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

@@ -5,10 +5,13 @@ export type EditingListProps = {
     options?: {
         key: string;
         label: React.ReactNode;
+        search?: string;
     }[];
     selected?: string[];
     showNum?: boolean;
     removable?: boolean;
     className?: string;
     onChange?: (selected: string[]) => void;
+    isLoading?: boolean;
+    emptyDescription?: string;
 };

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useMemo } from 'react';
 import clsx from 'clsx';
 import { Button, Icon } from '../../../../atoms';
-import { renderIconField } from '../../utils';
 import { PopoverSelect } from '../PopoverSelect';
 import { Typography } from 'antd';
+import { IconField } from '@antscorp/antsomi-ui/es/components/atoms/IconField';
 export const PopoverAddField = (props) => {
     const { fields, onSearchPredicate, className, children, ...rest } = props;
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
@@ -19,7 +19,7 @@ export const PopoverAddField = (props) => {
     }, [onSearchPredicate, originalFieldByKey]);
     const options = useCallback((params) => fields.map(field => ({
         ...field,
-        label: (_jsxs(_Fragment, { children: [field.dataType && renderIconField(field.dataType), typeof field.label === 'string' && (_jsx(Typography.Text, { ellipsis: {
+        label: (_jsxs(_Fragment, { children: [field.dataType && _jsx(IconField, { dataType: field.dataType }), typeof field.label === 'string' && (_jsx(Typography.Text, { ellipsis: {
                         tooltip: true,
                     }, children: field.label })), typeof field.label === 'function' &&
                     field.label({

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -3,13 +3,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { SearchPopover } from '../../SearchPopover';
 import './styles.scss';
-import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { Button, Checkbox } from '../../../../atoms';
 import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
 import { List, Typography } from 'antd';
 import { EmptyData } from '../../../EmptyData';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { defaultSearch } from '../../utils';
 const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
     const { open: openProp, selected, options: optionsProp = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate, ...rest } = props;
@@ -42,19 +42,11 @@ export const PopoverSelect = (props) => {
         }
     }, [selected]);
     const filteredOptions = useMemo(() => {
-        const defaultFilter = (opt) => {
-            let labelIncluded = false;
-            if (typeof opt.label === 'string') {
-                labelIncluded = searchStringQuery(opt.label, search);
-            }
-            const keyIncluded = searchStringQuery(opt.key, search);
-            return keyIncluded || labelIncluded;
-        };
         let result = options.filter(field => {
             if (!refOnSearchPredicate.current) {
-                return defaultFilter(field);
+                return defaultSearch(field, search);
             }
-            return refOnSearchPredicate.current(field) || defaultFilter(field);
+            return refOnSearchPredicate.current(field) || defaultSearch(field, search);
         });
         if (showSelected) {
             result = result.filter(field => selectedKeys.has(field.key));

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

@@ -1,3 +1,4 @@
 export { PopoverAddField, PopoverSelect } from './components';
 export { SearchPopover } from './SearchPopover';
+export { defaultSearch } from './utils';
 export type { SearchPopoverProps, PopoverAddFieldProps } from './types';

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

@@ -1,2 +1,3 @@
 export { PopoverAddField, PopoverSelect } from './components';
 export { SearchPopover } from './SearchPopover';
+export { defaultSearch } from './utils';

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

@@ -9,6 +9,7 @@ export type Option = {
     label: React.ReactNode | ((info: {
         selected: boolean;
     }) => React.ReactNode);
+    search?: string;
 };
 export type Field = Option & {
     dataType?: string | number;

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

@@ -1 +1,2 @@
-export declare const renderIconField: (dataType?: string | number) => import("react/jsx-runtime").JSX.Element;
+import { Option } from './types';
+export declare const defaultSearch: (opt: Option, search: string) => boolean;

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

@@ -1,23 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../../atoms/Icon';
-import { FIELD_DATA_TYPE } from './constants';
-export const renderIconField = (dataType = FIELD_DATA_TYPE.STRING.name) => {
-    switch (dataType) {
-        case FIELD_DATA_TYPE.STRING.name:
-        case FIELD_DATA_TYPE.STRING.value:
-        case FIELD_DATA_TYPE.TEXT.name:
-        case FIELD_DATA_TYPE.TEXT.value:
-            return _jsx(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
-        case FIELD_DATA_TYPE.BOOLEAN.name:
-        case FIELD_DATA_TYPE.BOOLEAN.value:
-            return _jsx(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
-        case FIELD_DATA_TYPE.NUMBER.name:
-        case FIELD_DATA_TYPE.NUMBER.value:
-            return _jsx(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
-        case FIELD_DATA_TYPE.DATE_TIME.name:
-        case FIELD_DATA_TYPE.DATE_TIME.value:
-            return _jsx(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
-        default:
-            return _jsx(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+export const defaultSearch = (opt, search) => {
+    let text = opt.key;
+    if (typeof opt.label === 'string') {
+        text = text.concat(opt.label);
     }
+    if (opt.search) {
+        text = text.concat(opt.search);
+    }
+    return searchStringQuery(text, search);
 };

package/package.json

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