@antscorp/antsomi-ui 1.3.5-beta.71 → 1.3.5-beta.710

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { FormInstance, SelectProps } from 'antd';
+import { ImageSliderProps } from './components';
 import { ShareAccessProps } from '../ShareAccess/types';
+import { RuleObject } from 'antd/es/form';
 export type categoriesProps = {
     [key: string]: (string | number)[];
 };
@@ -8,10 +10,10 @@ export interface TemplateValueOptions {
     saveOption?: string;
     templateName?: {
         id: undefined;
-        label: string;
+        label?: string;
     } | {
         id: string | number;
-        label: string;
+        label?: string;
     };
     description?: string;
     defaultThumbnail?: number;
@@ -20,30 +22,25 @@ export interface TemplateValueOptions {
     };
     accessInfo?: ShareAccessProps['accessInfo'];
 }
-export interface ImagePreviewOptions {
-    thumbnails: (string | undefined)[];
-    isLoading?: boolean;
-    skeleton?: boolean;
-    previewNavigation?: boolean;
-    slidesPerView?: number;
-    hideThumbnailsList?: boolean;
-    hideDefaultButton?: boolean;
-    label?: string;
-    imageWidth?: number;
-    imageHeight?: number;
+export interface FormValue extends Required<Omit<TemplateValueOptions, 'templateName' | 'accessInfo'>> {
+    templateName: string;
+    templateNameSelect: number | string | undefined;
 }
 export interface TemplateSaveAsProps {
     className?: string;
     shareAccess: Omit<{
         show: boolean;
     } & ShareAccessProps, 'accessInfo' | 'onChange'>;
-    imageReview: ImagePreviewOptions;
+    imageReview: {
+        label?: string;
+    } & Omit<ImageSliderProps, 'defaultThumbnail' | 'onSelectDefault'>;
     saveOptions?: {
         saveNewText?: string;
         saveExistText?: string;
         saveNewValue?: string;
         saveExistValue?: string;
     };
+    isLoadingCategories?: boolean;
     categories?: Array<{
         label: string | React.ReactNode;
         key: string | number;
@@ -59,21 +56,30 @@ export interface TemplateSaveAsProps {
     templateNames: Array<{
         label: string;
         id: string | number;
+        description?: string;
     }>;
     templateNamesOptions?: {
         label?: string;
         isLoading?: boolean;
         defaultNewTemplateName?: string;
+        selectPlaceholder?: string;
+        placeholder?: string;
         onSearch?: (searchValue: string) => void;
         onNamePopupScroll?: SelectProps['onPopupScroll'];
+        onScrollToBottom?: () => void;
+        validateName?: (rule: RuleObject, value: any) => void;
     };
     descriptionOptions?: {
         label?: string;
         placeholder?: string;
     };
-    form?: FormInstance<any>;
+    form?: FormInstance<FormValue>;
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: ImageSliderProps['thumbnails'];
+        thumbnailChange: number;
+    }) => void;
     onEvent?: (value: Partial<TemplateValueOptions>) => void;
 }
 export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;

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

@@ -11,103 +11,182 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React, { useEffect, useState } from 'react';
-import { Dropdown, Form } from 'antd';
+import { Form } from 'antd';
 import dayjs from 'dayjs';
 // Components
-import { Tooltip, Button, Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, Space, Spin, } from '@antscorp/antsomi-ui/es/components';
+import { Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, Space, Spin, } from '@antscorp/antsomi-ui/es/components';
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 // Styles
 import { TemplateSaveAsStyled } from './styled';
-import { ImageSlider } from './components';
+import { Category, ImageSlider } from './components';
+import { cloneDeep } from 'lodash';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 const { Text } = Typography;
 export const TemplateSaveAs = props => {
-    const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent,
-    // onNamePopupScroll,
-     } = props;
+    var _a;
+    const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, 
+    // form,
+    form: formProps, value, onChange, onEvent, onSaveThumbnail, } = props;
+    const [internalForm] = Form.useForm();
+    const form = formProps || internalForm;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
-    const { thumbnails, isLoading: isLoadingThumbnail, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, imageHeight, imageWidth, label: imageReviewLabel, } = imageReview;
-    const { isLoading, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
+    const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
+    // console.log('🚀 ~ restImageReviewProps:', restImageReviewProps);
+    const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
     const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
-    const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
-    const { saveOption = saveNewValue, templateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
+    const { saveNewText = 'Save as a new media template', saveExistText = 'Save as an existing media template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
+    const { saveOption = saveNewValue, 
+    // templateName = saveOption === saveNewValue || !saveOption
+    //   ? { id: undefined, label: defaultNewTemplateName }
+    //   : templateNameList?.[0],
+    templateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
+    const initFormValue = {
+        saveOption,
+        templateName: defaultNewTemplateName,
+        templateNameSelect: (templateName === null || templateName === void 0 ? void 0 : templateName.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id),
+        description: defaultTemplateDesc || '',
+        categories: categoriesValue,
+        defaultThumbnail,
+    };
     const [searchValue, setSearchValue] = useState('');
     const searchValueDebounce = useDebounce(searchValue, 1000);
+    // Watches
+    const defaultThumbnailValue = Form.useWatch('defaultThumbnail', form);
+    // Effects
     useEffect(() => {
         if (searchValueDebounce && onSearch)
             onSearch(searchValueDebounce);
     }, [searchValueDebounce, onSearch]);
-    const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName || `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
-    const [templateNameExist, setTemplateNameExist] = useState((templateName === null || templateName === void 0 ? void 0 : templateName.id) ? templateName : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]);
-    // NOTE: HOTFIX templateNameExist not update when value outside changed
+    // useEffect(() => {
+    //   /**
+    //    * Check if saveOption is save-new and onChange and defaultNewTemplateName changed
+    //    * => set templateName to new default template name { id: undefined, label: defaultNewTemplateName }
+    //    */
+    //   if (saveOption === saveNewValue && onChange) {
+    //     onChange({
+    //       ...value,
+    //       templateName: { id: templateName?.id, label: defaultNewTemplateName },
+    //     });
+    //   }
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [defaultNewTemplateName, saveNewValue, saveOption]);
     useEffect(() => {
-        if (templateName === null || templateName === void 0 ? void 0 : templateName.id) {
-            setTemplateNameExist(templateName);
+        if (saveOption === saveNewValue && onChange && !(templateName === null || templateName === void 0 ? void 0 : templateName.label)) {
+            const newDefaultTemplateName = `Untitled Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`;
+            onChange(Object.assign(Object.assign({}, value), { templateName: { id: templateName === null || templateName === void 0 ? void 0 : templateName.id, label: newDefaultTemplateName } }));
         }
-    }, [templateName]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [saveOption]);
+    useDeepCompareEffect(() => {
+        var _a;
+        form.setFieldsValue({
+            saveOption,
+            templateName: templateName === null || templateName === void 0 ? void 0 : templateName.label,
+            templateNameSelect: (templateName === null || templateName === void 0 ? void 0 : templateName.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id),
+            description: defaultTemplateDesc || '',
+            categories: categoriesValue,
+            defaultThumbnail,
+        });
+    }, [form, value]);
     const handleChangeValue = (newValue) => {
-        var _a, _b;
         if (onEvent) {
             onEvent(newValue);
         }
         if (onChange) {
-            onChange(Object.assign(Object.assign(Object.assign({}, value), newValue), { 
-                // TODO: return saveOption and templateName generate default value if not pass as value props
-                defaultThumbnail: newValue.defaultThumbnail || defaultThumbnail, 
-                // NOTE: if have no saveOption set saveOption value follow this priority => newValue >> value
-                saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
-                    ? saveOption
-                    : newValue.saveOption || (value === null || value === void 0 ? void 0 : value.saveOption) }), (_b = (_a = form === null || form === void 0 ? void 0 : form.getFieldsError()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errors);
+            // const formValue = cloneDeep(form.getFieldsValue(true));
+            // formValue.templateName =
+            //   formValue.saveOption === saveNewValue
+            //     ? { id: undefined, label: formValue.templateName }
+            //     : {
+            //         id: formValue.templateNameSelect,
+            //         label:
+            //           templateNameList.find(item => item.id === formValue.templateNameSelect)?.label ||
+            //           formValue.templateName ||
+            //           '',
+            //       };
+            // delete formValue.templateNameSelect;
+            onChange(Object.assign(Object.assign({}, value), newValue), form.getFieldsError().flatMap(item => item.errors));
         }
     };
-    const handleAddCategory = ({ parentKey, item, }) => {
-        const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
-        if (currCategory) {
-            const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +item] });
-            handleChangeValue({ categories: newCategory });
-        }
-        else {
-            const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [+item] });
-            handleChangeValue({ categories: newCategory });
-        }
+    const handleAddCategory = ({ parentKey, childKey }) => {
+        var _a;
+        const currCategory = ((_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey]) || [];
+        const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: [...currCategory, +childKey] });
+        form.setFieldValue('categories', newCategory);
+        handleChangeValue({ categories: newCategory });
     };
-    const handleRemoveCategory = ({ parent, item, }) => {
-        const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parent];
+    const handleRemoveCategory = ({ parentKey, childKey }) => {
+        var _a;
+        const currCategory = (_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey];
         if (!currCategory)
             return;
-        const newChildren = currCategory.filter(child => child !== item);
-        handleChangeValue({
-            categories: Object.assign(Object.assign({}, categoriesValue), { [parent]: newChildren }),
-        });
+        const newChildren = currCategory.filter(child => child !== childKey);
+        const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: newChildren });
+        form.setFieldValue('categories', newCategory);
+        handleChangeValue({ categories: newCategory });
     };
-    return (React.createElement(Form, { form: form, initialValues: {
-            'template-name': defaultNewTemplateName ||
-                `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
-        } },
+    return (React.createElement(Form, { form: form, initialValues: initFormValue, colon: false, labelAlign: "left", style: { height: '100%' } },
         React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
             React.createElement(Flex, { className: "save-options-container" },
-                React.createElement(RadioGroup, { value: saveOption, onChange: e => {
-                        handleChangeValue({
-                            saveOption: e.target.value,
-                            templateName: e.target.value === saveNewValue
-                                ? { id: undefined, label: templateNameNew }
-                                : templateNameExist,
-                        });
-                    } },
-                    React.createElement(Radio, { value: saveNewValue }, saveNewText),
-                    React.createElement(Radio, { value: saveExistValue }, saveExistText))),
+                React.createElement(Form.Item, { name: "saveOption", noStyle: true },
+                    React.createElement(RadioGroup, { onChange: e => {
+                            var _a;
+                            const { value } = e.target;
+                            // Change save option
+                            const cloneTemplateName = cloneDeep(templateName);
+                            if (cloneTemplateName) {
+                                if (value === saveExistValue) {
+                                    const selectedTemplate = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.find(item => item.id === (templateName === null || templateName === void 0 ? void 0 : templateName.id));
+                                    // Check current template id is exist or not, if not then select first
+                                    if (cloneTemplateName) {
+                                        cloneTemplateName.id = (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id);
+                                    }
+                                }
+                                else {
+                                    const newDefaultTemplateName = `Untitled Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`;
+                                    cloneTemplateName.label = newDefaultTemplateName;
+                                }
+                            }
+                            handleChangeValue({ saveOption: e.target.value, templateName: cloneTemplateName });
+                        } },
+                        React.createElement(Radio, { value: saveNewValue }, saveNewText),
+                        React.createElement(Radio, { value: saveExistValue }, saveExistText)))),
             React.createElement(Flex, null,
-                React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
-                    React.createElement(Flex, { className: "field-container" },
-                        React.createElement(Text, { className: "field-title field-title--middle" },
-                            templateLabel || 'Template name',
-                            " ",
-                            React.createElement("span", null, " *")),
-                        saveOption === saveNewValue ? (React.createElement(Form.Item, { name: "template-name", validateTrigger: "onChange", noStyle: true, rules: [{ required: true }] },
-                            React.createElement(Input, { className: "field-input", value: templateNameNew, debounce: 100, onAfterChange: value => {
-                                    handleChangeValue({ templateName: { id: undefined, label: value } });
-                                    setTemplateNameNew(value);
-                                }, "aria-valuetext": templateNameNew, required: true }))) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: onNamePopupScroll, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
+                React.createElement(Flex, { vertical /* gap={20} */: true, className: "template-container" },
+                    React.createElement(Form.Item, { label: templateLabel || 'Template name', required: true, 
+                        // noStyle -> if enable -> make label is hidden (antd 15.12.6 bug)
+                        style: { marginBottom: 0 }, shouldUpdate: (prevValues, currentValues) => prevValues.saveOption !== currentValues.saveOption }, ({ getFieldValue, isFieldValidating }) => getFieldValue('saveOption') === saveNewValue ? (React.createElement(Form.Item, { name: "templateName", 
+                        // noStyle -> if enable -> validateDebounce not work correct (antd 15.12.6 bug)
+                        validateDebounce: 1000, validateTrigger: "onChange", 
+                        // hasFeedback={isFieldValidating('templateName')}
+                        // validateStatus="success"
+                        rules: [
+                            {
+                                required: true,
+                                message: "This field can't be empty",
+                            },
+                            {
+                                validator: validateName,
+                            },
+                        ] },
+                        React.createElement(Input, { placeholder: placeholder, maxLength: 255, debounce: 500, onAfterChange: value => handleChangeValue({
+                                templateName: { id: templateName === null || templateName === void 0 ? void 0 : templateName.id, label: value },
+                            }) }))) : (React.createElement(Form.Item, { name: "templateNameSelect" },
+                        React.createElement(Select
+                        // className="field-input"
+                        , { 
+                            // className="field-input"
+                            placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
+                                if (onNamePopupScroll)
+                                    onNamePopupScroll(e);
+                                if (onScrollToBottom) {
+                                    const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
+                                    if (scrollHeight === clientHeight + scrollTop) {
+                                        onScrollToBottom();
+                                    }
+                                }
+                            }, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
                                 isLoading && templateNameList.length === 0 ? null : menu,
                                 isLoading ? (React.createElement(Space, { style: {
                                         padding: '4px 0',
@@ -115,70 +194,54 @@ export const TemplateSaveAs = props => {
                                         justifyContent: 'center',
                                         alignItems: 'center',
                                     } },
-                                    React.createElement(Spin, { size: "small" }))) : null)), value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: 
-                            // If template exist is not in templateNames list => add to begin of options array
-                            (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
-                                ? [
-                                    ...(templateNameList.find(item => item.id === (templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id))
-                                        ? []
-                                        : [{ value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, label: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.label }]),
-                                    ...templateNameList.map(item => ({ value: item.id, label: item.label })),
-                                ]
-                                : [], onChange: value => {
-                                var _a, _b;
+                                    React.createElement(Spin, { size: "small" }))) : null)), options: templateNameList.map(item => ({
+                                value: item.id,
+                                label: item.label,
+                            })), onChange: value => {
+                                const newTemplateSelected = templateNameList.find(item => item.id === value);
+                                form.setFieldValue('description', newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.description);
                                 handleChangeValue({
                                     templateName: {
                                         id: value,
-                                        label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
+                                        label: (newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.label) || '',
                                     },
                                 });
-                                setTemplateNameExist({
-                                    id: value,
-                                    label: ((_b = templateNameList.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
-                                });
-                            } }))),
-                    React.createElement(Flex, { className: "field-container" },
-                        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, onAfterChange: value => handleChangeValue({ description: value }) })),
-                    React.createElement(Flex, { className: "field-container" },
-                        React.createElement(Text, { className: "field-title" },
-                            imageReviewLabel || 'Thumbnail template',
-                            " ",
-                            React.createElement("span", null, "*")),
-                        React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton, imageHeight: imageHeight, imageWidth: imageWidth })), categories === null || categories === void 0 ? void 0 :
-                    categories.map(parentCategory => {
-                        var _a, _b;
-                        const selectedChildren = categoriesValue[parentCategory.key];
-                        const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key)));
-                        // NOTE: filter to remove device and template categories
-                        if ((omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.length) && omitCategories.includes(parentCategory.key.toString()))
-                            return null;
-                        return (React.createElement(Flex, { key: parentCategory.key, className: "field-container" },
-                            React.createElement(Text, { className: "field-title" }, parentCategory.label),
-                            React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, 
-                            /* selectedCategory */
-                            (_a = parentCategory.children
-                                .filter(item => selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key))) === null || _a === void 0 ? void 0 :
-                                _a.map(selectedItem => (React.createElement(Flex, { key: selectedItem.key, className: "selected-category", justify: "space-between", align: "center" },
-                                    React.createElement(Tooltip, { title: selectedItem.label },
-                                        React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedItem.label)),
-                                    ' ',
-                                    React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
-                                            parent: parentCategory.key,
-                                            item: selectedItem.key,
-                                        }) }, "\u00D7")))),
-                                React.createElement(Dropdown, { menu: {
-                                        items: remainChildren,
-                                        onClick: ({ key }) => {
-                                            handleAddCategory({
-                                                parentKey: parentCategory.key,
-                                                item: key,
-                                            });
-                                        },
-                                    }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
-                                    "+ Add ", (_b = parentCategory.label) === null || _b === void 0 ? void 0 :
-                                    _b.toLowerCase())) : (parentCategory.label)))));
-                    })),
+                            } })))),
+                    React.createElement(Form.Item, { name: "description", label: descriptionLabel || 'Description' },
+                        React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
+                    React.createElement(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, required: true, label: imageReviewLabel || 'Thumbnail template' },
+                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnailValue, onSelectDefault: value => {
+                                form.setFieldValue('defaultThumbnail', value);
+                                handleChangeValue({ defaultThumbnail: value });
+                            }, 
+                            // onSelectDefault={value => handleChangeValue({ defaultThumbnail: value })}
+                            onSaveThumbnail: data => onSaveThumbnail === null || onSaveThumbnail === void 0 ? void 0 : onSaveThumbnail(data) }, restImageReviewProps))),
+                    isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
+                        React.createElement(Text, { className: "field-title" }, "Categories"),
+                        React.createElement(Space, { style: {
+                                padding: '4px 0',
+                                width: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            } },
+                            React.createElement(Spin, { size: "small" })))) : null,
+                    React.createElement(Form.Item, { noStyle: true, shouldUpdate: (prevValues, currentValues) => prevValues.categories !== currentValues.categories }, ({ getFieldValue }) => !isLoadingCategories && categories
+                        ? categories.map(parentCategory => {
+                            var _a;
+                            const selectedChildren = (_a = getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentCategory.key];
+                            // const selectedChildren = categoriesValue[parentCategory.key];
+                            // NOTE: filter to remove device and template categories
+                            if (omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.includes(parentCategory.key.toString()))
+                                return null;
+                            return (React.createElement(Category, { key: parentCategory.key, categoryKey: parentCategory.key, categoryChildren: parentCategory.children, label: parentCategory.label, selected: selectedChildren, onAddCategory: handleAddCategory, onRemoveCategory: handleRemoveCategory }));
+                        })
+                        : null)),
                 isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
-                    React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
+                    React.createElement(ShareAccess
+                    // accessInfo={form.getFieldValue('accessInfo')}
+                    , Object.assign({ 
+                        // accessInfo={form.getFieldValue('accessInfo')}
+                        placeholder: "Add people", 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);
         }
@@ -45,6 +48,6 @@ export const TemplateSaveAsModal = props => {
             onCancel(event);
         }
     };
-    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template' }, restProps),
+    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template', styles: { body: { borderTop: '1px solid #e5e5e5', paddingTop: 0 } }, centered: true }, restProps),
         React.createElement(TemplateSaveAs, Object.assign({ onChange: onChange ? (newValue, errors) => handleOnChange(newValue, errors) : undefined, value: templateValue || internalValue }, restTemplateProps))));
 };

package/es/components/molecules/TemplateSaveAs/components/Category/Category.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type EditCategory = ({ parentKey, childKey, }: {
+    parentKey: string | number;
+    childKey: string | number;
+}) => void;
+interface CategoryProps {
+    categoryKey: string | number;
+    categoryChildren: Array<{
+        key: string | number;
+        label: string | React.ReactNode;
+    }>;
+    label: string | React.ReactNode;
+    selected: (string | number)[];
+    onRemoveCategory: EditCategory;
+    onAddCategory: EditCategory;
+}
+export declare const Category: React.FC<CategoryProps>;
+export {};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Tooltip, Button, Flex, Typography, Dropdown } from '@antscorp/antsomi-ui/es/components';
+import Icon from '@antscorp/icons';
+const { Text } = Typography;
+/* Styled Components */
+const DropdownMenuContent = styled.div `
+  > ul {
+    max-height: 400px;
+    overflow: auto;
+  }
+`;
+export const Category = props => {
+    const { categoryKey, categoryChildren, label, selected, onRemoveCategory, onAddCategory } = props;
+    const remainChildren = categoryChildren.filter(item => !(selected === null || selected === void 0 ? void 0 : selected.includes(item.key)));
+    return (React.createElement(Flex, { className: "field-container categories-container" },
+        React.createElement(Text, { className: "field-title" }, label),
+        React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, selected === null || selected === void 0 ? void 0 :
+            selected.map(selectedKey => {
+                var _a;
+                const selectedLabel = (_a = categoryChildren.find(item => item.key === selectedKey)) === null || _a === void 0 ? void 0 : _a.label;
+                return (React.createElement(Flex, { key: selectedKey, className: "selected-category", justify: "space-between", align: "center" },
+                    React.createElement(Tooltip, { title: selectedLabel, zIndex: 3001 },
+                        React.createElement(Text, { ellipsis: true }, selectedLabel)),
+                    React.createElement(Icon, { type: "icon-ants-remove-light", className: "remove-btn", onClick: () => onRemoveCategory({ parentKey: categoryKey, childKey: selectedKey }) })));
+            }),
+            remainChildren.length === 0 ? (typeof label === 'string' ? (React.createElement(Button, { disabled: true },
+                React.createElement(Text, { ellipsis: true, style: { color: 'inherit' } },
+                    "+ Add ", label === null || label === void 0 ? void 0 :
+                    label.toLowerCase()))) : (label)) : (React.createElement(Dropdown, { menu: {
+                    items: remainChildren,
+                    onClick: ({ key }) => onAddCategory({ parentKey: categoryKey, childKey: key }),
+                }, 
+                // overlayStyle={{
+                //   maxHeight: 400,
+                //   overflow: 'auto',
+                // }}
+                getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'], dropdownRender: node => React.createElement(DropdownMenuContent, null, node) }, typeof label === 'string' ? (React.createElement(Button, { disabled: true },
+                React.createElement(Text, { ellipsis: true, style: { color: 'inherit' } },
+                    "+ Add ", label === null || label === void 0 ? void 0 :
+                    label.toLowerCase()))) : (label))))));
+};

package/es/components/molecules/TemplateSaveAs/components/Category/index.d.ts

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

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

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

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface BigImageProps {
+    url?: string;
+    showSkeleton?: boolean;
+    isDefaultThumbnail?: boolean;
+    isHideDefaultButton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
+    index: number;
+    onClickDefaultButton?: (index: number) => void;
+    onClickEdit?: (index: number) => void;
+    onClickUpload?: (index: number) => void;
+}
+export declare const BigImage: React.FC<BigImageProps>;
+export {};

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

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { ConfigProvider, Image, Tooltip } from 'antd';
+import { Button, Flex, Checkbox } from '@antscorp/antsomi-ui/es/components';
+import Icon from '@antscorp/icons';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+export const BigImage = React.memo(props => {
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, onClickEdit, onClickUpload, } = props;
+    const currentTime = useMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const urlNoCache = getUrlNoCache(url, timeGenerated);
+    const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
+    return (React.createElement("div", { className: `image-container--big ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
+        url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit }, onError: e => {
+                e.currentTarget.style.display = 'none';
+            } })) : null,
+        isHideDefaultButton || !isDefaultThumbnail ? null : (React.createElement(ConfigProvider, { theme: {
+                components: { Checkbox: { borderRadiusSM: 1000 }, Tooltip: { borderRadius: 10 } },
+            } },
+            React.createElement(Tooltip, { title: "Default thumbnail", zIndex: 5000 },
+                React.createElement(Checkbox, { checked: true, className: "default-checkbox" })))),
+        React.createElement(Flex, { className: "set-default-button", gap: 8 },
+            isHideDefaultButton || isDefaultThumbnail ? null : (React.createElement(Button, { onClick: () => onClickDefaultButton && onClickDefaultButton(index) }, "Set as default")),
+            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-pencil" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(index) }),
+            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-file-upload" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickUpload === null || onClickUpload === void 0 ? void 0 : onClickUpload(index) }))));
+});