@antscorp/antsomi-ui 1.3.5-beta.274 → 1.3.5-beta.276

package/es/components/atoms/Input/Input.js

@@ -93,4 +93,5 @@ OriginInput.defaultProps = {
 export const Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
+Input.Password = AntdInput.Password;
 export const { TextArea } = StyledInput;

package/es/components/molecules/AccountSelection/AccountListing.d.ts

@@ -8,6 +8,7 @@ export interface AccountListingProps {
         portalId?: number;
         languageCode?: string;
         appCode?: string;
+        menuCode?: string;
     };
     showAllAccount?: boolean;
     currentAccount?: string | 'all';

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -8,7 +8,7 @@ import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
 export const AccountListing = props => {
     const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
-    const { domain, token, userId, appCode, portalId } = apiConfig;
+    const { domain, token, userId, appCode, menuCode, portalId } = apiConfig;
     // States
     const [searchValue, setSearchValue] = useState('');
     // Queries
@@ -27,7 +27,7 @@ export const AccountListing = props => {
             domain,
             appCode: appCode || '',
             fullParent: true,
-            menuCode: appCode || '',
+            menuCode: menuCode || appCode || '',
         },
         options: {
             enabled: portalId === PORTALS_IDS.SANDBOX_76753,

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

@@ -29,6 +29,7 @@ export interface HeaderV2Props {
         portalId?: number;
         token?: string;
         appCode?: string;
+        menuCode?: string;
         permissionDomain?: string;
         iamDomain?: string;
     };

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -20,15 +20,16 @@ import { AccountSharing, Help, Notification, } from '../../organism';
 import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
+const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const HeaderV2 = memo(props => {
     var _a, _b;
-    const { auth, env: envContext, languageCode = 'en', appCode, urlLogout: urlLogoutProvider = '', } = useContextSelector(AppConfigContext, state => state);
+    const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
     const history = useHistory();
     /** Prefer to use Header in AppConfigContext */
     const { className, style, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
-    const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, } = config || {};
+    const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
     const oidParam = (_a = urlParams.get('oid')) !== null && _a !== void 0 ? _a : '';
@@ -40,7 +41,8 @@ export const HeaderV2 = memo(props => {
         if (portalId !== PORTALS_IDS.SANDBOX_76753)
             return CDP_API[env || 'development'];
         switch (appCode) {
-            case APP_CODES.DATAFLOWS:
+            case DATAFLOWS:
+            case APP_ANTALYSER:
                 return (_a = APP_PERMISSION_DOMAIN[appCode || '']) === null || _a === void 0 ? void 0 : _a[env || ''];
             default:
                 return CDP_API[env || 'development'];
@@ -58,6 +60,7 @@ export const HeaderV2 = memo(props => {
         portalId,
         token,
         appCode,
+        menuCode,
     };
     const helpConfigProps = Object.assign(Object.assign({}, configs), { portalId: portalId.toString(), userId: userId.toString(), token, domain: CDP_API[env], domainTicket: ISSUE_API[env], domainPlatform: PLATFORM_API, config: Object.assign(Object.assign({}, configs.config), { user_language: language }) });
     const notificationConfigProps = {

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/molecules/index.d.ts

@@ -46,7 +46,7 @@ export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
-export { EmptyData, EmptyDataProps } from './EmptyData';
+export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';

package/es/components/molecules/index.js

@@ -46,7 +46,7 @@ export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
-export { EmptyData } from './EmptyData';
+export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';

package/es/components/template/Layout/Layout.js

@@ -30,7 +30,7 @@ import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
 // Utils
 import { checkingRoleScope } from './utils';
-const { DATAFLOWS } = APP_CODES;
+const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
     const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, onActiveMenuChange, } = props;
     const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
@@ -52,6 +52,7 @@ export const Layout = memo(props => {
             return PERMISSION_API;
         switch (appCode) {
             case DATAFLOWS:
+            case APP_ANTALYSER:
                 return ((_a = APP_PERMISSION_DOMAIN[appCode]) === null || _a === void 0 ? void 0 : _a[env || 'development']) || PERMISSION_API;
             default:
                 return PERMISSION_API;
@@ -67,6 +68,7 @@ export const Layout = memo(props => {
             return IAM_API;
         switch (appCode) {
             case DATAFLOWS:
+            case APP_ANTALYSER:
                 return ((_a = APP_IAM_DOMAIN[appCode]) === null || _a === void 0 ? void 0 : _a[env || 'development']) || IAM_API;
             default:
                 return IAM_API;

package/es/constants/api.js

@@ -1,7 +1,7 @@
 // Constants
 import { ENV } from '../config';
 import { APP_CODES } from './variables';
-const { DATAFLOWS } = APP_CODES;
+const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const TINYMCE_API_KEY = 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35';
 export const CDP_API = {
     [ENV.DEV]: 'https://sandbox-app.cdp.asia',
@@ -23,6 +23,11 @@ export const APP_PERMISSION_DOMAIN = {
         [ENV.SANDBOX]: 'https://sandbox-permission.ants.vn',
         [ENV.PROD]: 'https://permission.antsomi.com',
     },
+    [APP_ANTALYSER]: {
+        [ENV.DEV]: 'https://sandbox-permission.ants.vn',
+        [ENV.SANDBOX]: 'https://sandbox-permission.ants.vn',
+        [ENV.PROD]: 'https://permission.antsomi.com',
+    },
 };
 export const APP_IAM_DOMAIN = {
     [DATAFLOWS]: {
@@ -30,4 +35,9 @@ export const APP_IAM_DOMAIN = {
         [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
         [ENV.PROD]: 'https://iam.ants.tech',
     },
+    [APP_ANTALYSER]: {
+        [ENV.DEV]: 'https://sandbox-aacm.ants.vn',
+        [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
+        [ENV.PROD]: 'https://iam.ants.tech',
+    },
 };

package/es/constants/variables.d.ts

@@ -19,6 +19,7 @@ export declare const GET_LIST_TYPE: {
 };
 export declare const APP_CODES: {
     DATAFLOWS: string;
+    APP_ANTALYSER: string;
 };
 export declare const PORTALS_IDS: {
     SANDBOX: number;

package/es/constants/variables.js

@@ -20,6 +20,7 @@ export const GET_LIST_TYPE = {
 /* APP_CODES */
 export const APP_CODES = {
     DATAFLOWS: 'DATAFLOWS',
+    APP_ANTALYSER: 'APP_ANTALYSER',
 };
 export const PORTALS_IDS = {
     SANDBOX: 33167,

package/es/providers/AppConfigProvider/contexts/index.d.ts

@@ -5,6 +5,7 @@ export interface AppConfigProps {
     env?: envType;
     auth?: Omit<PayloadInfo, 'url'>;
     appCode?: string;
+    menuCode?: string;
     languageCode?: string;
     urlLogout?: string;
     setAppConfig: React.Dispatch<React.SetStateAction<AppConfigProviderProps>>;

package/package.json

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