@antscorp/antsomi-ui 2.0.57 → 2.0.58

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

@@ -1,33 +1,133 @@
 import React from 'react';
 import { UploadProps as AntdUploadProps } from 'antd/lib/upload';
 export type MediaMode = 'image' | 'video';
-interface UploadImageProps extends AntdUploadProps {
+/**
+ * Props for the UploadImage component.
+ */
+export interface UploadImageProps extends AntdUploadProps {
+    /**
+     * Heading text for the image upload modal.
+     * @default "Image Selection"
+     */
     labelHeadingModal?: string;
+    /**
+     * Label for the button used to select an image.
+     * @default "Select Image from computer"
+     */
     labelButtonSelect?: string;
+    /**
+     * Label for the modal confirming image deletion.
+     * @default "Delete Image"
+     */
     labelModalDelete?: string;
+    /**
+     * Placeholder text for the search input inside the modal.
+     * @default "Search image..."
+     */
     searchPlaceholder?: string;
+    /**
+     * Callback triggered when an image is removed.
+     */
     onRemoveImage?: Function;
+    /**
+     * Callback triggered when an image is selected or changed.
+     */
     onChangeImage?: Function;
+    /**
+     * The currently selected image object.
+     */
     selectedImage?: UploadMediaObject;
+    /**
+     * Controls the visibility of the image upload modal.
+     * @default false
+     */
     isOpen?: boolean;
+    /**
+     * Determines if the component should operate in input mode.
+     * @default true
+     */
     isInputMode?: boolean;
+    /**
+     * Name of the icon to be displayed.
+     * @default "image-3"
+     */
     iconName?: string;
+    /**
+     * Mode in which the media should be handled.
+     * @default "image"
+     */
     mode?: MediaMode;
-    width?: any;
+    /**
+     * Width of the upload component.
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * List of validation errors related to the upload.
+     * @default []
+     */
     errors?: Array<any>;
+    /**
+     * Allowed file extensions for the upload.
+     * @default [".jpg", ".png", ".jfif", ".jpeg", ".gif", ".webp"]
+     */
     extensions?: string[];
+    /**
+     * Maximum file size allowed for upload (in MB).
+     * @default 10
+     */
     maxSize?: number;
+    /**
+     * Title text for the upload section.
+     */
     title?: string;
+    /**
+     * Whether to display the image URL after upload.
+     * @default true
+     */
     showImageURL?: boolean;
+    /**
+     * Placeholder text for the upload input field.
+     * @default "Enter image URL"
+     */
     placeholder?: string;
+    /**
+     * Domain-specific media folder or endpoint.
+     * @default "https://sandbox-media-template.antsomi.com/cdp"
+     */
     domainMedia: string;
+    /**
+     * Unique slug identifier for media categorization.
+     * @default "api/v1"
+     */
     slug: string;
+    /**
+     * Configuration parameters for API requests.
+     */
     paramConfigs?: {
+        /**
+         * Authentication token for media uploads.
+         * @default ""
+         */
         token?: string;
+        /**
+         * User identifier for media ownership.
+         * @default ""
+         */
         userId?: string;
+        /**
+         * Account identifier for media association.
+         * @default ""
+         */
         accountId: string;
     };
+    /**
+     * Whether the image upload is required.
+     */
     required?: boolean;
+    /**
+     * Indicates if the input is currently focused.
+     */
     focused?: boolean;
 }
 interface UploadMediaObject {

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

@@ -3,15 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import Upload from 'antd/lib/upload';
+import { useQueryClient } from '@tanstack/react-query';
+import { cloneDeep, flattenDeep } from 'lodash';
+import { useInView } from 'react-intersection-observer';
 // Hooks
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+import { useStoreSavedMedia } from '@antscorp/antsomi-ui/es/queries';
 // Assets
 import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
 import MediaIcon from './MediaIcon';
 // Service
-import { uploadFile, createSavedMedia, deleteSavedMedia, getListingSavedMedia, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/UploadFile';
+import { uploadFile, createSavedMedia, deleteSavedMedia, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/UploadFile';
 // Atoms
 import { Button, Icon, Text, message, Spin, Input, Space, } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
@@ -19,10 +23,10 @@ import { Modal, InputSearch, Select } from '@antscorp/antsomi-ui/es/components/m
 // Styled
 import { Boxed, ErrorMessage, Image, Overlay, Paragraph, TextStyled, UploadImageWrapper, WrapperBtn, WrapperIcon, WrapperInputMode, WrapperListImages, } from './styled';
 // Utils
-import { handleError, safeParse } from '@antscorp/antsomi-ui/es/utils';
+import { safeParse } from '@antscorp/antsomi-ui/es/utils';
 import { getMediaTypeByMode, getReplacementExtension } from './utils';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { QUERY_KEYS, THEME } from '@antscorp/antsomi-ui/es/constants';
 const flexStyleCenter = {
     display: 'flex',
     gap: '15px',
@@ -39,75 +43,45 @@ const SORT_OPTIONS = {
         label: 'Sort by Size',
     },
 };
-const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = 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, } = props;
     const { Dragger } = Upload;
-    const [storeSavedMedia, setStoreSavedMedia] = useState([]);
     const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
     const [isModalOpen, setIsModalOpen] = useState(isOpen);
-    const [listMedia, setListMedia] = useState(storeSavedMedia || []);
+    const [textSearchDebounce, textSearch, setTextSearch] = useDebounce('', 350);
     const [sortOption, setSortOption] = useState(SORT_OPTIONS.BY_UPLOAD_DATE.value);
     const [loading, setLoading] = useState(false);
     const [isOpenConfirmDelete, setOpenConfirmDelete] = useState(false);
-    const [triggerRefresh, setTriggerRefresh] = useState(1);
     const uploadFilesRef = useRef([]);
     const uploadFilesTimeoutRef = useRef();
     const deleteMediaRef = useRef();
     const isError = safeParse(errors, []).length > 0;
-    useDeepCompareEffect(() => {
-        setListMedia(storeSavedMedia || []);
-        setLoading(false);
-    }, [storeSavedMedia]);
+    const queryClient = useQueryClient();
+    const paramsMemo = useMemo(() => ({
+        ...paramConfigs,
+        type: getMediaTypeByMode(mode),
+    }), [paramConfigs, mode]);
+    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading: isLoadingStore, refetch, } = useStoreSavedMedia(domainMedia, slug, paramsMemo);
+    const flattenedMedia = useMemo(() => {
+        const flattened = cloneDeep(flattenDeep(data?.pages));
+        // Filter media based on search text
+        const filteredMedia = textSearchDebounce
+            ? flattened.filter(media => media.name?.toLowerCase().includes(textSearchDebounce.toLowerCase()))
+            : flattened;
+        // Sort media based on the selected sort option
+        if (sortOption === SORT_OPTIONS.BY_SIZE.value) {
+            return filteredMedia.sort((media1, media2) => media1.size - media2.size);
+        }
+        return filteredMedia.sort((media1, media2) => media1.createdAt && media2.createdAt
+            ? media1.createdAt.isAfter(media2.createdAt)
+                ? -1
+                : 1
+            : 0);
+    }, [data?.pages, sortOption, textSearchDebounce]);
     // When selectedMediaProp onChange
     useEffect(() => {
         setSelectedMedia(selectedMediaProp || { url: '' });
     }, [selectedMediaProp]);
-    useEffect(() => {
-        if (sortOption === SORT_OPTIONS.BY_SIZE.value) {
-            setListMedia(listMedia ? [...listMedia].sort((media1, media2) => media1.size - media2.size) : []);
-        }
-        else {
-            setListMedia(listMedia
-                ? [...listMedia].sort((media1, media2) => media1.createdAt && media2.createdAt
-                    ? media1.createdAt.isAfter(media2.createdAt)
-                        ? -1
-                        : 1
-                    : 0)
-                : []);
-        }
-    }, [sortOption]);
-    const handleGetStoreSavedMedia = async (domain, slug, paramConfigs) => {
-        try {
-            setLoading(true);
-            const type = getMediaTypeByMode(mode);
-            const params = {
-                ...paramConfigs,
-                type,
-            };
-            const result = await getListingSavedMedia(domain, slug, params);
-            if (result) {
-                setStoreSavedMedia(result || []);
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleGetStoreSavedMedia',
-                args: {
-                    error,
-                },
-            });
-            // eslint-disable-next-line no-console
-            console.log('error :>', error);
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    useEffect(() => {
-        handleGetStoreSavedMedia(domainMedia, slug, paramConfigs);
-    }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
         setIsModalOpen(true);
@@ -125,6 +99,14 @@ export const UploadImage = props => {
     const onChangeSort = (option) => {
         setSortOption(option);
     };
+    const { ref } = useInView({
+        triggerOnce: false,
+        onChange: inView => {
+            if (inView && hasNextPage && !isFetchingNextPage) {
+                fetchNextPage();
+            }
+        },
+    });
     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',
@@ -134,16 +116,7 @@ export const UploadImage = props => {
                 }, 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()) {
-            setListMedia(storeSavedMedia
-                ? storeSavedMedia
-                    .filter(item => item.name.toLocaleLowerCase().includes(value.trim().toLocaleLowerCase()))
-                    .slice(0, 15)
-                : []);
-        }
-        else {
-            setListMedia(storeSavedMedia);
-        }
+        setTextSearch(value.trim());
     };
     const handleRemoveMedia = () => {
         if (onRemoveImage) {
@@ -161,7 +134,9 @@ export const UploadImage = props => {
             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) {
-                    setTriggerRefresh(triggerRefresh + 1);
+                    queryClient.invalidateQueries([QUERY_KEYS.GET_LIST_SAVED_MEDIA, domainMedia, slug, paramsMemo], {
+                        exact: false,
+                    });
                 }
             }
             setOpenConfirmDelete(false);
@@ -235,7 +210,7 @@ export const UploadImage = props => {
                     })));
                     await Promise.all(arrPromise);
                     setLoading(false);
-                    setTriggerRefresh(triggerRefresh + 1);
+                    refetch({ refetchPage: (_page, index) => index === 0 });
                 }
                 else {
                     setLoading(false);
@@ -279,7 +254,7 @@ export const UploadImage = props => {
                             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(','), 
+                        }, children: [_jsx(InputSearch, { value: textSearch, 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 || isFetchingNextPage || isLoadingStore, 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}
@@ -289,13 +264,13 @@ export const UploadImage = props => {
                                 }, 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: {
+                                                }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })] })] }) }) }), _jsxs("div", { style: {
                             display: 'flex',
                             flexWrap: 'wrap',
                             gap: '35px',
                             paddingTop: 20,
                             width: '100%',
-                        }, children: renderListMedia(listMedia) })] })] }));
+                        }, children: [renderListMedia(flattenedMedia), _jsx("div", { ref: ref })] })] })] }));
 };
 UploadImage.defaultProps = {
     isOpen: false,

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 export declare const WrapperListImages: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Boxed: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -6,7 +7,7 @@ export declare const WrapperBtn: import("styled-components").StyledComponent<"di
 export declare const Paragraph: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperInputMode: import("styled-components").StyledComponent<"div", any, {
-    width?: string | undefined;
+    width?: CSSProperties['width'];
 }, never>;
 export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/constants/queries.d.ts

@@ -18,6 +18,7 @@ export declare const QUERY_KEYS: {
     GET_OBJECT_TEMPLATE_DETAIL: string;
     GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: string;
     GET_LIST_FALLBACK_BO: string;
+    GET_LIST_SAVED_MEDIA: string;
     GET_DASHBOARD: string;
     GET_LIST_MENU: string;
     GET_LIST_MENU_PERMISSION: string;

package/es/constants/queries.js

@@ -27,6 +27,7 @@ export const QUERY_KEYS = {
     GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: 'GET_SAVE_AS_GALLERY_PERMISSION_EMAILS',
     // THIRD PARTY
     GET_LIST_FALLBACK_BO: 'GET_LIST_FALLBACK_BO',
+    GET_LIST_SAVED_MEDIA: 'GET_LIST_SAVED_MEDIA',
     // Left menu
     GET_DASHBOARD: 'GET_DASHBOARD',
     GET_LIST_MENU: 'GET_LIST_MENU',

package/es/queries/ThirdParty/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useGetEventTrackingAttributes';
 export * from './useGetListFallbackBO';
+export * from './useStoreSavedMedia';

package/es/queries/ThirdParty/index.js

@@ -1,2 +1,3 @@
 export * from './useGetEventTrackingAttributes';
 export * from './useGetListFallbackBO';
+export * from './useStoreSavedMedia';

package/es/queries/ThirdParty/useStoreSavedMedia.d.ts

@@ -0,0 +1 @@
+export declare const useStoreSavedMedia: (domain: string, slug: string, infos: any) => import("@tanstack/react-query").UseInfiniteQueryResult<import("../../models/SavedMedia").SavedMedia[], unknown>;

package/es/queries/ThirdParty/useStoreSavedMedia.js

@@ -0,0 +1,12 @@
+// Libraries
+import { useInfiniteQuery } from '@tanstack/react-query';
+// Services
+import { getListingSavedMedia } from '../../services/MediaTemplateDesign/UploadFile';
+// Constants
+import { QUERY_KEYS } from '../../constants';
+// Hook to fetch data with infinite scrolling
+export const useStoreSavedMedia = (domain, slug, infos) => useInfiniteQuery({
+    queryKey: [QUERY_KEYS.GET_LIST_SAVED_MEDIA, domain, slug, infos],
+    queryFn: ({ pageParam }) => getListingSavedMedia(domain, slug, infos, pageParam),
+    getNextPageParam: (lastPage, pages) => (lastPage.length >= 10 ? pages.length + 1 : undefined),
+});

package/es/services/MediaTemplateDesign/UploadFile/index.d.ts

@@ -1,6 +1,6 @@
 import { SavedMedia } from '@antscorp/antsomi-ui/es/models/SavedMedia';
 import { Upload } from '@antscorp/antsomi-ui/es/models/Upload';
-export declare const getListingSavedMedia: (domainUrl: string, slug: string, infos: any) => Promise<SavedMedia[]>;
+export declare const getListingSavedMedia: (domainUrl: string, slug: string, infos: any, page?: number) => Promise<SavedMedia[]>;
 export declare const createSavedMedia: (domainUrl: string, slug: string, infos: any, data: any) => Promise<any>;
 export declare const deleteSavedMedia: (domainUrl: string, slug: string, infos: any, id: string | number) => Promise<any>;
 export declare const uploadFile: (domainUrl: string, slug: string, infos: any, files: any) => Promise<Upload[]>;

package/es/services/MediaTemplateDesign/UploadFile/index.js

@@ -3,11 +3,11 @@
 import { SavedMedia } from '@antscorp/antsomi-ui/es/models/SavedMedia';
 import { Upload } from '@antscorp/antsomi-ui/es/models/Upload';
 import { services } from '@antscorp/antsomi-ui/es/services';
-export const getListingSavedMedia = async (domainUrl, slug, infos) => {
+export const getListingSavedMedia = async (domainUrl, slug, infos, page = 1) => {
     try {
         const { type = '', ...restInfos } = infos || {};
         const { data } = await services.mediaTemplateDesign.getList({
-            API_HOST: `${domainUrl}/${slug}/saved-media/index?type=${type}`,
+            API_HOST: `${domainUrl}/${slug}/saved-media/index?type=${type}&page=${page}&limit=10`,
         }, restInfos);
         let savedImages = data?.data || [];
         savedImages = savedImages.map((savedImage) => new SavedMedia(savedImage));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.57",
+  "version": "2.0.58",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",