@antscorp/antsomi-ui 1.3.5-beta.144 → 1.3.5-beta.146

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -152,7 +152,7 @@ export const TemplateSaveAs = props => {
                             } }))),
                     React.createElement(Flex, { className: "field-container", style: { marginTop: '-20px' } },
                         React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
-                        React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", value: defaultTemplateDesc, debounce: 100, maxLength: 400, onAfterChange: value => handleChangeValue({ description: value }) })),
+                        React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
                     React.createElement(Flex, { className: "field-container" },
                         React.createElement(Text, { className: "field-title" },
                             imageReviewLabel || 'Thumbnail template',
@@ -178,7 +178,7 @@ export const TemplateSaveAs = props => {
                         })
                         : null),
                 isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
-                    React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, excludeUserAccess: ['to_editor'], generalAccessSettings: {
+                    React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, excludeUserAccess: ['to_editor', 'to_owner'], generalAccessSettings: {
                             publicOnlyWith: true,
                         }, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
 };

package/es/components/molecules/TemplateSaveAs/TemplateSaveAsModal.js

@@ -34,7 +34,10 @@ export const TemplateSaveAsModal = props => {
         }
     };
     const handleOk = (event) => {
-        if (onOk && (!errors || errors.length === 0)) {
+        var _a;
+        // Check form errors
+        const isError = ((_a = restTemplateProps.form) === null || _a === void 0 ? void 0 : _a.getFieldsError().some(field => field.errors.length)) || false;
+        if (onOk && (!errors || errors.length === 0) && !isError) {
             // NOTE: If there are templateValue and onChange => controlled component => return templateValue
             onOk(event, templateValue && onChange ? templateValue : internalValue);
         }

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Image } from 'antd';
 import { Button } from '@antscorp/antsomi-ui/es/components';
 import Icon from '@antscorp/icons';
 export const BigImage = React.memo(props => {
     const { url, isDefaultThumbnail, isHideDefaultButton, index, onClickDefaultButton } = props;
+    const currentTime = useMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const urlNoCache = url
+        ? url.includes('nocache')
+            ? url
+            : `${url}?nocache=${timeGenerated}`
+        : undefined;
     return (React.createElement("div", { className: "image-container--big" },
-        url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url.includes('nocache') ? url : `${url}?nocache=${new Date().getTime()}` })) : null,
+        url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: urlNoCache })) : null,
         isHideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => onClickDefaultButton && onClickDefaultButton(index) },
             isDefaultThumbnail ? React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } }) : null,
             isDefaultThumbnail ? 'Default thumbnail' : 'Set as default'))));

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js

@@ -1,6 +1,16 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Image } from 'antd';
 export const SmallImage = React.memo(props => {
     const { url, isSelected, index, onClick } = props;
-    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url.includes('nocache') ? url : `${url}?nocache=${new Date().getTime()}` })) : null));
+    const currentTime = useMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const urlNoCache = url
+        ? url.includes('nocache')
+            ? url
+            : `${url}?nocache=${timeGenerated}`
+        : undefined;
+    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", 
+        // src={imageUrl}
+        // src={url}
+        src: urlNoCache })) : null));
 });

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts

@@ -61,7 +61,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
         onScrollToBottom: () => void;
         isLoading: boolean;
-        validateName: (rule: RuleObject, value: any) => Promise<void>;
+        validateName: (rule: RuleObject, value: any, callback?: any) => Promise<void>;
     };
     form: import("antd").FormInstance<any>;
     errors: any[] | undefined;

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js

@@ -96,7 +96,7 @@ export const useTemplateSave = (options) => {
         setValue(valueArg || {});
     };
     /* Validate Template Name */
-    const validateName = (rule, value) => __awaiter(void 0, void 0, void 0, function* () {
+    const validateName = (rule, value, callback) => __awaiter(void 0, void 0, void 0, function* () {
         if (!value)
             return;
         const response = yield validateTemplateName({

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

@@ -140,7 +140,8 @@ export const useTemplateListing = (options) => {
         return undefined;
     }, [infiniteObjectTemplate, selectedTemplateId]);
     const categoryItems = useDeepCompareMemo(() => {
-        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories.map(category => {
+        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories
+            .map(category => {
             const { categoryCode, categoryId, categoryName, children, total } = category;
             const key = Array.isArray(children) && children.length
                 ? categoryCode
@@ -151,6 +152,13 @@ export const useTemplateListing = (options) => {
                 total,
                 children: recursiveCategory(children || [], categoryCode),
             };
+        })
+            .filter(category => {
+            // Filter category has no children and total template is 0
+            if (isEmpty(category.children) && !category.total) {
+                return false;
+            }
+            return true;
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);

package/es/test.js

@@ -8,10 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
+import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { ConfigProvider, TemplateSaveAs, useTemplateSave } from './components';
+import { Button, ConfigProvider, TemplateSaveAsModal, useTemplateSave, } from './components';
 // Constants
 import { GET_LIST_TYPE, OBJECT_TYPES, PUBLIC_LEVEL } from './constants';
 // import { Slider } from 'antd';
@@ -48,7 +48,7 @@ const SHARE_ACCESS_DEFAULT_VALUE = {
     publicRole: null,
 };
 const thumbnailPortrait = [
-    'https://images.unsplash.com/photo-1515734674582-29010bb37906?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg',
     'https://images.unsplash.com/photo-1571423483570-eb27018d1ec0?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
     'https://images.creativefabrica.com/products/previews/2023/11/03/jG9YjMvHg/2XfoTnjLlEvPMgjGeu0VIDk96mr-desktop.jpg',
 ];
@@ -71,7 +71,7 @@ const getUserInfos = (email) => __awaiter(void 0, void 0, void 0, function* () {
     return data;
 });
 export const App = () => {
-    const { categoryItems, templateItems, value: templateValue, onChange: onChangeValue, searchNameProps, form, } = useTemplateSave({
+    const { categoryItems, templateItems, value: templateValue, onChange: onChangeTemplateValue, searchNameProps, form, } = useTemplateSave({
         service: {
             url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
             token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
@@ -89,20 +89,72 @@ export const App = () => {
             saveOption: 'save-new',
         },
     });
-    return (React.createElement(TemplateSaveAs, { form: form, imageReview: {
-            thumbnails,
-            skeleton: true,
-        }, categories: categoryItems, templateNames: templateItems, shareAccess: {
-            show: true,
-            userId: 1600085510,
-            userPermission: {
-                edit: MENU_PERMISSION.CREATED_BY_USER,
-                view: MENU_PERMISSION.NONE,
-            },
-            getUserInfo: getUserInfos,
-        }, templateNamesOptions: Object.assign({}, searchNameProps), value: templateValue, onChange: value => {
-            onChangeValue(value);
-        } }));
+    const [isOpenSaveTemplate, setIsOpenSaveTemplate] = useState(false);
+    return (
+    // <TemplateSaveAs
+    //   form={form}
+    //   imageReview={{
+    //     thumbnails,
+    //     skeleton: true,
+    //   }}
+    //   categories={categoryItems}
+    //   templateNames={templateItems}
+    //   shareAccess={{
+    //     show: true,
+    //     userId: 1600085510,
+    //     userPermission: {
+    //       edit: MENU_PERMISSION.CREATED_BY_USER,
+    //       view: MENU_PERMISSION.NONE,
+    //     },
+    //     getUserInfo: getUserInfos,
+    //   }}
+    //   templateNamesOptions={{
+    //     ...searchNameProps,
+    //   }}
+    //   value={templateValue}
+    //   onChange={value => {
+    //     onChangeValue(value);
+    //   }}
+    // />
+    React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpenSaveTemplate(true) }, "Open Modal"),
+        React.createElement(TemplateSaveAsModal, { open: isOpenSaveTemplate, okButtonProps: { loading: false }, cancelButtonProps: { disabled: false }, 
+            // onCancel={() => {
+            //   !loadingPersistTemplate && handleCancel();
+            // }}
+            onOk: (e, value) => {
+                console.log('e');
+            }, templateProps: {
+                form,
+                value: templateValue,
+                onChange: onChangeTemplateValue,
+                // onEvent: event => {
+                //   if (event.templateName && event.templateName.id)
+                //     setSelectedTemplate(event.templateName.id.toString());
+                // },
+                imageReview: {
+                    thumbnails: [],
+                    skeleton: true,
+                },
+                templateNames: templateItems,
+                categories: categoryItems,
+                omitCategories: ['device_type', 'template_type'],
+                shareAccess: {
+                    // getUserInfo: email => permissionServices.getUserInfo(email, userInfo?.user_id!) as any,
+                    show: true,
+                    // userId: +userInfo?.user_id!,
+                    userPermission: {
+                        edit: MENU_PERMISSION.CREATED_BY_USER,
+                        view: MENU_PERMISSION.CREATED_BY_USER,
+                    },
+                    placeholder: 'Add people',
+                    generalAccessSettings: {
+                        publicOnlyWith: true,
+                    },
+                    allowAddUser: true,
+                },
+                templateNamesOptions: Object.assign({}, searchNameProps),
+            } })));
 };
 const container = document.getElementById('root');
 const root = createRoot(container);

package/package.json

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