@antscorp/antsomi-ui 1.3.6-beta.4 → 1.3.6-beta.40

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

@@ -1,35 +1,134 @@
 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;
-    useSync?: boolean;
 }
 interface UploadMediaObject {
     url: string;

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 { lazy, 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,11 +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 { useGetListingSavedMedia } from '@antscorp/antsomi-ui/es/queries/Media';
+import { QUERY_KEYS, THEME } from '@antscorp/antsomi-ui/es/constants';
 const flexStyleCenter = {
     display: 'flex',
     gap: '15px',
@@ -40,111 +43,45 @@ 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 => {
-    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 { 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]);
-    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);
+    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 () => {
-            if (useSync) {
-                window.removeEventListener('message', handleMessage);
-            }
-        };
-    }, []);
+        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);
-        }
-    };
-    const { data: savedMedias, isLoading } = useGetListingSavedMedia({
-        domain: domainMedia,
-        slug,
-        params: {
-            ...paramConfigs,
-            type: getMediaTypeByMode(mode),
-        },
-        refresh: triggerRefresh,
-    });
-    useEffect(() => {
-        if (savedMedias) {
-            setStoreSavedMedia(savedMedias || []);
-        }
-    }, [savedMedias]);
-    useEffect(() => {
-        if (useSync) {
-            window.postMessage({
-                type: POST_TRIGGER_CHANGE_SAVED_MEDIA,
-                triggerRefresh,
-            });
-        }
-    }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
         setIsModalOpen(true);
@@ -162,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',
@@ -171,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) {
@@ -198,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);
@@ -272,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);
@@ -316,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 || isLoading, 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}
@@ -326,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/components/molecules/VirtualizedMenu/types.d.ts

@@ -8,6 +8,7 @@ export type ItemType = {
     scrollingLabel?: string;
     label?: ReactNode;
     children?: ItemType[];
+    errorMessage?: string | undefined;
     disabled?: boolean;
 };
 export type SerializedItemType = ItemType & {

package/es/components/organism/TicketEditorV2/Content.d.ts

@@ -0,0 +1,27 @@
+declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, dataSelectInput, setDataSelectInput, }: {
+    apiKey: any;
+    domain: any;
+    portalId: any;
+    token: any;
+    action: any;
+    ticketId: any;
+    listUsers: any;
+    domainTicket: any;
+    config: any;
+    ticketDetails: any;
+    listComment: any;
+    userId: any;
+    fetchgetTicketComments: any;
+    isLoadingComment: any;
+    isLoadingDetails: any;
+    isLoadingDataSouce: any;
+    accountManage: any;
+    timeZone: any;
+    isLoadingSelectedAccount: any;
+    accountEdit: any;
+    initOwnerId: any;
+    isAllAccount: any;
+    dataSelectInput: any;
+    setDataSelectInput: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Content;