@antscorp/antsomi-ui 1.3.3-beta.7 → 1.3.3-beta.71

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

@@ -7,6 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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, { useEffect, useState, useRef } from 'react';
@@ -17,15 +19,18 @@ import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
 import MediaIcon from './MediaIcon';
 // Service
-import { uploadFile, createSavedImage, deleteSavedImage, getListingSavedImage, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/UploadFile';
+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';
+// Components
+import { MediaThumb } from './MediaThumb';
 // 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 = {
@@ -46,57 +51,64 @@ const SORT_OPTIONS = {
 };
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = props => {
-    var _a, _b, _c, _d, _e;
-    const { labelHeadingModal, labelButtonSelect, searchPlaceholder, onRemoveImage, onChangeImage, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL, required, focused, domainMedia, slug, paramConfigs, errors, } = 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 [storeSavedImages, setStoreSavedImages] = useState([]);
-    const [selectedImage, setSelectedImage] = useState(props.selectedImage || { url: '' });
+    const [storeSavedMedia, setStoreSavedMedia] = useState([]);
+    const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
     const [isModalVisible, setIsModalVisible] = useState(isOpen);
-    const [listImages, setListImages] = useState(storeSavedImages || []);
+    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 [posters, setPosters] = useState([]);
     const uploadFilesRef = useRef([]);
     const uploadFilesTimeoutRef = useRef();
-    const deleteImageRef = useRef();
+    const deleteMediaRef = useRef();
     const isError = safeParse(errors, []).length > 0;
     useDeepCompareEffect(() => {
-        setListImages(storeSavedImages || []);
+        setListMedia(storeSavedMedia || []);
         setLoading(false);
-    }, [storeSavedImages]);
-    // When selectedImage onChange
+    }, [storeSavedMedia]);
+    useDeepCompareEffect(() => {
+        if (mode === 'video') {
+            const genPosters = Array.from({ length: (listMedia === null || listMedia === void 0 ? void 0 : listMedia.length) || 0 }, () => PlaceholderImage);
+            setPosters(genPosters);
+        }
+    }, [listMedia]);
+    // When selectedMediaProp onChange
     useEffect(() => {
-        // eslint-disable-next-line react/destructuring-assignment
-        setSelectedImage(props.selectedImage || { url: '' });
-        // eslint-disable-next-line react/destructuring-assignment
-    }, [props.selectedImage]);
+        setSelectedMedia(selectedMediaProp || { url: '' });
+    }, [selectedMediaProp]);
     useEffect(() => {
         if (sortOption === SORT_OPTIONS.BY_SIZE.value) {
-            setListImages(listImages ? [...listImages].sort((image1, image2) => image1.size - image2.size) : []);
+            setListMedia(listMedia ? [...listMedia].sort((media1, media2) => media1.size - media2.size) : []);
         }
         else {
-            setListImages(listImages
-                ? [...listImages].sort((image1, image2) => image1.createdAt && image2.createdAt
-                    ? image1.createdAt.isAfter(image2.createdAt)
+            setListMedia(listMedia
+                ? [...listMedia].sort((media1, media2) => media1.createdAt && media2.createdAt
+                    ? media1.createdAt.isAfter(media2.createdAt)
                         ? -1
                         : 1
                     : 0)
                 : []);
         }
     }, [sortOption]);
-    const handleGetStoreSavedImages = (domain, slug, paramConfigs) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleGetStoreSavedMedia = (domain, slug, paramConfigs) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             setLoading(true);
-            const result = yield getListingSavedImage(domain, slug, paramConfigs);
+            const type = getMediaTypeByMode(mode);
+            const params = Object.assign(Object.assign({}, paramConfigs), { type });
+            const result = yield getListingSavedMedia(domain, slug, params);
             if (result) {
-                setStoreSavedImages(result || []);
+                setStoreSavedMedia(result || []);
             }
         }
         catch (error) {
             handleError(error, {
                 path: PATH,
-                name: 'handleGetStoreSavedImages',
+                name: 'handleGetStoreSavedMedia',
                 args: {
                     error,
                 },
@@ -109,7 +121,7 @@ export const UploadImage = props => {
         }
     });
     useEffect(() => {
-        handleGetStoreSavedImages(domainMedia, slug, paramConfigs);
+        handleGetStoreSavedMedia(domainMedia, slug, paramConfigs);
     }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
@@ -118,24 +130,24 @@ export const UploadImage = props => {
     const handleCancel = () => {
         setIsModalVisible(false);
     };
-    const handleSelectImage = image => {
-        if (typeof onChangeImage === 'function') {
-            onChangeImage(image);
+    const handleSelectMedia = (media) => {
+        if (typeof onChangeMedia === 'function') {
+            onChangeMedia(media);
         }
-        setSelectedImage(image);
+        setSelectedMedia(media);
         handleCancel();
     };
-    const onChangeSort = option => {
+    const onChangeSort = (option) => {
         setSortOption(option);
     };
-    const renderListImages = listImagesRender => listImagesRender.map((image, idx) => {
+    const renderListMedia = (listMediaRender) => listMediaRender.map((media, idx) => {
         var _a;
         return (React.createElement(WrapperListImages, { className: "ants-group", key: idx },
             React.createElement(Boxed, null,
-                React.createElement(Image, { src: image.url, alt: "img" }),
+                React.createElement(MediaThumb, { index: idx, posters: posters, mode: mode, media: media, onSetPosters: setPosters }),
                 React.createElement(WrapperBtn, { className: "group-hover" },
-                    React.createElement(Button, { onClick: () => handleSelectImage(image), style: { backgroundColor: 'rgb(255,255,255)' } }, "USE"),
-                    React.createElement(Button, { onClick: () => handleRemoveUploadedImage(image), style: { backgroundColor: 'rgb(255,255,255)' } },
+                    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: {
@@ -144,63 +156,65 @@ export const UploadImage = props => {
                     display: '-webkit-box',
                     WebkitLineClamp: 2,
                     WebkitBoxOrient: 'vertical',
-                }, title: image.name }, image.name),
+                }, title: media.name }, media.name),
             React.createElement(Paragraph, null,
                 "Uploaded: ",
-                image.createdAt.format('DD/MM/YYYY'),
+                media.createdAt.format('DD/MM/YYYY'),
                 " at ",
-                image.createdAt.format('hh:mm:ss A')),
+                media.createdAt.format('hh:mm:ss A')),
             React.createElement(Paragraph, null,
                 "Size: ",
-                image.sizeString)));
+                media.sizeString)));
     });
-    const onChangeSearchImage = e => {
+    const onChangeSearchImage = (e) => {
         const { value } = e.target;
         if (value && value.trim()) {
-            setListImages(storeSavedImages
-                ? storeSavedImages
+            setListMedia(storeSavedMedia
+                ? storeSavedMedia
                     .filter(item => item.name.toLocaleLowerCase().includes(value.trim().toLocaleLowerCase()))
                     .slice(0, 15)
                 : []);
         }
         else {
-            setListImages(storeSavedImages);
+            setListMedia(storeSavedMedia);
         }
     };
-    const handleRemoveImage = () => {
+    const handleRemoveMedia = () => {
         if (onRemoveImage) {
             onRemoveImage();
         }
-        setSelectedImage({ url: '' });
+        setSelectedMedia({ url: '' });
     };
-    const handleRemoveUploadedImage = (image, isConfirm = true) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleRemoveUploadedMedia = (media, isConfirm = true) => __awaiter(void 0, void 0, void 0, function* () {
         if (isConfirm) {
-            deleteImageRef.current = image;
+            deleteMediaRef.current = media;
             setOpenConfirmDelete(true);
         }
-        else if (image) {
-            const res = yield deleteSavedImage(domainMedia, slug, paramConfigs, +image.id);
+        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_image = [] } = res.data.data;
-                if (Array.isArray(success_image) && success_image.length) {
+                const { success_media = [] } = res.data.data;
+                if (Array.isArray(success_media) && success_media.length) {
                     setTriggerRefresh(triggerRefresh + 1);
                 }
             }
             setOpenConfirmDelete(false);
-            deleteImageRef.current = undefined;
+            deleteMediaRef.current = undefined;
         }
     });
-    const renderSelectedImage = () => selectedImage && selectedImage.url ? (React.createElement(Image, { src: selectedImage.url, alt: "", style: { position: 'absolute' }, onError: (e) => {
-            e.target.src = PlaceholderImage;
-        } })) : null;
+    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 { 
-            // onSuccess,
-            //  onError,
-            file,
-            //  onProgress
-             } = options;
+            const { file } = options;
             uploadFilesRef.current.push(file);
             if (uploadFilesTimeoutRef.current) {
                 clearTimeout(uploadFilesTimeoutRef.current);
@@ -211,12 +225,15 @@ export const UploadImage = props => {
                     return;
                 }
                 if (uploadFilesRef.current.length > 10) {
-                    message.error('Maximum number of file to upload is 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) {
-                    if (!(extensions === null || extensions === void 0 ? void 0 : extensions.map(extension => extension.replace('.', 'image/')).includes(file.type))) {
+                    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;
@@ -228,16 +245,18 @@ export const UploadImage = props => {
                     }
                 }
                 setLoading(true);
-                const result = yield uploadFile(domainMedia, slug, paramConfigs, uploadFilesRef.current).finally(() => {
+                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 = [];
-                    result.forEach(data => arrPromise.push(createSavedImage(domainMedia, slug, paramConfigs, {
-                        image_name: data.fileName,
+                    const type = getMediaTypeByMode(mode);
+                    result.forEach(data => arrPromise.push(createSavedMedia(domainMedia, slug, paramConfigs, {
+                        type,
+                        name: data.fileName,
                         properties: {
                             url: data.url,
-                            image: data.file,
+                            file: data.file,
                             extension: data.extension,
                             dimensions_file: data.dimensionsFile,
                             size: data.size,
@@ -265,24 +284,29 @@ export const UploadImage = props => {
     });
     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: selectedImage.url ? selectedImage.url : '', focused: focused, style: { paddingRight: 40 }, onAfterChange: value => handleSelectImage({
+            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 },
-                React.createElement(MediaIcon, null)),
+            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 ${selectedImage && selectedImage.url ? 'uploaded' : ''}` },
-                renderSelectedImage(),
-                !selectedImage || !selectedImage.url ? (React.createElement(Icon, { type: "icon-ants-image-3", size: 36, style: {
+            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: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
+                        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 Image"),
-                    selectedImage && selectedImage.url ? (React.createElement(Button, { onClick: handleRemoveImage, style: { backgroundColor: '#ffffff' } },
-                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary } }))) : null)),
+                    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 :
@@ -291,17 +315,17 @@ export const UploadImage = props => {
                     "File size: under ",
                     maxSize,
                     "MB")),
-            showImageURL && (React.createElement(Space, { size: 5, direction: "vertical", style: { marginTop: 12 } },
-                React.createElement(Input, { label: "Image URL", required: required, placeholder: placeholder, value: selectedImage.url ? selectedImage.url : '', focused: focused, onAfterChange: value => handleSelectImage({
+            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: "Delete Image", visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedImage(deleteImageRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel" },
+        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 the image ", (_c = deleteImageRef.current) === null || _c === void 0 ? void 0 :
-                _c.name,
+                "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-image-3", size: 20 }),
+                React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 20 }),
                 labelHeadingModal), centered: true, headerStyle: {
                 padding: '20px 20px 0',
                 border: 'none',
@@ -326,32 +350,35 @@ export const UploadImage = props => {
                     // 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-image-3", size: 36, style: { color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon } }),
+                        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: handleRemoveImage, style: {
+                            React.createElement(Button, { onClick: handleRemoveMedia, style: {
                                     display: 'none !important',
                                     backgroundColor: '#ffffff',
                                 } },
-                                React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorPrimary } })))))),
+                                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%',
-                } }, renderListImages(listImages)))));
+                } }, 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',

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

@@ -29,10 +29,6 @@ export const Boxed = styled.div `
   border-style: solid;
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
-
-  &:hover {
-    border-width: 2px;
-  }
 `;
 export const Image = styled.img `
   object-fit: contain;

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

@@ -0,0 +1,3 @@
+import type { MediaMode } from '.';
+export declare const getMediaTypeByMode: (mode: MediaMode | undefined) => number;
+export declare const getReplacementExtension: (mode: MediaMode | undefined) => string;

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

@@ -0,0 +1,24 @@
+/*
+ * NOTE:
+ * 1 -> Image
+ * 2 -> Video
+ *
+ */
+export const getMediaTypeByMode = (mode) => {
+    if (!mode || mode === 'image')
+        return 1;
+    return 2;
+};
+export const getReplacementExtension = (mode) => {
+    switch (mode) {
+        case 'image': {
+            return 'image/';
+        }
+        case 'video': {
+            return 'video/';
+        }
+        default: {
+            return 'image/';
+        }
+    }
+};

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

@@ -18,20 +18,28 @@ export { IconSelection } from './IconSelection';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';
+export { ShareAccess, Constants as ShareAccessConstants, Utils as ShareAccessUtils, } from './ShareAccess';
+export { Collapse } from './Collapse';
 export { TreeSelect } from './TreeSelect';
-export { Result } from './Result';
 export { Card } from './Card';
 export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
-export { Collapse } from './Collapse';
-export { Drawer } from './Drawer';
 export { SettingWrapperPopover } from './SettingWrapperPopover';
 export { FontWeightSelect } from './FontWeightSelect';
 export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
+export { Form } from './Form';
+export { ResizeGrid } from './ResizeGrid';
+export * from './RichMenu';
+export { ModalV2 } from './ModalV2';
+export * from './PreviewModal';
+export * from './Drawer';
+export { EditorScript } from './EditorScript';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';
 export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';
+export type { IResizeGridProps, TCell, TGrid } from './ResizeGrid';
+export type { ModalProps } from './ModalV2';

package/es/components/molecules/index.js

@@ -18,16 +18,22 @@ export { IconSelection } from './IconSelection';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';
+export { ShareAccess, Constants as ShareAccessConstants, Utils as ShareAccessUtils, } from './ShareAccess';
+export { Collapse } from './Collapse';
 export { TreeSelect } from './TreeSelect';
-export { Result } from './Result';
 export { Card } from './Card';
 export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
-export { Collapse } from './Collapse';
-export { Drawer } from './Drawer';
 export { SettingWrapperPopover } from './SettingWrapperPopover';
 export { FontWeightSelect } from './FontWeightSelect';
 export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
+export { Form } from './Form';
+export { ResizeGrid } from './ResizeGrid';
+export * from './RichMenu';
+export { ModalV2 } from './ModalV2';
+export * from './PreviewModal';
+export * from './Drawer';
+export { EditorScript } from './EditorScript';

package/es/components/organism/Help/styled.d.ts

@@ -1,16 +1,10 @@
 /// <reference types="react" />
 export declare const DropDown: import("styled-components").StyledComponent<import("react").FC<import("antd").DropDownProps> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd").DropDownProps>;
+} & {
     Button: import("react").FC<import("antd/es/dropdown").DropdownButtonProps>;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd").DropDownProps) => JSX.Element;
 }, any, {}, never>;
-export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {
     height?: number | undefined;
@@ -21,7 +15,7 @@ export declare const Overlay: import("styled-components").StyledComponent<"div",
 export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SendFeedback: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ControlGroup: import("styled-components").StyledComponent<import("react").FC<import("antd").SpaceProps> & {
+export declare const ControlGroup: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").SpaceProps & import("react").RefAttributes<HTMLDivElement>> & {
     Compact: import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>;
 }, any, {}, never>;
 export declare const ControlLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
@@ -64,15 +58,11 @@ export declare const TitleSearch: import("styled-components").StyledComponent<"s
 export declare const WrapperSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>, any, {}, never>;
 export declare const TreeContent: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
     children?: import("react").ReactNode;
-} & {
-    ref?: import("react").Ref<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>> | undefined;
-}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
     DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
         children?: import("react").ReactNode;
-    } & {
-        ref?: import("react").Ref<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>> | undefined;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    } & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
 }, any, {}, never>;

package/es/components/organism/Table/ExplorePivotTable/styled.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledTable: import("styled-components").StyledComponent<import("antd/es/table/interface").RefTable & {
+    displayName?: string | undefined;
     SELECTION_COLUMN: {};
     EXPAND_COLUMN: {};
     SELECTION_ALL: "SELECT_ALL";

package/es/constants/index.d.ts

@@ -1,3 +1,4 @@
 export { THEME } from './theme';
 export * from './storybook';
 export * from './gradientSetting';
+export * from './richMenu';

package/es/constants/index.js

@@ -1,3 +1,4 @@
 export { THEME } from './theme';
 export * from './storybook';
 export * from './gradientSetting';
+export * from './richMenu';

package/es/constants/queries.d.ts

@@ -0,0 +1,14 @@
+export declare const QUERY_KEYS: {
+    GET_LIST_EVENT_ATTR: string;
+    GET_LIST_EVENT_BY_SOURCE: string;
+    GET_LIST_SOURCE_BY_EVENT: string;
+    GET_LIST_ALL_EVENT: string;
+    GET_LIST_BO: string;
+    GET_EVENT_ATTRIBUTE_BO: string;
+    GET_LIST_PROMOTION_CODE_ATTR: string;
+    GET_EVENT_TRACKING_ATTRIBUTES: string;
+    GET_LIST_DYNAMIC_CONTENT_ATTR: string;
+    GET_LIST_PROMOTION_POOL: string;
+    GET_LIST_CUSTOM: string;
+    GET_SAVE_CUSTOM_FUNCTION: string;
+};

package/es/constants/queries.js

@@ -0,0 +1,21 @@
+export const QUERY_KEYS = {
+    // Event attr
+    GET_LIST_EVENT_ATTR: 'GET_LIST_EVENT_ATTR',
+    GET_LIST_EVENT_BY_SOURCE: 'GET_LIST_EVENT_BY_SOURCE',
+    GET_LIST_SOURCE_BY_EVENT: 'GET_SOURCE_BY_EVENT',
+    GET_LIST_ALL_EVENT: 'GET_LIST_ALL_EVENT',
+    // BUSINESS OBJECT
+    GET_LIST_BO: 'GET_LIST_BO',
+    GET_EVENT_ATTRIBUTE_BO: 'GET_EVENT_ATTRIBUTE_BO',
+    // Promotion Code Attr
+    GET_LIST_PROMOTION_CODE_ATTR: 'GET_LIST_PROMOTION_CODE_ATTR',
+    // Event tracking attributes
+    GET_EVENT_TRACKING_ATTRIBUTES: 'GET_EVENT_TRACKING_ATTRIBUTES',
+    // Dynamic content Attr
+    GET_LIST_DYNAMIC_CONTENT_ATTR: 'GET_LIST_DYNAMIC_CONTENT_ATTR',
+    // Event Pool
+    GET_LIST_PROMOTION_POOL: 'GET_LIST_PROMOTION_POOL',
+    // Custom Function
+    GET_LIST_CUSTOM: 'GET_LIST_CUSTOM',
+    GET_SAVE_CUSTOM_FUNCTION: 'GET_SAVE_CUSTOM_FUNCTION',
+};

package/es/constants/richMenu.d.ts

@@ -0,0 +1,19 @@
+export declare const AREA_LAYOUT_KEYS: {
+    readonly LAYOUT_1: "LAYOUT_1";
+    readonly LAYOUT_2: "LAYOUT_2";
+    readonly LAYOUT_3: "LAYOUT_3";
+    readonly LAYOUT_4: "LAYOUT_4";
+    readonly LAYOUT_5: "LAYOUT_5";
+    readonly LAYOUT_6: "LAYOUT_6";
+    readonly LAYOUT_7: "LAYOUT_7";
+    readonly LAYOUT_8: "LAYOUT_8";
+    readonly LAYOUT_9: "LAYOUT_9";
+    readonly LAYOUT_10: "LAYOUT_10";
+    readonly LAYOUT_11: "LAYOUT_11";
+    readonly LAYOUT_12: "LAYOUT_12";
+};
+export declare const BLOCK_KEYS: {
+    readonly RICH_MENU: "RICH_MENU";
+    readonly CELL_ACTION: "CELL_ACTION";
+    readonly CELL_IMAGE: "CELL_IMAGE";
+};