@antscorp/antsomi-ui 1.3.5-beta.625 → 1.3.5-beta.627

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/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/Layout/components/RecommendationWorkspace/components/RecommendationImage/index.js

@@ -1,4 +1,7 @@
 import React from 'react';
+// Locate
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { Typography } from '../../../../../../atoms';
 // Assets
 import recommendationHumanImage from '@antscorp/antsomi-ui/es/assets/images/components/Layout/recommendation-human.png';
@@ -6,7 +9,7 @@ import recommendationHumanImage from '@antscorp/antsomi-ui/es/assets/images/comp
 import { ImageWrapper, MessageWrapper, RecommendationImageWrapper } from './styled';
 export const RecommendationImage = () => (React.createElement(RecommendationImageWrapper, null,
     React.createElement(MessageWrapper, null,
-        React.createElement(Typography.Paragraph, null, `Having Trouble Navigating the New Menus? Let's Map Functions Together!`),
+        React.createElement(Typography.Paragraph, null, i18nInstance.t(translations.layout.recommendationText).toString()),
         React.createElement("div", { className: "arrow-triangle-down" })),
     React.createElement(ImageWrapper, null,
         React.createElement("img", { src: recommendationHumanImage, alt: "" }))));

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/es/locales/en/translation.json

@@ -660,6 +660,9 @@
             "_standard": "Standard"
         }
     },
+    "layout": {
+        "recommendationText": "Having trouble navigating the new menus? Let's map functions together!"
+    },
     "accessDenied": {
         "title": "Access Denied",
         "subTitle": "You don’t have permission to access this feature",

package/es/locales/i18n.d.ts

@@ -662,6 +662,9 @@ export declare const translationsJson: {
                     _standard: string;
                 };
             };
+            layout: {
+                recommendationText: string;
+            };
             accessDenied: {
                 title: string;
                 subTitle: string;
@@ -893,6 +896,9 @@ export declare const translationsJson: {
                     _standard: string;
                 };
             };
+            layout: {
+                recommendationText: string;
+            };
             accessDenied: {
                 title: string;
                 subTitle: string;

package/es/locales/translations.d.ts

@@ -662,6 +662,9 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
             _standard: string;
         };
     };
+    layout: {
+        recommendationText: string;
+    };
     accessDenied: {
         title: string;
         subTitle: string;

package/es/locales/vi/translation.json

@@ -210,6 +210,9 @@
             "_standard": "Tiêu chuẩn"
         }
     },
+    "layout": {
+        "recommendationText": "Bạn gặp khó khăn trong việc định vị menu? Cùng tôi ánh xạ menu nào!"
+    },
     "accessDenied": {
         "title": "Truy cập bị từ chối",
         "subTitle": "Bạn không có quyền truy cập tính năng này",

package/package.json

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