@antscorp/antsomi-ui 1.3.3-beta.93 → 1.3.3-beta.95

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

@@ -1 +0,0 @@
-export { TreeSelect } from './TreeSelect';

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

@@ -1 +0,0 @@
-export { TreeSelect } from './TreeSelect';

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

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

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

@@ -1,8 +0,0 @@
-import React from 'react';
-const MediaIcon = _props => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", 
-    // eslint-disable-next-line react/no-unknown-property
-    // xmlns:svg="http://www.w3.org/2000/svg"
-    className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: 24, height: 24, fill: "rgba(0, 0, 0, 0.54)", "data-testid": "PermMediaIcon", version: "1.1", id: "svg4" },
-    React.createElement("defs", { id: "defs8" }),
-    React.createElement("path", { d: "M2 6H0v5h.01L0 20c0 1.1.9 2 2 2h18v-2H2V6zm20-2h-8l-2-2H6c-1.1 0-1.99.9-1.99 2L4 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 15l4.5-6 3.5 4.51 2.5-3.01L21 15H7z", id: "path2" })));
-export default MediaIcon;

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { MediaMode } from '.';
-export interface MediaThumbProps {
-    mode: MediaMode;
-    media: any;
-}
-declare const _default: React.NamedExoticComponent<MediaThumbProps>;
-export default _default;

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

@@ -1,15 +0,0 @@
-// Libraries
-import React, { lazy, Suspense, memo } from 'react';
-// Assets
-import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
-// Styled
-import { Image } from './styled';
-const LazyVideoThumbnail = lazy(() => import('./VideoThumbnail'));
-const MediaThumb = props => {
-    const { mode, media } = props;
-    if (mode === 'image')
-        return React.createElement(Image, { src: media.url, alt: "img" });
-    return (React.createElement(Suspense, { fallback: React.createElement(Image, { src: PlaceholderImage, alt: "img" }) },
-        React.createElement(LazyVideoThumbnail, { mode: mode, media: media })));
-};
-export default memo(MediaThumb);

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { MediaThumbProps } from './MediaThumb';
-declare const VideoThumbnail: React.FC<MediaThumbProps>;
-export default VideoThumbnail;

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

@@ -1,43 +0,0 @@
-/* eslint-disable jsx-a11y/media-has-caption */
-// Libraries
-import React, { useState, useEffect, useRef } from 'react';
-// Assets
-import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
-// Styled
-import { Image } from './styled';
-const VideoThumbnail = props => {
-    const { mode, media } = props;
-    const [isShow, setIsShow] = useState(false);
-    // Refs
-    const videoRef = useRef(null);
-    const canvasRef = useRef(null);
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        const video = videoRef.current;
-        const dimension = 400;
-        let listener = () => { };
-        if (media && media.url && mode === 'video') {
-            const context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
-            if (canvas && video && context) {
-                listener = () => {
-                    context.drawImage(video, 0, 0, dimension, dimension);
-                    setIsShow(true);
-                };
-                video.addEventListener('loadeddata', listener);
-                // Set the preload time range
-                video.currentTime = 2;
-                // Start loading the video from the specified time
-                video.load();
-            }
-        }
-        return () => {
-            video === null || video === void 0 ? void 0 : video.removeEventListener('loadeddata', listener);
-        };
-    }, [media, mode]);
-    return (React.createElement("div", { style: { width: '100%', height: '100%' } },
-        React.createElement("video", { loop: false, muted: true, controls: false, width: 400, height: 400, ref: videoRef, style: { display: 'none' }, preload: "metadata" },
-            React.createElement("source", { src: media === null || media === void 0 ? void 0 : media.url, type: "video/mp4" })),
-        React.createElement("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: isShow ? 'block' : 'none' } }),
-        React.createElement(Image, { src: PlaceholderImage, alt: "placeholder", style: { display: isShow ? 'none' : 'block' } })));
-};
-export default VideoThumbnail;

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import { UploadProps as AntdUploadProps } from 'antd/lib/upload';
-export type MediaMode = 'image' | 'video';
-interface UploadImageProps extends AntdUploadProps {
-    labelHeadingModal?: string;
-    labelButtonSelect?: string;
-    labelModalDelete?: string;
-    searchPlaceholder?: string;
-    onRemoveImage?: Function;
-    onChangeImage?: Function;
-    selectedImage?: UploadMediaObject;
-    isOpen?: boolean;
-    isInputMode?: boolean;
-    iconName?: string;
-    mode?: MediaMode;
-    width?: any;
-    errors?: Array<any>;
-    extensions?: string[];
-    maxSize?: number;
-    title?: string;
-    showImageURL?: boolean;
-    placeholder?: string;
-    domainMedia: string;
-    slug: string;
-    paramConfigs?: {
-        token?: string;
-        userId?: string;
-        accountId: string;
-    };
-    required?: boolean;
-    focused?: boolean;
-}
-interface UploadMediaObject {
-    url: string;
-}
-export declare const UploadImage: React.FC<UploadImageProps>;
-export {};

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

@@ -1,386 +0,0 @@
-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());
-    });
-};
-/* eslint-disable jsx-a11y/media-has-caption */
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable react-hooks/exhaustive-deps */
-// Libraries
-import React, { lazy, Suspense, useEffect, useState, useRef } from 'react';
-import Upload from 'antd/lib/upload';
-// Hooks
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
-// 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';
-// Atoms
-import { Button, Icon, Text, message, Spin, Input, Space, } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { Modal, InputSearch, Select } from '@antscorp/antsomi-ui/es/components/molecules';
-// 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 { getMediaTypeByMode, getReplacementExtension } from './utils';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const flexStyleCenter = {
-    display: 'flex',
-    gap: '15px',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const SORT_OPTIONS = {
-    BY_UPLOAD_DATE: {
-        value: 1,
-        label: 'Sort by Upload Date',
-    },
-    BY_SIZE: {
-        value: 2,
-        label: 'Sort by Size',
-    },
-};
-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 { Dragger } = Upload;
-    const [storeSavedMedia, setStoreSavedMedia] = useState([]);
-    const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
-    const [isModalVisible, setIsModalVisible] = useState(isOpen);
-    const [listMedia, setListMedia] = useState(storeSavedMedia || []);
-    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]);
-    // 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 = (domain, slug, paramConfigs) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            setLoading(true);
-            const type = getMediaTypeByMode(mode);
-            const params = Object.assign(Object.assign({}, paramConfigs), { type });
-            const result = yield 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();
-        setIsModalVisible(true);
-    };
-    const handleCancel = () => {
-        setIsModalVisible(false);
-    };
-    const handleSelectMedia = (media) => {
-        if (typeof onChangeMedia === 'function') {
-            onChangeMedia(media);
-        }
-        setSelectedMedia(media);
-        handleCancel();
-    };
-    const onChangeSort = (option) => {
-        setSortOption(option);
-    };
-    const renderListMedia = (listMediaRender) => listMediaRender.map((media, idx) => {
-        var _a;
-        return (React.createElement(WrapperListImages, { className: "ants-group", key: idx },
-            React.createElement(Boxed, null,
-                React.createElement(Suspense, { fallback: React.createElement(Image, { src: PlaceholderImage, alt: "fallback image" }) },
-                    React.createElement(LazyThumbnail, { mode: mode, media: media })),
-                React.createElement(WrapperBtn, { className: "group-hover" },
-                    React.createElement(Button, { onClick: () => handleSelectMedia(media), style: { backgroundColor: 'rgb(255,255,255)' } }, "USE"),
-                    React.createElement(Button, { onClick: () => handleRemoveUploadedMedia(media), style: { backgroundColor: 'rgb(255,255,255)' } },
-                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary } }))),
-                React.createElement(Overlay, { className: "group-hover" })),
-            React.createElement(Paragraph, { style: {
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    display: '-webkit-box',
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical',
-                }, title: media.name }, media.name),
-            React.createElement(Paragraph, null,
-                "Uploaded: ",
-                media.createdAt.format('DD/MM/YYYY'),
-                " at ",
-                media.createdAt.format('hh:mm:ss A')),
-            React.createElement(Paragraph, null,
-                "Size: ",
-                media.sizeString)));
-    });
-    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);
-        }
-    };
-    const handleRemoveMedia = () => {
-        if (onRemoveImage) {
-            onRemoveImage();
-        }
-        setSelectedMedia({ url: '' });
-    };
-    const handleRemoveUploadedMedia = (media, isConfirm = true) => __awaiter(void 0, void 0, void 0, function* () {
-        if (isConfirm) {
-            deleteMediaRef.current = media;
-            setOpenConfirmDelete(true);
-        }
-        else if (media) {
-            const res = yield deleteSavedMedia(domainMedia, slug, paramConfigs, +media.id);
-            if (res && res.data && res.data.code === 200 && res.data.data) {
-                const { success_media = [] } = res.data.data;
-                if (Array.isArray(success_media) && success_media.length) {
-                    setTriggerRefresh(triggerRefresh + 1);
-                }
-            }
-            setOpenConfirmDelete(false);
-            deleteMediaRef.current = undefined;
-        }
-    });
-    const renderSelectedMedia = () => {
-        if (!selectedMedia || !selectedMedia.url)
-            return null;
-        if (mode === 'video') {
-            return (React.createElement("video", { controls: false, autoPlay: false, muted: true, style: { width: '100%', height: '100%', position: 'absolute' }, src: selectedMedia.url }));
-        }
-        return (React.createElement(Image, { src: selectedMedia.url, alt: "", style: { position: 'absolute' }, onError: (e) => {
-                e.target.src = PlaceholderImage;
-            } }));
-    };
-    const customRequestUpload = (options) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            const { file } = options;
-            uploadFilesRef.current.push(file);
-            if (uploadFilesTimeoutRef.current) {
-                clearTimeout(uploadFilesTimeoutRef.current);
-            }
-            uploadFilesTimeoutRef.current = setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
-                if (!uploadFilesRef.current.length) {
-                    uploadFilesRef.current = [];
-                    return;
-                }
-                if (uploadFilesRef.current.length > 10) {
-                    const defaultMaxSize = mode === 'video' ? 200 : 10;
-                    const error = `Maximum number of file to upload is ${maxSize || defaultMaxSize}!`;
-                    message.error(error);
-                    uploadFilesRef.current = [];
-                    return false;
-                }
-                for (const file of uploadFilesRef.current) {
-                    const replacement = getReplacementExtension(mode);
-                    if (!(extensions === null || extensions === void 0 ? void 0 : extensions.map(extension => extension.replace('.', replacement)).includes(file.type))) {
-                        message.error('Invalid file extension');
-                        uploadFilesRef.current = [];
-                        return false;
-                    }
-                    if (maxSize && maxSize > 0 && file.size > maxSize * 1024 * 1024) {
-                        message.error('File size too big');
-                        uploadFilesRef.current = [];
-                        return false;
-                    }
-                }
-                setLoading(true);
-                const result = yield uploadFile(domainMedia, slug, Object.assign(Object.assign({}, paramConfigs), { mode }), uploadFilesRef.current).finally(() => {
-                    uploadFilesRef.current = [];
-                });
-                if (result === null || result === void 0 ? void 0 : result.length) {
-                    const arrPromise = [];
-                    const type = getMediaTypeByMode(mode);
-                    result.forEach(data => arrPromise.push(createSavedMedia(domainMedia, slug, paramConfigs, {
-                        type,
-                        name: data.fileName,
-                        properties: {
-                            url: data.url,
-                            file: data.file,
-                            extension: data.extension,
-                            dimensions_file: data.dimensionsFile,
-                            size: data.size,
-                            file_name: data.fileName,
-                        },
-                    })));
-                    yield Promise.all(arrPromise);
-                    setLoading(false);
-                    setTriggerRefresh(triggerRefresh + 1);
-                }
-                else {
-                    setLoading(false);
-                    message.error('Cannot upload image!');
-                }
-            }), 300);
-        }
-        catch (e) {
-            uploadFilesRef.current = [];
-            setLoading(false);
-            message.error('Cannot upload image!');
-        }
-        finally {
-            setLoading(false);
-        }
-    });
-    return (React.createElement(React.Fragment, null,
-        isInputMode ? (React.createElement(WrapperInputMode, { width: width },
-            React.createElement(Input, { required: required, status: errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? 'error' : '', placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, style: { paddingRight: 40 }, onAfterChange: value => handleSelectMedia({
-                    url: value,
-                }) }),
-            React.createElement(WrapperIcon, { onClick: showModal }, mode === 'video' ? (React.createElement(Icon, { type: "icon-ants-video", size: 24, style: {
-                    zIndex: 1,
-                    marginLeft: 2,
-                    color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
-                } })) : (React.createElement(MediaIcon, null))),
-            isError && React.createElement(ErrorMessage, null, errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? errors[0] : ''))) : (React.createElement(UploadImageWrapper, null,
-            title ? React.createElement(Text, { style: { marginTop: 10 } }, title) : null,
-            React.createElement("div", { className: `image-upload-content ${selectedMedia && selectedMedia.url ? 'uploaded' : ''}` },
-                renderSelectedMedia(),
-                !selectedMedia || !selectedMedia.url ? (React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 36, style: {
-                        zIndex: 1,
-                        marginLeft: 25,
-                        color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon,
-                    } })) : null,
-                React.createElement("div", { style: flexStyleCenter },
-                    React.createElement(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' } },
-                        "Browse ",
-                        mode === 'video' ? 'Video' : 'Image'),
-                    selectedMedia && selectedMedia.url ? (React.createElement(Button, { onClick: handleRemoveMedia, style: { backgroundColor: '#ffffff' } },
-                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary } }))) : null)),
-            React.createElement("div", { className: "upload-file-info", style: { marginTop: 12 } },
-                React.createElement(Text, null,
-                    "File type: ", extensions === null || extensions === void 0 ? void 0 :
-                    extensions.join(', ')),
-                React.createElement(Text, null,
-                    "File size: under ",
-                    maxSize,
-                    "MB")),
-            showMediaURL && (React.createElement(Space, { size: 5, direction: "vertical", style: { marginTop: 12 } },
-                React.createElement(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, onAfterChange: value => handleSelectMedia({
-                        url: value,
-                    }) }))))),
-        React.createElement(Modal, { title: labelModalDelete, visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel" },
-            React.createElement("p", null,
-                "Are you sure you want to delete ", (_d = deleteMediaRef.current) === null || _d === void 0 ? void 0 :
-                _d.name,
-                "?")),
-        React.createElement(Modal, { wrapClassName: "icons-selection-modal", title: React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-                React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 20 }),
-                labelHeadingModal), centered: true, headerStyle: {
-                padding: '20px 20px 0',
-                border: 'none',
-            }, bodyStyle: {
-                padding: 20,
-                maxHeight: '90vh',
-                width: '100%',
-                overflow: 'auto',
-            }, width: 1155, footer: null, visible: isModalVisible, destroyOnClose: true, onCancel: handleCancel },
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: 20,
-                } },
-                React.createElement(InputSearch, { style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }),
-                React.createElement(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })),
-            React.createElement(Spin, { spinning: loading },
-                React.createElement(Dragger, Object.assign({}, props, { accept: extensions === null || extensions === void 0 ? void 0 : extensions.join(','), 
-                    // action={`${APP_CONFIG.API_URL}/file-upload/file?&_token=${userInfo?.token}&_user_id=${userInfo?.user_id}&_account_id=${userInfo?.account_id}`}
-                    // beforeUpload={handleBeforeUploadFile}
-                    // onChange={onChangeFileUpload}
-                    showUploadList: false, multiple: true, customRequest: customRequestUpload }),
-                    React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { height: 80 }) },
-                        React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 36, style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorIcon } }),
-                        React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { justifyContent: 'flex-start' }) },
-                            React.createElement(TextStyled, { className: "ant-upload-text" }, "Drag & Drop file here"),
-                            React.createElement("span", null, "or"),
-                            React.createElement(Button, { style: { backgroundColor: '#ffffff' } }, labelButtonSelect),
-                            React.createElement(Button, { onClick: handleRemoveMedia, style: {
-                                    display: 'none !important',
-                                    backgroundColor: '#ffffff',
-                                } },
-                                React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary } })))))),
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: '35px',
-                    paddingTop: 20,
-                    width: '100%',
-                } }, renderListMedia(listMedia)))));
-};
-UploadImage.defaultProps = {
-    isOpen: false,
-    labelHeadingModal: 'Image Selection',
-    labelButtonSelect: 'Select Image from computer',
-    labelModalDelete: 'Delete Image',
-    searchPlaceholder: 'Search image...',
-    domainMedia: 'https://sandbox-media-template.antsomi.com/cdp',
-    slug: 'api/v1',
-    isInputMode: true,
-    iconName: 'image-3',
-    mode: 'image',
-    width: '100%',
-    errors: [],
-    placeholder: 'Enter image URL',
-    paramConfigs: {
-        accountId: '',
-        token: '',
-        userId: '',
-    },
-    extensions: ['.jpg', '.png', '.jfif', '.jpeg', '.gif', '.webp'],
-    maxSize: 10,
-    showImageURL: true,
-};

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

@@ -1,13 +0,0 @@
-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>;
-export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const WrapperBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
-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;
-}, never>;
-export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UploadImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,130 +0,0 @@
-var _a, _b, _c, _d;
-// Libraries
-import styled from 'styled-components';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const WrapperListImages = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 250px;
-  height: auto;
-  text-align: center;
-
-  &.ants-group:hover .group-hover {
-    opacity: 1;
-  }
-`;
-export const TextStyled = styled.span `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDark};
-`;
-export const Boxed = styled.div `
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 250px;
-  height: 250px;
-  border-width: 1px;
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(224 224 224 / var(--tw-border-opacity));
-`;
-export const Image = styled.img `
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
-`;
-export const WrapperBtn = styled.div `
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 3;
-  gap: 15px;
-  opacity: 0;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-`;
-export const Paragraph = styled.p `
-  display: inline-block;
-  margin-top: 5px;
-  width: 100%;
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
-`;
-export const Overlay = styled.div `
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  z-index: 2;
-  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bgLightTransparent};
-  opacity: 0;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-`;
-export const WrapperInputMode = styled.div `
-  position: relative;
-  width: ${props => (props.width ? props.width : '100%')};
-`;
-export const WrapperIcon = styled.div `
-  position: absolute;
-  top: -10px;
-  left: calc(100% - 44px);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 12px;
-  border-radius: 50%;
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-  }
-`;
-export const ErrorMessage = styled.div `
-  width: 100%;
-  margin-top: 3px;
-  color: #f44336;
-  font-size: 0.688rem;
-  line-height: 1.66;
-`;
-export const UploadImageWrapper = styled.div `
-  .antsomi-upload.antsomi-upload-btn {
-    padding: 0px;
-  }
-
-  .image-upload-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: 20px;
-    position: relative;
-    border-radius: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.borderRadius}px;
-    border-width: 2px;
-    border-style: dashed;
-    --tw-border-opacity: 1;
-    border-color: rgb(210 210 210 / var(--tw-border-opacity));
-    aspect-ratio: 3.2;
-
-    &.uploaded {
-      background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
-        repeat rgb(249, 251, 255);
-    }
-    .antsomi-upload-drag-container {
-    }
-    .upload-file-info {
-      p {
-        font-size: 12px;
-      }
-    }
-  }
-`;