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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { CommentBoxProps } from './types';
-declare const CommentBox: {
-    (props: CommentBoxProps): React.JSX.Element;
-    defaultProps: {
-        info: {
-            id: string;
-            top: number;
-            left: number;
-            index: number;
-            isSubmitted: boolean;
-        };
-        offset: number;
-        onChangeComment: () => void;
-    };
-};
-export { CommentBox };

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

@@ -1,80 +0,0 @@
-// Libraries
-import React, { useEffect, useState } from 'react';
-import Draggable from 'react-draggable';
-// Components
-import Icon from '@antscorp/icons';
-import { Space, Button } from 'antd';
-// Constanst
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-// Hooks
-import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
-// Styled
-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({
-        top: info.top,
-        left: info.left,
-    });
-    const [debouncedPosition, _positionOriginal, setPositionDrag] = useDebounce(positionDrag, 400);
-    const handleStart = () => {
-        setActiveDrags(activeDrags + 1);
-    };
-    const handleStop = () => {
-        setActiveDrags(activeDrags - 1);
-    };
-    const handleDrag = (_e, _ui) => {
-        try {
-            const left = _ui.node.offsetLeft;
-            const top = _ui.node.offsetTop;
-            setPositionDrag({
-                left,
-                top,
-            });
-        }
-        catch (error) {
-            console.log('error :>', error);
-        }
-    };
-    useEffect(() => {
-        if (typeof onChangeComment === 'function') {
-            onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, 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}` } })))));
-};
-CommentBox.defaultProps = {
-    info: {
-        id: 'random_id',
-        top: 50,
-        left: 50,
-        index: 1,
-        isSubmitted: false,
-    },
-    offset: 20,
-    onChangeComment: () => { },
-};
-export { CommentBox };

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

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

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

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

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

@@ -1,12 +0,0 @@
-import { BoxDimensionProps, CommentPointProps } from './types';
-export declare const CommentPoint: import("styled-components").StyledComponent<"div", any, CommentPointProps, never>;
-export declare const RoundedDashed: import("styled-components").StyledComponent<"div", any, {
-    offset: number;
-}, never>;
-export declare const CommentBoxed: import("styled-components").StyledComponent<"div", any, {
-    boxDimension: BoxDimensionProps;
-    isReverseAxisX: boolean;
-    isReverseAxisY: boolean;
-}, never>;
-export declare const TextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;
-export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,136 +0,0 @@
-var _a, _b, _c, _d, _e, _f;
-// Libraries
-import styled, { css } from 'styled-components';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const CommentPoint = styled.div `
-  position: fixed;
-  top: ${props => props.top}px;
-  left: ${props => props.left}px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: ${props => props.offset * 2}px;
-  height: ${props => props.offset * 2}px;
-  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}`); }};
-  font-size: 16px;
-
-  /* pointer-events: ${props => (props.isSubmitted ? 'none' : 'visible')}; */
-  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
-  z-index: 99;
-  cursor: grab;
-
-  :hover {
-    z-index: 999999;
-  }
-
-  :hover .icon-close-comment,
-  :hover .rounded-dashed {
-    display: block;
-  }
-`;
-export const RoundedDashed = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-  border: 2px dashed #707070;
-  width: ${props => props.offset * 2 + 1}px;
-  height: ${props => props.offset * 2 + 1}px;
-`;
-export const CommentBoxed = styled.div `
-  position: absolute;
-  width: ${props => props.boxDimension.width}px;
-  /* 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;
-
-  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};
-  cursor: grab;
-
-  ::before {
-    content: '';
-    position: absolute;
-    display: block;
-    border: 16px solid transparent;
-  }
-
-  :hover ~ .icon-close-comment,
-  :hover ~ .rounded-dashed {
-    display: none;
-  }
-
-  /* Tính toán lại vị trí của box comment khi box bị che */
-  ${props => {
-    var _a, _b;
-    return 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};
-          }
-        `
-        : 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};
-          }
-        `;
-}}
-
-  ${props => props.isReverseAxisX
-    ? css `
-          right: calc(100% + 24px);
-
-          ::before {
-            right: -15px;
-          }
-        `
-    : css `
-          left: calc(100% + 24px);
-
-          ::before {
-            left: -15px;
-          }
-        `}
-`;
-export const TextArea = styled.textarea `
-  width: 300px;
-  height: 100px;
-  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;
-  color: #999999;
-  resize: none;
-`;
-export const WrapperIcon = styled.div `
-  position: absolute;
-  top: 0;
-  left: 80%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(-50%);
-
-  display: none;
-  z-index: 10;
-`;

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

@@ -1,15 +0,0 @@
-import { CommentListProps } from '../../types';
-export interface BoxDimensionProps {
-    width: number;
-    height: number;
-}
-export interface CommentBoxProps {
-    className?: string;
-    info: CommentListProps;
-    offset: number;
-    boxDimension: BoxDimensionProps;
-    onChangeComment: Function;
-}
-export interface CommentPointProps extends Pick<CommentListProps, 'left' | 'top' | 'isSubmitted' | 'color'> {
-    offset: number;
-}

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

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

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

@@ -1,17 +0,0 @@
-// Libraries
-import React from 'react';
-// Styled
-import { DottedCursor, PlusCursor, TooltipDrag } from './styled';
-// Constants
-import { DRAW_KEYS } from '../../constants';
-const Cursor = (props) => {
-    const { bgColor, cursorRef, drawItemType, isShowCursor, isPointerBox, offset, children } = 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 (React.createElement(DottedCursor, { isPointerBox: isPointerBox, offset: offset, ref: cursorRef, bgColor: bgColor }, children));
-};
-export { Cursor };

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

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

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

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

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

@@ -1,7 +0,0 @@
-export declare const PlusCursor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TooltipDrag: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DottedCursor: import("styled-components").StyledComponent<"div", any, {
-    bgColor?: string | undefined;
-    isPointerBox?: boolean | undefined;
-    offset: number;
-}, never>;

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

@@ -1,79 +0,0 @@
-var _a, _b, _c, _d, _e;
-// Libraries
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-// Constants
-import styled, { css } from 'styled-components';
-export const PlusCursor = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: red;
-  width: 30px;
-  height: 30px;
-  /* border-radius: 50%; */
-  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
-  background-position: center;
-  background-size: 90% 2px, 2px 90%; /*thickness = 2px, length = 50% (25px)*/
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  cursor: none;
-  pointer-events: none;
-  z-index: 999999;
-`;
-export const TooltipDrag = styled.div `
-  position: absolute;
-  top: 50%;
-  /* left: 50%; */
-  left: calc(100% + 10px);
-  /* transform: translate(-50%, -50%); */
-  transform: translateY(-50%);
-  height: 30px;
-  padding: 0px 8px;
-  border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.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};
-  line-height: 30px;
-  white-space: nowrap;
-  box-sizing: border-box;
-  user-select: none;
-  z-index: 9999;
-`;
-export const DottedCursor = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: ${props => props.bgColor || '#0f2eae'};
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 3px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0};
-  box-sizing: border-box;
-  cursor: none;
-  pointer-events: none;
-  z-index: 999999;
-
-  ${props => {
-    var _a, _b, _c;
-    return props.isPointerBox &&
-        css `
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: ${props.offset * 2}px;
-      height: ${props.offset * 2}px;
-      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};
-      font-size: 16px;
-
-      font-family: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontFamily};
-    `;
-}}
-`;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface CursorProps {
-    drawItemType: string;
-    isShowCursor: boolean;
-    cursorRef?: React.RefObject<HTMLDivElement>;
-    bgColor?: string;
-    isPointerBox?: boolean;
-    offset: number;
-    children?: any;
-}

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,41 +0,0 @@
-import { CSSProperties } from 'react';
-import { BoxDimensionProps } from './components/CommentBox/types';
-import { DrawItemProps } from './types';
-export declare const OFFSET_CENTER = 20;
-export declare const SIZE_ADJUST = 1;
-export declare enum IGNORE_DRAW_ID_LIST {
-    ICON_CLOSE = "antsomi-package-close-draw-icon",
-    BORDER_OVERLAY = "antsomi-package-border-overlay",
-    DRAW_ACTIONS = "antsomi-package-draw-action-options",
-    CLASS_PREVENT_HOVER = "antsomi-package-ignore-hovering-draw"
-}
-export declare const COMMENT_BOX_DIMENSION_FIXED: BoxDimensionProps;
-export declare const styleDrawItem: {
-    MEDIUM: number;
-    SMALL: number;
-    LARGE: number;
-};
-export declare const styleRecordItem: CSSProperties;
-export declare const styleContainer: CSSProperties;
-export declare enum DRAW_KEYS {
-    NULL = "null",
-    HIGHLIGHT = "highlight",
-    COMMENT = "comment",
-    PEN = "pen",
-    ARROW = "arrow",
-    HIDE = "hide",
-    DONE = "done",
-    CANCEL = "cancel"
-}
-export declare enum RECORD_KEYS {
-    DRAGGABLE = "draggable",
-    NULL = "null",
-    START = "start_recorder",
-    STOP = "stop_recorder",
-    PAUSE = "pause_recorder",
-    RESUME = "resume_recorder",
-    UNMUTE = "unmute_recorder",
-    MUTED = "muted_recorder",
-    TIMELINE = "timeline_recorder"
-}
-export declare const DRAW_ACTION_LIST: Array<DrawItemProps>;

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

@@ -1,118 +0,0 @@
-var _a, _b;
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const OFFSET_CENTER = 20;
-export const SIZE_ADJUST = 1.0;
-export var IGNORE_DRAW_ID_LIST;
-(function (IGNORE_DRAW_ID_LIST) {
-    IGNORE_DRAW_ID_LIST["ICON_CLOSE"] = "antsomi-package-close-draw-icon";
-    IGNORE_DRAW_ID_LIST["BORDER_OVERLAY"] = "antsomi-package-border-overlay";
-    IGNORE_DRAW_ID_LIST["DRAW_ACTIONS"] = "antsomi-package-draw-action-options";
-    IGNORE_DRAW_ID_LIST["CLASS_PREVENT_HOVER"] = "antsomi-package-ignore-hovering-draw";
-})(IGNORE_DRAW_ID_LIST || (IGNORE_DRAW_ID_LIST = {}));
-export const COMMENT_BOX_DIMENSION_FIXED = {
-    width: 330,
-    height: 170,
-};
-export const styleDrawItem = {
-    MEDIUM: 33,
-    SMALL: 31,
-    LARGE: 43,
-};
-export const styleRecordItem = {
-    height: '100%',
-    padding: 10,
-};
-export const styleContainer = {
-    display: 'flex',
-    alignItems: 'center',
-    minWidth: 133,
-    width: 'auto',
-    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,
-    top: 'unset',
-    bottom: '20px',
-    right: '50%',
-    zIndex: 999,
-};
-export var DRAW_KEYS;
-(function (DRAW_KEYS) {
-    DRAW_KEYS["NULL"] = "null";
-    DRAW_KEYS["HIGHLIGHT"] = "highlight";
-    DRAW_KEYS["COMMENT"] = "comment";
-    DRAW_KEYS["PEN"] = "pen";
-    DRAW_KEYS["ARROW"] = "arrow";
-    DRAW_KEYS["HIDE"] = "hide";
-    DRAW_KEYS["DONE"] = "done";
-    DRAW_KEYS["CANCEL"] = "cancel";
-})(DRAW_KEYS || (DRAW_KEYS = {}));
-export var RECORD_KEYS;
-(function (RECORD_KEYS) {
-    RECORD_KEYS["DRAGGABLE"] = "draggable";
-    RECORD_KEYS["NULL"] = "null";
-    RECORD_KEYS["START"] = "start_recorder";
-    RECORD_KEYS["STOP"] = "stop_recorder";
-    RECORD_KEYS["PAUSE"] = "pause_recorder";
-    RECORD_KEYS["RESUME"] = "resume_recorder";
-    RECORD_KEYS["UNMUTE"] = "unmute_recorder";
-    RECORD_KEYS["MUTED"] = "muted_recorder";
-    RECORD_KEYS["TIMELINE"] = "timeline_recorder";
-})(RECORD_KEYS || (RECORD_KEYS = {}));
-export const DRAW_ACTION_LIST = [
-    {
-        key: DRAW_KEYS.HIGHLIGHT,
-        icon: 'icon-ants-highlight',
-        label: 'Highlight',
-        isShowColorList: true,
-        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
-    },
-    {
-        key: DRAW_KEYS.COMMENT,
-        icon: 'icon-ants-comment',
-        label: 'Comment',
-        isShowColorList: true,
-        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
-    },
-    {
-        key: DRAW_KEYS.PEN,
-        icon: 'icon-ants-free-draw',
-        label: 'Pen',
-        isShowColorList: true,
-        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
-    },
-    {
-        key: DRAW_KEYS.ARROW,
-        icon: 'icon-ants-arrow-grow',
-        label: 'Arrow',
-        isShowColorList: true,
-        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
-    },
-    {
-        key: DRAW_KEYS.HIDE,
-        icon: 'icon-ants-invisible',
-        label: 'Hide',
-        isShowColorList: true,
-        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
-    },
-    {
-        key: DRAW_KEYS.NULL,
-        icon: 'icon-ants-laptop',
-        type: 'divider',
-        isShowColorList: false,
-    },
-    {
-        key: DRAW_KEYS.DONE,
-        icon: 'icon-ants-check-slim',
-        label: 'Done',
-        isShowColorList: false,
-    },
-    {
-        key: DRAW_KEYS.CANCEL,
-        icon: 'icon-ants-check-slim',
-        label: 'Cancel',
-        isShowColorList: false,
-    },
-];

package/es/components/molecules/CaptureScreen/hooks/useImageEditor.d.ts

@@ -1,5 +0,0 @@
-import { RefObject } from 'react';
-import { ImageEditorInstanceProps } from '../types';
-export declare const useImageEditor: (imageEditorRef: RefObject<HTMLDivElement>, options?: {
-    preventCreateInstance: boolean;
-}) => ImageEditorInstanceProps;

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

@@ -1,103 +0,0 @@
-// Libraries
-import { useState, useRef, useEffect } from 'react';
-import ImageEditor from '@antscorp/image-editor';
-// Utils
-import { getEditorConfigs } from '../utils';
-// Constants
-import { DRAW_KEYS } from '../constants';
-export const useImageEditor = (imageEditorRef, options) => {
-    const [_triggerOut, setTriggerOut] = useState(1);
-    const editorInstance = useRef(null);
-    const canvasEditor = useRef(null);
-    const { preventCreateInstance = false } = options || {};
-    useEffect(() => {
-        let timerId;
-        try {
-            if (!preventCreateInstance) {
-                (editorInstance.current = new ImageEditor(imageEditorRef.current, getEditorConfigs()));
-                canvasEditor.current = editorInstance.current.getCanvas();
-                const canvas = canvasEditor.current;
-                if (canvas) {
-                    timerId = setTimeout(() => {
-                        canvas.setWidth(window.innerWidth);
-                        canvas.setHeight(window.innerHeight);
-                        editorInstance.current
-                            .loadImageFromURL(editorInstance.current.toDataURL())
-                            .then(_result => {
-                            editorInstance.current.clearUndoStack();
-                        });
-                    }, 300);
-                }
-                setTriggerOut(prev => prev + 1);
-            }
-        }
-        catch (err) {
-            console.log(err);
-        }
-        return () => {
-            if (!preventCreateInstance) {
-                editorInstance.current.destroy();
-            }
-            if (timerId) {
-                clearTimeout(timerId);
-            }
-        };
-    }, [imageEditorRef, preventCreateInstance]);
-    const activateShapeMode = () => {
-        if (!preventCreateInstance && editorInstance.current.getDrawingMode() !== 'SHAPE') {
-            editorInstance.current.stopDrawingMode();
-            editorInstance.current.startDrawingMode('SHAPE');
-        }
-    };
-    const activateTextMode = () => {
-        if (!preventCreateInstance && editorInstance.current.getDrawingMode() !== 'TEXT') {
-            editorInstance.current.stopDrawingMode();
-            editorInstance.current.startDrawingMode('TEXT');
-        }
-    };
-    const getSettings = (key, color) => {
-        switch (key) {
-            case DRAW_KEYS.PEN: {
-                return {
-                    width: 9,
-                    color,
-                };
-            }
-            case DRAW_KEYS.HIGHLIGHT: {
-                return {
-                    stroke: color,
-                    strokeWidth: 3,
-                    fill: 'transparent',
-                };
-            }
-            case DRAW_KEYS.HIDE: {
-                return {
-                    stroke: 'transparent',
-                    strokeWidth: 0,
-                    fill: color,
-                };
-            }
-            case DRAW_KEYS.ARROW: {
-                return {
-                    width: 9,
-                    color,
-                    arrowType: {
-                        tail: 'triangle',
-                    },
-                };
-            }
-            default: {
-                return {};
-            }
-        }
-    };
-    return {
-        editorInstance: preventCreateInstance ? null : editorInstance.current,
-        canvasEditor: canvasEditor.current,
-        methods: {
-            activateTextMode,
-            activateShapeMode,
-            getSettings,
-        },
-    };
-};

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

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