@antscorp/antsomi-ui 1.3.5-beta.20 → 1.3.5-beta.22

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -29,7 +29,7 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
 import 'animate.css';
 // Providers
-import { QueryClientProviderAntsomiUI, queryClientAntsomiUI, } from '@antscorp/antsomi-ui/es/queries';
+import { QueryClientProviderAntsomiUI, QueryDevtoolsAntsomiUI, queryClientAntsomiUI, } from '@antscorp/antsomi-ui/es/queries';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -48,7 +48,8 @@ const ConfigProvider = props => {
         React.createElement(App, null,
             React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
                 React.createElement(GlobalStyle, null),
-                React.createElement(StyleProvider, { hashPriority: "high" }, children)))));
+                React.createElement(StyleProvider, { hashPriority: "high" }, children),
+                React.createElement(QueryDevtoolsAntsomiUI, null)))));
 };
 ConfigProvider.defaultProps = {
     theme: THEME,

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo } from 'react';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
-import { Flex } from '../../../../atoms';
+import { Empty, Flex } from '../../../../atoms';
 // Styled
 import { SimilarTemplateWrapper } from './styled';
 // Constants
@@ -21,9 +21,9 @@ import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../c
 const MAX_QUANTITY_TEMPLATES = 4;
 export const SimilarTemplate = memo(props => {
     var _a;
-    const { show = true, similarTemplates, similarCardProps } = props;
+    const { show = true, similarTemplates = [], similarCardProps } = props;
     const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
     return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
-        React.createElement(Flex, { gap: 30 }, (_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))))) : null;
+        React.createElement(Flex, { gap: 30 }, ((_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))) || React.createElement(Empty, null)))) : null;
 });

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

@@ -19,6 +19,7 @@ import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './
 // Components
 import { Checkbox, Spin } from '../../../../atoms';
 import { Menu } from '../../../../organism';
+import { Empty } from '../Empty';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 // Constants
@@ -26,7 +27,7 @@ import { CATEGORY_LISTING_WITH } from '../../constants';
 const PATH = 'src/components/template/TemplateListing/components/CategoryListing/index.tsx';
 export const CategoryListing = memo(props => {
     var _a;
-    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, visible = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "visible", "checkedCategories", "onMenuChange"]);
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "onMenuChange"]);
     // Handlers
     const handleClickMenu = e => {
         var _a;
@@ -104,8 +105,8 @@ export const CategoryListing = memo(props => {
         });
         return menuItems;
     }, [getItem, items]);
-    return visible ? (React.createElement(MenuWrapper, { "$width": width },
-        React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" },
-            React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps))))) : null;
+    return show ? (React.createElement(MenuWrapper, { "$width": width },
+        React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) ? (React.createElement("div", { className: "empty-wrapper" },
+            React.createElement(Empty, null))) : (React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -7,6 +7,7 @@ export const MenuWrapper = styled.div `
   flex-shrink: 0;
   width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
   overflow: auto;
+  overflow-x: hidden;
 
   .antsomi-menu {
     height: 100%;
@@ -28,6 +29,13 @@ export const MenuWrapper = styled.div `
   .category-loading {
     height: 100%;
   }
+
+  .empty-wrapper {
+    width: 100%;
+    height: 100%;
+    border-right: 1px solid rgba(5, 5, 5, 0.06);
+    box-sizing: border-box;
+  }
 `;
 export const CustomLabelStyled = styled.div `
   display: flex;

package/es/components/template/TemplateListing/constants/defaultProps.js

@@ -9,7 +9,7 @@ export const TEMPLATE_ITEM_DEFAULT = {
 export const BLANK_TEMPLATE_DEFAULT = { show: false };
 export const CATEGORY_LISTING_DEFAULT = {
     width: CATEGORY_LISTING_WITH,
-    visible: true,
+    show: true,
     checkedCategories: {},
     onMenuChange: () => { },
 };

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -134,8 +134,8 @@ export const useTemplateListing = (options) => {
         return [];
     }, [infiniteObjectTemplate]);
     const similarTemplates = useMemo(() => {
-        const similarTemplateLength = 4;
-        return (getShuffleArray(templateItems.filter(item => item.id !== selectedTemplateId)).slice(0, similarTemplateLength) || []);
+        const maxSimilarTemplateLength = 4;
+        return (getShuffleArray(templateItems.filter(item => item.id !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
     }, [templateItems, selectedTemplateId]);
     // Effects
     useDeepCompareEffect(() => {

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

@@ -78,8 +78,8 @@ export const TemplateListing = memo(props => {
                     React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)), items === null || items === void 0 ? void 0 :
                     items.map(({ id, name, thumbnail }, index) => (React.createElement("div", { key: id },
                         React.createElement(ThumbnailCard, Object.assign({ id: id, name: name, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `animate__animated animate__fadeIn ${templateItemProps.className}`, onClickPreview: handleClickThumbnailPreview }, restOfTemplateItemProps)),
-                        index === items.length - 1 && React.createElement(LoadMoreBlock, { ref: loadMoreRef })))))),
-            !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps))),
+                        index === items.length - 1 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }))))),
+                !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
         React.createElement(PreviewTemplateModal, Object.assign({ informationProps: Object.assign({ onButtonClick: handleClickPreviewModalInfoBtn }, restOfPreviewModalInfoProps), open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
 });
 TemplateListing.displayName = 'TemplateListing';

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

@@ -8,6 +8,7 @@ export const TemplateListingWrapper = styled(Flex) `
 
   .template-listing {
     flex: 1 1 0%;
+    height: 100%;
     max-height: 100%;
     overflow-y: auto;
     box-sizing: border-box;

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

@@ -6,7 +6,7 @@ export interface CategoryListingProps extends MenuProps {
     items?: TCategoryItem[];
     width?: number;
     loading?: boolean;
-    visible?: boolean;
+    show?: boolean;
     checkedCategories?: TCheckedCategories;
     onMenuChange?: (value: TCheckedCategories) => void;
 }

package/package.json

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