@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

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) }))] })] }));
 };

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

@@ -1,3 +1,4 @@
+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';
@@ -9,17 +10,9 @@ export const BigImage = React.memo(props => {
     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) }))));
+    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.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
 import React, { useState, useRef, useMemo, useCallback } from 'react';
 import Icon from '@antscorp/icons';
@@ -12,10 +13,9 @@ import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es
 import { isNil } from 'lodash';
 // Image size limit to 10MB
 const SIZE_LIMIT = 10 * 1024 * 1024;
-const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createElement("div", { className: type === 'slider'
+const ButtonSlider = React.memo(({ direction, type, onClick }) => (_jsx("div", { className: type === 'slider'
         ? `slider-button slider-button--${direction}`
-        : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
-    React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
+        : `change-preview-button change-preview-button--${direction}`, onClick: onClick, children: _jsx(Icon, { type: `icon-ants-angle-${direction}` }) })));
 export const ImageSlider = props => {
     const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, onSelectDefault, onSaveThumbnail, useFabric = false, } = props;
     const sliderContainerRef = useRef(null);
@@ -32,12 +32,11 @@ export const ImageSlider = props => {
         setDefaultThumbnailInternal(defaultThumbnail || 0);
     }, [defaultThumbnail]);
     const handleScroll = useCallback((scrollIndex) => {
-        var _a, _b;
-        (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        thumbnailSelectedRef.current?.scrollTo({
             left: scrollIndex * imageWidth,
             behavior: 'smooth',
         });
-        (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+        sliderContainerRef.current?.scrollTo({
             left: scrollIndex * (smallImageWidth + 10),
             behavior: 'smooth',
         });
@@ -69,34 +68,31 @@ export const ImageSlider = props => {
         }
     }, [onSelectDefault]);
     const handleSaveThumbnail = useCallback(() => {
-        var _a, _b;
         const newThumbnails = [...thumbnails];
         // NOTE: https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
-        const base64Url = ((_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getBase64({ pixelRatio: 2.5 })) || '';
+        const base64Url = imageResizeRef.current?.getBase64({ pixelRatio: 2.5 }) || '';
         if (typeof newThumbnails[selectedThumbnail] === 'object' &&
-            ((_b = newThumbnails[selectedThumbnail]) === null || _b === void 0 ? void 0 : _b.url)) {
+            newThumbnails[selectedThumbnail]?.url) {
             newThumbnails[selectedThumbnail].url = base64Url;
         }
         else {
             newThumbnails[selectedThumbnail] = base64Url;
         }
-        onSaveThumbnail === null || onSaveThumbnail === void 0 ? void 0 : onSaveThumbnail({ thumbnails: newThumbnails, thumbnailChange: selectedThumbnail });
-        setLatestCanvas(prev => {
-            var _a;
-            return (Object.assign(Object.assign({}, prev), { [selectedThumbnail]: (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getCurrentState() }));
-        });
+        onSaveThumbnail?.({ thumbnails: newThumbnails, thumbnailChange: selectedThumbnail });
+        setLatestCanvas(prev => ({
+            ...prev,
+            [selectedThumbnail]: imageResizeRef.current?.getCurrentState(),
+        }));
         setEditingThumbnail(undefined);
         handleSelectThumbnail(selectedThumbnail);
     }, [handleSelectThumbnail, onSaveThumbnail, selectedThumbnail, thumbnails]);
     const fileRef = useRef(null);
     const onImportImageClick = useCallback(() => {
-        var _a;
-        (_a = fileRef === null || fileRef === void 0 ? void 0 : fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        fileRef?.current?.click();
     }, []);
     const onImportImageSelect = useCallback((e) => {
-        var _a, _b, _c;
-        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
-            if (((_b = e.target.files) === null || _b === void 0 ? void 0 : _b[0].size) > SIZE_LIMIT) {
+        if (e.target.files?.[0]) {
+            if (e.target.files?.[0].size > SIZE_LIMIT) {
                 /**
                  * NOTE: This reset e.target.files (fix: upload the same image later will trigger change input)
                  * use DataTransfer because e.target.files = null not work in this case
@@ -108,83 +104,62 @@ export const ImageSlider = props => {
                 });
                 return;
             }
-            (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL(e.target.files[0]));
+            imageResizeRef.current?.replaceImageWithUrl(URL.createObjectURL(e.target.files[0]));
             setUploadThumbnail(undefined);
         }
         e.target.files = new DataTransfer().files;
     }, []);
     useDropFile('.image-upload-zone', e => {
-        var _a, _b, _c, _d;
-        if (!((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0]))
+        if (!e?.dataTransfer?.files[0])
             return;
-        if (((_b = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files[0].size) > SIZE_LIMIT) {
+        if (e?.dataTransfer?.files[0].size > SIZE_LIMIT) {
             message.error({
                 content: 'File size too big',
                 style: { fontSize: '12px', fontFamily: 'Roboto' },
             });
             return;
         }
-        (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL((_d = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _d === void 0 ? void 0 : _d.files[0]));
+        imageResizeRef.current?.replaceImageWithUrl(URL.createObjectURL(e?.dataTransfer?.files[0]));
         setUploadThumbnail(undefined);
     });
     const currentTime = useDeepCompareMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
-    const currentEditing = useDeepCompareMemo(() => editingThumbnail !== null && editingThumbnail !== void 0 ? editingThumbnail : uploadThumbnail, [editingThumbnail, uploadThumbnail]);
+    const currentEditing = useDeepCompareMemo(() => editingThumbnail ?? uploadThumbnail, [editingThumbnail, uploadThumbnail]);
     const currentThumbnailUrl = useDeepCompareMemo(() => {
         const currentThumbnail = thumbnails[currentEditing];
-        return typeof currentThumbnail === 'string' ? currentThumbnail : (currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.url) || '';
+        return typeof currentThumbnail === 'string' ? currentThumbnail : currentThumbnail?.url || '';
     }, [currentEditing, thumbnails]);
     const showSkeletonMemo = useDeepCompareMemo(() => {
         const currentThumbnail = thumbnails[currentEditing];
-        const showSkeleton = typeof currentThumbnail === 'object' && !isNil(currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.showSkeleton)
-            ? currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.showSkeleton
+        const showSkeleton = typeof currentThumbnail === 'object' && !isNil(currentThumbnail?.showSkeleton)
+            ? currentThumbnail?.showSkeleton
             : skeleton !== undefined
                 ? skeleton
                 : checkShowSkeletonBaseUrl(getUrlNoCache(currentThumbnailUrl, timeGenerated));
         return showSkeleton;
     }, [currentEditing, currentThumbnailUrl, skeleton, thumbnails, timeGenerated]);
     const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
-    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": showSkeletonMemo, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
-        React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
-            React.createElement(ImageResizeComponent, { className: `image-resize-wrapper ${typeof uploadThumbnail === 'number' ? 'visibility-hidden' : ''}`, width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
-                    ? undefined
-                    : getUrlNoCache(currentThumbnailUrl, timeGenerated), defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing] }),
-            typeof uploadThumbnail !== 'number' ? null : (React.createElement(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
-                React.createElement(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }),
-                React.createElement(Flex, { vertical: true, align: "flex-start" },
-                    React.createElement(Typography.Text, { style: { fontSize: 16, marginBottom: '10px' } }, "Drag & Drop file here"),
-                    React.createElement("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }),
-                    React.createElement(Button, { onClick: onImportImageClick }, "Browse Image"),
-                    React.createElement(Typography.Text, { style: { marginTop: '5px', fontSize: '11px' } }, "File type: .jpg, .png. File size: under 10MB")))),
-            React.createElement(Flex, { justify: "center", align: "center", gap: 8, className: "image-resize-action" },
-                React.createElement(Button, { onClick: handleSaveThumbnail, type: "primary", disabled: uploadThumbnail !== undefined }, "Save"),
-                React.createElement(Button, { onClick: () => {
-                        setEditingThumbnail(undefined);
-                        setUploadThumbnail(undefined);
-                    } }, "Cancel"))),
-        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
-            const url = typeof thumbnail === 'string' ? thumbnail : (thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.url) || '';
-            const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton)
-                ? thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton
-                : skeleton;
-            return (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: showSkeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: () => setEditingThumbnail(selectedThumbnail), 
-                // onClickEdit={index => setEditingThumbnail(index)}
-                onClickUpload: () => {
-                    setEditingThumbnail(selectedThumbnail);
-                    setUploadThumbnail(selectedThumbnail);
-                } }));
-        }))),
-        hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
-            const url = typeof thumbnail === 'string' ? thumbnail : (thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.url) || '';
-            const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton)
-                ? thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton
-                : skeleton;
-            return (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: showSkeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail }));
-        })))),
-        previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
-            React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
-            React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
-        hideThumbnailsList || isLoading || thumbnailsQuantity <= 2 ? null : (React.createElement(React.Fragment, null,
-            (!infinity && selectedThumbnail !== 0) || infinity ? (React.createElement(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null,
-            (!infinity && selectedThumbnail !== thumbnailsQuantity - 1) || infinity ? (React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null))));
+    return (_jsxs(ImageSliderStyled, { className: className || '', "$skeleton": showSkeletonMemo, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10, children: [_jsxs(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}`, children: [_jsx(ImageResizeComponent, { className: `image-resize-wrapper ${typeof uploadThumbnail === 'number' ? 'visibility-hidden' : ''}`, width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: latestCanvas?.[currentEditing]
+                            ? undefined
+                            : getUrlNoCache(currentThumbnailUrl, timeGenerated), defaultValue: latestCanvas?.[currentEditing] }), typeof uploadThumbnail !== 'number' ? null : (_jsxs(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, children: [_jsx(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }), _jsxs(Flex, { vertical: true, align: "flex-start", children: [_jsx(Typography.Text, { style: { fontSize: 16, marginBottom: '10px' }, children: "Drag & Drop file here" }), _jsx("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }), _jsx(Button, { onClick: onImportImageClick, children: "Browse Image" }), _jsx(Typography.Text, { style: { marginTop: '5px', fontSize: '11px' }, children: "File type: .jpg, .png. File size: under 10MB" })] })] })), _jsxs(Flex, { justify: "center", align: "center", gap: 8, className: "image-resize-action", children: [_jsx(Button, { onClick: handleSaveThumbnail, type: "primary", disabled: uploadThumbnail !== undefined, children: "Save" }), _jsx(Button, { onClick: () => {
+                                    setEditingThumbnail(undefined);
+                                    setUploadThumbnail(undefined);
+                                }, children: "Cancel" })] })] }), _jsx(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' }, children: isLoading ? (_jsx(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+                    const url = typeof thumbnail === 'string' ? thumbnail : thumbnail?.url || '';
+                    const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail?.showSkeleton)
+                        ? thumbnail?.showSkeleton
+                        : skeleton;
+                    return (_jsx(BigImage, { url: url, index: index, showSkeleton: showSkeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: () => setEditingThumbnail(selectedThumbnail), 
+                        // onClickEdit={index => setEditingThumbnail(index)}
+                        onClickUpload: () => {
+                            setEditingThumbnail(selectedThumbnail);
+                            setUploadThumbnail(selectedThumbnail);
+                        } }, `image-big_${url}_${index * 2}`));
+                })) }), hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (_jsx(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' }, children: isLoading ? (_jsx(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+                    const url = typeof thumbnail === 'string' ? thumbnail : thumbnail?.url || '';
+                    const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail?.showSkeleton)
+                        ? thumbnail?.showSkeleton
+                        : skeleton;
+                    return (_jsx(SmallImage, { imageFit: thumbnailFit, showSkeleton: showSkeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail }, `${url}_${index * 2}`));
+                })) })), previewNavigation && !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }), _jsx(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail })] })) : null, hideThumbnailsList || isLoading || thumbnailsQuantity <= 2 ? null : (_jsxs(_Fragment, { children: [(!infinity && selectedThumbnail !== 0) || infinity ? (_jsx(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null, (!infinity && selectedThumbnail !== thumbnailsQuantity - 1) || infinity ? (_jsx(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null] }))] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { Image } from 'antd';
 import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
@@ -7,10 +8,10 @@ export const SmallImage = React.memo(props => {
     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--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", style: { objectFit: imageFit }, 
-        // src={imageUrl}
-        // src={url}
-        src: urlNoCache, onError: e => {
-            e.currentTarget.style.display = 'none';
-        } })) : null));
+    return (_jsx("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index), children: url ? (_jsx(Image, { preview: false, width: "100%", height: "100%", style: { objectFit: imageFit }, 
+            // src={imageUrl}
+            // src={url}
+            src: urlNoCache, onError: e => {
+                e.currentTarget.style.display = 'none';
+            } })) : null }));
 });

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

@@ -1,7 +1,6 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 // Libraries
 import styled, { css } from 'styled-components';
-import { Flex } from '@antscorp/antsomi-ui/es/components';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // Assets
 import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/background/skeleton-background.png';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
@@ -53,8 +52,8 @@ export const ImageSliderStyled = styled(Flex) `
 
   .image-resize-wrapper,
   .image-upload-zone {
-    border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_1};
-    border-radius: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius}px;
+    border: 1px solid ${THEME.token?.blue1_1};
+    border-radius: ${THEME.token?.borderRadius}px;
     margin-top: 0;
     overflow: hidden;
   }
@@ -73,23 +72,20 @@ export const ImageSliderStyled = styled(Flex) `
     left: 0;
     width: ${props => `${props.$imageWidth}px`};
     height: ${props => `${props.$imageHeight}px`};
-    background: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorBgSkeleton};
+    background: ${THEME.token?.colorBgSkeleton};
 
     & > i {
-      color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw8};
+      color: ${THEME.token?.bw8};
     }
 
     & > div > span:last-child {
-      color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw7};
+      color: ${THEME.token?.bw7};
     }
 
     &:not(.hide-skeleton) {
-      background: ${props => {
-    var _a;
-    return props.$skeleton
-        ? `url(${SkeletonBg}) no-repeat center center`
-        : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton;
-}};
+      background: ${props => props.$skeleton
+    ? `url(${SkeletonBg}) no-repeat center center`
+    : THEME.token?.colorBgSkeleton};
 
       background-size: 90% 90%;
     }
@@ -166,7 +162,7 @@ export const ImageSliderStyled = styled(Flex) `
     scrollbar-width: none;
 
     /* NOTE: set border-radius for parent of thumbnail list make better UI when scroll horizontal */
-    border-radius: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.borderRadius}px;
+    border-radius: ${THEME.token?.borderRadius}px;
 
     & > div {
       overflow: hidden;
@@ -211,9 +207,9 @@ export const ImageSliderStyled = styled(Flex) `
     &--small {
       position: relative;
       box-sizing: border-box;
-      background: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorBgSkeleton};
-      border: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue1_1};
-      border-radius: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.borderRadius}px;
+      background: ${THEME.token?.colorBgSkeleton};
+      border: 1px solid ${THEME.token?.blue1_1};
+      border-radius: ${THEME.token?.borderRadius}px;
       overflow: hidden;
 
       ${centerBlock}
@@ -251,7 +247,7 @@ export const ImageSliderStyled = styled(Flex) `
 
       /* border: 2px solid #e5e5e5; */
       border-width: 2px;
-      border-radius: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.borderRadius}px;
+      border-radius: ${THEME.token?.borderRadius}px;
       user-select: none;
       cursor: pointer;
     }

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

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 // Libraries
 import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
@@ -32,7 +23,6 @@ import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants';
  * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
  */
 export const useTemplateSave = (options) => {
-    var _a;
     const queryClient = useQueryClient();
     const { service, config, queriesOptions, defaultValue: valueArg } = options;
     const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType, channel, } = config;
@@ -102,24 +92,31 @@ export const useTemplateSave = (options) => {
         const recursiveCategory = (categories = []) => categories.map(category => {
             const { categoryCode, categoryId, categoryName, children } = category;
             const key = Array.isArray(children) && children.length ? categoryCode : categoryId;
-            return Object.assign({ key, label: categoryName }, ((children === null || children === void 0 ? void 0 : children.length) > 0 ? { children: recursiveCategory(children) } : {}));
+            return {
+                key,
+                label: categoryName,
+                ...(children?.length > 0 ? { children: recursiveCategory(children) } : {}),
+            };
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
     // Effects
     useDeepCompareEffect(() => {
         // Self-executing asynchronous function to handle template items
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
+        (async () => {
             // Check if infiniteObjectTemplate is available
             if (infiniteObjectTemplate) {
                 const { pages } = infiniteObjectTemplate;
-                const selectedTemplateId = +(((_a = value.templateName) === null || _a === void 0 ? void 0 : _a.id) || -1);
+                const selectedTemplateId = +(value.templateName?.id || -1);
                 // Generate new template items by flattening entities from pages and adding label and description properties
-                const newTemplateItems = pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
+                const newTemplateItems = pages.flatMap(({ entities }) => entities.flatMap(entity => ({
+                    ...entity.toJson(),
+                    label: entity.name,
+                    description: entity.description || '',
+                })));
                 // If the selected template ID is not found in the new template items, fetch its details
                 if (!newTemplateItems.find(item => +item.id === selectedTemplateId)) {
-                    const objectTemplate = yield queryClient.fetchQuery({
+                    const objectTemplate = await queryClient.fetchQuery({
                         queryKey: [
                             QUERY_KEYS.GET_OBJECT_TEMPLATE_DETAIL,
                             selectedTemplateId,
@@ -137,33 +134,36 @@ export const useTemplateSave = (options) => {
                     });
                     // If the object template is found, add it to the beginning of the new template items
                     if (objectTemplate && objectTemplate.name) {
-                        newTemplateItems.unshift(Object.assign(Object.assign({}, objectTemplate.toJson()), { label: objectTemplate.name, description: objectTemplate.description || '' }));
+                        newTemplateItems.unshift({
+                            ...objectTemplate.toJson(),
+                            label: objectTemplate.name,
+                            description: objectTemplate.description || '',
+                        });
                     }
                 }
                 // Update state with the new template items
                 setTemplateItems(newTemplateItems);
             }
-        }))();
+        })();
         // Dependencies for the effect: update if any of these change
-    }, [infiniteObjectTemplate, objectType, publicLevel, (_a = value.templateName) === null || _a === void 0 ? void 0 : _a.id]);
+    }, [infiniteObjectTemplate, objectType, publicLevel, value.templateName?.id]);
     const onLoadMore = useCallback(() => {
         if (!isFetchingNextPage && hasNextPage) {
             fetchNextPage();
         }
     }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
     const onChange = (newValue) => {
-        var _a, _b;
-        setErrors((_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);
+        setErrors(form?.getFieldsError()?.[0]?.errors);
         setValue(newValue);
     };
     const reset = () => {
         setValue(valueArg || {});
     };
     /* Validate Template Name */
-    const validateName = useCallback((rule, value) => __awaiter(void 0, void 0, void 0, function* () {
+    const validateName = useCallback(async (rule, value) => {
         if (!value)
             return;
-        const response = yield validateTemplateName({
+        const response = await validateTemplateName({
             auth: service,
             params: {
                 object_type: objectType,
@@ -175,7 +175,7 @@ export const useTemplateSave = (options) => {
             return Promise.reject(new Error('This name has already existed'));
         }
         return Promise.resolve();
-    }), [objectType, publicLevel, service, validateTemplateName]);
+    }, [objectType, publicLevel, service, validateTemplateName]);
     return {
         // MapKeys
         categoryItems,

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

@@ -1,8 +1,7 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Flex } from '@antscorp/antsomi-ui/es/components';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 export const TemplateSaveAsStyled = styled(Flex) `
   /* max-width: 1177px; */
@@ -89,7 +88,7 @@ export const TemplateSaveAsStyled = styled(Flex) `
     font-size: 12px;
     flex: 0 0 150px;
     span {
-      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+      color: ${THEME.token?.red6};
     }
 
     &--start {
@@ -132,7 +131,7 @@ export const TemplateSaveAsStyled = styled(Flex) `
     height: 36px;
     border: 1px solid #b8cfe6;
     padding: 0 5px;
-    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
+    border-radius: ${globalToken?.borderRadiusXL}px;
 
     & > .remove-btn {
       cursor: pointer;