@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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

@@ -1,46 +1,54 @@
 import React from 'react';
-import type { SelectProps } from 'antd';
+import type { FormInstance, SelectProps } from 'antd';
+import { ImageSliderProps } from './components';
 import { ShareAccessProps } from '../ShareAccess/types';
-export type categoriesProps = Array<{
-    label: string | React.ReactNode;
-    key: string | number;
-    children: Array<{
-        label: string | React.ReactNode;
-        key: string | number;
-    }>;
-}>;
+import { RuleObject } from 'antd/es/form';
+export type categoriesProps = {
+    [key: string]: (string | number)[];
+};
 export interface TemplateValueOptions {
     saveOption?: string;
     templateName?: {
-        id?: string | number;
+        id: undefined;
+        label?: string;
+    } | {
+        id: string | number;
         label?: string;
     };
     description?: string;
     defaultThumbnail?: number;
-    categories?: categoriesProps;
+    categories?: {
+        [key: string]: (string | number)[];
+    };
     accessInfo?: ShareAccessProps['accessInfo'];
 }
-export interface ImagePreviewOptions {
-    thumbnails: (string | undefined)[];
-    skeleton?: boolean;
-    previewNavigation?: boolean;
-    slidesPerView?: number;
-    hideThumbnailsList?: boolean;
-    label?: string;
+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;
     };
-    categories?: categoriesProps;
+    isLoadingCategories?: boolean;
+    categories?: Array<{
+        label: string | React.ReactNode;
+        key: string | number;
+        children: Array<{
+            key: string | number;
+            label: string | React.ReactNode;
+        }>;
+    }>;
     /**
      * Hide categories with following key
      */
@@ -48,20 +56,30 @@ export interface TemplateSaveAsProps {
     templateNames: Array<{
         label: string;
         id: string | number;
+        description?: string;
     }>;
     templateNamesOptions?: {
         label?: string;
         isLoading?: boolean;
-        searchValue?: string;
         defaultNewTemplateName?: string;
-        onSearch?: SelectProps['onSearch'];
+        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<FormValue>;
     value?: TemplateValueOptions;
-    onChange?: (value: Partial<TemplateValueOptions>) => void;
+    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

@@ -10,152 +10,238 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { useState } from 'react';
-import { Dropdown } from 'antd';
+import React, { useEffect, useState } from 'react';
+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, templateNamesOptions, descriptionOptions, value, onChange,
-    // 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, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, label: imageReviewLabel, } = imageReview;
-    const { isLoading, searchValue, 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: defaultTemplateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
-    const [templateName, setTemplateName] = useState(defaultNewTemplateName || `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
-    const [templateNameExist, setTemplateNameExist] = useState((defaultTemplateName === null || defaultTemplateName === void 0 ? void 0 : defaultTemplateName.id) ? defaultTemplateName : templateNames === null || templateNames === void 0 ? void 0 : templateNames[0]);
+    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]);
+    // 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 (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 } }));
+        }
+        // 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) => {
+        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, saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
-                    ? saveOption
-                    : newValue.saveOption || (value === null || value === void 0 ? void 0 : value.saveOption), templateName: !defaultTemplateName && !newValue.templateName
-                    ? saveOption === saveNewValue
-                        ? { id: undefined, label: templateName }
-                        : templateNameExist
-                    : newValue.templateName || defaultTemplateName }));
+            // 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 = ({ parent, parentKey, item, }) => {
-        const currCategory = categoriesValue.find(category => category.label === parent);
-        if (currCategory) {
-            currCategory.children.push(item);
-            const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
-            const newCategory = [...newCategoryList, currCategory];
-            handleChangeValue({ categories: newCategory });
-        }
-        const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
+    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.find(category => category.label === 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.children.filter(child => child.label !== item.label);
-        const newCategoryList = categoriesValue.filter(child => child.label !== currCategory.label);
-        handleChangeValue({
-            categories: [...newCategoryList, Object.assign(Object.assign({}, currCategory), { children: 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(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: templateName }
-                        : templateNameExist,
-                }) },
-                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(Input, { debounce: 1000, className: "field-input", value: templateName, onAfterChange: value => {
-                            handleChangeValue({ templateName: { id: undefined, label: value } });
-                            setTemplateName(value);
-                        }, required: true })) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: onSearch, onPopupScroll: onNamePopupScroll, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
-                            isLoading && templateNames.length === 0 ? null : menu,
-                            isLoading ? (React.createElement(Space, { style: {
-                                    padding: '4px 0',
-                                    width: '100%',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                } },
-                                React.createElement(Spin, { size: "small" }))) : null)), value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: (templateNames === null || templateNames === void 0 ? void 0 : templateNames.length) > 0
-                            ? templateNames.map(item => ({ value: item.id, label: item.label }))
-                            : [], onChange: value => {
-                            var _a, _b;
-                            handleChangeValue({
-                                templateName: {
-                                    id: value,
-                                    label: ((_a = templateNames.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
-                                },
-                            });
-                            setTemplateNameExist({
-                                id: value,
-                                label: ((_b = templateNames.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: 1000, 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, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList })), categories === null || categories === void 0 ? void 0 :
-                categories.map(parentCategory => {
-                    var _a, _b, _c;
-                    const selectedChildren = (_a = categoriesValue
-                        .find(item => item.label === parentCategory.label)) === null || _a === void 0 ? void 0 : _a.children.map(item => item.label);
-                    const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.label)));
-                    const formatData = remainChildren.map((item, idx) => ({
-                        label: item.label,
-                        key: idx,
-                    }));
-                    // 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 */
-                        (_b = categoriesValue
-                            .find(item => item.label === parentCategory.label)) === null || _b === void 0 ? void 0 :
-                            _b.children.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.label,
-                                        item: selectedItem,
-                                    }) }, "\u00D7")))),
-                            React.createElement(Dropdown, { menu: {
-                                    items: formatData,
-                                    onClick: ({ key }) => {
-                                        handleAddCategory({
-                                            parent: parentCategory.label,
-                                            parentKey: parentCategory.key,
-                                            item: remainChildren[key],
-                                        });
+    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(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 /* 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',
+                                        width: '100%',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    } },
+                                    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: (newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.label) || '',
                                     },
-                                }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
-                                "+ Add ", (_c = parentCategory.label) === null || _c === void 0 ? void 0 :
-                                _c.toLowerCase())) : (parentCategory.label)))));
-                })),
-            isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
-                React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null)));
+                                });
+                            } })))),
+                    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
+                    // 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

@@ -9,30 +9,45 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ModalV2 } from '../ModalV2';
 import { TemplateSaveAs } from './TemplateSaveAs';
 // NOTE: helper link (read more about controlled and uncontrolled component)
 // Inspiration form input component https://react.dev/reference/react-dom/components/input
 export const TemplateSaveAsModal = props => {
     const { open, onCancel, okText, onOk, title, templateProps, defaultValue } = props, restProps = __rest(props, ["open", "onCancel", "okText", "onOk", "title", "templateProps", "defaultValue"]);
-    const { onChange: templateOnChange, value: templateValue } = templateProps, restTemplateProps = __rest(templateProps, ["onChange", "value"]);
+    const { onChange, value: templateValue } = templateProps, restTemplateProps = __rest(templateProps, ["onChange", "value"]);
     const [internalValue, setInternalValue] = useState(defaultValue || templateValue);
-    const handleOnChange = (value) => {
-        if (templateOnChange) {
-            templateOnChange(value);
+    const [errors, setErrors] = useState();
+    useEffect(() => {
+        if (defaultValue)
+            setInternalValue(defaultValue);
+    }, [defaultValue]);
+    const handleOnChange = (value, errors) => {
+        setErrors(errors);
+        if (onChange) {
+            onChange(value);
         }
         // NOTE: If there are no templateValue and templateOnChange => uncontrolled component => return templateValue
-        if (defaultValue && !templateValue && !templateOnChange) {
+        if (defaultValue && !templateValue && !onChange) {
             setInternalValue(value);
         }
     };
     const handleOk = (event) => {
-        if (onOk) {
-            // NOTE: If there are templateValue and templateOnChange => controlled component => return templateValue
-            onOk(event, templateValue && templateOnChange ? templateValue : internalValue);
+        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);
         }
     };
-    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: onCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template' }, restProps),
-        React.createElement(TemplateSaveAs, Object.assign({ onChange: handleOnChange, value: templateValue || internalValue }, restTemplateProps))));
+    const handleCancel = (event) => {
+        if (onCancel) {
+            setInternalValue(defaultValue);
+            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', 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';