@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/ShareAccess/hooks/useShareAccess.js

@@ -3,27 +3,26 @@ import { MENU_PERMISSION } from '../constants';
 import { ShareAccessDispatchContext, ShareAccessStateContext } from '../context';
 import { composeObjectMenuPermissions } from '../utils';
 export const useShareAccess = () => {
-    var _a, _b, _c, _d, _e;
     const state = useContext(ShareAccessStateContext);
     const dispatch = useContext(ShareAccessDispatchContext);
     if (!state) {
         throw new Error('useShareAccess must be used within a ShareAccessProvider');
     }
-    const userAccess = useMemo(() => { var _a; return (_a = state.accessInfo) === null || _a === void 0 ? void 0 : _a.listAccess.find(access => access.userId === state.accessUserId); }, [state.accessUserId, (_a = state.accessInfo) === null || _a === void 0 ? void 0 : _a.listAccess]);
+    const userAccess = useMemo(() => state.accessInfo?.listAccess.find(access => access.userId === state.accessUserId), [state.accessUserId, state.accessInfo?.listAccess]);
     const { edit: allowEdit, view: allowView } = composeObjectMenuPermissions({
-        isPublic: !!((_b = state.accessInfo) === null || _b === void 0 ? void 0 : _b.isPublic),
-        publicRole: ((_c = state.accessInfo) === null || _c === void 0 ? void 0 : _c.publicRole) || null,
+        isPublic: !!state.accessInfo?.isPublic,
+        publicRole: state.accessInfo?.publicRole || null,
         menuPermission: {
-            view: ((_d = state.accessUserPermission) === null || _d === void 0 ? void 0 : _d.view) || MENU_PERMISSION.NONE,
-            edit: ((_e = state.accessUserPermission) === null || _e === void 0 ? void 0 : _e.edit) || MENU_PERMISSION.NONE,
+            view: state.accessUserPermission?.view || MENU_PERMISSION.NONE,
+            edit: state.accessUserPermission?.edit || MENU_PERMISSION.NONE,
         },
         objectPermission: {
-            edit: !!(userAccess === null || userAccess === void 0 ? void 0 : userAccess.allowEdit),
-            view: !!(userAccess === null || userAccess === void 0 ? void 0 : userAccess.allowView),
+            edit: !!userAccess?.allowEdit,
+            view: !!userAccess?.allowView,
         },
     });
     return {
-        state: Object.assign(Object.assign({}, state), { allowEdit, allowView }),
+        state: { ...state, allowEdit, allowView },
         dispatch,
     };
 };

package/es/components/molecules/ShareAccess/reducer.js

@@ -12,7 +12,10 @@ export const shareAccessReducer = (onChange) => (state, action) => produce(state
             break;
         }
         case TYPES.UPDATE_MODAL_TRANSTER_OWNERSHIP: {
-            draft.modalTransferOwnership = Object.assign(Object.assign({}, state.modalTransferOwnership), action.payload);
+            draft.modalTransferOwnership = {
+                ...state.modalTransferOwnership,
+                ...action.payload,
+            };
             break;
         }
         default:

package/es/components/molecules/ShareAccess/utils.js

@@ -44,12 +44,12 @@ export const getActionsByUser = (args) => {
         isPublic: !!isPublic,
         publicRole,
         objectPermission: {
-            view: !!(user === null || user === void 0 ? void 0 : user.allowView),
-            edit: !!(user === null || user === void 0 ? void 0 : user.allowEdit),
+            view: !!user?.allowView,
+            edit: !!user?.allowEdit,
         },
         menuPermission: {
-            view: (userPermission === null || userPermission === void 0 ? void 0 : userPermission.view) || MENU_PERMISSION.NONE,
-            edit: (userPermission === null || userPermission === void 0 ? void 0 : userPermission.edit) || MENU_PERMISSION.NONE,
+            view: userPermission?.view || MENU_PERMISSION.NONE,
+            edit: userPermission?.edit || MENU_PERMISSION.NONE,
         },
     });
     if ((!user && !isPublic) || !updatedUser || !allowEdit || updatedUser.userId === ownerId)
@@ -57,7 +57,7 @@ export const getActionsByUser = (args) => {
     const actions = REGEX_REMOVE_NAME.test(updatedUser.email || '')
         ? ['remove_acess']
         : Object.values(PEOPLE_ACTION_KEYS);
-    if (userId !== ownerId || (omit === null || omit === void 0 ? void 0 : omit.includes('to_owner'))) {
+    if (userId !== ownerId || omit?.includes('to_owner')) {
         remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_OWNER);
     }
     if (allowEdit && updatedUser.role === ROLE_MAPPING.EDITOR) {
@@ -69,20 +69,29 @@ export const getActionsByUser = (args) => {
     return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
 };
 export const initAccessInfoDefault = (userInfo) => ({
-    ownerId: +(userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id),
+    ownerId: +userInfo?.user_id,
     listAccess: [
-        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1 }),
+        {
+            ...snakeCaseToCamelCase(userInfo),
+            role: ROLE_MAPPING.OWNER,
+            allowView: 1,
+            allowEdit: 1,
+            allowComment: 1,
+        },
     ],
     publicRole: PUBLIC_ROLE.ONLY_VIEWER,
     isPublic: 0,
 });
 export const safeParseAccessInfo = (accessInfo) => {
-    var _a;
     const ownerId = getOwnerIdFromAccessInfo(accessInfo);
-    return Object.assign(Object.assign({}, accessInfo), { ownerId: +(ownerId || -1), listAccess: (_a = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) === null || _a === void 0 ? void 0 : _a.map(user => (Object.assign(Object.assign({}, user), { userId: +user.userId }))) });
+    return {
+        ...accessInfo,
+        ownerId: +(ownerId || -1),
+        listAccess: accessInfo?.listAccess?.map(user => ({ ...user, userId: +user.userId })),
+    };
 };
 export const mappingOutData = (shareAccess) => {
-    const result = Object.assign({}, shareAccess);
+    const result = { ...shareAccess };
     result.listAccess = result.listAccess.map(accessInfo => {
         const roleLabel = ROLE_ACCESS_LABEL[accessInfo.role];
         if (typeof roleLabel === 'string') {

package/es/components/molecules/SliderWithInputNumber/index.js

@@ -1,16 +1,6 @@
-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 } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 // Atoms
 import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
 // Molecules
@@ -22,7 +12,7 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/SliderWithInputNumber/index.tsx';
 export const SliderWithInputNumber = props => {
     // Props
-    const { label, labelClassName, labelStyling, inputStyling, defaultValue, min, max, step, precision } = props, restOf = __rest(props, ["label", "labelClassName", "labelStyling", "inputStyling", "defaultValue", "min", "max", "step", "precision"]);
+    const { label, labelClassName, labelStyling, inputStyling, defaultValue, min, max, step, precision, ...restOf } = props;
     // State
     const [value, setValue] = useState(defaultValue);
     useEffect(() => {
@@ -45,17 +35,13 @@ export const SliderWithInputNumber = props => {
             });
         }
     };
-    return (React.createElement(SliderWithInputNumberWrapper, null,
-        React.createElement("div", { className: labelClassName, style: labelStyling }, label),
-        React.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                width: '100%',
-            } },
-            React.createElement(Slider, Object.assign({ defaultValue: defaultValue, min: min, max: max, step: step }, restOf, { onChange: value => setValue(value), value: value })),
-            React.createElement(InputNumber, { defaultValue: defaultValue, value: value, min: min, max: max, step: step || 1, style: Object.assign({ flexShrink: 0, width: 57, marginLeft: 20 }, inputStyling), 
-                // precision={precision}
-                onChange: onChangeInputNumber }))));
+    return (_jsxs(SliderWithInputNumberWrapper, { children: [_jsx("div", { className: labelClassName, style: labelStyling, children: label }), _jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    width: '100%',
+                }, children: [_jsx(Slider, { defaultValue: defaultValue, min: min, max: max, step: step, ...restOf, onChange: value => setValue(value), value: value }), _jsx(InputNumber, { defaultValue: defaultValue, value: value, min: min, max: max, step: step || 1, style: { flexShrink: 0, width: 57, marginLeft: 20, ...inputStyling }, 
+                        // precision={precision}
+                        onChange: onChangeInputNumber })] })] }));
 };
 SliderWithInputNumber.defaultProps = {
     defaultValue: 0,

package/es/components/molecules/SliderWithInputNumber/styled.js

@@ -1,8 +1,7 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const SliderWithInputNumberWrapper = styled.div `
-  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
 `;

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

@@ -1,16 +1,6 @@
-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 { useEffect, useState } from 'react';
 import { Form } from 'antd';
 import dayjs from 'dayjs';
 // Components
@@ -24,14 +14,13 @@ import { cloneDeep } from 'lodash';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 const { Text } = Typography;
 export const TemplateSaveAs = 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 { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
+    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 || {};
@@ -44,7 +33,7 @@ export const TemplateSaveAs = props => {
     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),
+        templateNameSelect: templateName?.id || templateNameList?.[0]?.id,
         description: defaultTemplateDesc || '',
         categories: categoriesValue,
         defaultThumbnail,
@@ -72,18 +61,20 @@ export const TemplateSaveAs = props => {
     //   // 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)) {
+        if (saveOption === saveNewValue && onChange && !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 } }));
+            onChange({
+                ...value,
+                templateName: { id: 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),
+            templateName: templateName?.label,
+            templateNameSelect: templateName?.id || templateNameList?.[0]?.id,
             description: defaultTemplateDesc || '',
             categories: categoriesValue,
             defaultThumbnail,
@@ -106,142 +97,119 @@ export const TemplateSaveAs = props => {
             //           '',
             //       };
             // delete formValue.templateNameSelect;
-            onChange(Object.assign(Object.assign({}, value), newValue), form.getFieldsError().flatMap(item => item.errors));
+            onChange({ ...value, ...newValue }, form.getFieldsError().flatMap(item => item.errors));
         }
     };
     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] });
+        const currCategory = form.getFieldValue('categories')?.[parentKey] || [];
+        const newCategory = {
+            ...form.getFieldValue('categories'),
+            [parentKey]: [...currCategory, +childKey],
+        };
         form.setFieldValue('categories', newCategory);
         handleChangeValue({ categories: newCategory });
     };
     const handleRemoveCategory = ({ parentKey, childKey }) => {
-        var _a;
-        const currCategory = (_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey];
+        const currCategory = form.getFieldValue('categories')?.[parentKey];
         if (!currCategory)
             return;
         const newChildren = currCategory.filter(child => child !== childKey);
-        const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: newChildren });
+        const newCategory = {
+            ...form.getFieldValue('categories'),
+            [parentKey]: newChildren,
+        };
         form.setFieldValue('categories', newCategory);
         handleChangeValue({ categories: newCategory });
     };
-    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);
+    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 });
-                        } },
-                        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();
+                                    else {
+                                        const newDefaultTemplateName = `Untitled Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`;
+                                        cloneTemplateName.label = newDefaultTemplateName;
                                     }
                                 }
-                            }, 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) || '',
-                                    },
-                                });
-                            } })))),
-                    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))));
+                                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,9 +24,8 @@ export const TemplateSaveAsModal = props => {
         }
     };
     const handleOk = (event) => {
-        var _a;
         // Check form errors
-        const isError = ((_a = restTemplateProps.form) === null || _a === void 0 ? void 0 : _a.getFieldsError().some(field => field.errors.length)) || false;
+        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);
@@ -48,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', 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))));
+    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.js

@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -12,31 +12,17 @@ const DropdownMenuContent = styled.div `
 `;
 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))))));
+    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) }))] })] }));
 };