@antscorp/antsomi-ui 1.3.5-beta.320 → 1.3.5-beta.321

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

@@ -1,8 +1,4 @@
-import React, { PropsWithChildren } from 'react';
-import { PopoverProps } from 'antd';
-import { InputProps } from '../../atoms/Input';
+import React from 'react';
 import './styles.scss';
-export type SearchPopoverProps = PropsWithChildren<PopoverProps & {
-    inputSearchProps?: InputProps;
-}>;
+import { SearchPopoverProps } from './types';
 export declare const SearchPopover: (props: SearchPopoverProps) => React.JSX.Element;

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

@@ -11,14 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { Popover } from 'antd';
-import { Input } from '../../atoms/Input';
-import Icon from '@antscorp/icons';
+import { Input, Icon } from '../../atoms';
 import './styles.scss';
 import clsx from 'clsx';
 export const SearchPopover = (props) => {
-    const { inputSearchProps } = props, popoverProps = __rest(props, ["inputSearchProps"]);
+    const { inputSearchProps = {} } = props, popoverProps = __rest(props, ["inputSearchProps"]);
     const { overlayClassName, arrow = false, children, content, trigger = ['click'] } = popoverProps, restPopoverProps = __rest(popoverProps, ["overlayClassName", "arrow", "children", "content", "trigger"]);
     return (React.createElement(Popover, Object.assign({ trigger: trigger, arrow: arrow }, restPopoverProps, { overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: React.createElement(React.Fragment, null,
-            React.createElement(Input, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), bordered: false }, inputSearchProps, { withWrapper: false })),
+            React.createElement(Input, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', bordered: false }, inputSearchProps, { addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), withWrapper: false })),
             content) }), children));
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PopoverAddFieldProps } from '../../types';
+import './styles.scss';
+export declare const PopoverAddField: (props: PopoverAddFieldProps) => React.JSX.Element;

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

@@ -0,0 +1,115 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { SearchPopover } from '../../SearchPopover';
+import { Button, Checkbox, Menu } from 'antd';
+import { renderIconField } from '../../utils';
+import './styles.scss';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { Icon } from '../../../../atoms';
+import Scrollbars from 'react-custom-scrollbars';
+export const PopoverAddField = (props) => {
+    var _a, _b;
+    const { open: openProp, selected, fields = [], onCancel, onApply, inputSearchProps = {}, children } = props, rest = __rest(props, ["open", "selected", "fields", "onCancel", "onApply", "inputSearchProps", "children"]);
+    const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
+    const [open, setOpen] = useState(openProp);
+    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    const [search, setSearch] = useState('');
+    const [showChecked, setShowChecked] = useState(false);
+    const applyDisabled = selectedKeys.size === 0;
+    useEffect(() => {
+        if (openProp !== undefined) {
+            setOpen(openProp);
+        }
+    }, [openProp]);
+    useEffect(() => {
+        if (searchValue !== undefined) {
+            setSearch(searchValue.toString());
+        }
+    }, [searchValue]);
+    useEffect(() => {
+        if (selected !== undefined) {
+            setSelectedKeys(new Set(selected));
+        }
+    }, [selected]);
+    const filteredField = useMemo(() => {
+        let result = fields.filter(field => {
+            const labelIncluded = searchStringQuery(field.label, search);
+            const keyIncluded = searchStringQuery(field.key, search);
+            return labelIncluded || keyIncluded;
+        });
+        if (showChecked) {
+            result = result.filter(field => selectedKeys.has(field.key));
+        }
+        return result;
+    }, [fields, search, showChecked, selectedKeys]);
+    const handleToggleField = (field, checked) => {
+        const newSelectedKeys = new Set(selectedKeys);
+        if (checked) {
+            newSelectedKeys.add(field.key);
+        }
+        else {
+            newSelectedKeys.delete(field.key);
+        }
+        setSelectedKeys(newSelectedKeys);
+    };
+    const handleCancel = () => {
+        setOpen(false);
+        if (onCancel)
+            onCancel();
+    };
+    const handleApply = () => {
+        if (onApply)
+            onApply(Array.from(selectedKeys));
+        setOpen(false);
+    };
+    const handleOnSearch = (searchValue) => {
+        setSearch(searchValue);
+        if (inputSearchProps.onAfterChange) {
+            inputSearchProps.onAfterChange(searchValue);
+        }
+    };
+    const handleUncheckAll = () => {
+        setSelectedKeys(new Set());
+    };
+    const handleAfterOpenChange = (visible) => {
+        if (!visible) {
+            setSearch(searchValue ? searchValue.toString() : '');
+            setSelectedKeys(selected ? new Set(selected) : new Set());
+        }
+        if (rest.afterOpenChange) {
+            rest.afterOpenChange(visible);
+        }
+    };
+    const handleOpenChange = (visible) => {
+        setOpen(visible);
+    };
+    return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
+            !!fields.length && (React.createElement("div", { className: "actions" },
+                React.createElement(Button, { type: "link", size: "small", onClick: () => setShowChecked(current => !current) }, showChecked ? 'Show all' : 'Show checked'),
+                !!selectedKeys.size && (React.createElement(Button, { type: "link", onClick: handleUncheckAll }, "Uncheck all")))),
+            !!filteredField.length && (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 260 },
+                React.createElement(Menu, { className: "list-fields", selectable: false, items: filteredField.map(field => ({
+                        key: field.key,
+                        label: (React.createElement(Checkbox, { onChange: e => handleToggleField(field, e.target.checked), checked: selectedKeys.has(field.key) },
+                            field.dataType && renderIconField(field.dataType),
+                            field.label)),
+                    })) }))),
+            React.createElement("div", { className: "footer" },
+                React.createElement(Button, { onClick: handleCancel }, "Cancel"),
+                React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {
+            '--item-padding': `${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemPaddingInline) || 10}px`,
+        }, trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: Object.assign(Object.assign({}, restInputSearchProps), { value: search, onAfterChange: handleOnSearch }), afterOpenChange: handleAfterOpenChange, onOpenChange: handleOpenChange }), children || (React.createElement(Button, { type: "text" },
+        React.createElement(Icon, { type: "icon-ants-plus-slim", size: 14 }),
+        "Add fields"))));
+};

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

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

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

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

package/es/components/molecules/SearchPopover/components/PopoverAddField/styles.scss

@@ -0,0 +1,59 @@
+.search-popover-overlay {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      min-width: 300px;
+
+      .antsomi-popover-inner-content {
+        .antsomi-menu.list-fields {
+          border-bottom: 1px solid var(--divider-1);
+
+          > .antsomi-menu-item {
+            padding: 0;
+
+            > .antsomi-menu-title-content {
+              > .antsomi-checkbox-wrapper {
+                padding: 0 var(--item-padding);
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: 100%;
+
+                span:nth-child(2) {
+                  > i {
+                    min-width: 20px;
+                    text-align: center;
+                  }
+
+                  display: flex;
+                  align-items: center;
+                  gap: 6px;
+                }
+              }
+            }
+          }
+        }
+
+        > .actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 10px;
+          padding: 5px 0px;
+
+          > button {
+            height: 30px;
+            padding: 0 10px;
+          }
+        }
+
+        > .footer {
+          gap: 10px;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,27 @@
+export declare const FIELD_DATA_TYPE: {
+    readonly NUMBER: {
+        readonly label: "Number";
+        readonly name: "number";
+        readonly value: 2;
+    };
+    readonly STRING: {
+        readonly label: "String";
+        readonly name: "string";
+        readonly value: 1;
+    };
+    readonly TEXT: {
+        readonly label: "Text";
+        readonly name: "text";
+        readonly value: 1;
+    };
+    readonly DATE_TIME: {
+        readonly label: "Datetime";
+        readonly name: "datetime";
+        readonly value: 5;
+    };
+    readonly BOOLEAN: {
+        readonly label: "Boolean";
+        readonly name: "boolean";
+        readonly value: 17;
+    };
+};

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

@@ -0,0 +1,27 @@
+export const FIELD_DATA_TYPE = {
+    NUMBER: {
+        label: 'Number',
+        name: 'number',
+        value: 2,
+    },
+    STRING: {
+        label: 'String',
+        name: 'string',
+        value: 1,
+    },
+    TEXT: {
+        label: 'Text',
+        name: 'text',
+        value: 1,
+    },
+    DATE_TIME: {
+        label: 'Datetime',
+        name: 'datetime',
+        value: 5,
+    },
+    BOOLEAN: {
+        label: 'Boolean',
+        name: 'boolean',
+        value: 17,
+    },
+};

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

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

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

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

package/es/components/molecules/SearchPopover/styles.scss

@@ -17,10 +17,12 @@
           background: transparent;
           font-size: 20px;
           padding: 0;
+          min-width: 25px;
 
           > i {
             font-size: 24px;
             color: #595959;
+            cursor: pointer;
           }
         }
       }

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

@@ -0,0 +1,18 @@
+import { PopoverProps } from 'antd';
+import { InputProps } from '../../atoms/Input';
+import { PropsWithChildren } from 'react';
+export type SearchPopoverProps = PropsWithChildren<{
+    inputSearchProps?: InputProps;
+} & PopoverProps>;
+export type Field = {
+    key: string;
+    label: string;
+    dataType?: string | number;
+};
+export type PopoverAddFieldProps = SearchPopoverProps & Partial<{
+    fields: Field[];
+    selected: string[];
+    onCancel: () => void;
+    onApply: (selected: string[]) => void;
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const renderIconField: (dataType?: string | number) => React.JSX.Element;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+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 React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+        case FIELD_DATA_TYPE.BOOLEAN.name:
+        case FIELD_DATA_TYPE.BOOLEAN.value:
+            return React.createElement(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.NUMBER.name:
+        case FIELD_DATA_TYPE.NUMBER.value:
+            return React.createElement(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.DATE_TIME.name:
+        case FIELD_DATA_TYPE.DATE_TIME.value:
+            return React.createElement(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
+        default:
+            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+    }
+};

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -22,7 +22,7 @@ const innerElementType = forwardRef((_a, ref) => {
     return React.createElement("div", Object.assign({ ref: ref, style: style }, rest));
 });
 export const MenuInline = (props) => {
-    const { width, height, items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, className, } = props;
+    const { width, height, items = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, openKeys: openKeysProp = [], onClick, selectable = false, className, } = props;
     const [openKeys, setOpenKeys] = useState(new Set());
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     useDeepCompareEffect(() => {
@@ -74,13 +74,21 @@ export const MenuInline = (props) => {
         if (hasChilren && !isOpen) {
             handleExpandItem(item);
         }
-        if (!hasChilren && !selectedKeys.has(key)) {
+        if (selectable && !hasChilren && !selectedKeys.has(key)) {
             setSelectedKeys(new Set([item.key]));
         }
         if (onClick) {
             onClick({ item, pathKey: flattenItems[idx].pathKey });
         }
-    }, [flattenItems, handleCollapseItem, handleExpandItem, onClick, openKeys, selectedKeys]);
+    }, [
+        selectable,
+        flattenItems,
+        handleCollapseItem,
+        handleExpandItem,
+        onClick,
+        openKeys,
+        selectedKeys,
+    ]);
     const renderItem = useCallback((args) => {
         const { index, style } = args;
         const item = flattenItems[index];

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

@@ -25,6 +25,7 @@ export type VirtualizedMenuProps = Partial<{
         pathKey: PathKey;
     }) => void;
     className: string;
+    selectable: boolean;
 }>;
 export type PathKey = (string | number)[];
 export type MenuInlineProps = Omit<VirtualizedMenuProps, 'mode'>;

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

@@ -48,7 +48,7 @@ export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
-export { SearchPopover } from './SearchPopover';
+export { SearchPopover, PopoverAddField } from './SearchPopover';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -71,4 +71,4 @@ export type { ImageResizeHandle } from './ImageEditor';
 export type { EditableNameHandle } from './EditableName';
 export type { AccountListingHandle, AccountSelectionProps } from './AccountSelection';
 export type { VirtualizedMenuProps } from './VirtualizedMenu';
-export type { SearchPopoverProps } from './SearchPopover';
+export type { SearchPopoverProps, PopoverAddFieldProps } from './SearchPopover';

package/es/components/molecules/index.js

@@ -48,7 +48,7 @@ export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
-export { SearchPopover } from './SearchPopover';
+export { SearchPopover, PopoverAddField } from './SearchPopover';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';

package/es/components/organism/LeftMenu/index.js

@@ -5,8 +5,6 @@ import { Typography } from 'antd';
 import classNames from 'classnames';
 import { isNil, isString } from 'lodash';
 import { Link } from 'react-router-dom';
-// Assets
-import SubLogoAntsomi from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-antsomi.png';
 // Styled
 import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
 // Constants
@@ -15,6 +13,7 @@ import { APP_KEYS } from './constants';
 import { CustomMenu, CommonMenu, HomeMenu } from './components';
 // Hooks
 import { useLeftMenu, useNavigatePath } from './hooks';
+const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 export const LeftMenu = memo(props => {
     const { style, className, customization } = props;
     const { isExpandable = true, isCustomized = false, items = [], onMenuItemClick, } = customization || {};

package/package.json

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