@antscorp/antsomi-ui 1.3.5-beta.624 → 1.3.5-beta.626

package/es/components/icons/DestinationsIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const DestinationsIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/DestinationsIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const DestinationsIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.0025 6.5C19.0025 7.88071 15.6505 9 11.5155 9C7.38058 9 4.02853 7.88071 4.02853 6.5C4.02853 5.11929 7.38058 4 11.5155 4C15.6505 4 19.0025 5.11929 19.0025 6.5ZM11.4875 14.465C15.6225 14.465 18.9745 13.42 18.9745 12.131V8.46204C18.9745 9.74904 15.6225 10.795 11.4875 10.795C7.35255 10.795 4.00055 9.75104 4.00055 8.46204V12.131C4.00055 13.419 7.35255 14.465 11.4875 14.465ZM21.0026 17L26.0026 21.5L21.0026 26V23H16.0026V20H21.0026V17ZM18.8865 18H14.0026L13.9996 19.858C13.1644 19.9505 12.3248 19.9966 11.4846 19.996C7.34956 19.996 3.99756 18.95 3.99756 17.662V14C3.99756 15.289 7.34956 16.333 11.4846 16.333C15.6196 16.333 18.9716 15.287 18.9716 14V17.666C18.9677 17.7821 18.9386 17.8961 18.8865 18Z", fill: "currentColor" })));
+});

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

@@ -239,3 +239,4 @@ export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
 export { ExpandMoreIcon } from './ExpandMoreIcon';
+export { DestinationsIcon } from './DestinationsIcon';

package/es/components/icons/index.js

@@ -239,3 +239,4 @@ export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
 export { ExpandMoreIcon } from './ExpandMoreIcon';
+export { DestinationsIcon } from './DestinationsIcon';

package/es/components/icons/loadable.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ComponentIcons: {
+    AccountCircleIcon: React.LazyExoticComponent<React.ForwardRefExoticComponent<import("./types").IconProps & React.RefAttributes<SVGSVGElement>>>;
+    ListIcon: React.LazyExoticComponent<React.ForwardRefExoticComponent<import("./types").IconProps & React.RefAttributes<SVGSVGElement>>>;
+    InvisibleIcon: React.LazyExoticComponent<React.ForwardRefExoticComponent<import("./types").IconProps & React.RefAttributes<SVGSVGElement>>>;
+    LocalMallIcon: React.LazyExoticComponent<React.ForwardRefExoticComponent<import("./types").IconProps & React.RefAttributes<SVGSVGElement>>>;
+};

package/es/components/icons/loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const ComponentIcons = {
+    AccountCircleIcon: React.lazy(() => import('./AccountCircleIcon').then(m => ({ default: m.AccountCircleIcon }))),
+    ListIcon: React.lazy(() => import('./ListIcon').then(m => ({ default: m.ListIcon }))),
+    InvisibleIcon: React.lazy(() => import('./InvisibleIcon').then(m => ({ default: m.InvisibleIcon }))),
+    LocalMallIcon: React.lazy(() => import('./LocalMallIcon').then(m => ({ default: m.LocalMallIcon }))),
+};

package/es/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './atoms';
 export * from './molecules';
 export * from './organism';
 export * from './template';
+export { ComponentIcons } from './icons/loadable';

package/es/components/index.js

@@ -2,3 +2,5 @@ export * from './atoms';
 export * from './molecules';
 export * from './organism';
 export * from './template';
+// Icons
+export { ComponentIcons } from './icons/loadable';

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -21,12 +21,13 @@ export const AccountListing = React.forwardRef((props, ref) => {
     }), [recentData, accountData]);
     // Handlers
     const handleSelectAccount = useCallback((userId) => {
-        const currentRecent = (recentData === null || recentData === void 0 ? void 0 : recentData.value) || [];
+        const currentRecent = (recentData === null || recentData === void 0 ? void 0 : recentData.value.filter(Boolean).slice(0, 2)) || [];
         const body = userId !== currentRecent[0]
             ? [userId, currentRecent[0]]
-            : currentRecent[1]
-                ? [userId, currentRecent[1]]
-                : [userId, currentRecent[0]];
+            : // Check the second current account is existed
+                currentRecent[1]
+                    ? [userId, currentRecent[1]]
+                    : [userId, undefined];
         updateRecentAccount(body.map(id => Number(id)));
         onChange === null || onChange === void 0 ? void 0 : onChange(userId);
     }, 

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

@@ -15,17 +15,20 @@ 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';
+// Constants
+import { EMPTY_ICON_SIZE } from './constants';
 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(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? (React.createElement(Icon, { type: icon })) : (React.cloneElement(icon, {
+                    size: EMPTY_ICON_SIZE[size],
+                })))),
                 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 },

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

@@ -1,4 +1,4 @@
-var _a, _b, _c;
+var _a, _b, _c, _d;
 // Libraries
 import styled, { css } from 'styled-components';
 // Components
@@ -44,6 +44,7 @@ export const EmptyIcon = styled.div `
   justify-content: center;
   border-radius: 100%;
   background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw5};
 
   /* Handle Size */
   ${({ $size }) => {
@@ -60,7 +61,7 @@ export const EmptyIcon = styled.div `
 }}
 
   i {
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw5};
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw5};
   }
 `;
 export const ImageWrapper = styled.div `

package/es/components/template/TemplateListing/index.js

@@ -29,7 +29,7 @@ import { useIntersectionObserver, useListingItemResize } from '@antscorp/antsomi
 export const TemplateListing = memo(props => {
     const { templatesProps = TEMPLATES_DEFAULT, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, emptyProps = EMPTY_DEFAULT, previewModalProps, } = props;
     const [openPreviewModal, setOpenPreviewModal] = useState(false);
-    const { header, footer, items = [], gap = LISTING_GAP_DEFAULT, loading = false, wrapperClassName, wrapperStyle, onLoadMoreTemplates = () => { }, } = templatesProps || {};
+    const { header, footer, content, items = [], gap = LISTING_GAP_DEFAULT, loading = false, wrapperClassName, wrapperStyle, onLoadMoreTemplates = () => { }, } = templatesProps || {};
     const _a = previewModalProps || {}, { onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["onOk", "onCancel"]);
     const _b = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps } = _b, restOfTemplateItemProps = __rest(_b, ["width", "height", "previewBtnProps"]);
     const { onClick: onClickPreview } = previewBtnProps || {};
@@ -62,27 +62,32 @@ export const TemplateListing = memo(props => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
         setOpenPreviewModal(false);
     };
+    const renderTemplateListing = () => (React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
+        React.createElement(Scrollbars, { className: "template-listing" },
+            React.createElement("div", { ref: containerRef, style: {
+                    display: 'grid',
+                    gap: listingGap,
+                    gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
+                } },
+                React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
+                !!itemPerRow &&
+                    (items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                        const { id, name, thumbnail } = item || {};
+                        const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
+                        return (React.createElement("div", { key: id },
+                            index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
+                            React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, thumbnailCacheValue: thumbnailCacheValue, previewBtnProps: Object.assign(Object.assign({}, previewBtnProps), { onClick: handleClickThumbnailPreview }) }, restOfTemplateItemProps))));
+                    }))),
+            !loading && !blankTemplateProps.show && !isHasData && (React.createElement(EmptyData, { icon: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.icon, title: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description })))));
     return (React.createElement(TemplateListingWrapper, null,
         React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
         React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
             header,
-            React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
-                React.createElement(Scrollbars, { className: "template-listing" },
-                    React.createElement("div", { ref: containerRef, style: {
-                            display: 'grid',
-                            gap: listingGap,
-                            gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
-                        } },
-                        React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
-                        !!itemPerRow &&
-                            (items === null || items === void 0 ? void 0 : items.map((item, index) => {
-                                const { id, name, thumbnail } = item || {};
-                                const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
-                                return (React.createElement("div", { key: id },
-                                    index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
-                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, thumbnailCacheValue: thumbnailCacheValue, previewBtnProps: Object.assign(Object.assign({}, previewBtnProps), { onClick: handleClickThumbnailPreview }) }, restOfTemplateItemProps))));
-                            }))),
-                    !loading && !blankTemplateProps.show && !isHasData && (React.createElement(EmptyData, { icon: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.icon, title: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description })))),
+            content
+                ? typeof content === 'function'
+                    ? content(renderTemplateListing())
+                    : content
+                : renderTemplateListing(),
             footer),
         React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
 });

package/es/components/template/TemplateListing/types/TemplateListing.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ThumbnailCardProps } from '../../../molecules';
 import { TThumbnailCardId } from '../../../molecules/ThumbnailCard';
 import { PreviewTemplateModalProps } from '../../../organism/PreviewTemplateModal/types';
@@ -16,6 +16,8 @@ export interface TemplateListingProps<T = {}> {
 export type TemplatesProps<T = {}> = {
     header?: ReactNode;
     footer?: ReactNode;
+    /** Custom content render instead render template listing */
+    content?: ReactNode | ((node: ReactNode) => ReactNode);
     items?: ((TTemplateItem & T) | undefined)[];
     loading?: boolean;
     gap?: number;

package/package.json

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