@antscorp/antsomi-ui 1.3.3 → 1.3.5-alpha.1

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

@@ -0,0 +1,95 @@
+import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from './constants';
+import { remove } from 'lodash';
+import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
+export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
+    const valueMapping = {
+        [`${MENU_PERMISSION.NONE}_false`]: false,
+        [`${MENU_PERMISSION.CREATED_BY_USER}_false`]: false,
+        [`${MENU_PERMISSION.MANAGEMENT_BY_USER}_false`]: false,
+        [`${MENU_PERMISSION.EVERYTHING}_false`]: true,
+        [`${MENU_PERMISSION.NONE}_true`]: false,
+        [`${MENU_PERMISSION.CREATED_BY_USER}_true`]: true,
+        [`${MENU_PERMISSION.MANAGEMENT_BY_USER}_true`]: true,
+        [`${MENU_PERMISSION.EVERYTHING}_true`]: true,
+    };
+    return !!valueMapping[`${menuPermissionValue}_${objectPermissionAllow}`];
+};
+export const composeObjectMenuPermissions = (params) => {
+    const { menuPermission, objectPermission, isPublic, publicRole } = params;
+    const edit = mergePermission(objectPermission.edit, menuPermission.edit);
+    const view = mergePermission(objectPermission.view, menuPermission.view);
+    return {
+        edit: edit || (isPublic && publicRole === PUBLIC_ROLE.ONLY_EDITOR),
+        view: view || (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER),
+    };
+};
+export const getOwnerIdFromAccessInfo = (accessInfo) => {
+    const { ownerId } = accessInfo;
+    if (!ownerId) {
+        const ownerInfo = accessInfo.listAccess.find(member => +member.role === ROLE_MAPPING.OWNER);
+        if (!ownerInfo)
+            return;
+        return ownerInfo.userId;
+    }
+    return ownerId;
+};
+export const getActionsByUser = (args) => {
+    const { userId, userPermission, updatedUserId, objectAccessInfo, omit } = args;
+    if (!userId || !updatedUserId || !objectAccessInfo)
+        return [];
+    const { ownerId, listAccess, publicRole, isPublic } = objectAccessInfo;
+    const user = listAccess.find(access => access.userId === userId);
+    const updatedUser = listAccess.find(access => access.userId === updatedUserId);
+    const { edit: allowEdit } = composeObjectMenuPermissions({
+        isPublic: !!isPublic,
+        publicRole,
+        objectPermission: {
+            view: !!(user === null || user === void 0 ? void 0 : user.allowView),
+            edit: !!(user === null || user === void 0 ? void 0 : 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,
+        },
+    });
+    if ((!user && !isPublic) || !updatedUser || !allowEdit || updatedUser.userId === ownerId)
+        return [];
+    const actions = Object.values(PEOPLE_ACTION_KEYS);
+    if (userId !== ownerId || (omit === null || omit === void 0 ? void 0 : omit.includes('to_owner'))) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_OWNER);
+    }
+    if (allowEdit && updatedUser.role === ROLE_MAPPING.EDITOR) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_EDITOR);
+    }
+    if (allowEdit && updatedUser.role === ROLE_MAPPING.VIEWER) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_VIEWER);
+    }
+    return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
+};
+export const initAccessInfoDefault = (userInfo) => ({
+    ownerId: +(userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id),
+    listAccess: [
+        Object.assign(Object.assign({}, 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 }))) });
+};
+export const mappingOutData = (shareAccess) => {
+    const result = Object.assign({}, shareAccess);
+    result.listAccess = result.listAccess.map(accessInfo => {
+        const roleLabel = ROLE_ACCESS_LABEL[accessInfo.role];
+        if (typeof roleLabel === 'string') {
+            accessInfo.accessType = {
+                label: roleLabel,
+                value: roleLabel.toLowerCase(),
+            };
+        }
+        return accessInfo;
+    });
+    return result;
+};

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

@@ -1 +1,6 @@
-export { Tabs } from 'antd';
+/// <reference types="react" />
+export declare const Tabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+    TabPane: import("react").FC<import("antd").TabPaneProps>;
+}, any, {
+    shadow?: boolean | undefined;
+}, never>;

package/es/components/molecules/Tabs/Tabs.js

@@ -1 +1,14 @@
-export { Tabs } from 'antd';
+import { Tabs as AntdTabs } from 'antd';
+import styled from 'styled-components';
+export const Tabs = styled(AntdTabs) `
+  position: relative;
+  z-index: 1;
+
+  > .antsomi-tabs-nav {
+    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
+  }
+
+  .antsomi-tabs-tab-btn {
+    text-shadow: none !important;
+  }
+`;

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { FormInstance, SelectProps } from 'antd';
+import { ImageSliderProps } from './components';
+import { ShareAccessProps } from '../ShareAccess/types';
+import { RuleObject } from 'antd/es/form';
+export type categoriesProps = {
+    [key: string]: (string | number)[];
+};
+export interface TemplateValueOptions {
+    saveOption?: string;
+    templateName?: {
+        id: undefined;
+        label?: string;
+    } | {
+        id: string | number;
+        label?: string;
+    };
+    description?: string;
+    defaultThumbnail?: number;
+    categories?: {
+        [key: string]: (string | number)[];
+    };
+    accessInfo?: ShareAccessProps['accessInfo'];
+}
+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: {
+        label?: string;
+    } & Omit<ImageSliderProps, 'defaultThumbnail' | 'onSelectDefault'>;
+    saveOptions?: {
+        saveNewText?: string;
+        saveExistText?: string;
+        saveNewValue?: string;
+        saveExistValue?: string;
+    };
+    isLoadingCategories?: boolean;
+    categories?: Array<{
+        label: string | React.ReactNode;
+        key: string | number;
+        children: Array<{
+            key: string | number;
+            label: string | React.ReactNode;
+        }>;
+    }>;
+    /**
+     * Hide categories with following key
+     */
+    omitCategories?: string[];
+    templateNames: Array<{
+        label: string;
+        id: string | number;
+        description?: string;
+    }>;
+    templateNamesOptions?: {
+        label?: string;
+        isLoading?: boolean;
+        defaultNewTemplateName?: string;
+        selectPlaceholder?: string;
+        placeholder?: string;
+        onSearch?: (searchValue: string) => void;
+        onNamePopupScroll?: SelectProps['onPopupScroll'];
+        onScrollToBottom?: () => void;
+        validateName?: (rule: RuleObject, value: any) => void;
+    };
+    descriptionOptions?: {
+        label?: string;
+        placeholder?: string;
+    };
+    form?: FormInstance<FormValue>;
+    value?: TemplateValueOptions;
+    onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: ImageSliderProps['thumbnails'];
+        thumbnailChange: number;
+    }) => void;
+    onEvent?: (value: Partial<TemplateValueOptions>) => void;
+}
+export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;

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

@@ -0,0 +1,247 @@
+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;
+};
+// Libraries
+import React, { useEffect, useState } from 'react';
+import { Form } from 'antd';
+import dayjs from 'dayjs';
+// 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 { Category, ImageSlider } from './components';
+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"]);
+    // 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 = 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) {
+            // const formValue = cloneDeep(form.getFieldsValue(true));
+            // formValue.templateName =
+            //   formValue.saveOption === saveNewValue
+            //     ? { id: undefined, label: formValue.templateName }
+            //     : {
+            //         id: formValue.templateNameSelect,
+            //         label:
+            //           templateNameList.find(item => item.id === formValue.templateNameSelect)?.label ||
+            //           formValue.templateName ||
+            //           '',
+            //       };
+            // delete formValue.templateNameSelect;
+            onChange(Object.assign(Object.assign({}, value), newValue), form.getFieldsError().flatMap(item => item.errors));
+        }
+    };
+    const handleAddCategory = ({ parentKey, 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 = ({ parentKey, childKey }) => {
+        var _a;
+        const currCategory = (_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey];
+        if (!currCategory)
+            return;
+        const newChildren = currCategory.filter(child => child !== childKey);
+        const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: newChildren });
+        form.setFieldValue('categories', newCategory);
+        handleChangeValue({ categories: newCategory });
+    };
+    return (React.createElement(Form, { form: form, initialValues: 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) || '',
+                                    },
+                                });
+                            } })))),
+                    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.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalV2Props } from '../ModalV2';
+import { TemplateSaveAsProps, TemplateValueOptions } from './TemplateSaveAs';
+interface TemplateSaveAsModalProps extends ModalV2Props {
+    templateProps: TemplateSaveAsProps;
+    defaultValue?: TemplateValueOptions;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement>, value?: TemplateValueOptions) => void;
+}
+export declare const TemplateSaveAsModal: React.FC<TemplateSaveAsModalProps>;
+export {};

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

@@ -0,0 +1,53 @@
+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 { 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 [internalValue, setInternalValue] = useState(defaultValue || templateValue);
+    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 && !onChange) {
+            setInternalValue(value);
+        }
+    };
+    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;
+        if (onOk && (!errors || errors.length === 0) && !isError) {
+            // NOTE: If there are templateValue and onChange => controlled component => return templateValue
+            onOk(event, templateValue && onChange ? templateValue : internalValue);
+        }
+    };
+    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';

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

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

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

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