@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

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

@@ -1,181 +1,215 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useState } from 'react';
-import { Dropdown, Form } from 'antd';
+import { 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: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent,
-    // onNamePopupScroll,
-     } = props;
-    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 = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
+    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, ...shareAccessProps } = shareAccess;
+    const { label: imageReviewLabel, ...restImageReviewProps } = imageReview;
+    // 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?.id || templateNameList?.[0]?.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);
-    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?.label) {
+            const newDefaultTemplateName = `Untitled Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`;
+            onChange({
+                ...value,
+                templateName: { id: templateName?.id, label: newDefaultTemplateName },
+            });
         }
-    }, [templateName]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [saveOption]);
+    useDeepCompareEffect(() => {
+        form.setFieldsValue({
+            saveOption,
+            templateName: templateName?.label,
+            templateNameSelect: templateName?.id || templateNameList?.[0]?.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(Object.assign(Object.assign({}, value), (!(value === null || value === void 0 ? void 0 : value.saveOption) && { saveOption: saveNewValue })), (!(value === null || value === void 0 ? void 0 : value.templateName) && { templateName: { id: undefined, label: templateNameNew } })), (!(value === null || value === void 0 ? void 0 : value.defaultThumbnail) && { defaultThumbnail })), newValue), (_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({ ...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 }) => {
+        const currCategory = form.getFieldValue('categories')?.[parentKey] || [];
+        const newCategory = {
+            ...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 }) => {
+        const currCategory = form.getFieldValue('categories')?.[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 = {
+            ...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')}`,
-        } },
-        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(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,
-                                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)), 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;
-                                handleChangeValue({
-                                    templateName: {
-                                        id: value,
-                                        label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.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;
-                        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 */
-                            selectedChildren === null || selectedChildren === void 0 ? void 0 :
-                                selectedChildren.map(selectedKey => {
-                                    var _a;
-                                    const selectedLabel = (_a = parentCategory.children.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 },
-                                            React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
-                                        ' ',
-                                        React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
-                                                parent: parentCategory.key,
-                                                item: selectedKey,
-                                            }) }, "\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 ", (_a = parentCategory.label) === null || _a === void 0 ? void 0 :
-                                    _a.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))));
+    return (_jsx(Form, { form: form, initialValues: initFormValue, colon: false, labelAlign: "left", style: { height: '100%' }, children: _jsxs(TemplateSaveAsStyled, { className: className || '', vertical: true, children: [_jsx(Flex, { className: "save-options-container", children: _jsx(Form.Item, { name: "saveOption", noStyle: true, children: _jsxs(RadioGroup, { onChange: e => {
+                                const { value } = e.target;
+                                // Change save option
+                                const cloneTemplateName = cloneDeep(templateName);
+                                if (cloneTemplateName) {
+                                    if (value === saveExistValue) {
+                                        const selectedTemplate = templateNameList?.find(item => item.id === templateName?.id);
+                                        // Check current template id is exist or not, if not then select first
+                                        if (cloneTemplateName) {
+                                            cloneTemplateName.id = selectedTemplate?.id || templateNameList?.[0]?.id;
+                                        }
+                                    }
+                                    else {
+                                        const newDefaultTemplateName = `Untitled Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`;
+                                        cloneTemplateName.label = newDefaultTemplateName;
+                                    }
+                                }
+                                handleChangeValue({ saveOption: e.target.value, templateName: cloneTemplateName });
+                            }, children: [_jsx(Radio, { value: saveNewValue, children: saveNewText }), _jsx(Radio, { value: saveExistValue, children: saveExistText })] }) }) }), _jsxs(Flex, { children: [_jsxs(Flex, { vertical /* gap={20} */: true, className: "template-container", children: [_jsx(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, children: ({ getFieldValue, isFieldValidating }) => getFieldValue('saveOption') === saveNewValue ? (_jsx(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,
+                                            },
+                                        ], children: _jsx(Input, { placeholder: placeholder, maxLength: 255, debounce: 500, onAfterChange: value => handleChangeValue({
+                                                templateName: { id: templateName?.id, label: value },
+                                            }) }) })) : (_jsx(Form.Item, { name: "templateNameSelect", children: _jsx(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 => (_jsxs(_Fragment, { children: [isLoading && templateNameList.length === 0 ? null : menu, isLoading ? (_jsx(Space, { style: {
+                                                            padding: '4px 0',
+                                                            width: '100%',
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center',
+                                                        }, children: _jsx(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?.description);
+                                                handleChangeValue({
+                                                    templateName: {
+                                                        id: value,
+                                                        label: newTemplateSelected?.label || '',
+                                                    },
+                                                });
+                                            } }) })) }), _jsx(Form.Item, { name: "description", label: descriptionLabel || 'Description', children: _jsx(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) }) }), _jsx(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, required: true, label: imageReviewLabel || 'Thumbnail template', children: _jsx(ImageSlider, { defaultThumbnail: defaultThumbnailValue, onSelectDefault: value => {
+                                            form.setFieldValue('defaultThumbnail', value);
+                                            handleChangeValue({ defaultThumbnail: value });
+                                        }, 
+                                        // onSelectDefault={value => handleChangeValue({ defaultThumbnail: value })}
+                                        onSaveThumbnail: data => onSaveThumbnail?.(data), ...restImageReviewProps }) }), isLoadingCategories ? (_jsxs(Flex, { className: "field-container", children: [_jsx(Text, { className: "field-title", children: "Categories" }), _jsx(Space, { style: {
+                                                padding: '4px 0',
+                                                width: '100%',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                            }, children: _jsx(Spin, { size: "small" }) })] })) : null, _jsx(Form.Item, { noStyle: true, shouldUpdate: (prevValues, currentValues) => prevValues.categories !== currentValues.categories, children: ({ getFieldValue }) => !isLoadingCategories && categories
+                                        ? categories.map(parentCategory => {
+                                            const selectedChildren = getFieldValue('categories')?.[parentCategory.key];
+                                            // const selectedChildren = categoriesValue[parentCategory.key];
+                                            // NOTE: filter to remove device and template categories
+                                            if (omitCategories?.includes(parentCategory.key.toString()))
+                                                return null;
+                                            return (_jsx(Category, { categoryKey: parentCategory.key, categoryChildren: parentCategory.children, label: parentCategory.label, selected: selectedChildren, onAddCategory: handleAddCategory, onRemoveCategory: handleRemoveCategory }, parentCategory.key));
+                                        })
+                                        : null })] }), isShowShareAccess ? (_jsx("div", { className: "share-access-container", children: _jsx(ShareAccess
+                            // accessInfo={form.getFieldValue('accessInfo')}
+                            , { 
+                                // 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

@@ -1,22 +1,12 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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, value: templateValue } = templateProps, restTemplateProps = __rest(templateProps, ["onChange", "value"]);
+    const { open, onCancel, okText, onOk, title, templateProps, defaultValue, ...restProps } = props;
+    const { onChange, value: templateValue, ...restTemplateProps } = templateProps;
     const [internalValue, setInternalValue] = useState(defaultValue || templateValue);
     const [errors, setErrors] = useState();
     useEffect(() => {
@@ -34,7 +24,9 @@ export const TemplateSaveAsModal = props => {
         }
     };
     const handleOk = (event) => {
-        if (onOk && (!errors || errors.length === 0)) {
+        // Check form errors
+        const isError = restTemplateProps.form?.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 +37,5 @@ 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),
-        React.createElement(TemplateSaveAs, Object.assign({ onChange: onChange ? (newValue, errors) => handleOnChange(newValue, errors) : undefined, value: templateValue || internalValue }, restTemplateProps))));
+    return (_jsx(ModalV2, { 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, children: _jsx(TemplateSaveAs, { 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,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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?.includes(item.key));
+    return (_jsxs(Flex, { className: "field-container categories-container", children: [_jsx(Text, { className: "field-title", children: label }), _jsxs(Flex, { wrap: "wrap", gap: 10, className: "category-container", children: [selected?.map(selectedKey => {
+                        const selectedLabel = categoryChildren.find(item => item.key === selectedKey)?.label;
+                        return (_jsxs(Flex, { className: "selected-category", justify: "space-between", align: "center", children: [_jsx(Tooltip, { title: selectedLabel, zIndex: 3001, children: _jsx(Text, { ellipsis: true, children: selectedLabel }) }), _jsx(Icon, { type: "icon-ants-remove-light", className: "remove-btn", onClick: () => onRemoveCategory({ parentKey: categoryKey, childKey: selectedKey }) })] }, selectedKey));
+                    }), remainChildren.length === 0 ? (typeof label === 'string' ? (_jsx(Button, { disabled: true, children: _jsxs(Text, { ellipsis: true, style: { color: 'inherit' }, children: ["+ Add ", label?.toLowerCase()] }) })) : (label)) : (_jsx(Dropdown, { menu: {
+                            items: remainChildren,
+                            onClick: ({ key }) => onAddCategory({ parentKey: categoryKey, childKey: key }),
+                        }, 
+                        // overlayStyle={{
+                        //   maxHeight: 400,
+                        //   overflow: 'auto',
+                        // }}
+                        getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'], dropdownRender: node => _jsx(DropdownMenuContent, { children: node }), children: typeof label === 'string' ? (_jsx(Button, { disabled: true, children: _jsxs(Text, { ellipsis: true, style: { color: 'inherit' }, children: ["+ Add ", 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,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { className: `image-container--big ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, children: [url ? (_jsx(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit }, onError: e => {
+                    e.currentTarget.style.display = 'none';
+                } })) : null, isHideDefaultButton || !isDefaultThumbnail ? null : (_jsx(ConfigProvider, { theme: {
+                    components: { Checkbox: { borderRadiusSM: 1000 }, Tooltip: { borderRadius: 10 } },
+                }, children: _jsx(Tooltip, { title: "Default thumbnail", zIndex: 5000, children: _jsx(Checkbox, { checked: true, className: "default-checkbox" }) }) })), _jsxs(Flex, { className: "set-default-button", gap: 8, children: [isHideDefaultButton || isDefaultThumbnail ? null : (_jsx(Button, { onClick: () => onClickDefaultButton && onClickDefaultButton(index), children: "Set as default" })), _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-pencil" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickEdit?.(index) }), _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-file-upload" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickUpload?.(index) })] })] }));
+});

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

@@ -1,6 +1,10 @@
 import React from 'react';
-interface ImageSliderProps {
-    thumbnails: (string | undefined)[];
+type SliderThumbnail = {
+    url: string;
+    showSkeleton?: boolean;
+};
+export interface ImageSliderProps {
+    thumbnails: (string | SliderThumbnail | undefined)[];
     isLoading?: boolean;
     className?: string;
     skeleton?: boolean;
@@ -10,11 +14,18 @@ interface ImageSliderProps {
     hideDefaultButton?: boolean;
     imageWidth?: number;
     imageHeight?: number;
+    infinity?: boolean;
+    useFabric?: boolean;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */
     defaultThumbnail?: number;
     onSelectDefault?: (imgIndex: number) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: ImageSliderProps['thumbnails'];
+        thumbnailChange: number;
+    }) => void;
 }
 export declare const ImageSlider: React.FC<ImageSliderProps>;
 export {};