@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/CaptureScreen/CaptureScreen.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 // import html2canvas from 'html2canvas';
 import { toPng } from 'html-to-image';
@@ -24,7 +25,6 @@ import { useImageEditor } from './hooks/useImageEditor';
 import { generateUniqueId, initDefaultColors } from './utils';
 import { ArrowGrowIcon, AudioRecordIcon, CheckSlimIcon, CommentIcon, FreeDrawIcon, HighlightIcon, InvisibleIcon, MuteIcon, PauseIcon, StopRecordIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 const CaptureScreen = (props) => {
-    var _a, _b, _c;
     const { captureType, src, defaultPositions, recorderConfigs, callback } = props;
     const [isShowCursor, setIsShowCursor] = useState(false);
     const [drawItemActive, setDrawItemActive] = useState('');
@@ -46,16 +46,15 @@ const CaptureScreen = (props) => {
     });
     const { activateShapeMode, getSettings } = methods;
     const handleMouseMove = useCallback(event => {
-        var _a;
         event.preventDefault();
         event.stopPropagation();
-        const positionX = event === null || event === void 0 ? void 0 : event.clientX;
-        const positionY = event === null || event === void 0 ? void 0 : event.clientY;
+        const positionX = event?.clientX;
+        const positionY = event?.clientY;
         if (!isEmpty(cursorRef.current)) {
             const cursorRefTemp = cursorRef.current;
             cursorRefTemp.style.left = `${positionX}px`;
             cursorRefTemp.style.top = `${positionY}px`;
-            (_a = imageEditorRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('hide-cursor');
+            imageEditorRef.current?.classList.add('hide-cursor');
         }
     }, []);
     useEffect(() => {
@@ -173,7 +172,7 @@ const CaptureScreen = (props) => {
                 canvasUpper.addEventListener('mouseup', handleMouseUp);
             }
             // reset lại draw type đang active và đưa draw về mode NORMAL sau khi add 1 object
-            editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.on('objectAdded', _data => {
+            editorInstance?.on('objectAdded', _data => {
                 setIsMouseDowning(false);
             });
         }
@@ -345,7 +344,10 @@ const CaptureScreen = (props) => {
         if (commentInfoList.length > 0 && !commentInfoList[commentInfoList.length - 1].isSubmitted)
             return;
         const { key } = drawItem;
-        setDrawColors(Object.assign(Object.assign({}, drawColors), { [key]: itemColor }));
+        setDrawColors({
+            ...drawColors,
+            [key]: itemColor,
+        });
         if (isEmpty(editorInstance))
             return;
         handleClickDrawItem(drawItem, itemColor);
@@ -359,7 +361,7 @@ const CaptureScreen = (props) => {
             tempCommentList.splice(commentIndex, 1, dataIn);
         }
         else if (type === 'SUBMIT') {
-            const temp = Object.assign(Object.assign({}, dataIn), { isSubmitted: true });
+            const temp = { ...dataIn, isSubmitted: true };
             tempCommentList.splice(commentIndex, 1, temp);
         }
         else if (type === 'CANCEL') {
@@ -397,20 +399,19 @@ const CaptureScreen = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const handleActionRecorderByType = useCallback((type) => {
-        var _a, _b;
         try {
             if (isEmpty(recorderConfigs) ||
                 !recorderConfigs.recorder ||
                 !recorderConfigs.streamTracks ||
-                !((_a = recorderConfigs.streamTracks) === null || _a === void 0 ? void 0 : _a.desktopStream) ||
-                !((_b = recorderConfigs.streamTracks) === null || _b === void 0 ? void 0 : _b.voiceStream))
+                !recorderConfigs.streamTracks?.desktopStream ||
+                !recorderConfigs.streamTracks?.voiceStream)
                 return;
             switch (type) {
                 case RECORD_KEYS.START: {
                     const recordActionEle = document.getElementById(IGNORE_DRAW_ID_LIST.DRAW_ACTIONS);
-                    if (recordActionEle && (defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record)) {
+                    if (recordActionEle && defaultPositions?.record) {
                         timerIdRef.current = setTimeout(() => {
-                            recordActionEle.style.transform = `translate(${defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record.x}px, ${defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record.y}px)`;
+                            recordActionEle.style.transform = `translate(${defaultPositions?.record.x}px, ${defaultPositions?.record.y}px)`;
                         }, 10);
                     }
                     recorderConfigs.recorder.start();
@@ -474,8 +475,7 @@ const CaptureScreen = (props) => {
         const totalDuration = 2 * 60;
         if (isRecording) {
             intervalId = setInterval(() => {
-                var _a;
-                if (((_a = recorderConfigs.recorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
+                if (recorderConfigs.recorder?.state === 'recording') {
                     setSeconds(prevSeconds => (prevSeconds === 59 ? 0 : prevSeconds + 1));
                     if (seconds === 59) {
                         setMinutes(prevMinutes => prevMinutes + 1);
@@ -499,7 +499,7 @@ const CaptureScreen = (props) => {
         handleActionRecorderByType,
         isRecording,
         minutes,
-        (_a = recorderConfigs.recorder) === null || _a === void 0 ? void 0 : _a.state,
+        recorderConfigs.recorder?.state,
         seconds,
         percentage,
     ]);
@@ -686,23 +686,22 @@ const CaptureScreen = (props) => {
         return null;
     }, [commentInfoList, drawItemActive]);
     const renderIcon = (name, style) => ({
-        'icon-ants-highlight': React.createElement(HighlightIcon, { style: style }),
-        'icon-ants-comment': React.createElement(CommentIcon, { style: style }),
-        'icon-ants-free-draw': React.createElement(FreeDrawIcon, { style: style }),
-        'icon-ants-arrow-grow': React.createElement(ArrowGrowIcon, { style: style }),
-        'icon-ants-invisible': React.createElement(InvisibleIcon, { style: style }),
-        'icon-ants-check-slim': React.createElement(CheckSlimIcon, { style: style }),
-        'icon-ants-audio-record': React.createElement(AudioRecordIcon, { style: style }),
-        'icon-ants-mute': React.createElement(MuteIcon, { style: style }),
-        'icon-ants-pause': React.createElement(PauseIcon, { style: style }),
-        'icon-ants-stop-record': React.createElement(StopRecordIcon, { style: style }),
+        'icon-ants-highlight': _jsx(HighlightIcon, { style: style }),
+        'icon-ants-comment': _jsx(CommentIcon, { style: style }),
+        'icon-ants-free-draw': _jsx(FreeDrawIcon, { style: style }),
+        'icon-ants-arrow-grow': _jsx(ArrowGrowIcon, { style: style }),
+        'icon-ants-invisible': _jsx(InvisibleIcon, { style: style }),
+        'icon-ants-check-slim': _jsx(CheckSlimIcon, { style: style }),
+        'icon-ants-audio-record': _jsx(AudioRecordIcon, { style: style }),
+        'icon-ants-mute': _jsx(MuteIcon, { style: style }),
+        'icon-ants-pause': _jsx(PauseIcon, { style: style }),
+        'icon-ants-stop-record': _jsx(StopRecordIcon, { style: style }),
     })[name];
     const renderDrawActionList = () => DRAW_ACTION_LIST.map(drawItem => {
-        var _a, _b, _c, _d;
-        if ((drawItem === null || drawItem === void 0 ? void 0 : drawItem.type) === 'divider') {
-            return React.createElement(Divider, { isVertical: true, key: drawItem.key, style: { width: styleDrawItem.SMALL } });
+        if (drawItem?.type === 'divider') {
+            return _jsx(Divider, { isVertical: true, style: { width: styleDrawItem.SMALL } }, drawItem.key);
         }
-        return (React.createElement(DrawerGroupItem, { key: drawItem.key, className: clsx({
+        return (_jsxs(DrawerGroupItem, { className: clsx({
                 active: drawItemActive === drawItem.key,
                 'hide-hover': [DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key),
             }), style: {
@@ -714,112 +713,73 @@ const CaptureScreen = (props) => {
                 width: ![DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key)
                     ? styleDrawItem.MEDIUM
                     : 'auto',
-            }, onClick: () => handleClickDrawItem(drawItem) },
-            React.createElement(FlexColumn, null, [DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key) ? (React.createElement(Button, { type: drawItem.key === DRAW_KEYS.DONE ? 'primary' : 'default', style: { fontWeight: 'bold', flexDirection: 'row-reverse' }, icon: drawItem.key === DRAW_KEYS.DONE
-                    ? renderIcon('icon-ants-check-slim', {
-                        fontSize: '24px',
-                        color: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`,
-                    })
-                    : undefined }, drawItem.label)) : (renderIcon(drawItem.icon, {
-                maxWidth: '24px',
-                fill: `${drawItemActive === drawItem.key
-                    ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary
-                    : (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}`,
-            }))),
-            drawItem.isShowColorList && (React.createElement(PopupBySide, { className: "toggle-popup-by-side" },
-                React.createElement(Heading, null, drawItem.label),
-                React.createElement(WrapperColor, null, (_d = drawItem.colorList) === null || _d === void 0 ? void 0 : _d.map(itemColor => {
-                    var _a;
-                    return (React.createElement(BoxColor, { key: `${drawItem.key}-${itemColor}`, bgColor: itemColor, onClick: e => handleSetColorByKey(e, drawItem, itemColor) }, drawColors[drawItem.key] === itemColor && (
-                    // <Icon
-                    //   type="icon-ants-check-slim"
-                    //   style={{ color: `${THEME.token?.bw0}`, fontSize: '20px' }}
-                    // />
-                    React.createElement(CheckSlimIcon, { style: {
-                            fill: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`,
-                            maxWidth: '20px',
-                        } }))));
-                }))))));
-    });
-    const renderRecordActionList = () => {
-        var _a, _b, _c, _d;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(WrapperDraggable, { className: "cursor", style: { height: '100%' } },
-                React.createElement(FlexColumn, null,
-                    React.createElement(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5)' } }))),
-            React.createElement(Divider, { isVertical: true }),
-            !isRecording ? (React.createElement(DrawerGroupItem, { style: styleRecordItem, className: clsx({ active: recordingItemActive === RECORD_KEYS.STOP }), onClick: () => handleActionRecorderByType(RECORD_KEYS.START) },
-                React.createElement(FlexColumn, null,
-                    React.createElement(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon" })))) : (React.createElement(React.Fragment, null,
-                React.createElement(DrawerGroupItem, { className: clsx({
-                        active: recordingItemActive === RECORD_KEYS.STOP,
-                    }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.STOP) },
-                    React.createElement(FlexColumn, null, renderIcon('icon-ants-stop-record', {
+            }, onClick: () => handleClickDrawItem(drawItem), children: [_jsx(FlexColumn, { children: [DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key) ? (_jsx(Button, { type: drawItem.key === DRAW_KEYS.DONE ? 'primary' : 'default', style: { fontWeight: 'bold', flexDirection: 'row-reverse' }, icon: drawItem.key === DRAW_KEYS.DONE
+                            ? renderIcon('icon-ants-check-slim', {
+                                fontSize: '24px',
+                                color: `${THEME.token?.bw0}`,
+                            })
+                            : undefined, children: drawItem.label })) : (renderIcon(drawItem.icon, {
                         maxWidth: '24px',
-                        fill: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red8}`,
-                    }))),
-                React.createElement(DrawerGroupItem
-                // key={recordItem.key}
-                , { 
+                        fill: `${drawItemActive === drawItem.key
+                            ? THEME.token?.colorPrimary
+                            : THEME.token?.colorIcon}`,
+                    })) }), drawItem.isShowColorList && (_jsxs(PopupBySide, { className: "toggle-popup-by-side", children: [_jsx(Heading, { children: drawItem.label }), _jsx(WrapperColor, { children: drawItem.colorList?.map(itemColor => (_jsx(BoxColor, { bgColor: itemColor, onClick: e => handleSetColorByKey(e, drawItem, itemColor), children: drawColors[drawItem.key] === itemColor && (
+                                // <Icon
+                                //   type="icon-ants-check-slim"
+                                //   style={{ color: `${THEME.token?.bw0}`, fontSize: '20px' }}
+                                // />
+                                _jsx(CheckSlimIcon, { style: {
+                                        fill: `${THEME.token?.bw0}`,
+                                        maxWidth: '20px',
+                                    } })) }, `${drawItem.key}-${itemColor}`))) })] }))] }, drawItem.key));
+    });
+    const renderRecordActionList = () => (_jsxs(_Fragment, { children: [_jsx(WrapperDraggable, { className: "cursor", style: { height: '100%' }, children: _jsx(FlexColumn, { children: _jsx(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5)' } }) }) }), _jsx(Divider, { isVertical: true }), !isRecording ? (_jsx(DrawerGroupItem, { style: styleRecordItem, className: clsx({ active: recordingItemActive === RECORD_KEYS.STOP }), onClick: () => handleActionRecorderByType(RECORD_KEYS.START), children: _jsx(FlexColumn, { children: _jsx(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon" }) }) })) : (_jsxs(_Fragment, { children: [_jsx(DrawerGroupItem, { className: clsx({
+                            active: recordingItemActive === RECORD_KEYS.STOP,
+                        }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.STOP), children: _jsx(FlexColumn, { children: renderIcon('icon-ants-stop-record', {
+                                maxWidth: '24px',
+                                fill: `${THEME.token?.red8}`,
+                            }) }) }), _jsx(DrawerGroupItem
                     // key={recordItem.key}
-                    className: clsx({
-                        active: recordingItemActive === RECORD_KEYS.PAUSE,
-                    }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.PAUSE) },
-                    React.createElement(FlexColumn, null, recordingItemActive === RECORD_KEYS.PAUSE ? (React.createElement(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon", style: { width: 22, height: 22 } })) : (renderIcon('icon-ants-pause', {
-                        maxWidth: '24px',
-                        fill: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon}`,
-                    })))))),
-            recorderConfigs && recorderConfigs.isMute ? (React.createElement(DrawerGroupItem, { className: clsx({
+                    , { 
+                        // key={recordItem.key}
+                        className: clsx({
+                            active: recordingItemActive === RECORD_KEYS.PAUSE,
+                        }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.PAUSE), children: _jsx(FlexColumn, { children: recordingItemActive === RECORD_KEYS.PAUSE ? (_jsx(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon", style: { width: 22, height: 22 } })) : (renderIcon('icon-ants-pause', {
+                                maxWidth: '24px',
+                                fill: `${THEME.token?.colorIcon}`,
+                            })) }) })] })), recorderConfigs && recorderConfigs.isMute ? (_jsx(DrawerGroupItem, { className: clsx({
                     active: recordingItemActive === RECORD_KEYS.UNMUTE,
-                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.UNMUTE) },
-                React.createElement(FlexColumn, null, renderIcon('icon-ants-mute', {
-                    maxWidth: '24px',
-                    fill: `${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}`,
-                })))) : (React.createElement(DrawerGroupItem, { className: clsx({
+                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.UNMUTE), children: _jsx(FlexColumn, { children: renderIcon('icon-ants-mute', {
+                        maxWidth: '24px',
+                        fill: `${THEME.token?.colorIcon}`,
+                    }) }) })) : (_jsx(DrawerGroupItem, { className: clsx({
                     active: recordingItemActive === RECORD_KEYS.MUTED,
-                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.MUTED) },
-                React.createElement(FlexColumn, null, renderIcon('icon-ants-audio-record', {
-                    maxWidth: '24px',
-                    fill: `${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon}`,
-                })))),
-            isRecording && (React.createElement(DrawerGroupItem, { style: Object.assign(Object.assign({}, styleRecordItem), { width: 130 }), className: "timer-recording" },
-                React.createElement(FlexCenter, null,
-                    React.createElement(Progress, { percent: percentage, showInfo: false, style: { width: 100, margin: 0 } }),
-                    React.createElement(Heading, { style: { whiteSpace: 'nowrap' } }, `${minutes}:${seconds
-                        .toString()
-                        .padStart(2, '0')}`))))));
-    };
+                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.MUTED), children: _jsx(FlexColumn, { children: renderIcon('icon-ants-audio-record', {
+                        maxWidth: '24px',
+                        fill: `${THEME.token?.colorIcon}`,
+                    }) }) })), isRecording && (_jsx(DrawerGroupItem, { style: { ...styleRecordItem, width: 130 }, className: "timer-recording", children: _jsxs(FlexCenter, { children: [_jsx(Progress, { percent: percentage, showInfo: false, style: { width: 100, margin: 0 } }), _jsx(Heading, { style: { whiteSpace: 'nowrap' }, children: `${minutes}:${seconds
+                                .toString()
+                                .padStart(2, '0')}` })] }) }))] }));
     const renderPopupAction = (type) => {
         if (type === ATTACH_KEYS.RECORD) {
-            return (React.createElement(PopupDraggable, { bounds: "body", name: ATTACH_KEYS.RECORD, defaultPosition: defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: styleContainer, callback: callback }, renderRecordActionList()));
+            return (_jsx(PopupDraggable, { bounds: "body", name: ATTACH_KEYS.RECORD, defaultPosition: defaultPositions?.record, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: styleContainer, callback: callback, children: renderRecordActionList() }));
         }
-        return (!isMouseDowning && (React.createElement(PopupDraggable, { defaultPosition: defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.capture, bounds: "body", name: ATTACH_KEYS.CAPTURE, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: Object.assign(Object.assign({}, styleContainer), { height: styleDrawItem.LARGE, minHeight: styleDrawItem.LARGE, padding: '0px 5px' }), callback: callback },
-            React.createElement(DrawerGroups, { id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, style: { height: styleDrawItem.LARGE } },
-                React.createElement(WrapperDraggable, { className: "cursor", style: {
-                        height: styleDrawItem.SMALL,
-                        width: styleDrawItem.MEDIUM,
-                        marginRight: 6,
-                        padding: 'unset',
-                    } },
-                    React.createElement(FlexColumn, null,
-                        React.createElement(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5' } }))),
-                React.createElement(Divider, { isVertical: true, style: { width: styleDrawItem.SMALL } }),
-                renderDrawActionList()))));
+        return (!isMouseDowning && (_jsx(PopupDraggable, { defaultPosition: defaultPositions?.capture, bounds: "body", name: ATTACH_KEYS.CAPTURE, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: {
+                ...styleContainer,
+                height: styleDrawItem.LARGE,
+                minHeight: styleDrawItem.LARGE,
+                padding: '0px 5px',
+            }, callback: callback, children: _jsxs(DrawerGroups, { id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, style: { height: styleDrawItem.LARGE }, children: [_jsx(WrapperDraggable, { className: "cursor", style: {
+                            height: styleDrawItem.SMALL,
+                            width: styleDrawItem.MEDIUM,
+                            marginRight: 6,
+                            padding: 'unset',
+                        }, children: _jsx(FlexColumn, { children: _jsx(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5' } }) }) }), _jsx(Divider, { isVertical: true, style: { width: styleDrawItem.SMALL } }), renderDrawActionList()] }) })));
     };
-    const renderCommentList = (commentList) => commentList.map(commentItem => (React.createElement(CommentBox, { key: commentItem.id, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, boxDimension: COMMENT_BOX_DIMENSION_FIXED, offset: OFFSET_CENTER, info: commentItem, onChangeComment: handleChangeComment })));
-    return (React.createElement(ContainerCapture, { imageURL: src, isRecord: captureType === ATTACH_KEYS.RECORD, ref: imageEditorRef },
-        React.createElement(Cursor, { drawItemType: drawItemActive, cursorRef: cursorRef, isShowCursor: isShowCursor && !isMouseDowning, isPointerBox: drawItemActive === DRAW_KEYS.COMMENT, bgColor: drawColors[drawItemActive], offset: OFFSET_CENTER }, numberCommentCursor),
-        captureType === ATTACH_KEYS.CAPTURE && (React.createElement(React.Fragment, null,
-            renderCommentList(commentInfoList),
-            React.createElement(BorderOverlay, { id: IGNORE_DRAW_ID_LIST.BORDER_OVERLAY, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER }),
-            React.createElement(WrapperIcon, { id: IGNORE_DRAW_ID_LIST.ICON_CLOSE, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, 
-                // isRecord={captureType === ATTACH_KEYS.RECORD}
-                onClick: () => callback('CLOSE_DRAWER') },
-                React.createElement(Icon, { type: "icon-ants-remove-slim", style: { color: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0}`, fontSize: '12px' } })),
-            React.createElement(OutlineRemoveContainer, { ref: outlineRemoveContainerRef }),
-            React.createElement(WrapperRemoveBtn, { ref: wrapperRemoveBtnRef, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER },
-                React.createElement(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}` } })))),
-        renderPopupAction(captureType)));
+    const renderCommentList = (commentList) => commentList.map(commentItem => (_jsx(CommentBox, { className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, boxDimension: COMMENT_BOX_DIMENSION_FIXED, offset: OFFSET_CENTER, info: commentItem, onChangeComment: handleChangeComment }, commentItem.id)));
+    return (_jsxs(ContainerCapture, { imageURL: src, isRecord: captureType === ATTACH_KEYS.RECORD, ref: imageEditorRef, children: [_jsx(Cursor, { drawItemType: drawItemActive, cursorRef: cursorRef, isShowCursor: isShowCursor && !isMouseDowning, isPointerBox: drawItemActive === DRAW_KEYS.COMMENT, bgColor: drawColors[drawItemActive], offset: OFFSET_CENTER, children: numberCommentCursor }), captureType === ATTACH_KEYS.CAPTURE && (_jsxs(_Fragment, { children: [renderCommentList(commentInfoList), _jsx(BorderOverlay, { id: IGNORE_DRAW_ID_LIST.BORDER_OVERLAY, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER }), _jsx(WrapperIcon, { id: IGNORE_DRAW_ID_LIST.ICON_CLOSE, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, 
+                        // isRecord={captureType === ATTACH_KEYS.RECORD}
+                        onClick: () => callback('CLOSE_DRAWER'), children: _jsx(Icon, { type: "icon-ants-remove-slim", style: { color: `${THEME.token?.bw0}`, fontSize: '12px' } }) }), _jsx(OutlineRemoveContainer, { ref: outlineRemoveContainerRef }), _jsx(WrapperRemoveBtn, { ref: wrapperRemoveBtnRef, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, children: _jsx(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${THEME.token?.colorIcon}` } }) })] })), renderPopupAction(captureType)] }));
 };
 CaptureScreen.defaultProps = {
     isOpen: false,

package/es/components/molecules/CaptureScreen/components/CommentBox/CommentBox.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { CommentBoxProps } from './types';
 declare const CommentBox: {
-    (props: CommentBoxProps): React.JSX.Element;
+    (props: CommentBoxProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         info: {
             id: string;

package/es/components/molecules/CaptureScreen/components/CommentBox/CommentBox.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
 // Components
 import Icon from '@antscorp/icons';
@@ -12,7 +13,6 @@ import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
 import { CommentBoxed, CommentPoint, RoundedDashed, TextArea, WrapperIcon } from './styled';
 const LIMIT_CONTENT_COMMENT = 200;
 const CommentBox = (props) => {
-    var _a;
     const { info, offset, className, boxDimension, onChangeComment } = props;
     const [activeDrags, setActiveDrags] = useState(0);
     const [positionDrag] = useState({
@@ -41,30 +41,19 @@ const CommentBox = (props) => {
     };
     useEffect(() => {
         if (typeof onChangeComment === 'function') {
-            onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), debouncedPosition));
+            onChangeComment('CHANGE_CONTENT', { ...info, ...debouncedPosition });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [debouncedPosition]);
-    return (React.createElement(Draggable, { bounds: "canvas", onDrag: handleDrag, onStart: handleStart, onStop: handleStop },
-        React.createElement(CommentPoint, { color: info.color, isSubmitted: info.isSubmitted, id: info.id, offset: offset, left: info.left, top: info.top, className: `${className} comment-point` },
-            info.index,
-            React.createElement(CommentBoxed, { boxDimension: boxDimension, isReverseAxisX: info.isReverseAxisX, isReverseAxisY: info.isReverseAxisY, className: className },
-                React.createElement(Space, { direction: "vertical", size: 10 },
-                    React.createElement(TextArea, { placeholder: "Enter comment \u2026", value: info.content, disabled: info.isSubmitted, maxLength: LIMIT_CONTENT_COMMENT, onChange: event => {
-                            const { value } = event === null || event === void 0 ? void 0 : event.target;
-                            if (value && value.length <= LIMIT_CONTENT_COMMENT) {
-                                onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), { content: value }));
-                            }
-                        } }),
-                    !info.isSubmitted && (React.createElement(Space, { size: 15 },
-                        React.createElement(Button, { type: "primary", disabled: !info.content, style: { height: 28 }, onClick: () => onChangeComment('SUBMIT', info) }, "Comment"),
-                        React.createElement(Button, { style: { height: 28 }, onClick: () => onChangeComment('CANCEL', info) }, "Cancel"))))),
-            React.createElement(RoundedDashed, { offset: offset, className: "rounded-dashed" }),
-            React.createElement(WrapperIcon, { className: "icon-close-comment", onClick: e => {
-                    e.stopPropagation();
-                    onChangeComment('CANCEL', info);
-                } },
-                React.createElement(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon}` } })))));
+    return (_jsx(Draggable, { bounds: "canvas", onDrag: handleDrag, onStart: handleStart, onStop: handleStop, children: _jsxs(CommentPoint, { color: info.color, isSubmitted: info.isSubmitted, id: info.id, offset: offset, left: info.left, top: info.top, className: `${className} comment-point`, children: [info.index, _jsx(CommentBoxed, { boxDimension: boxDimension, isReverseAxisX: info.isReverseAxisX, isReverseAxisY: info.isReverseAxisY, className: className, children: _jsxs(Space, { direction: "vertical", size: 10, children: [_jsx(TextArea, { placeholder: "Enter comment \u2026", value: info.content, disabled: info.isSubmitted, maxLength: LIMIT_CONTENT_COMMENT, onChange: event => {
+                                    const { value } = event?.target;
+                                    if (value && value.length <= LIMIT_CONTENT_COMMENT) {
+                                        onChangeComment('CHANGE_CONTENT', { ...info, content: value });
+                                    }
+                                } }), !info.isSubmitted && (_jsxs(Space, { size: 15, children: [_jsx(Button, { type: "primary", disabled: !info.content, style: { height: 28 }, onClick: () => onChangeComment('SUBMIT', info), children: "Comment" }), _jsx(Button, { style: { height: 28 }, onClick: () => onChangeComment('CANCEL', info), children: "Cancel" })] }))] }) }), _jsx(RoundedDashed, { offset: offset, className: "rounded-dashed" }), _jsx(WrapperIcon, { className: "icon-close-comment", onClick: e => {
+                        e.stopPropagation();
+                        onChangeComment('CANCEL', info);
+                    }, children: _jsx(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${THEME.token?.colorIcon}` } }) })] }) }));
 };
 CommentBox.defaultProps = {
     info: {

package/es/components/molecules/CaptureScreen/components/CommentBox/styled.js

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f;
 // Libraries
 import styled, { css } from 'styled-components';
 // Constants
@@ -17,14 +16,14 @@ export const CommentPoint = styled.div `
   border-radius: 50%;
 
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
-  /* background-color: ${props => { var _a; return props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${props.color}`; }}; */
-  background-color: ${props => { var _a; return (props.color ? props.color : `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`); }};
-  /* color: ${props => { var _a, _b; return (props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue8}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0}`); }}; */
-  color: ${props => { var _a, _b; return (props.color ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText}`); }};
+  /* background-color: ${props => props.isSubmitted ? `${THEME.token?.bw0}` : `${props.color}`}; */
+  background-color: ${props => (props.color ? props.color : `${THEME.token?.bw0}`)};
+  /* color: ${props => (props.isSubmitted ? `${THEME.token?.blue8}` : `${THEME.token?.bw0}`)}; */
+  color: ${props => (props.color ? `${THEME.token?.bw0}` : `${THEME.token?.colorText}`)};
   font-size: 16px;
 
   /* pointer-events: ${props => (props.isSubmitted ? 'none' : 'visible')}; */
-  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+  font-family: ${THEME.token?.fontFamily};
   z-index: 99;
   cursor: grab;
 
@@ -52,11 +51,11 @@ export const CommentBoxed = styled.div `
   /* height: 170px; */
   max-height: ${props => props.boxDimension.height}px;
   padding: 15px;
-  border-radius: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius}px;
+  border-radius: ${THEME.token?.borderRadius}px;
 
   box-shadow: 0px 11px 15px 0 rgba(0, 0, 0, 0.2);
-  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
-  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
+  background-color: ${THEME.token?.bw0};
+  font-family: ${THEME.token?.fontFamily};
   cursor: grab;
 
   ::before {
@@ -72,28 +71,25 @@ export const CommentBoxed = styled.div `
   }
 
   /* Tính toán lại vị trí của box comment khi box bị che */
-  ${props => {
-    var _a, _b;
-    return props.isReverseAxisY
-        ? css `
+  ${props => props.isReverseAxisY
+    ? css `
           bottom: 50%;
           border-bottom-left-radius: 0px;
 
           ::before {
             bottom: 0;
-            border-bottom-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+            border-bottom-color: ${THEME.token?.bw0};
           }
         `
-        : css `
+    : css `
           top: 50%;
           border-top-left-radius: 0px;
 
           ::before {
             top: 0;
-            border-top-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0};
+            border-top-color: ${THEME.token?.bw0};
           }
-        `;
-}}
+        `}
 
   ${props => props.isReverseAxisX
     ? css `
@@ -117,8 +113,8 @@ export const TextArea = styled.textarea `
   padding: 10px;
   border: solid 1px rgba(0, 0, 0, 0.12);
   outline: none;
-  font-family: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontFamily};
-  font-size: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.fontSize}px;
+  font-family: ${THEME.token?.fontFamily};
+  font-size: ${THEME.token?.fontSize}px;
   color: #999999;
   resize: none;
 `;

package/es/components/molecules/CaptureScreen/components/Cursor/Cursor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CursorProps } from './types';
-declare const Cursor: (props: CursorProps) => React.JSX.Element | null;
+declare const Cursor: (props: CursorProps) => import("react/jsx-runtime").JSX.Element | null;
 export { Cursor };

package/es/components/molecules/CaptureScreen/components/Cursor/Cursor.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Styled
 import { DottedCursor, PlusCursor, TooltipDrag } from './styled';
 // Constants
@@ -9,9 +8,8 @@ const Cursor = (props) => {
     if (!isShowCursor)
         return null;
     if (drawItemType === DRAW_KEYS.HIGHLIGHT) {
-        return (React.createElement(PlusCursor, { ref: cursorRef },
-            React.createElement(TooltipDrag, null, "Click & drag to draw")));
+        return (_jsx(PlusCursor, { ref: cursorRef, children: _jsx(TooltipDrag, { children: "Click & drag to draw" }) }));
     }
-    return (React.createElement(DottedCursor, { isPointerBox: isPointerBox, offset: offset, ref: cursorRef, bgColor: bgColor }, children));
+    return (_jsx(DottedCursor, { isPointerBox: isPointerBox, offset: offset, ref: cursorRef, bgColor: bgColor, children: children }));
 };
 export { Cursor };

package/es/components/molecules/CaptureScreen/components/Cursor/styled.js

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e;
 // Libraries
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Constants
@@ -30,11 +29,11 @@ export const TooltipDrag = styled.div `
   transform: translateY(-50%);
   height: 30px;
   padding: 0px 8px;
-  border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
+  border-radius: ${THEME.token?.borderRadius}px;
   background-color: #515151;
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
-  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
-  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
+  font-size: ${THEME.token?.fontSize}px;
+  color: ${THEME.token?.bw0};
+  font-family: ${THEME.token?.fontFamily};
   line-height: 30px;
   white-space: nowrap;
   box-sizing: border-box;
@@ -50,16 +49,14 @@ export const DottedCursor = styled.div `
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  border: 3px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0};
+  border: 3px solid ${THEME.token?.bw0};
   box-sizing: border-box;
   cursor: none;
   pointer-events: none;
   z-index: 999999;
 
-  ${props => {
-    var _a, _b, _c;
-    return props.isPointerBox &&
-        css `
+  ${props => props.isPointerBox &&
+    css `
       display: flex;
       justify-content: center;
       align-items: center;
@@ -69,11 +66,10 @@ export const DottedCursor = styled.div `
       border-radius: 50%;
 
       box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
-      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
-      color: ${props.bgColor ? props.bgColor : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0};
+      background-color: ${THEME.token?.bw0};
+      color: ${props.bgColor ? props.bgColor : THEME.token?.bw0};
       font-size: 16px;
 
-      font-family: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontFamily};
-    `;
-}}
+      font-family: ${THEME.token?.fontFamily};
+    `}
 `;

package/es/components/molecules/CaptureScreen/constants.js

@@ -1,4 +1,3 @@
-var _a, _b;
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const OFFSET_CENTER = 20;
@@ -31,8 +30,8 @@ export const styleContainer = {
     height: 52,
     padding: '0px 10px',
     boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.2)',
-    backgroundColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0,
-    borderRadius: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius,
+    backgroundColor: THEME.token?.bw0,
+    borderRadius: THEME.token?.borderRadius,
     top: 'unset',
     bottom: '20px',
     right: '50%',