@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.1

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

@@ -0,0 +1,74 @@
+var _a;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const InputWrapperStyled = styled.div `
+  display: inline-block;
+  position: relative;
+  background-color: #fff;
+  border-bottom: 1px solid transparent;
+  max-width: 100%;
+  overflow: hidden;
+
+  display: inline-flex;
+  align-items: baseline;
+
+  &:has(input:focus) {
+    border-bottom: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1};
+  }
+  &:has(input[readonly]:focus) {
+    border-bottom: none;
+  }
+
+  input {
+    font-size: 20px !important;
+    font-weight: 700;
+    min-width: 23px !important;
+    height: 30px;
+    transition: none !important;
+    padding: 5px 0 !important;
+    border: none !important;
+    text-overflow: ellipsis;
+  }
+
+  .suffix-icon-error,
+  .suffix-icon {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    padding: 0 5px;
+    padding-left: 15px;
+  }
+
+  .suffix-icon {
+    display: none;
+    &:hover {
+      display: flex;
+    }
+  }
+
+  input:hover {
+    background-color: transparent;
+
+    & + .suffix-icon {
+      display: flex;
+    }
+  }
+
+  input:focus + .suffix-icon {
+    display: none;
+  }
+
+  .hidden-span {
+    box-sizing: border-box;
+    visibility: hidden;
+    white-space: pre;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 30px;
+    font-family: inherit;
+    font-size: 20px;
+    font-weight: 700;
+    padding: 5px 0; /* Match the padding of the Input component */
+  }
+`;

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

@@ -0,0 +1,15 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
+import React, { ReactNode } from 'react';
+import { IAceEditorProps } from 'react-ace';
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+interface EditorScriptProps extends IAceEditorProps {
+    label?: string | ReactNode;
+    expandModalLabel?: string | ReactNode;
+    hideExpand?: boolean | ReactNode;
+}
+export declare const EditorScript: React.FC<EditorScriptProps>;
+export {};

package/es/components/molecules/EditorScript/EditorScript.js

@@ -0,0 +1,89 @@
+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;
+};
+// Libraries
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Button, Icon } from '../../atoms';
+// Molecules
+import { Modal } from '../Modal';
+// Styled
+import { EditorScriptWrapper } from './styled';
+// Ace editor
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/molecules/EditorScript/EditorScript.tsx';
+export const EditorScript = props => {
+    // Props
+    const { label, expandModalLabel, className, height, setOptions, hideExpand } = props, restOf = __rest(props, ["label", "expandModalLabel", "className", "height", "setOptions", "hideExpand"]);
+    // State
+    const [isExpandEditor, setExpandEditor] = useState(false);
+    const { t } = i18nInstance;
+    const renderAceEditor = (aceHeight = height) => {
+        try {
+            return (React.createElement(AceEditor, Object.assign({ setOptions: Object.assign({ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2 }, setOptions) }, restOf, { style: { width: '100%', height: aceHeight } })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'renderAceEditor',
+                args: {},
+            });
+        }
+    };
+    const onCancelModal = () => {
+        try {
+            setExpandEditor(false);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onCancelModal',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EditorScriptWrapper, { className: className },
+            label && React.createElement("div", { className: "ants-mb-5" }, label),
+            renderAceEditor(),
+            !hideExpand && (React.createElement(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
+                    setExpandEditor(true);
+                } },
+                React.createElement(Icon, { type: "icon-ants-expand", size: 14, style: {
+                        transform: 'scaleX(-1)',
+                    } }),
+                t(translations.expandEditor.title)))),
+        React.createElement(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: React.createElement(Button, { onClick: onCancelModal }, t(translations.close.title)) }, renderAceEditor('500px'))));
+};
+EditorScript.defaultProps = {
+    expandModalLabel: 'Editor Script',
+    mode: 'javascript',
+    theme: 'tomorrow',
+    name: 'Editor Script',
+    placeholder: '',
+    fontSize: 12,
+    showPrintMargin: true,
+    showGutter: true,
+    highlightActiveLine: true,
+    setOptions: {},
+    hideExpand: false,
+    height: '267px',
+};

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

@@ -0,0 +1 @@
+export * from './EditorScript';

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

@@ -0,0 +1 @@
+export * from './EditorScript';

package/es/components/molecules/EditorScript/styled.d.ts

@@ -0,0 +1 @@
+export declare const EditorScriptWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,3 @@
+// Libraries
+import styled from 'styled-components';
+export const EditorScriptWrapper = styled.div ``;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ModalFuncProps } from 'antd';
+export interface EditorTabItem {
+    showIcon?: boolean;
+    closable?: boolean;
+    showDropdown?: boolean;
+    hideRemoveOption?: boolean;
+    id: string;
+    name: string;
+    type: 'query' | 'table-detail';
+}
+interface EditorTabProps {
+    showArrow?: boolean;
+    /**
+     * @deprecated pass showDropdown key to each item in `listTab` props
+     */
+    showDropdown?: boolean;
+    editNameOnConfigure?: boolean;
+    newTabText?: string;
+    showComposeNewQuery?: boolean;
+    className?: string;
+    leftBlockClassName?: string;
+    tabItemClassName?: string;
+    listTab?: EditorTabItem[];
+    activeId?: string;
+    confirmOnRemoveTab?: boolean;
+    modalFuncProps?: ModalFuncProps;
+    onActiveTab: (id: string | undefined) => void;
+    onCloseTab?: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
+    onClickRemoveTab?: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
+    onConfirmRemove?: (tab: EditorTabItem) => void;
+    onConfigure: (id: string) => void;
+    onSaveName?: (id: string, value: string) => void;
+    onAddTab: () => void;
+}
+export declare const EditorTab: React.FC<EditorTabProps>;
+export {};

package/es/components/molecules/EditorTab/EditorTab.js

@@ -0,0 +1,200 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Lib
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+// Components
+import Icon from '@antscorp/icons/main';
+import { Button, Typography, Dropdown, ContentEditable, Modal, } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { EditorTabStyled } from './styled';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/EditorTab/index.jsx';
+export const EditorTab = props => {
+    var _a;
+    const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
+    // disabledScroll,
+    onCloseTab, onClickRemoveTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab, modalFuncProps, } = props;
+    const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
+    const [arrTabs, setArrTabs] = useState(listTab || []);
+    const [isEditable, setIsEditable] = useState();
+    const [modal, contextModal] = Modal.useModal();
+    // Ref
+    const leftBlockRef = useRef(null);
+    useEffect(() => {
+        if (listTab.length - arrTabs.length === 1) {
+            setActiveTabId(listTab[listTab.length - 1].id);
+        }
+        setArrTabs(listTab);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [listTab]);
+    useEffect(() => {
+        var _a;
+        const tabEl = (_a = leftBlockRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-item.active');
+        if (tabEl) {
+            tabEl.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
+        }
+    }, [activeTabId]);
+    useEffect(() => {
+        setActiveTabId(prev => (activeId && prev !== activeId ? activeId : prev));
+    }, [activeId]);
+    const handleAddNew = () => {
+        onAddTab();
+    };
+    const modalConfirmAsync = useCallback((tab) => __awaiter(void 0, void 0, void 0, function* () {
+        // let isConfirm = false;
+        const modalInstance = modal.confirm(Object.assign({ title: 'Remove this tab', content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?', okText: 'Confirm', icon: React.createElement("span", { style: { display: 'none' } }), onOk: () => {
+                if (onConfirmRemove)
+                    return onConfirmRemove(tab);
+            }, className: 'editor-tab__modal-confirm', centered: true }, modalFuncProps));
+        return modalInstance;
+    }), [modalFuncProps, modal, onConfirmRemove]);
+    // NOTE: Archive(1 - START): use async function to handle confirm
+    // const [modalState, setModalState] = useState<any>();
+    // const modalRef = useRef(null);
+    // const showConfirm = params => {
+    //   setModalState(params);
+    // };
+    // // eslint-disable-next-line arrow-body-style
+    // const testAsync = async () => {
+    //   return new Promise(r => {
+    //     // modal.confirm({
+    //     showConfirm({
+    //       open: true,
+    //       // title: 'Remove this tab',
+    //       // content:
+    //       //   'Removing this tab will delete it permanently. Are you sure you want to perform this action?',
+    //       onOk: () => r(true),
+    //       onCancel: () => r(false), // {modalRef.current = false},
+    //     });
+    //     setInterval(() => {
+    //       if (modalRef.current !== null) {
+    //         r(modalRef.current);
+    //         modalRef.current = null;
+    //       }
+    //     }, 500);
+    //   });
+    // };
+    // const testRemove = async () => {
+    //   const res = await testAsync();
+    //   console.log('DONE REMOVE', res);
+    // };
+    // NOTE: Archive(1 - END)
+    const handleActiveTab = useCallback((tabId) => {
+        setActiveTabId(tabId);
+        if (onActiveTab)
+            onActiveTab(tabId);
+    }, [onActiveTab]);
+    const handleCloseTab = (e, tab, idx) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c;
+        e.stopPropagation();
+        // if (arrTabs.length < 2) {
+        //   return;
+        // }
+        const newTabs = arrTabs.filter(item => item.id !== tab.id);
+        if (onClickRemoveTab)
+            return onClickRemoveTab(tab, idx, newTabs);
+        // const isConfirm = confirmOnRemoveTab ? await testAsync() : true;
+        // const isConfirm = await testAsync();
+        // const isConfirm = await modalConfirmAsync(tab);
+        const isConfirm = confirmOnRemoveTab ? yield modalConfirmAsync(tab) : true;
+        if (!isConfirm)
+            return;
+        if (activeTabId === tab.id) {
+            if (idx === arrTabs.length - 1) {
+                handleActiveTab((_b = arrTabs[idx - 1]) === null || _b === void 0 ? void 0 : _b.id);
+            }
+            else if (arrTabs.length > 1) {
+                handleActiveTab((_c = arrTabs[idx + 1]) === null || _c === void 0 ? void 0 : _c.id);
+            }
+        }
+        onCloseTab === null || onCloseTab === void 0 ? void 0 : onCloseTab(tab, idx, newTabs);
+        setArrTabs(newTabs);
+    });
+    const onWheelLeftBlock = useCallback(event => {
+        try {
+            if (!event.deltaY) {
+                return;
+            }
+            event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onWheelLeftBlock',
+                args: {},
+            });
+        }
+    }, []);
+    const onClickArrow = useCallback((direction = 'left') => {
+        const idx = arrTabs.findIndex(tab => tab.id === activeTabId);
+        if (idx !== -1) {
+            switch (direction) {
+                case 'left':
+                    if (idx !== 0)
+                        handleActiveTab(arrTabs[idx - 1].id);
+                    break;
+                case 'right':
+                    if (idx !== arrTabs.length - 1)
+                        handleActiveTab(arrTabs[idx + 1].id);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }, [activeTabId, arrTabs, handleActiveTab]);
+    return (React.createElement(EditorTabStyled, { className: className || '' },
+        contextModal,
+        showArrow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('left') },
+            React.createElement(Icon, { type: "icon-ants-angle-left" }))),
+        React.createElement("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock }, arrTabs && arrTabs.length
+            ? arrTabs.map((tab, idx) => {
+                const { showIcon = true, showDropdown = true, hideRemoveOption, closable = true, } = tab;
+                return (React.createElement("div", { key: tab.id, onClick: () => handleActiveTab(tab.id), className: classnames('tab-item', tabItemClassName, {
+                        active: tab.id === activeTabId,
+                    }) },
+                    showIcon &&
+                        (tab.type === 'query' ? (React.createElement(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (React.createElement(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))),
+                    isEditable === tab.id ? (React.createElement(ContentEditable, { value: tab.name, onSave: newValue => {
+                            setIsEditable(undefined);
+                            onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(tab.id, newValue);
+                        } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, tab.name)),
+                    showDropdown ? (React.createElement(Dropdown, { menu: {
+                            items: [
+                                { label: 'Configure', key: 'configure', style: { minWidth: '135px' } },
+                                ...(hideRemoveOption
+                                    ? []
+                                    : [{ label: 'Remove', key: 'remove', style: { minWidth: '135px' } }]),
+                            ],
+                            onClick: (_a) => __awaiter(void 0, [_a], void 0, function* ({ key, domEvent }) {
+                                switch (key) {
+                                    case 'configure':
+                                        if (editNameOnConfigure)
+                                            setIsEditable(tab.id);
+                                        onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
+                                        break;
+                                    case 'remove':
+                                        yield handleCloseTab(domEvent, tab, idx);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            }),
+                        }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true },
+                        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
+            })
+            : null),
+        showArrow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('right') },
+            React.createElement(Icon, { type: "icon-ants-angle-right" }))),
+        showComposeNewQuery || newTabText ? (React.createElement(Button, { onClick: handleAddNew, className: "new-query-button" },
+            React.createElement(Icon, { type: "icon-ants-add-square", style: { fontSize: '16px' } }),
+            newTabText || 'New query')) : null));
+};

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

@@ -0,0 +1,2 @@
+export { EditorTab } from './EditorTab';
+export type { EditorTabItem } from './EditorTab';

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

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

package/es/components/molecules/EditorTab/styled.d.ts

@@ -0,0 +1 @@
+export declare const EditorTabStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,150 @@
+var _a, _b, _c;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// const token = theme.getDesignToken(THEME);
+export const EditorTabStyled = styled.div `
+  position: relative;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  /* Styled for icon button */
+  button.antsomi-btn-icon-only.antsomi-btn-sm {
+    margin-left: auto;
+    border: none !important;
+    background-color: transparent !important;
+    flex-shrink: 0;
+    width: 20px !important;
+    height: 20px !important;
+    &:hover {
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue} !important;
+    }
+  }
+
+  .left-block {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    flex-grow: 1;
+    flex-flow: nowrap;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    font-size: 14px;
+    color: #222;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .tab-item {
+      position: relative;
+      box-sizing: border-box;
+
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 7px;
+      width: 150px;
+      height: 40px;
+      padding: 0 10px;
+      overflow: hidden;
+      max-width: 200px;
+      background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+
+      /* &.active button, */
+      & button {
+        display: none !important;
+      }
+
+      &:hover {
+        background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
+        & button {
+          display: flex !important;
+        }
+      }
+
+      white-space: nowrap;
+
+      transition: background-color 300ms ease-in-out;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+        color: #666;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 100%;
+        background-color: #1f5fac;
+
+        transform-origin: center;
+        transform: scaleX(0);
+        transition: transform 300ms ease-in-out;
+      }
+
+      &.active {
+        &::after {
+          transform: scaleX(1);
+        }
+        background-color: #fff;
+        & button.antsomi-dropdown-open {
+          display: flex !important;
+        }
+      }
+    }
+
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      display: none !important;
+    }
+    ::-webkit-scrollbar-thumb {
+      display: none !important;
+    }
+  }
+
+  button.new-query-button {
+    margin-left: 10px;
+    border: none;
+  }
+
+  &:has(.left-block > div:last-child.active) .navigate-button:last-child,
+  &:has(.left-block > div:first-child.active) .navigate-button:first-child {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .navigate-button {
+    /* Structure Block */
+    flex-shrink: 0;
+    height: 100%;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* border-right: 1px solid #e0e0e0; */
+
+    /* Typography Block */
+    font-size: 12px;
+
+    cursor: pointer;
+
+    &:last-child {
+      border-right: 1px solid #e0e0e0;
+    }
+
+    /* &.--disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.7;
+    } */
+  }
+`;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
+export interface EmptyDataProps extends Omit<FlexProps, 'children' | 'title'> {
+    showIcon?: boolean;
+    size?: TUISize;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    description?: React.ReactNode;
+    loading?: boolean;
+    className?: string;
+    image?: string;
+    imageClassName?: string;
+    imageStyle?: React.CSSProperties;
+}
+export declare const EmptyData: React.FC<React.PropsWithChildren<EmptyDataProps>>;

package/es/components/molecules/EmptyData/EmptyData.js

@@ -0,0 +1,36 @@
+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;
+};
+// Libraries
+import React from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { isString } from 'lodash';
+// Components
+import { Flex, Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Components
+import { Icon } from '@antscorp/antsomi-ui/es/components';
+// Styled
+import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
+const { Text } = Typography;
+export const EmptyData = props => {
+    const { size = 'medium', icon = 'icon-ants-media', showIcon = true, title, subTitle, description, loading, className, image, imageClassName, imageStyle, children } = props, restOfProps = __rest(props, ["size", "icon", "showIcon", "title", "subTitle", "description", "loading", "className", "image", "imageClassName", "imageStyle", "children"]);
+    return (React.createElement(EmptyWrapper, Object.assign({ className: className }, restOfProps),
+        React.createElement(Flex, { vertical: true, align: "center", justify: "center", gap: 15 },
+            !!showIcon && (React.createElement(React.Fragment, null,
+                !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon)),
+                image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
+                    React.createElement("img", { src: image, alt: "" }))))),
+            loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Flex, { gap: 5, align: "center", justify: "center", vertical: true },
+                title && React.createElement(Text, { className: "title animate__animated animate__fadeInUp" }, title),
+                subTitle && (React.createElement(Text, { className: "subTitle animate__animated animate__fadeInUp" }, subTitle)),
+                description && (React.createElement(Text, { className: "description animate__animated animate__fadeInUp" }, description))))),
+        children));
+};

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

@@ -0,0 +1,6 @@
+export declare const EMPTY_WRAPPER_SIZE: {
+    [x: string]: number;
+};
+export declare const EMPTY_ICON_SIZE: {
+    [x: string]: number;
+};

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

@@ -0,0 +1,12 @@
+import { UI_SIZE } from '@antscorp/antsomi-ui/es/constants';
+const { SMALL, MEDIUM, LARGE } = UI_SIZE;
+export const EMPTY_WRAPPER_SIZE = {
+    [SMALL]: 60,
+    [MEDIUM]: 80,
+    [LARGE]: 100,
+};
+export const EMPTY_ICON_SIZE = {
+    [SMALL]: 27,
+    [MEDIUM]: 48,
+    [LARGE]: 60,
+};

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

@@ -0,0 +1,2 @@
+export { EmptyData } from './EmptyData';
+export type { EmptyDataProps } from './EmptyData';