@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -19,27 +19,224 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo } from 'react';
-import Icon from '@antscorp/icons';
+import React from 'react';
 import { Modal } from 'antd';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Styled
 import { ThumbnailCardWrapper } from './styled';
 // Components
-import { Button, Flex, Typography } from '../../atoms';
+import { Button, Flex, Typography, Spin, Tooltip, Icon } from '../../atoms';
 // Constants
-import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
-export const ThumbnailCard = memo(props => {
+import { THUMBNAIL_CARD_ACTION_OPTIONS, THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from './constants';
+import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// export const ThumbnailCard: React.FC<ThumbnailCardProps> = memo(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,
+//     ...restOfProps
+//   } = props;
+//   const { onOk, ...restOfRemoveTemplateModalProps } = removeModalProps || {};
+//   const {
+//     text: editText = 'Use template',
+//     onClick: onClickEdit,
+//     ...restOfEditBtnProps
+//   } = editBtnProps || {};
+//   const {
+//     text: previewText = 'Preview',
+//     onClick: onClickPreview,
+//     ...restOfPreviewBtnProps
+//   } = previewBtnProps || {};
+//   // Memo
+//   const showSkeletonMemo =
+//     // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
+//     typeof showSkeleton === 'undefined'
+//       ? checkShowSkeletonBaseUrl(thumbnail)
+//       : typeof showSkeleton === 'function'
+//       ? showSkeleton(props)
+//       : showSkeleton;
+//   // Handlers
+//   const handleRemoveThumbnail: React.MouseEventHandler<HTMLElement> = e => {
+//     e.stopPropagation();
+//     modal.confirm({
+//       title: 'Remove template',
+//       centered: true,
+//       icon: <Icon type="icon-ants-info" style={{ fontSize: 16, lineHeight: '25px' }} />,
+//       content: (
+//         <div>
+//           <p>Are you sure you want to remove the template?</p>
+//           <p>This action can not be undone.</p>
+//         </div>
+//       ),
+//       okText: 'Remove',
+//       cancelText: 'Cancel',
+//       closable: true,
+//       ...restOfRemoveTemplateModalProps,
+//       onOk: async () => {
+//         if (onOk) onOk(id);
+//       },
+//     });
+//   };
+//   const handleWrapperClick: React.MouseEventHandler<HTMLElement> = e => {
+//     e.stopPropagation();
+//     onClickWrapper?.(id);
+//   };
+//   // Handlers
+//   const renderActionButtons = () => {
+//     if (!actionButtons) return null;
+//     return Object.keys(actionButtons)
+//       .map(key => {
+//         const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
+//         const actionSettings = actionButtons[key as TActionButtonKey];
+//         if (actionSettings) {
+//           const { buttonProps, key, customRender } = actionSettings;
+//           const icon = actionSettings.icon || option.icon || '';
+//           const label = actionSettings.label || option.label || '';
+//           const ButtonComponent = (
+//             <Tooltip title={label}>
+//               <Button
+//                 key={key || option.key}
+//                 type="primary"
+//                 icon={
+//                   <Icon type={icon || option.icon} style={{ fontSize: 24, color: '#FFFFFF' }} />
+//                 }
+//                 {...buttonProps}
+//               />
+//             </Tooltip>
+//           );
+//           /**
+//            * Handle custom render for action button
+//            * If customRender is a function, return the function callback the ButtonComponent
+//            * If not, return ButtonComponent
+//            */
+//           return typeof customRender === 'function'
+//             ? customRender(ButtonComponent)
+//             : ButtonComponent;
+//         }
+//         return null;
+//       })
+//       .filter(Boolean);
+//   };
+//   return (
+//     <Flex gap={10} vertical {...restOfProps} style={{ width, ...restOfProps.style }}>
+//       <ThumbnailCardWrapper
+//         $showSkeleton={showSkeletonMemo}
+//         style={{ height, cursor: actionAvailable ? 'default' : 'pointer' }}
+//         onClick={handleWrapperClick}
+//       >
+//         <div className="screen">
+//           {thumbnail && (
+//             <img
+//               src={getUrlNoCache(thumbnail, thumbnailCacheValue)}
+//               alt=""
+//               style={{ objectFit: thumbnailFit }}
+//               onError={e => {
+//                 e.currentTarget.style.display = 'none';
+//               }}
+//             />
+//           )}
+//         </div>
+//         {actionAvailable && !loading && (
+//           <>
+//             <Flex className="center-action" align="center" gap={10} vertical>
+//               <Button
+//                 type="primary"
+//                 className="animate__animated animate__fadeIn"
+//                 {...restOfEditBtnProps}
+//                 onClick={e => {
+//                   e.stopPropagation();
+//                   onClickEdit?.(id);
+//                 }}
+//               >
+//                 <Typography.Text
+//                   ellipsis={{ tooltip: editText }}
+//                   style={{ maxWidth: '100%', color: 'inherit' }}
+//                 >
+//                   {editText}
+//                 </Typography.Text>
+//               </Button>
+//               <Button
+//                 className="animate__animated animate__fadeIn"
+//                 onClick={e => {
+//                   e.stopPropagation();
+//                   onClickPreview?.(id);
+//                 }}
+//                 {...restOfPreviewBtnProps}
+//               >
+//                 <Typography.Text
+//                   ellipsis={{ tooltip: previewText }}
+//                   style={{ maxWidth: '100%', color: 'inherit' }}
+//                 >
+//                   {previewText}
+//                 </Typography.Text>
+//               </Button>
+//             </Flex>
+//             <div className="top-right-corner-action animate__animated animate__fadeIn">
+//               {renderActionButtons()}
+//               {removable && (
+//                 <Tooltip title={i18nInstance.t(translations.remove).toString()}>
+//                   <Button
+//                     type="primary"
+//                     icon={
+//                       <Icon
+//                         type="icon-ants-trash-outline"
+//                         style={{ fontSize: 24, color: '#FFFFFF' }}
+//                       />
+//                     }
+//                     onClick={handleRemoveThumbnail}
+//                   />
+//                 </Tooltip>
+//               )}
+//             </div>
+//             <div className="backdrop" />
+//             <div>{contextHolder}</div>
+//           </>
+//         )}
+//         {loading && <Spin className="thumbnail__loading" spinning />}
+//       </ThumbnailCardWrapper>
+//       {!!name && (
+//         <Typography.Text ellipsis={{ tooltip: name }} style={{ maxWidth: '100%' }}>
+//           {name}
+//         </Typography.Text>
+//       )}
+//     </Flex>
+//   );
+// });
+export const ThumbnailCard = (props) => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    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 = 'Edit thumbnail', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
+    const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
     const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
+    // Memo
+    const showSkeletonMemo = 
+    // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
+    typeof showSkeleton === 'undefined'
+        ? checkShowSkeletonBaseUrl(thumbnail)
+        : typeof showSkeleton === 'function'
+            ? showSkeleton(props)
+            : showSkeleton;
     // 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' } }), content: (React.createElement("div", null,
+        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 cant not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                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* () {
                 if (onOk)
                     onOk(id);
             }) }));
@@ -48,10 +245,46 @@ export const ThumbnailCard = memo(props => {
         e.stopPropagation();
         onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
     };
+    // Handlers
+    const renderActionButtons = () => {
+        if (!actionButtons)
+            return null;
+        return Object.keys(actionButtons)
+            .map(key => {
+            const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
+            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) {
+                                buttonProps.onClick(e);
+                            }
+                            if (onClick) {
+                                onClick(id);
+                            }
+                        } }))));
+                /**
+                 * Handle custom render for action button
+                 * If customRender is a function, return the function callback the ButtonComponent
+                 * If not, return ButtonComponent
+                 */
+                return typeof customRender === 'function'
+                    ? customRender(ButtonComponent)
+                    : ButtonComponent;
+            }
+            return null;
+        })
+            .filter(Boolean);
+    };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
-        React.createElement(ThumbnailCardWrapper, { style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
-            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: thumbnail, alt: "" })),
-            actionAvailable && (React.createElement(React.Fragment, null,
+        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 },
                     React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
                             e.stopPropagation();
@@ -63,10 +296,13 @@ export const ThumbnailCard = memo(props => {
                             onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
                         } }, restOfPreviewBtnProps),
                         React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText))),
-                removable && (React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
-                    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: "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)))),
+                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))));
-});
+};
 ThumbnailCard.displayName = 'ThumbnailCard';

package/es/components/molecules/ThumbnailCard/constants.d.ts

@@ -1,3 +1,8 @@
 export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
 export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
+export declare const THUMBNAIL_CARD_ACTION_KEYS: {
+    readonly EDIT: "EDIT";
+    readonly DUPLICATE: "DUPLICATE";
+};
+export declare const THUMBNAIL_CARD_ACTION_OPTIONS: Record<string, any>;

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

@@ -1,3 +1,25 @@
+// Libraries
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Constants
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 export const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
 export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
+/* CARD ACTION KEYS */
+export const THUMBNAIL_CARD_ACTION_KEYS = {
+    EDIT: 'EDIT',
+    DUPLICATE: 'DUPLICATE',
+};
+const { EDIT, DUPLICATE } = THUMBNAIL_CARD_ACTION_KEYS;
+export const THUMBNAIL_CARD_ACTION_OPTIONS = {
+    [EDIT]: {
+        key: EDIT,
+        label: i18nInstance.t(translations.edit.title).toString(),
+        icon: 'icon-ants-pencil',
+    },
+    [DUPLICATE]: {
+        key: DUPLICATE,
+        label: i18nInstance.t(translations.duplicate.title).toString(),
+        icon: 'icon-ants-duplicate',
+    },
+};

package/es/components/molecules/ThumbnailCard/styled.d.ts

@@ -1 +1,5 @@
-export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+type ThumbnailCardWrapperProps = {
+    $showSkeleton?: boolean;
+};
+export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, ThumbnailCardWrapperProps, never>;
+export {};

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

@@ -2,14 +2,19 @@
 import styled from 'styled-components';
 // Images
 import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
-const THUMBNAIL_CARD_RADIUS = 5;
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailCardWrapper = styled.div `
-  background-color: #e5e5e5;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
   padding: 10px;
-  border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : 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};
 
   :hover {
     .center-action {
@@ -22,18 +27,19 @@ export const ThumbnailCardWrapper = styled.div `
     }
 
     .top-right-corner-action {
-      display: block;
+      display: flex;
     }
 
     .backdrop {
-      opacity: 0.6 !important;
+      opacity: 0.5 !important;
     }
   }
 
   .screen {
     width: 100%;
     height: 100%;
-    background: center / cover no-repeat url(${skeletonBackground});
+
+    ${p => p.$showSkeleton ? `background: center / cover no-repeat url(${skeletonBackground});` : ''}
 
     img {
       width: 100%;
@@ -60,22 +66,22 @@ export const ThumbnailCardWrapper = styled.div `
     top: 16px;
     right: 16px;
     display: none;
+    align-items: center;
+    gap: 12px;
     z-index: 12;
 
     button {
-      background-color: black;
-      opacity: 0.4;
+      background: #00000040;
 
       :hover {
         background: none !important;
         background-color: black !important;
-        opacity: 0.5;
       }
     }
   }
 
   .backdrop {
-    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -86,4 +92,8 @@ export const ThumbnailCardWrapper = styled.div `
     top: 0;
     left: 0;
   }
+
+  .thumbnail__loading {
+    position: absolute;
+  }
 `;

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -1,5 +1,6 @@
 import { ModalFuncProps, ButtonProps } from 'antd';
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { THUMBNAIL_CARD_ACTION_KEYS } from './constants';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
@@ -8,16 +9,30 @@ export type TThumbnailButton = Omit<ButtonProps, 'onClick'> & {
     text?: string;
     onClick?: (id: TThumbnailCardId) => void;
 };
-export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+export type TThumbnailActionButtons<TActionKey extends string[] = []> = Partial<Record<TActionButtonKey<TActionKey>, {
+    buttonProps?: ButtonProps;
+    key?: string;
+    label?: string;
+    icon?: string;
+    customRender?: (node: ReactNode) => ReactNode;
+    onClick?: (id: TThumbnailCardId) => void;
+}>>;
+export interface ThumbnailCardProps<TActionKey extends string[] = []> extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
     id: TThumbnailCardId;
     name?: string;
     width?: number;
     height?: number;
     thumbnail?: string;
     removable?: boolean;
+    showSkeleton?: boolean | ((thumbnailCard: Omit<ThumbnailCardProps, 'showSkeleton' | ''>) => boolean);
+    loading?: boolean;
     editBtnProps?: TThumbnailButton;
     previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
+    thumbnailFit?: React.CSSProperties['objectFit'];
+    actionButtons?: TThumbnailActionButtons<TActionKey>;
+    thumbnailCacheValue?: string | number;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }
+export type TActionButtonKey<T extends string[] = []> = (typeof THUMBNAIL_CARD_ACTION_KEYS)[keyof typeof THUMBNAIL_CARD_ACTION_KEYS] | T[number];

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

@@ -0,0 +1,2 @@
+export { Tree } from 'antd';
+export type { TreeProps, TreeDataNode } from 'antd';

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

@@ -0,0 +1 @@
+export { Tree } from 'antd';

package/es/components/molecules/Tree/index.d.ts

@@ -0,0 +1 @@
+export * from './Tree';

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

@@ -0,0 +1 @@
+export * from './Tree';

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

@@ -29,6 +29,7 @@ interface UploadImageProps extends AntdUploadProps {
     };
     required?: boolean;
     focused?: boolean;
+    useSync?: boolean;
 }
 interface UploadMediaObject {
     url: string;

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

@@ -31,6 +31,7 @@ import { handleError, safeParse } from '@antscorp/antsomi-ui/es/utils';
 import { getMediaTypeByMode, getReplacementExtension } from './utils';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { useGetListingSavedMedia } from '@antscorp/antsomi-ui/es/queries/Media';
 const flexStyleCenter = {
     display: 'flex',
     gap: '15px',
@@ -47,11 +48,12 @@ const SORT_OPTIONS = {
         label: 'Sort by Size',
     },
 };
+const POST_TRIGGER_CHANGE_SAVED_MEDIA = 'upload-image-refresh-saved-media';
 const LazyThumbnail = lazy(() => import('./MediaThumb'));
 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 { 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, useSync, } = props;
     const { Dragger } = Upload;
     const [storeSavedMedia, setStoreSavedMedia] = useState([]);
     const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
@@ -69,6 +71,21 @@ export const UploadImage = props => {
         setListMedia(storeSavedMedia || []);
         setLoading(false);
     }, [storeSavedMedia]);
+    useEffect(() => {
+        const handleMessage = e => {
+            if (e && e.data && e.data.type === POST_TRIGGER_CHANGE_SAVED_MEDIA && e.data.triggerRefresh) {
+                setTriggerRefresh(+e.data.triggerRefresh);
+            }
+        };
+        if (useSync) {
+            window.addEventListener('message', handleMessage);
+        }
+        return () => {
+            if (useSync) {
+                window.removeEventListener('message', handleMessage);
+            }
+        };
+    }, []);
     // When selectedMediaProp onChange
     useEffect(() => {
         setSelectedMedia(selectedMediaProp || { url: '' });
@@ -112,8 +129,24 @@ export const UploadImage = props => {
             setLoading(false);
         }
     });
+    const { data: savedMedias, isLoading } = useGetListingSavedMedia({
+        domain: domainMedia,
+        slug,
+        params: Object.assign(Object.assign({}, paramConfigs), { type: getMediaTypeByMode(mode) }),
+        refresh: triggerRefresh,
+    });
     useEffect(() => {
-        handleGetStoreSavedMedia(domainMedia, slug, paramConfigs);
+        if (savedMedias) {
+            setStoreSavedMedia(savedMedias || []);
+        }
+    }, [savedMedias]);
+    useEffect(() => {
+        if (useSync) {
+            window.postMessage({
+                type: POST_TRIGGER_CHANGE_SAVED_MEDIA,
+                triggerRefresh,
+            });
+        }
     }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
@@ -177,7 +210,7 @@ export const UploadImage = props => {
         }
         setSelectedMedia({ url: '' });
     };
-    const handleRemoveUploadedMedia = (media, isConfirm = true) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleRemoveUploadedMedia = (media_1, ...args_1) => __awaiter(void 0, [media_1, ...args_1], void 0, function* (media, isConfirm = true) {
         if (isConfirm) {
             deleteMediaRef.current = media;
             setOpenConfirmDelete(true);
@@ -336,7 +369,7 @@ export const UploadImage = props => {
                 } },
                 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(Spin, { spinning: loading || isLoading },
                 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}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { VirtualizedMenuProps } from './types';
+export declare const VirtualizedMenu: (props: VirtualizedMenuProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/es/components/molecules/VirtualizedMenu/VirtualizedMenu.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MODE } from './config';
+import { MenuInline } from './components';
+export const VirtualizedMenu = (props) => {
+    const { mode = MODE.Inline } = props;
+    let content = null;
+    switch (mode) {
+        case MODE.Inline: {
+            content = React.createElement(MenuInline, Object.assign({}, props));
+            break;
+        }
+        default:
+            break;
+    }
+    return content;
+};

package/es/components/molecules/VirtualizedMenu/__mocks__/index.d.ts

@@ -0,0 +1,2 @@
+import { ItemType } from '../types';
+export declare const LIST_ITEMS: ItemType[];