@antscorp/antsomi-ui 1.3.5-beta.98 → 1.3.5-common.2

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

@@ -1,10 +1,23 @@
+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 { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+import { useQueryClient } from '@tanstack/react-query';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, useValidateTemplateName, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+// Services
+import { templateListingServices } from '@antscorp/antsomi-ui/es/services/TemplateListing';
 // Hooks
-import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import { Form } from 'antd';
 import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
+import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *
@@ -19,41 +32,69 @@ import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui
  * @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 } = config;
+    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType, channel, } = config;
     const { categoryList: categoryListOptions, templateList: templateListOptions } = queriesOptions || {};
     const [searchName, setSearchName] = useState('');
     const [value, setValue] = useState(valueArg || {});
     const [errors, setErrors] = useState();
+    const [templateItems, setTemplateItems] = useState([]);
     const handleFormatCategories = (categories) => {
         const snakeCase = camelCaseToSnakeCase(categories || {});
         const camelCase = snakeCaseToCamelCase(categories || {});
         return { camelCase, snakeCase };
     };
-    const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value]);
+    const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value.categories]);
+    // const form = Form.useFormInstance<FormValue>();
     const [form] = Form.useForm();
+    // console.log('form instance in hook:: ', form.getFieldsValue());
     const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
         args: {
             auth: service,
             params: {
                 objectTypes: [objectType],
                 categoryCodes,
+                channel,
                 publicLevel,
                 getListType,
             },
         },
         options: categoryListOptions,
     });
+    // Memo
+    const templateListFilter = useDeepCompareMemo(() => {
+        const filter = [];
+        if (searchName) {
+            filter.push({
+                TEMPLATE_NAME: { contain: searchName },
+            });
+        }
+        if (channel) {
+            filter.push({
+                CHANNEL: {
+                    matches_any: [channel],
+                },
+            });
+        }
+        return filter;
+    }, [searchName, channel]);
     // Queries
     const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
         args: {
             auth: service,
-            params: Object.assign({ get_list_type: getListType, object_type: objectType, public_level: publicLevel, limit: limitListPerPage }, (searchName
-                ? { filter: JSON.stringify([{ TEMPLATE_NAME: { contain: searchName } }]) }
-                : {})),
+            params: {
+                get_list_type: getListType,
+                object_type: objectType,
+                public_level: publicLevel,
+                limit: limitListPerPage,
+                filter: JSON.stringify(templateListFilter),
+            },
         },
         options: templateListOptions,
     });
+    const { mutateAsync: validateTemplateName } = useValidateTemplateName({});
     // Variables
     const isLoadingTemplateList = isFetching || isFetchingNextPage;
     // Memo
@@ -65,17 +106,41 @@ export const useTemplateSave = (options) => {
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
-    const templateItems = useMemo(() => {
-        if (infiniteObjectTemplate) {
-            const { pages } = infiniteObjectTemplate;
-            return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
-                id,
-                label: name,
-                thumbnail,
-            })));
-        }
-        return [];
-    }, [infiniteObjectTemplate]);
+    // Effects
+    useDeepCompareEffect(() => {
+        // Self-executing asynchronous function to handle template items
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            // Check if infiniteObjectTemplate is available
+            if (infiniteObjectTemplate) {
+                const { pages } = infiniteObjectTemplate;
+                const selectedTemplateId = +(((_a = value.templateName) === null || _a === void 0 ? void 0 : _a.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 || '' }))));
+                // 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({
+                        queryKey: [QUERY_KEYS.GET_OBJECT_TEMPLATE_DETAIL, selectedTemplateId],
+                        queryFn: () => templateListingServices.objectTemplate.getDetail({
+                            auth: service,
+                            params: {
+                                object_type: objectType,
+                                public_level: publicLevel,
+                                template_id: selectedTemplateId,
+                            },
+                        }),
+                    });
+                    // 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 || '' }));
+                    }
+                }
+                // 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]);
     const onLoadMore = useCallback(() => {
         if (!isFetchingNextPage && hasNextPage) {
             fetchNextPage();
@@ -89,6 +154,23 @@ export const useTemplateSave = (options) => {
     const reset = () => {
         setValue(valueArg || {});
     };
+    /* Validate Template Name */
+    const validateName = useCallback((rule, value) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!value)
+            return;
+        const response = yield validateTemplateName({
+            auth: service,
+            params: {
+                object_type: objectType,
+                public_level: publicLevel,
+                template_name: value.trim(),
+            },
+        });
+        if (response.existed) {
+            return Promise.reject(new Error('This name has already existed'));
+        }
+        return Promise.resolve();
+    }), [objectType, publicLevel, service, validateTemplateName]);
     return {
         // MapKeys
         categoryItems,
@@ -106,6 +188,14 @@ export const useTemplateSave = (options) => {
         // Handle Search template name
         searchName,
         onSearchName: setSearchName,
+        // implement props for search name on scroll to bottom
+        // usage: templateNamesOptions={{...searchNameProps}}
+        searchNameProps: {
+            onSearch: setSearchName,
+            onScrollToBottom: onLoadMore,
+            isLoading: isLoadingTemplateList,
+            validateName,
+        },
         // Form handler
         form,
         errors,

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

@@ -3,10 +3,25 @@ var _a;
 import styled from 'styled-components';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 export const TemplateSaveAsStyled = styled(Flex) `
-  padding: 10px;
   /* max-width: 1177px; */
+  height: 100%;
+
+  position: relative;
+
+  /* &:has(canvas),
+  &:has(.image-upload-zone) { */
+  &:has(.is-editing) {
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: #fff;
+      opacity: 0.5;
+      z-index: 20;
+    }
+  }
 
   .save-options-container {
     padding: 15px 0;
@@ -14,31 +29,72 @@ export const TemplateSaveAsStyled = styled(Flex) `
     border-bottom: 1px dashed #e5e5e5;
   }
 
+  div:has(> .template-container) {
+    height: 100%;
+  }
+
   .template-container {
-    width: 698px;
-    /* max-height: 567px; */
-    max-height: 50vh;
+    flex: 1 0 680px;
+    /* flex: 1 1 60%; */
+    max-height: 60vh;
     padding-right: 28px;
     overflow-y: auto;
   }
+
+  .template-container:has(+ .share-access-container) {
+    flex-grow: 0;
+  }
+
+  .categories-container {
+    margin-bottom: 20px;
+  }
+
+  /* &:not(:has(.share-access-container)) .categories-container {
+    width: 60%;
+  } */
+
   .share-access-container {
-    flex: 1;
-    padding: 0 28px;
+    flex: 1 1 40%;
+    padding-left: 20px;
+    margin-left: 5px;
+    /* max-height: 60vh; */
+    overflow-y: auto;
     border-left: 1px solid #e5e5e5;
+
+    & > div {
+      max-width: 400px;
+    }
   }
 
+  /* .antsomi-form-item .antsomi-form-item-row */
   .field-container {
     gap: 10px;
   }
 
+  /* NOTE: Style for ant form */
+  .antsomi-form-item {
+    /* margin: 0; */
+  }
+  .antsomi-form-item-row {
+    gap: 10px;
+    .antsomi-form-item-label {
+      flex: 0 0 150px;
+    }
+    .antsomi-form-item-control-input {
+      width: 330px;
+    }
+  }
+
   .field-title {
     font-size: 12px;
-    width: 150px;
-    /* background-color: violet; */
+    flex: 0 0 150px;
     span {
       color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
     }
 
+    &--start {
+      padding-top: 6px;
+    }
     &--middle {
       display: flex;
       align-items: center;
@@ -49,25 +105,45 @@ export const TemplateSaveAsStyled = styled(Flex) `
     width: 330px;
   }
 
+  .field-input.antsomi-select {
+    margin-bottom: 24px;
+  }
+
   .category-container {
     flex: 1;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 510px;
+    max-width: 510px;
+    & > button {
+      height: 36px;
+      box-sizing: border-box;
+      padding: 0 10px;
+    }
+    /* display: grid;
+    grid-template-columns: repeat(2, minmax(100px, 250px)); */
   }
 
   .selected-category {
     /* width: 240px; */
     overflow: hidden;
-    height: 30px;
+    box-sizing: border-box;
+    width: 250px;
+    height: 36px;
     border: 1px solid #b8cfe6;
-    padding: 0 5px;
-    border-radius: 3px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
+    padding: 0 10px;
 
-    & > span.remove-btn {
-      font-size: 20px;
-      font-weight: bold;
+    & > .remove-btn {
       cursor: pointer;
-      user-select: none;
     }
   }
 `;
+// export const FormStyled = styled(Form)`
+//   position: relative;
+//   &::after {
+//     position: absolute;
+//     inset: 0;
+//     background-color: rgba(255, 255, 255, 0.5);
+//   }
+// `;

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

@@ -19,27 +19,36 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo } from 'react';
 import Icon from '@antscorp/icons';
 import { Modal } from 'antd';
+import React, { memo } from 'react';
 // Styled
 import { ThumbnailCardWrapper } from './styled';
 // Components
-import { Button, Flex, Typography } from '../../atoms';
+import { Button, Flex, Spin, Typography } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
+import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton = true, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "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, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "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' } }), 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);
             }) }));
@@ -49,9 +58,11 @@ export const ThumbnailCard = memo(props => {
         onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
     };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
-        React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeleton, 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();
@@ -66,7 +77,8 @@ export const ThumbnailCard = memo(props => {
                 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: "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/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 {
@@ -64,19 +69,17 @@ export const ThumbnailCardWrapper = styled.div `
     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%;
@@ -87,4 +90,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,5 @@
 import { ModalFuncProps, ButtonProps } from 'antd';
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
@@ -15,10 +15,13 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     height?: number;
     thumbnail?: string;
     removable?: boolean;
-    showSkeleton?: boolean;
+    showSkeleton?: boolean | ((thumbnailCard: Omit<ThumbnailCardProps, 'showSkeleton' | ''>) => boolean);
+    loading?: boolean;
     editBtnProps?: TThumbnailButton;
     previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
+    thumbnailFit?: React.CSSProperties['objectFit'];
+    thumbnailCacheValue?: string | number;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

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[];