@antscorp/antsomi-ui 1.3.5-beta.275 → 1.3.5-beta.277

package/es/components/molecules/ImageEditor/ImageEditor.js

@@ -1,12 +1,3 @@
-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 default-case */
 import React, { useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState, } from 'react';
 import Icon from '@antscorp/icons';
@@ -19,7 +10,7 @@ import { v4 as uuidV4 } from 'uuid';
 import { Button, Popover } from '../../atoms';
 import ModalShortcut from './components/ModalShortcut';
 import { useDropFile, useKeyEventCanvas } from '@antscorp/antsomi-ui/es/hooks';
-import { DEFAULT_TRANSFORM, DrawAction, PAINT_OPTIONS, ShapeObject } from './constants';
+import { DEFAULT_TRANSFORM, DrawAction, IMAGE_COORDINATE, PAINT_OPTIONS, ShapeObject, } from './constants';
 import { initialReducer, reducer } from './reducer';
 import { downloadURI, getTransformData } from './utils';
 import { StageWrapperStyled } from './styled';
@@ -50,30 +41,14 @@ export const ImageEditor = React.forwardRef((props, ref) => {
     const { current: { arrows, circles, imageCoordinate, rectangles, scribbles, image }, } = state;
     useEffect(() => {
         // NOTE: reset initial reducer when change image (in ImageSlider)
-        dispatch({ type: 'RESET', payload: defaultValue ? defaultValue : initialReducer.current });
+        dispatch({ type: 'RESET', payload: defaultValue || initialReducer.current });
     }, [defaultValue]);
     // const [imageFromUrl] = useImage(imageUrl);
-    // console.log(imageUrl, '🚀 ~ ImageEditor ~ imageFromUrl:', imageUrl);
+    // // console.log(imageUrl, '🚀 ~ ImageEditor ~ imageFromUrl:', imageUrl);
     const stageRef = useRef(null);
     const transformerRef = useRef(null);
     const selectionRectangleRef = useRef(null);
     const isPaintRef = useRef(false);
-    // NOTE: format canvas action (as methods) to ref with forwardRef and useImperativeHandle
-    useImperativeHandle(ref, () => {
-        return {
-            getBase64(options) {
-                var _a, _b;
-                (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
-                return (_b = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current) === null || _b === void 0 ? void 0 : _b.toDataURL(options);
-            },
-            replaceImageWithUrl(imageUrl) {
-                changeImage(imageUrl);
-            },
-            getCurrentState() {
-                return state.current;
-            },
-        };
-    }, [state]);
     const changeImage = useCallback((imageUrl) => {
         const image = new Image();
         image.src = imageUrl;
@@ -90,15 +65,30 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 type: 'SET_NEW_STATE',
                 payload: {
                     image,
-                    imageCoordinate: Object.assign(Object.assign({}, imageCoordinate), { id: uuidV4(), x: (width - image.width) / 2, y: (height - image.height) / 2, width: image.width, height: image.height }),
+                    imageCoordinate: Object.assign(Object.assign({}, IMAGE_COORDINATE), { id: uuidV4(), x: (width - image.width) / 2, y: (height - image.height) / 2, width: image.width, height: image.height }),
                     saveHistory: true,
                 },
             });
         });
-    }, [height, width, imageCoordinate]);
+    }, [height, width]);
+    // NOTE: format canvas action (as methods) to ref with forwardRef and useImperativeHandle
+    useImperativeHandle(ref, () => ({
+        getBase64(options) {
+            var _a, _b;
+            (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
+            return (_b = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current) === null || _b === void 0 ? void 0 : _b.toDataURL(options);
+        },
+        replaceImageWithUrl(imageUrl) {
+            changeImage(imageUrl);
+        },
+        getCurrentState() {
+            return state.current;
+        },
+    }), [state, changeImage]);
     useEffect(() => {
-        imageUrl && changeImage(imageUrl);
-    }, [imageUrl]);
+        if (imageUrl)
+            changeImage(imageUrl);
+    }, [imageUrl, changeImage]);
     const onImportImageSelect = useCallback((e) => {
         var _a;
         if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
@@ -287,7 +277,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
             const selected = shapes.filter(shape => Konva.default.Util.haveIntersection(box, shape.getClientRect()));
             (_c = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _c === void 0 ? void 0 : _c.nodes(selected);
         }
-    }, [drawAction, selectionPosition.visible]);
+    }, [drawAction, selectionPosition.visible, showSelection]);
     const currentShapeRef = useRef();
     const onStageMouseDown = useCallback(() => {
         if (drawAction !== DrawAction.Crop)
@@ -416,19 +406,20 @@ export const ImageEditor = React.forwardRef((props, ref) => {
             setSelectionPosition(prev => (Object.assign(Object.assign({}, prev), { visible: false })));
         }
     }, [selectionPosition]);
-    const onApplyCropClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const onApplyCropClick = useCallback(() => {
         var _a;
         if (!cropZone)
             return;
-        const dataUri = yield ((_a = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL({
+        const dataUri = (_a = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL({
             x: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.x) + 2,
             y: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.y) + 2,
             width: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.width) - 4,
             height: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.height) - 4,
-        }));
+        });
         onClear();
-        dataUri && changeImage(dataUri);
-    }), [cropZone, changeImage, onClear]);
+        if (dataUri)
+            changeImage(dataUri);
+    }, [cropZone, changeImage, onClear]);
     const onShapeClick = useCallback((e, id, shape) => {
         var _a;
         if (drawAction !== DrawAction.Select)
@@ -540,9 +531,12 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         const resultV = getAllSnapLines('vertical');
         const resultH = getAllSnapLines('horizontal');
         const closestSnapLines = [];
-        const getSnapLine = ({ snapLine, offset, snap }, orientation) => {
-            return { snapLine, offset, orientation, snap };
-        };
+        const getSnapLine = ({ snapLine, offset, snap }, orientation) => ({
+            snapLine,
+            offset,
+            orientation,
+            snap,
+        });
         // find closest vertical and horizontal snappping lines
         const [minV] = resultV.sort((a, b) => a.diff - b.diff);
         const [minH] = resultH.sort((a, b) => a.diff - b.diff);
@@ -552,7 +546,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
             closestSnapLines.push(getSnapLine(minH, 'H'));
         return closestSnapLines;
     };
-    const drawLines = (lines = []) => {
+    const drawLines = useCallback((lines = []) => {
         if (lines.length > 0) {
             const lineStyle = {
                 stroke: 'rgb(255, 81, 12)',
@@ -576,7 +570,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
             setHLines(hLines);
             setVLines(vLines);
         }
-    };
+    }, []);
     const onTransformerMove = useCallback((target) => {
         // const target = transformerRef.current;
         if (!target)
@@ -621,7 +615,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         };
         target.setAbsolutePosition(newPos);
         // selectedNode.setAbsolutePosition(newPos);
-    }, []);
+    }, [getShapeSnappingEdges, getSnapLines, drawLines]);
     return (React.createElement("div", { style: Object.assign({ width: `${width}px` }, (style || {})) },
         React.createElement(Flex, { justify: "space-between", align: "center", style: { marginBottom: '6px', display: hideAction ? 'none' : 'flex' } },
             React.createElement(Flex, { gap: 4 },
@@ -673,7 +667,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                                 dispatch({
                                     type: 'SET_IMAGE_COORDINATE',
                                     payload: {
-                                        imageCoordinate: Object.assign(Object.assign({}, imageCoordinate), { x: attrs.x, y: attrs.y }),
+                                        imageCoordinate: { x: attrs.x, y: attrs.y },
                                         saveHistory: true,
                                     },
                                 });
@@ -681,7 +675,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                             dispatch({
                                 type: 'SET_IMAGE_COORDINATE',
                                 payload: {
-                                    imageCoordinate: Object.assign(Object.assign(Object.assign({}, imageCoordinate), { width: e.target.width(), height: e.target.height() }), getTransformData(e)),
+                                    imageCoordinate: Object.assign({ width: e.target.width(), height: e.target.height() }, getTransformData(e)),
                                     saveHistory: true,
                                 },
                             });

package/es/components/molecules/ImageEditor/reducer.d.ts

@@ -52,12 +52,14 @@ type ReducerAction = {
 } | {
     type: 'SET_IMAGE_COORDINATE';
     payload: {
-        imageCoordinate: ImageCoordinate;
+        imageCoordinate: Partial<ImageCoordinate>;
         saveHistory?: boolean;
     };
 } | {
     type: 'SET_NEW_STATE';
-    payload: Partial<CanvasState> & {
+    payload: Omit<Partial<CanvasState>, 'imageCoordinate'> & {
+        imageCoordinate?: Partial<ImageCoordinate>;
+    } & {
         saveHistory?: boolean;
     };
 } | {

package/es/components/molecules/ImageEditor/reducer.js

@@ -23,14 +23,16 @@ export const reducer = (state, action) => {
         case 'SET_IMAGE_COORDINATE':
         case 'SET_NEW_STATE': {
             const newHistoryStep = state.historyStep + 1;
-            const newState = Object.assign(Object.assign({}, state.current), payload);
+            const newImageCoordinate = Object.assign(Object.assign({}, state.current.imageCoordinate), (type === 'SET_NEW_STATE' || type === 'SET_IMAGE_COORDINATE'
+                ? payload.imageCoordinate || {}
+                : {}));
+            const newState = Object.assign(Object.assign(Object.assign({}, state.current), payload), { imageCoordinate: newImageCoordinate });
             return Object.assign(Object.assign({}, state), { history: payload.saveHistory
                     ? state.history.slice(0, newHistoryStep).concat([newState])
                     : state.history, historyStep: payload.saveHistory ? newHistoryStep : state.historyStep, current: newState });
         }
         case 'SAVE_HISTORY': {
             return Object.assign(Object.assign({}, state), { historyStep: state.historyStep + 1, history: state.history.slice(0, state.historyStep + 1).concat([state.current]) });
-            break;
         }
         case 'UNDO': {
             if (state.historyStep === 0) {

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

@@ -77,7 +77,7 @@ export interface TemplateSaveAsProps {
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
     onSaveThumbnail?: (data: {
-        thumbnails: (string | undefined)[];
+        thumbnails: ImageSliderProps['thumbnails'];
         thumbnailChange: number;
     }) => void;
     onEvent?: (value: Partial<TemplateValueOptions>) => void;

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
+type SliderThumbnail = {
+    url: string;
+    showSkeleton?: boolean;
+};
 export interface ImageSliderProps {
-    thumbnails: (string | undefined)[];
+    thumbnails: (string | SliderThumbnail | undefined)[];
     isLoading?: boolean;
     className?: string;
     skeleton?: boolean;
@@ -19,8 +23,9 @@ export interface ImageSliderProps {
     defaultThumbnail?: number;
     onSelectDefault?: (imgIndex: number) => void;
     onSaveThumbnail?: (data: {
-        thumbnails: (string | undefined)[];
+        thumbnails: ImageSliderProps['thumbnails'];
         thumbnailChange: number;
     }) => void;
 }
 export declare const ImageSlider: React.FC<ImageSliderProps>;
+export {};

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

@@ -1,5 +1,5 @@
 // Libraries
-import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import Icon from '@antscorp/icons';
 // Components
 import { Button, Flex, ImageResize, message, Spin, Typography, ImageResizeTuiEditor, } from '@antscorp/antsomi-ui/es/components';
@@ -7,7 +7,7 @@ import { Button, Flex, ImageResize, message, Spin, Typography, ImageResizeTuiEdi
 import { ImageSliderStyled } from './styled';
 import { SmallImage } from './SmallImage';
 import { BigImage } from './BigImage';
-import { useDropFile } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo, useDropFile, } from '@antscorp/antsomi-ui/es/hooks';
 import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 import { isNil } from 'lodash';
 // Image size limit to 10MB
@@ -28,7 +28,7 @@ export const ImageSlider = props => {
     const [uploadThumbnail, setUploadThumbnail] = useState();
     const [latestCanvas, setLatestCanvas] = useState();
     // Effects
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         setDefaultThumbnailInternal(defaultThumbnail || 0);
     }, [defaultThumbnail]);
     const handleScroll = useCallback((scrollIndex) => {
@@ -49,14 +49,14 @@ export const ImageSlider = props => {
             handleScroll(newValue);
             return newValue;
         });
-    }, [thumbnails, handleScroll]);
+    }, [handleScroll, thumbnailsQuantity]);
     const handlePrevThumbnail = useCallback(() => {
         setSelectedThumbnail(prev => {
             const newValue = prev === 0 ? thumbnailsQuantity - 1 : prev - 1;
             handleScroll(newValue);
             return newValue;
         });
-    }, [thumbnails, handleScroll]);
+    }, [handleScroll, thumbnailsQuantity]);
     const handleSelectThumbnail = useCallback((index) => {
         handleScroll(index);
         setSelectedThumbnail(index);
@@ -68,19 +68,26 @@ export const ImageSlider = props => {
             onSelectDefault(index);
         }
     }, [onSelectDefault]);
-    const handleSaveThumbnail = () => {
-        var _a;
-        const newThumbnail = [...thumbnails];
+    const handleSaveThumbnail = useCallback(() => {
+        var _a, _b;
+        const newThumbnails = [...thumbnails];
         // NOTE: https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
-        newThumbnail[selectedThumbnail] = (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getBase64({ pixelRatio: 2.5 });
-        onSaveThumbnail === null || onSaveThumbnail === void 0 ? void 0 : onSaveThumbnail({ thumbnails: newThumbnail, thumbnailChange: selectedThumbnail });
+        const base64Url = ((_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getBase64({ pixelRatio: 2.5 })) || '';
+        if (typeof newThumbnails[selectedThumbnail] === 'object' &&
+            ((_b = newThumbnails[selectedThumbnail]) === null || _b === void 0 ? void 0 : _b.url)) {
+            newThumbnails[selectedThumbnail].url = base64Url;
+        }
+        else {
+            newThumbnails[selectedThumbnail] = base64Url;
+        }
+        onSaveThumbnail === null || onSaveThumbnail === void 0 ? void 0 : onSaveThumbnail({ thumbnails: newThumbnails, thumbnailChange: selectedThumbnail });
         setLatestCanvas(prev => {
             var _a;
             return (Object.assign(Object.assign({}, prev), { [selectedThumbnail]: (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getCurrentState() }));
         });
         setEditingThumbnail(undefined);
         handleSelectThumbnail(selectedThumbnail);
-    };
+    }, [handleSelectThumbnail, onSaveThumbnail, selectedThumbnail, thumbnails]);
     const fileRef = useRef(null);
     const onImportImageClick = useCallback(() => {
         var _a;
@@ -90,7 +97,13 @@ export const ImageSlider = props => {
         var _a, _b, _c;
         if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
             if (((_b = e.target.files) === null || _b === void 0 ? void 0 : _b[0].size) > SIZE_LIMIT) {
-                return message.error('File size too big');
+                // return message.error('File size too big');
+                message.error({
+                    content: 'File size too big',
+                    style: { fontSize: '11px', fontFamily: 'Roboto' },
+                });
+                e.target.files = null;
+                return;
             }
             (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL(e.target.files[0]));
             setUploadThumbnail(undefined);
@@ -102,25 +115,39 @@ export const ImageSlider = props => {
         if (!((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0]))
             return;
         if (((_b = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files[0].size) > SIZE_LIMIT) {
-            return message.error('File size too big');
+            message.error({
+                content: 'File size too big',
+                style: { fontSize: '11px', fontFamily: 'Roboto' },
+            });
+            return;
         }
         (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL((_d = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _d === void 0 ? void 0 : _d.files[0]));
         setUploadThumbnail(undefined);
     });
-    const currentTime = useMemo(() => new Date(), []);
+    const currentTime = useDeepCompareMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
-    const currentEditing = useMemo(() => editingThumbnail !== null && editingThumbnail !== void 0 ? editingThumbnail : uploadThumbnail, [editingThumbnail, uploadThumbnail]);
+    const currentEditing = useDeepCompareMemo(() => editingThumbnail !== null && editingThumbnail !== void 0 ? editingThumbnail : uploadThumbnail, [editingThumbnail, uploadThumbnail]);
+    const currentThumbnailUrl = useDeepCompareMemo(() => {
+        const currentThumbnail = thumbnails[currentEditing];
+        return typeof currentThumbnail === 'string' ? currentThumbnail : (currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.url) || '';
+    }, [currentEditing, thumbnails]);
+    const showSkeletonMemo = useDeepCompareMemo(() => {
+        const currentThumbnail = thumbnails[currentEditing];
+        const showSkeleton = typeof currentThumbnail === 'object' && !isNil(currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.showSkeleton)
+            ? currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.showSkeleton
+            : skeleton !== undefined
+                ? skeleton
+                : checkShowSkeletonBaseUrl(getUrlNoCache(currentThumbnailUrl, timeGenerated));
+        return showSkeleton;
+    }, [currentEditing, currentThumbnailUrl, skeleton, thumbnails, timeGenerated]);
     const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
-    const showSkeletonMemo = skeleton !== undefined
-        ? skeleton
-        : checkShowSkeletonBaseUrl(getUrlNoCache(thumbnails[currentEditing], timeGenerated));
-    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
+    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": showSkeletonMemo, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
         React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
             React.createElement(ImageResizeComponent, { style: { visibility: typeof uploadThumbnail === 'number' ? 'hidden' : 'visible' }, className: "image-resize-wrapper", width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: 
                 // latestCanvas && isEditPrevious
                 (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
                     ? undefined
-                    : getUrlNoCache(thumbnails[currentEditing], timeGenerated), 
+                    : getUrlNoCache(currentThumbnailUrl, timeGenerated), 
                 // imageUrl={getUrlNoCache(
                 //   thumbnails[editingThumbnail ?? (uploadThumbnail as number)],
                 //   timeGenerated,
@@ -132,20 +159,32 @@ export const ImageSlider = props => {
                     React.createElement(Typography.Text, { style: { fontSize: 16, marginBottom: '10px' } }, "Drag & Drop file here"),
                     React.createElement("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }),
                     React.createElement(Button, { onClick: onImportImageClick }, "Browse Image"),
-                    React.createElement(Typography.Text, { style: { marginTop: '5px' } }, "File type: .jpg, .png. File size: under 10MB")))),
+                    React.createElement(Typography.Text, { style: { marginTop: '5px', fontSize: '11px' } }, "File type: .jpg, .png. File size: under 10MB")))),
             React.createElement(Flex, { justify: "center", align: "center", gap: 8, className: "image-resize-action" },
                 React.createElement(Button, { onClick: handleSaveThumbnail, type: "primary", disabled: uploadThumbnail !== undefined }, "Save"),
                 React.createElement(Button, { onClick: () => {
                         setEditingThumbnail(undefined);
                         setUploadThumbnail(undefined);
                     } }, "Cancel"))),
-        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: () => setEditingThumbnail(selectedThumbnail), 
-            // onClickEdit={index => setEditingThumbnail(index)}
-            onClickUpload: () => {
-                setEditingThumbnail(selectedThumbnail);
-                setUploadThumbnail(selectedThumbnail);
-            } }))))),
-        hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+            const url = typeof thumbnail === 'string' ? thumbnail : (thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.url) || '';
+            const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton)
+                ? thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton
+                : skeleton;
+            return (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: showSkeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: () => setEditingThumbnail(selectedThumbnail), 
+                // onClickEdit={index => setEditingThumbnail(index)}
+                onClickUpload: () => {
+                    setEditingThumbnail(selectedThumbnail);
+                    setUploadThumbnail(selectedThumbnail);
+                } }));
+        }))),
+        hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+            const url = typeof thumbnail === 'string' ? thumbnail : (thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.url) || '';
+            const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton)
+                ? thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton
+                : skeleton;
+            return (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: showSkeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail }));
+        })))),
         previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
             React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
             React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,

package/es/components/organism/AlgorithmsSetting/index.js

@@ -366,16 +366,14 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.last.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                             React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
                             React.createElement(Text, { color: isCDP ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.days.title).toString()))),
                     React.createElement(AlgorithmWrapper, { style: { marginTop: 4 }, mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.to.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Radio.Group, { onChange: event => onChangeAlgorithm(algo, { to: event.target.value }), value: algo.to },
                             React.createElement(Radio, { value: "today" }, t(translations.today.title).toString()),
                             React.createElement(Radio, { value: "yesterday" }, t(translations.yesterday.title).toString())))));
@@ -397,8 +395,7 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.last.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                             React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 20, required: true }),
                             React.createElement(Text, { color: isCDP ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.keywords.title).toLowerCase())))));
@@ -410,8 +407,7 @@ export const AlgorithmsSetting = (props) => {
                 element = (React.createElement(AlgorithmWrapper, { mode: mode },
                     React.createElement(Text, Object.assign({}, labelStyle),
                         t(translations.last.title).toString(),
-                        char,
-                        ' '),
+                        char),
                     React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                         React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
                         React.createElement(Text, { color: isCDP ? (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon : undefined, style: { marginLeft: 8 } }, itemTypeName === ITEM_TYPE_NAME.ARTICLE
@@ -495,14 +491,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.interest.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.interest, options: optionNotify, onChange: value => onChangeAlgorithm(algo, { interest: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.last.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                             React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
                             React.createElement(Text, { color: isCDP ? (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.days.title).toString())))));
@@ -520,14 +514,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.with.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, disabled: isDisable, status: errorMessage ? 'error' : '', errorMsg: errorMessage, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: options, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.sortBy.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { showSearch: true, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_type, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_type: value }) }))));
                 break;
             }
@@ -536,14 +528,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.by.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.by, options: ARTICLE_TREND_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.in.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.in, options: ARTICLE_TREND_IN_OPTIONS, onChange: value => onChangeAlgorithm(algo, { in: value }) })),
                     algo.by === 'compare_with_before' && (React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement("div", null),
@@ -579,14 +569,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.sortBy.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: ARTICLE_TREND_SORT_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.sortOrder.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_order, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_order: value }) }))));
                 break;
             }
@@ -706,10 +694,9 @@ export const AlgorithmsSetting = (props) => {
                                                             : 'none',
                                                     } }, provided.dragHandleProps),
                                                     React.createElement(Icon, { type: "icon-ants-double-three-dots", size: 16, style: { opacity: 0.4, color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon } })),
-                                                React.createElement(Text, Object.assign({}, labelStyle), (_c = mapListAlgo[algo.value]) === null || _c === void 0 ? void 0 :
+                                                React.createElement(Text, Object.assign({}, labelStyle, { style: { marginRight: 8, textAlign: 'left' } }), (_c = mapListAlgo[algo.value]) === null || _c === void 0 ? void 0 :
                                                     _c.label,
-                                                    char,
-                                                    ' ')),
+                                                    char)),
                                             React.createElement(InputNumber, { value: algo.quantity, width: 90, onChange: value => onChangeAlgorithm(algo, { quantity: value }), min: 1, max: 30, required: true }),
                                             algorithms.value.length > 1 ? (React.createElement(Button, { onClick: () => onRemoveAlgo(algo), type: "text", icon: React.createElement(Icon, { type: "icon-ants-remove-slim", size: 15 }), style: { alignSelf: 'center' } })) : null),
                                         renderAlgorithmBy(algo),

package/package.json

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