@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -1,25 +1,4 @@
-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());
-    });
-};
-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 from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Modal } from 'antd';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Styled
@@ -32,10 +11,10 @@ import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 export const ThumbnailCard = (props) => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "actionButtons", "onClickWrapper"]);
-    const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
-    const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit, show: showEditBtn = true } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick", "show"]);
-    const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview, show: showPreviewBtn = true } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick", "show"]);
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper, ...restOfProps } = props;
+    const { onOk, ...restOfRemoveTemplateModalProps } = removeModalProps || {};
+    const { text: editText = 'Use template', onClick: onClickEdit, show: showEditBtn = true, ...restOfEditBtnProps } = editBtnProps || {};
+    const { text: previewText = 'Preview', onClick: onClickPreview, show: showPreviewBtn = true, ...restOfPreviewBtnProps } = previewBtnProps || {};
     // Memo
     const showSkeletonMemo = 
     // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
@@ -47,16 +26,24 @@ export const ThumbnailCard = (props) => {
     // Handlers
     const handleRemoveThumbnail = e => {
         e.stopPropagation();
-        modal.confirm(Object.assign(Object.assign({ title: 'Remove template', centered: true, icon: (React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px', marginRight: 13 } })), content: (React.createElement("div", null,
-                React.createElement("p", null, "Are you sure you want to remove the template?"),
-                React.createElement("p", null, "This action can not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+        modal.confirm({
+            title: 'Remove template',
+            centered: true,
+            icon: (_jsx(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px', marginRight: 13 } })),
+            content: (_jsxs("div", { children: [_jsx("p", { children: "Are you sure you want to remove the template?" }), _jsx("p", { children: "This action can not be undone." })] })),
+            okText: 'Remove',
+            cancelText: 'Cancel',
+            closable: true,
+            ...restOfRemoveTemplateModalProps,
+            onOk: async () => {
                 if (onOk)
                     onOk(id);
-            }) }));
+            },
+        });
     };
     const handleWrapperClick = e => {
         e.stopPropagation();
-        onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
+        onClickWrapper?.(id);
     };
     // Handlers
     const renderActionButtons = () => {
@@ -68,17 +55,16 @@ export const ThumbnailCard = (props) => {
             const actionSettings = actionButtons[key];
             if (actionSettings) {
                 const { buttonProps, key, customRender, onClick } = actionSettings;
-                const icon = actionSettings.icon || (option === null || option === void 0 ? void 0 : option.icon) || '';
-                const label = actionSettings.label || (option === null || option === void 0 ? void 0 : option.label) || '';
-                const ButtonComponent = (React.createElement(Tooltip, { key: key || (option === null || option === void 0 ? void 0 : option.key), title: label },
-                    React.createElement(Button, Object.assign({ type: "primary", icon: React.createElement(Icon, { type: icon, style: { fontSize: 24, color: '#FFFFFF' } }) }, buttonProps, { onClick: e => {
-                            if (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) {
+                const icon = actionSettings.icon || option?.icon || '';
+                const label = actionSettings.label || option?.label || '';
+                const ButtonComponent = (_jsx(Tooltip, { title: label, children: _jsx(Button, { type: "primary", icon: _jsx(Icon, { type: icon, style: { fontSize: 24, color: '#FFFFFF' } }), ...buttonProps, onClick: e => {
+                            if (buttonProps?.onClick) {
                                 buttonProps.onClick(e);
                             }
                             if (onClick) {
                                 onClick(id);
                             }
-                        } }))));
+                        } }) }, key || option?.key));
                 /**
                  * Handle custom render for action button
                  * If customRender is a function, return the function callback the ButtonComponent
@@ -92,30 +78,14 @@ export const ThumbnailCard = (props) => {
         })
             .filter(Boolean);
     };
-    return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
-        React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
-            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, thumbnailCacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
-                    e.currentTarget.style.display = 'none';
-                } }))),
-            actionAvailable && !loading && (React.createElement(React.Fragment, null,
-                React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
-                    showEditBtn && (React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
-                            e.stopPropagation();
-                            onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
-                        } }),
-                        React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText))),
-                    showPreviewBtn && (React.createElement(Button, Object.assign({ className: "animate__animated animate__fadeIn", onClick: e => {
-                            e.stopPropagation();
-                            onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
-                        } }, restOfPreviewBtnProps),
-                        React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText)))),
-                React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
-                    renderActionButtons(),
-                    removable && (React.createElement(Tooltip, { title: i18nInstance.t(translations.remove).toString() },
-                        React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail })))),
-                React.createElement("div", { className: "backdrop" }),
-                React.createElement("div", null, contextHolder))),
-            loading && React.createElement(Spin, { className: "thumbnail__loading", spinning: true })),
-        !!name && (React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name))));
+    return (_jsxs(Flex, { gap: 10, vertical: true, ...restOfProps, style: { width, ...restOfProps.style }, children: [_jsxs(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick, children: [_jsx("div", { className: "screen", children: thumbnail && (_jsx("img", { src: getUrlNoCache(thumbnail, thumbnailCacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
+                                e.currentTarget.style.display = 'none';
+                            } })) }), actionAvailable && !loading && (_jsxs(_Fragment, { children: [_jsxs(Flex, { className: "center-action", align: "center", gap: 10, vertical: true, children: [showEditBtn && (_jsx(Button, { type: "primary", className: "animate__animated animate__fadeIn", ...restOfEditBtnProps, onClick: e => {
+                                            e.stopPropagation();
+                                            onClickEdit?.(id);
+                                        }, children: _jsx(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' }, children: editText }) })), showPreviewBtn && (_jsx(Button, { className: "animate__animated animate__fadeIn", onClick: e => {
+                                            e.stopPropagation();
+                                            onClickPreview?.(id);
+                                        }, ...restOfPreviewBtnProps, children: _jsx(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' }, children: previewText }) }))] }), _jsxs("div", { className: "top-right-corner-action animate__animated animate__fadeIn", children: [renderActionButtons(), removable && (_jsx(Tooltip, { title: i18nInstance.t(translations.remove).toString(), children: _jsx(Button, { type: "primary", icon: _jsx(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail }) }))] }), _jsx("div", { className: "backdrop" }), _jsx("div", { children: contextHolder })] })), loading && _jsx(Spin, { className: "thumbnail__loading", spinning: true })] }), !!name && (_jsx(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' }, children: name }))] }));
 };
 ThumbnailCard.displayName = 'ThumbnailCard';

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

@@ -5,16 +5,16 @@ import skeletonBackground from '../../../assets/images/background/skeleton-backg
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailCardWrapper = styled.div `
-  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
+  background-color: ${globalToken?.colorBgSkeleton};
   padding: 10px;
-  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+  border-radius: ${globalToken?.borderRadius}px;
   position: relative;
   box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+  border: 1px solid ${globalToken?.blue1_1};
 
   :hover {
     .center-action {
@@ -81,7 +81,7 @@ export const ThumbnailCardWrapper = styled.div `
   }
 
   .backdrop {
-    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    border-radius: ${globalToken?.borderRadius}px;
     position: absolute;
     width: 100%;
     height: 100%;

package/es/components/molecules/Tree/Tree.js

@@ -1,29 +1,18 @@
-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 from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Tree as AntdTree } from 'antd';
 // styled
 import { StyledTree, StyledTreeDirectory } from './styled';
 // icon
 import { ExpandMoreIcon } from '../../icons';
 const StandardTree = props => {
-    const { switcherIcon = React.createElement(ExpandMoreIcon, { size: 20 }) } = props, restProps = __rest(props, ["switcherIcon"]);
-    return React.createElement(StyledTree, Object.assign({ switcherIcon: switcherIcon }, restProps));
+    const { switcherIcon = _jsx(ExpandMoreIcon, { size: 20 }), ...restProps } = props;
+    return _jsx(StyledTree, { switcherIcon: switcherIcon, ...restProps });
     // return <StyledTree switcherIcon={(props) => <ExpandMoreIcon size={20} />} {...restProps} />;
 };
 export const Tree = AntdTree;
 const DirectoryTree = props => {
-    const { switcherIcon = React.createElement(ExpandMoreIcon, { size: 20 }) } = props, restProps = __rest(props, ["switcherIcon"]);
-    return React.createElement(StyledTreeDirectory, Object.assign({ switcherIcon: switcherIcon }, restProps));
+    const { switcherIcon = _jsx(ExpandMoreIcon, { size: 20 }), ...restProps } = props;
+    return _jsx(StyledTreeDirectory, { switcherIcon: switcherIcon, ...restProps });
 };
 Tree.DirectoryTree = DirectoryTree;
 Tree.Standard = StandardTree;

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

@@ -37,7 +37,7 @@ export const StyledTreeDirectory = styled(Tree.DirectoryTree) `
     }
 
     &::before {
-      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-radius: ${globalToken?.borderRadius}px;
     }
   }
 `;

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

@@ -8,10 +8,16 @@
  */
 export const updateTreeData = (list, key, children) => list.map(node => {
     if (node.key === key) {
-        return Object.assign(Object.assign({}, node), { children });
+        return {
+            ...node,
+            children,
+        };
     }
     if (node.children) {
-        return Object.assign(Object.assign({}, node), { children: updateTreeData(node.children, key, children) });
+        return {
+            ...node,
+            children: updateTreeData(node.children, key, children),
+        };
     }
     return node;
 });

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").DefaultOptionType | import("rc-tree-select/lib/TreeSelect").BaseOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
+export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").BaseOptionType | import("rc-tree-select/lib/TreeSelect").DefaultOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;

package/es/components/molecules/UploadImage/MediaIcon.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const MediaIcon: (_props: any) => React.JSX.Element;
+declare const MediaIcon: (_props: any) => import("react/jsx-runtime").JSX.Element;
 export default MediaIcon;

package/es/components/molecules/UploadImage/MediaIcon.js

@@ -1,4 +1,3 @@
-import React from 'react';
-const MediaIcon = _props => (React.createElement("svg", { width: "20", height: "18", viewBox: "0 0 20 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { d: "M1.67969 4V15.6797H16.6797V17.3203H1.67969C0.742188 17.3203 0 16.5781 0 15.6797V8.17969V4H1.67969ZM5.82031 11.5L9.57031 6.5L12.5 10.25L14.5703 7.75L17.5 11.5H5.82031ZM18.3203 2.32031C19.2578 2.32031 20 3.10156 20 4V12.3203C20 13.2578 19.2578 14 18.3203 14H5C4.10156 14 3.32031 13.2578 3.32031 12.3203L3.35938 2.32031C3.35938 1.42188 4.10156 0.679688 5 0.679688H10L11.6797 2.32031H18.3203ZM18.3203 12.3203V4H10.9766L10.4688 3.49219L9.29688 2.32031H5V12.3203H18.3203Z", fill: "#005FB8" })));
+import { jsx as _jsx } from "react/jsx-runtime";
+const MediaIcon = _props => (_jsx("svg", { width: "20", height: "18", viewBox: "0 0 20 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.67969 4V15.6797H16.6797V17.3203H1.67969C0.742188 17.3203 0 16.5781 0 15.6797V8.17969V4H1.67969ZM5.82031 11.5L9.57031 6.5L12.5 10.25L14.5703 7.75L17.5 11.5H5.82031ZM18.3203 2.32031C19.2578 2.32031 20 3.10156 20 4V12.3203C20 13.2578 19.2578 14 18.3203 14H5C4.10156 14 3.32031 13.2578 3.32031 12.3203L3.35938 2.32031C3.35938 1.42188 4.10156 0.679688 5 0.679688H10L11.6797 2.32031H18.3203ZM18.3203 12.3203V4H10.9766L10.4688 3.49219L9.29688 2.32031H5V12.3203H18.3203Z", fill: "#005FB8" }) }));
 export default MediaIcon;

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

@@ -1,17 +1,9 @@
-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());
-    });
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/media-has-caption */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import Upload from 'antd/lib/upload';
 // Hooks
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
@@ -49,12 +41,11 @@ const SORT_OPTIONS = {
 };
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = props => {
-    var _a, _b, _c, _d, _e, _f;
     const { labelHeadingModal, labelButtonSelect, labelModalDelete, searchPlaceholder, onRemoveImage, onChangeImage: onChangeMedia, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL: showMediaURL, selectedImage: selectedMediaProp, required, focused, domainMedia, slug, paramConfigs, errors, iconName, mode, } = props;
     const { Dragger } = Upload;
     const [storeSavedMedia, setStoreSavedMedia] = useState([]);
     const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
-    const [isModalVisible, setIsModalVisible] = useState(isOpen);
+    const [isModalOpen, setIsModalOpen] = useState(isOpen);
     const [listMedia, setListMedia] = useState(storeSavedMedia || []);
     const [sortOption, setSortOption] = useState(SORT_OPTIONS.BY_UPLOAD_DATE.value);
     const [loading, setLoading] = useState(false);
@@ -86,12 +77,15 @@ export const UploadImage = props => {
                 : []);
         }
     }, [sortOption]);
-    const handleGetStoreSavedMedia = (domain, slug, paramConfigs) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleGetStoreSavedMedia = async (domain, slug, paramConfigs) => {
         try {
             setLoading(true);
             const type = getMediaTypeByMode(mode);
-            const params = Object.assign(Object.assign({}, paramConfigs), { type });
-            const result = yield getListingSavedMedia(domain, slug, params);
+            const params = {
+                ...paramConfigs,
+                type,
+            };
+            const result = await getListingSavedMedia(domain, slug, params);
             if (result) {
                 setStoreSavedMedia(result || []);
             }
@@ -110,16 +104,16 @@ export const UploadImage = props => {
         finally {
             setLoading(false);
         }
-    });
+    };
     useEffect(() => {
         handleGetStoreSavedMedia(domainMedia, slug, paramConfigs);
     }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
-        setIsModalVisible(true);
+        setIsModalOpen(true);
     };
     const handleCancel = () => {
-        setIsModalVisible(false);
+        setIsModalOpen(false);
     };
     const handleSelectMedia = (media) => {
         if (typeof onChangeMedia === 'function') {
@@ -131,32 +125,13 @@ export const UploadImage = props => {
     const onChangeSort = (option) => {
         setSortOption(option);
     };
-    const renderListMedia = (listMediaRender) => listMediaRender.map((media, idx) => {
-        var _a;
-        return (React.createElement(WrapperListImages, { className: "ants-group", key: idx },
-            React.createElement(Boxed, null,
-                React.createElement(Image, { src: mode === 'video' ? media.thumbnail : media.url, alt: "img", loading: "lazy" }),
-                React.createElement(WrapperBtn, { className: "group-hover" },
-                    React.createElement(Button, { onClick: () => handleSelectMedia(media), style: { backgroundColor: 'rgb(255,255,255)' } }, "USE"),
-                    React.createElement(Button, { onClick: () => handleRemoveUploadedMedia(media), style: { backgroundColor: 'rgb(255,255,255)' } },
-                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary } }))),
-                React.createElement(Overlay, { className: "group-hover" })),
-            React.createElement(Paragraph, { style: {
+    const renderListMedia = (listMediaRender) => listMediaRender.map((media, idx) => (_jsxs(WrapperListImages, { className: "ants-group", children: [_jsxs(Boxed, { children: [_jsx(Image, { src: mode === 'video' ? media.thumbnail : media.url, alt: "img", loading: "lazy" }), _jsxs(WrapperBtn, { className: "group-hover", children: [_jsx(Button, { onClick: () => handleSelectMedia(media), style: { backgroundColor: 'rgb(255,255,255)' }, children: "USE" }), _jsx(Button, { onClick: () => handleRemoveUploadedMedia(media), style: { backgroundColor: 'rgb(255,255,255)' }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })] }), _jsx(Overlay, { className: "group-hover" })] }), _jsx(Paragraph, { style: {
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                     display: '-webkit-box',
                     WebkitLineClamp: 2,
                     WebkitBoxOrient: 'vertical',
-                }, title: media.name }, media.name),
-            React.createElement(Paragraph, null,
-                "Uploaded: ",
-                media.createdAt.format('DD/MM/YYYY'),
-                " at ",
-                media.createdAt.format('hh:mm:ss A')),
-            React.createElement(Paragraph, null,
-                "Size: ",
-                media.sizeString)));
-    });
+                }, title: media.name, children: media.name }), _jsxs(Paragraph, { children: ["Uploaded: ", media.createdAt.format('DD/MM/YYYY'), " at ", media.createdAt.format('hh:mm:ss A')] }), _jsxs(Paragraph, { children: ["Size: ", media.sizeString] })] }, idx)));
     const onChangeSearchImage = (e) => {
         const { value } = e.target;
         if (value && value.trim()) {
@@ -176,13 +151,13 @@ export const UploadImage = props => {
         }
         setSelectedMedia({ url: '' });
     };
-    const handleRemoveUploadedMedia = (media_1, ...args_1) => __awaiter(void 0, [media_1, ...args_1], void 0, function* (media, isConfirm = true) {
+    const handleRemoveUploadedMedia = async (media, isConfirm = true) => {
         if (isConfirm) {
             deleteMediaRef.current = media;
             setOpenConfirmDelete(true);
         }
         else if (media) {
-            const res = yield deleteSavedMedia(domainMedia, slug, paramConfigs, +media.id);
+            const res = await deleteSavedMedia(domainMedia, slug, paramConfigs, +media.id);
             if (res && res.data && res.data.code === 200 && res.data.data) {
                 const { success_media = [] } = res.data.data;
                 if (Array.isArray(success_media) && success_media.length) {
@@ -192,25 +167,25 @@ export const UploadImage = props => {
             setOpenConfirmDelete(false);
             deleteMediaRef.current = undefined;
         }
-    });
+    };
     const renderSelectedMedia = () => {
         if (!selectedMedia || !selectedMedia.url)
             return null;
         if (mode === 'video') {
-            return (React.createElement("video", { controls: false, autoPlay: false, muted: true, style: { width: '100%', height: '100%', position: 'absolute' }, src: selectedMedia.url }));
+            return (_jsx("video", { controls: false, autoPlay: false, muted: true, style: { width: '100%', height: '100%', position: 'absolute' }, src: selectedMedia.url }));
         }
-        return (React.createElement(Image, { src: selectedMedia.url, alt: "", style: { position: 'absolute' }, onError: (e) => {
+        return (_jsx(Image, { src: selectedMedia.url, alt: "", style: { position: 'absolute' }, onError: (e) => {
                 e.target.src = PlaceholderImage;
             } }));
     };
-    const customRequestUpload = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const customRequestUpload = async (options) => {
         try {
             const { file } = options;
             uploadFilesRef.current.push(file);
             if (uploadFilesTimeoutRef.current) {
                 clearTimeout(uploadFilesTimeoutRef.current);
             }
-            uploadFilesTimeoutRef.current = setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
+            uploadFilesTimeoutRef.current = setTimeout(async () => {
                 if (!uploadFilesRef.current.length) {
                     uploadFilesRef.current = [];
                     return;
@@ -224,7 +199,7 @@ export const UploadImage = props => {
                 }
                 for (const file of uploadFilesRef.current) {
                     const replacement = getReplacementExtension(mode);
-                    if (!(extensions === null || extensions === void 0 ? void 0 : extensions.map(extension => extension.replace('.', replacement)).includes(file.type))) {
+                    if (!extensions?.map(extension => extension.replace('.', replacement)).includes(file.type)) {
                         message.error('Invalid file extension');
                         uploadFilesRef.current = [];
                         return false;
@@ -236,10 +211,13 @@ export const UploadImage = props => {
                     }
                 }
                 setLoading(true);
-                const result = yield uploadFile(domainMedia, slug, Object.assign(Object.assign({}, paramConfigs), { mode }), uploadFilesRef.current).finally(() => {
+                const result = await uploadFile(domainMedia, slug, {
+                    ...paramConfigs,
+                    mode,
+                }, uploadFilesRef.current).finally(() => {
                     uploadFilesRef.current = [];
                 });
-                if (result === null || result === void 0 ? void 0 : result.length) {
+                if (result?.length) {
                     const arrPromise = [];
                     const type = getMediaTypeByMode(mode);
                     result.forEach(data => arrPromise.push(createSavedMedia(domainMedia, slug, paramConfigs, {
@@ -255,7 +233,7 @@ export const UploadImage = props => {
                             file_name: data.fileName,
                         },
                     })));
-                    yield Promise.all(arrPromise);
+                    await Promise.all(arrPromise);
                     setLoading(false);
                     setTriggerRefresh(triggerRefresh + 1);
                 }
@@ -263,7 +241,7 @@ export const UploadImage = props => {
                     setLoading(false);
                     message.error('Cannot upload image!');
                 }
-            }), 300);
+            }, 300);
         }
         catch (e) {
             uploadFilesRef.current = [];
@@ -273,92 +251,51 @@ export const UploadImage = props => {
         finally {
             setLoading(false);
         }
-    });
-    return (React.createElement(React.Fragment, null,
-        isInputMode ? (React.createElement(WrapperInputMode, { width: width },
-            React.createElement(Input, { required: required, status: errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? 'error' : '', placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, style: { paddingRight: 40 }, onAfterChange: value => handleSelectMedia({
-                    url: value,
-                }) }),
-            React.createElement(WrapperIcon, { onClick: showModal }, mode === 'video' ? (React.createElement(Icon, { type: "icon-ants-video", size: 24, style: {
-                    zIndex: 1,
-                    marginLeft: 2,
-                    color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
-                } })) : (React.createElement(MediaIcon, null))),
-            isError && React.createElement(ErrorMessage, null, errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? errors[0] : ''))) : (React.createElement(UploadImageWrapper, null,
-            title ? React.createElement(Text, { style: { marginTop: 10 } }, title) : null,
-            React.createElement("div", { className: `image-upload-content ${selectedMedia && selectedMedia.url ? 'uploaded' : ''}` },
-                renderSelectedMedia(),
-                !selectedMedia || !selectedMedia.url ? (React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 36, style: {
-                        zIndex: 1,
-                        marginLeft: 25,
-                        color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon,
-                    } })) : null,
-                React.createElement("div", { style: flexStyleCenter },
-                    React.createElement(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' } },
-                        "Browse ",
-                        mode === 'video' ? 'Video' : 'Image'),
-                    selectedMedia && selectedMedia.url ? (React.createElement(Button, { onClick: handleRemoveMedia, style: { backgroundColor: '#ffffff' } },
-                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary } }))) : null)),
-            React.createElement("div", { className: "upload-file-info", style: { marginTop: 12 } },
-                React.createElement(Text, null,
-                    "File type: ", extensions === null || extensions === void 0 ? void 0 :
-                    extensions.join(', ')),
-                React.createElement(Text, null,
-                    "File size: under ",
-                    maxSize,
-                    "MB")),
-            showMediaURL && (React.createElement(Space, { size: 5, direction: "vertical", style: { marginTop: 12 } },
-                React.createElement(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, onAfterChange: value => handleSelectMedia({
-                        url: value,
-                    }) }))))),
-        React.createElement(Modal, { title: labelModalDelete, open: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true },
-            React.createElement("p", null,
-                "Are you sure you want to delete ", (_d = deleteMediaRef.current) === null || _d === void 0 ? void 0 :
-                _d.name,
-                "?")),
-        React.createElement(Modal, { wrapClassName: "icons-selection-modal", title: React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-                React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 20 }),
-                labelHeadingModal), centered: true, headerStyle: {
-                padding: '20px 20px 0',
-                border: 'none',
-            }, bodyStyle: {
-                padding: 20,
-                maxHeight: '90vh',
-                width: '100%',
-                overflow: 'auto',
-            }, width: 1155, footer: null, visible: isModalVisible, destroyOnClose: true, onCancel: handleCancel },
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: 20,
-                } },
-                React.createElement(InputSearch, { style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }),
-                React.createElement(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })),
-            React.createElement(Spin, { spinning: loading },
-                React.createElement(Dragger, Object.assign({}, props, { accept: extensions === null || extensions === void 0 ? void 0 : extensions.join(','), 
-                    // action={`${APP_CONFIG.API_URL}/file-upload/file?&_token=${userInfo?.token}&_user_id=${userInfo?.user_id}&_account_id=${userInfo?.account_id}`}
-                    // beforeUpload={handleBeforeUploadFile}
-                    // onChange={onChangeFileUpload}
-                    showUploadList: false, multiple: true, customRequest: customRequestUpload }),
-                    React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { height: 80 }) },
-                        React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 36, style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorIcon } }),
-                        React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { justifyContent: 'flex-start' }) },
-                            React.createElement(TextStyled, { className: "ant-upload-text" }, "Drag & Drop file here"),
-                            React.createElement("span", null, "or"),
-                            React.createElement(Button, { style: { backgroundColor: '#ffffff' } }, labelButtonSelect),
-                            React.createElement(Button, { onClick: handleRemoveMedia, style: {
-                                    display: 'none !important',
-                                    backgroundColor: '#ffffff',
-                                } },
-                                React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary } })))))),
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: '35px',
-                    paddingTop: 20,
-                    width: '100%',
-                } }, renderListMedia(listMedia)))));
+    };
+    return (_jsxs(_Fragment, { children: [isInputMode ? (_jsxs(WrapperInputMode, { width: width, children: [_jsx(Input, { required: required, status: errors && errors?.length > 0 ? 'error' : '', placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, style: { paddingRight: 40 }, onAfterChange: value => handleSelectMedia({
+                            url: value,
+                        }) }), _jsx(WrapperIcon, { onClick: showModal, children: mode === 'video' ? (_jsx(Icon, { type: "icon-ants-video", size: 24, style: {
+                                zIndex: 1,
+                                marginLeft: 2,
+                                color: THEME.token?.colorIcon,
+                            } })) : (_jsx(MediaIcon, {})) }), isError && _jsx(ErrorMessage, { children: errors && errors?.length > 0 ? errors[0] : '' })] })) : (_jsxs(UploadImageWrapper, { children: [title ? _jsx(Text, { style: { marginTop: 10 }, children: title }) : null, _jsxs("div", { className: `image-upload-content ${selectedMedia && selectedMedia.url ? 'uploaded' : ''}`, children: [renderSelectedMedia(), !selectedMedia || !selectedMedia.url ? (_jsx(Icon, { type: `icon-ants-${iconName}`, size: 36, style: {
+                                    zIndex: 1,
+                                    marginLeft: 25,
+                                    color: THEME.token?.colorIcon,
+                                } })) : null, _jsxs("div", { style: flexStyleCenter, children: [_jsxs(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' }, children: ["Browse ", mode === 'video' ? 'Video' : 'Image'] }), selectedMedia && selectedMedia.url ? (_jsx(Button, { onClick: handleRemoveMedia, style: { backgroundColor: '#ffffff' }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })) : null] })] }), _jsxs("div", { className: "upload-file-info", style: { marginTop: 12 }, children: [_jsxs(Text, { children: ["File type: ", extensions?.join(', ')] }), _jsxs(Text, { children: ["File size: under ", maxSize, "MB"] })] }), showMediaURL && (_jsx(Space, { size: 5, direction: "vertical", style: { marginTop: 12 }, children: _jsx(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, onAfterChange: value => handleSelectMedia({
+                                url: value,
+                            }) }) }))] })), _jsx(Modal, { title: labelModalDelete, open: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true, children: _jsxs("p", { children: ["Are you sure you want to delete ", deleteMediaRef.current?.name, "?"] }) }), _jsxs(Modal, { wrapClassName: "icons-selection-modal", title: _jsxs("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [_jsx(Icon, { type: `icon-ants-${iconName}`, size: 20 }), labelHeadingModal] }), centered: true, headerStyle: {
+                    padding: '20px 20px 0',
+                    border: 'none',
+                }, styles: {
+                    body: {
+                        padding: 20,
+                        maxHeight: '90vh',
+                        width: '100%',
+                        overflow: 'auto',
+                    },
+                }, width: 1155, footer: null, open: isModalOpen, destroyOnClose: true, onCancel: handleCancel, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            marginBottom: 20,
+                        }, children: [_jsx(InputSearch, { style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }), _jsx(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })] }), _jsx(Spin, { spinning: loading, children: _jsx(Dragger, { ...props, accept: extensions?.join(','), 
+                            // action={`${APP_CONFIG.API_URL}/file-upload/file?&_token=${userInfo?.token}&_user_id=${userInfo?.user_id}&_account_id=${userInfo?.account_id}`}
+                            // beforeUpload={handleBeforeUploadFile}
+                            // onChange={onChangeFileUpload}
+                            showUploadList: false, multiple: true, customRequest: customRequestUpload, children: _jsxs("div", { style: {
+                                    ...flexStyleCenter,
+                                    height: 80,
+                                }, children: [_jsx(Icon, { type: `icon-ants-${iconName}`, size: 36, style: { color: THEME.token?.colorIcon } }), _jsxs("div", { style: { ...flexStyleCenter, justifyContent: 'flex-start' }, children: [_jsx(TextStyled, { className: "ant-upload-text", children: "Drag & Drop file here" }), _jsx("span", { children: "or" }), _jsx(Button, { style: { backgroundColor: '#ffffff' }, children: labelButtonSelect }), _jsx(Button, { onClick: handleRemoveMedia, style: {
+                                                    display: 'none !important',
+                                                    backgroundColor: '#ffffff',
+                                                }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })] })] }) }) }), _jsx("div", { style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: '35px',
+                            paddingTop: 20,
+                            width: '100%',
+                        }, children: renderListMedia(listMedia) })] })] }));
 };
 UploadImage.defaultProps = {
     isOpen: false,