@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.14

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

@@ -1,192 +1,192 @@
-// Libraries
-import React, { memo, useEffect, useState } from 'react';
-import classNames from 'classnames';
-// Atoms
-import { DividerPure, Icon, Text, InputNumber } from '@antscorp/antsomi-ui/es/components/atoms';
-// Styled
-import { EdgeSettingContent, EdgeSettingHeader, EdgeSettingWrapper } from './styled';
-// Utils
-import { handleError } from '@antscorp/antsomi-ui/es/utils';
-// Types
-import { AlignEdit } from '../AlignSetting';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const UNIT = {
-    PX: {
-        value: 'px',
-        label: 'PX',
-    },
-    PERCENT: {
-        value: '%',
-        label: '%',
-    },
-};
-const PATH = '@antscorp/antsomi-ui/es/components/molecules/EdgeSetting/index.tsx';
-export const EdgeSetting = memo(props => {
-    var _a, _b, _c;
-    const { label, values, minValue, maxValue, edgeLabels = [], edgeLabelClassName, contentClassName, unit, linked = false, onChange = () => { }, align, disabledLinked = false, } = props;
-    // State
-    const [state, setState] = useState({
-        values: [0, 0, 0, 0],
-        unit: null,
-        linked: false,
-        lastValueFocus: 0,
-        align: null,
-    });
-    useEffect(() => {
-        setState(state => (Object.assign(Object.assign({}, state), { values,
-            unit,
-            linked, align: align })));
-    }, [values, unit, linked, align]);
-    // Handlers
-    const onChangeState = (key, value) => {
-        try {
-            let draftValues = [...state.values];
-            let draftLinked = state.linked;
-            const draftAlign = state.align;
-            // Case linked is true set all value is exam
-            if (key === 'linked') {
-                if (state.align) {
-                    // disabled
-                    return;
-                }
-                if (!state.linked) {
-                    draftValues = draftValues.map(() => state.lastValueFocus);
-                }
-            }
-            // Case align set linked = false & set values
-            if (key === 'align') {
-                draftLinked = false;
-                draftValues = draftValues.map(value => (value === 'auto' ? 0 : value));
-                if (value === state.align) {
-                    // reset align value
-                    value = '';
-                }
-                else {
-                    if (value === 'left') {
-                        // change values right to auto
-                        draftValues[1] = 'auto';
-                    }
-                    else if (value === 'right') {
-                        // change values left to auto
-                        draftValues[3] = 'auto';
-                    }
-                    else if (value === 'center') {
-                        // change values right + left to auto
-                        draftValues[1] = 'auto';
-                        draftValues[3] = 'auto';
-                    }
-                }
-            }
-            setState(state => (Object.assign(Object.assign({}, state), { values: draftValues, [key]: value })));
-            // Callback onchange
-            onChange({
-                values: draftValues,
-                unit: state.unit,
-                align: draftAlign,
-                linked: draftLinked,
-                [key]: value,
-            });
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'onChangeState',
-                args: {},
-            });
-        }
-    };
-    const onChangeValue = (value, index) => {
-        try {
-            let draftValues = [...state.values];
-            if (state.linked) {
-                draftValues = draftValues.map(() => value);
-            }
-            else {
-                draftValues[index] = value;
-            }
-            setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: value })));
-            onChangeState('values', draftValues);
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'onChangeValue',
-                args: {},
-            });
-        }
-    };
-    return (React.createElement(EdgeSettingWrapper, null,
-        React.createElement(EdgeSettingHeader, null,
-            React.createElement(Text, { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, label),
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    marginLeft: 12,
-                    marginRight: 12,
-                } },
-                state.align !== null ? (React.createElement("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        marginLeft: 8,
-                        marginRight: 8,
-                    } },
-                    React.createElement(AlignEdit, { align: state.align, onChange: value => onChangeState('align', value) }),
-                    React.createElement(DividerPure, { type: "vertical", dot: true, height: 12 }))) : null,
-                state.unit ? (React.createElement("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        marginLeft: 8,
-                        marginRight: 8,
-                        // borderRight: '2px dashed #D2D2D2',
-                        height: 18,
-                    } },
-                    Object.values(UNIT).map(({ value, label }, index) => {
-                        var _a, _b;
-                        return (React.createElement(Text, { key: value, style: {
-                                color: state.unit === value
-                                    ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary
-                                    : state.unit !== value
-                                        ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon
-                                        : 'inherit',
-                                fontWeight: state.unit === value ? 'bold' : 'normal',
-                                marginLeft: Object.values(UNIT).length - 1 === index ? 6 : 0,
-                                cursor: 'pointer',
-                                paddingRight: value === '%' ? 8 : 0,
-                            }, onClick: () => onChangeState('unit', value) }, label));
-                    }),
-                    React.createElement("div", { style: {
-                            width: 2,
-                            height: 24,
-                            overflow: 'hidden',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        } },
-                        React.createElement(Icon, { type: "icon-ants-vertical-dots", style: { fontSize: '30px' }, color: "#D2D2D2" })))) : null,
-                React.createElement(Icon, { type: `icon-ants-${state.linked ? 'hyperlink' : 'hyperlink-off'}`, size: 18, style: {
-                        cursor: 'pointer',
-                        color: !state.linked ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon : (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-                    }, onClick: disabledLinked ? () => { } : () => onChangeState('linked', !state.linked), disabled: disabledLinked ? true : !!state.align }))),
-        React.createElement(EdgeSettingContent, { className: contentClassName }, state.values.map((value, index) => {
-            var _a;
-            if (!edgeLabels[index]) {
-                return null;
-            }
-            return (React.createElement("div", { key: edgeLabels[index] },
-                React.createElement(Text, { className: classNames(edgeLabelClassName), style: { marginBottom: 5, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, edgeLabels[index]),
-                value !== 'auto' ? (React.createElement(InputNumber, { disabled: state.linked && index !== 0, value: value, required: true, min: minValue, max: maxValue, onFocus: e => {
-                        const { value = '' } = e.target;
-                        setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: +value })));
-                    }, onChange: val => onChangeValue(val, index) })) : (React.createElement(Text, { size: "medium", className: "custom-text-auto", style: { marginTop: 8, fontSize: '12px' } }, "AUTO"))));
-        }))));
-});
-EdgeSetting.defaultProps = {
-    label: '',
-    values: [0, 0, 0, 0],
-    minValue: 0,
-    maxValue: 9999,
-    edgeLabels: ['Top', 'Right', 'Bottom', 'Left'],
-    unit: null,
-    align: null,
-};
+// Libraries
+import React, { memo, useEffect, useState } from 'react';
+import classNames from 'classnames';
+// Atoms
+import { DividerPure, Icon, Text, InputNumber } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { EdgeSettingContent, EdgeSettingHeader, EdgeSettingWrapper } from './styled';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+// Types
+import { AlignEdit } from '../AlignSetting';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const UNIT = {
+    PX: {
+        value: 'px',
+        label: 'PX',
+    },
+    PERCENT: {
+        value: '%',
+        label: '%',
+    },
+};
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/EdgeSetting/index.tsx';
+export const EdgeSetting = memo(props => {
+    var _a, _b, _c;
+    const { label, values, minValue, maxValue, edgeLabels = [], edgeLabelClassName, contentClassName, unit, linked = false, onChange = () => { }, align, disabledLinked = false, } = props;
+    // State
+    const [state, setState] = useState({
+        values: [0, 0, 0, 0],
+        unit: null,
+        linked: false,
+        lastValueFocus: 0,
+        align: null,
+    });
+    useEffect(() => {
+        setState(state => (Object.assign(Object.assign({}, state), { values,
+            unit,
+            linked, align: align })));
+    }, [values, unit, linked, align]);
+    // Handlers
+    const onChangeState = (key, value) => {
+        try {
+            let draftValues = [...state.values];
+            let draftLinked = state.linked;
+            const draftAlign = state.align;
+            // Case linked is true set all value is exam
+            if (key === 'linked') {
+                if (state.align) {
+                    // disabled
+                    return;
+                }
+                if (!state.linked) {
+                    draftValues = draftValues.map(() => state.lastValueFocus);
+                }
+            }
+            // Case align set linked = false & set values
+            if (key === 'align') {
+                draftLinked = false;
+                draftValues = draftValues.map(value => (value === 'auto' ? 0 : value));
+                if (value === state.align) {
+                    // reset align value
+                    value = '';
+                }
+                else {
+                    if (value === 'left') {
+                        // change values right to auto
+                        draftValues[1] = 'auto';
+                    }
+                    else if (value === 'right') {
+                        // change values left to auto
+                        draftValues[3] = 'auto';
+                    }
+                    else if (value === 'center') {
+                        // change values right + left to auto
+                        draftValues[1] = 'auto';
+                        draftValues[3] = 'auto';
+                    }
+                }
+            }
+            setState(state => (Object.assign(Object.assign({}, state), { values: draftValues, [key]: value })));
+            // Callback onchange
+            onChange({
+                values: draftValues,
+                unit: state.unit,
+                align: draftAlign,
+                linked: draftLinked,
+                [key]: value,
+            });
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeState',
+                args: {},
+            });
+        }
+    };
+    const onChangeValue = (value, index) => {
+        try {
+            let draftValues = [...state.values];
+            if (state.linked) {
+                draftValues = draftValues.map(() => value);
+            }
+            else {
+                draftValues[index] = value;
+            }
+            setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: value })));
+            onChangeState('values', draftValues);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeValue',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(EdgeSettingWrapper, null,
+        React.createElement(EdgeSettingHeader, null,
+            React.createElement(Text, { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, label),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginLeft: 12,
+                    marginRight: 12,
+                } },
+                state.align !== null ? (React.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 8,
+                        marginRight: 8,
+                    } },
+                    React.createElement(AlignEdit, { align: state.align, onChange: value => onChangeState('align', value) }),
+                    React.createElement(DividerPure, { type: "vertical", dot: true, height: 12 }))) : null,
+                state.unit ? (React.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 8,
+                        marginRight: 8,
+                        // borderRight: '2px dashed #D2D2D2',
+                        height: 18,
+                    } },
+                    Object.values(UNIT).map(({ value, label }, index) => {
+                        var _a, _b;
+                        return (React.createElement(Text, { key: value, style: {
+                                color: state.unit === value
+                                    ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary
+                                    : state.unit !== value
+                                        ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon
+                                        : 'inherit',
+                                fontWeight: state.unit === value ? 'bold' : 'normal',
+                                marginLeft: Object.values(UNIT).length - 1 === index ? 6 : 0,
+                                cursor: 'pointer',
+                                paddingRight: value === '%' ? 8 : 0,
+                            }, onClick: () => onChangeState('unit', value) }, label));
+                    }),
+                    React.createElement("div", { style: {
+                            width: 2,
+                            height: 24,
+                            overflow: 'hidden',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        } },
+                        React.createElement(Icon, { type: "icon-ants-vertical-dots", style: { fontSize: '30px' }, color: "#D2D2D2" })))) : null,
+                React.createElement(Icon, { type: `icon-ants-${state.linked ? 'hyperlink' : 'hyperlink-off'}`, size: 18, style: {
+                        cursor: 'pointer',
+                        color: !state.linked ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon : (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary,
+                    }, onClick: disabledLinked ? () => { } : () => onChangeState('linked', !state.linked), disabled: disabledLinked ? true : !!state.align }))),
+        React.createElement(EdgeSettingContent, { className: contentClassName }, state.values.map((value, index) => {
+            var _a;
+            if (!edgeLabels[index]) {
+                return null;
+            }
+            return (React.createElement("div", { key: edgeLabels[index] },
+                React.createElement(Text, { className: classNames(edgeLabelClassName), style: { marginBottom: 5, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, edgeLabels[index]),
+                value !== 'auto' ? (React.createElement(InputNumber, { disabled: state.linked && index !== 0, value: value, required: true, min: minValue, max: maxValue, onFocus: e => {
+                        const { value = '' } = e.target;
+                        setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: +value })));
+                    }, onChange: val => onChangeValue(val, index) })) : (React.createElement(Text, { size: "medium", className: "custom-text-auto", style: { marginTop: 8, fontSize: '12px' } }, "AUTO"))));
+        }))));
+});
+EdgeSetting.defaultProps = {
+    label: '',
+    values: [0, 0, 0, 0],
+    minValue: 0,
+    maxValue: 9999,
+    edgeLabels: ['Top', 'Right', 'Bottom', 'Left'],
+    unit: null,
+    align: null,
+};

package/es/components/molecules/EdgeSetting/styled.d.ts

@@ -1,3 +1,3 @@
-export declare const EdgeSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EdgeSettingHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EdgeSettingContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EdgeSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EdgeSettingHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EdgeSettingContent: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,18 +1,18 @@
-var _a;
-// Libraries
-import styled from 'styled-components';
-// Constant
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const EdgeSettingWrapper = styled.div `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon} !important;
-`;
-export const EdgeSettingHeader = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-export const EdgeSettingContent = styled.div `
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-top: 8px;
-`;
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Constant
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const EdgeSettingWrapper = styled.div `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon} !important;
+`;
+export const EdgeSettingHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const EdgeSettingContent = styled.div `
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 8px;
+`;

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

@@ -1,14 +1,25 @@
-import React, { ReactNode } from 'react';
-import { IAceEditorProps } from 'react-ace';
-import 'ace-builds/webpack-resolver';
-import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/mode-css';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import 'ace-builds/src-noconflict/ext-language_tools';
-interface EditorScriptProps extends IAceEditorProps {
-    label?: string | ReactNode;
-    expandModalLabel?: string | ReactNode;
-    hideExpand?: boolean | ReactNode;
-}
-export declare const EditorScript: React.FC<EditorScriptProps>;
-export {};
+import React, { ReactNode } from 'react';
+import { IAceEditorProps } from 'react-ace';
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+interface EditorScriptProps extends IAceEditorProps {
+    label?: string | ReactNode;
+    expandModalLabel?: string | ReactNode;
+    hideExpand?: boolean | ReactNode;
+    mode?: string;
+    className?: any;
+    height?: any;
+    setOptions?: any;
+    theme?: string;
+    name?: string;
+    placeholder?: string;
+    fontSize?: number;
+    showPrintMargin?: boolean;
+    showGutter?: boolean;
+    highlightActiveLine?: boolean;
+}
+export declare const EditorScript: React.FC<EditorScriptProps>;
+export {};

package/es/components/molecules/EditorScript/EditorScript.js

@@ -1,89 +1,89 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React, { useState } from 'react';
-import AceEditor from 'react-ace';
-// Translations
-import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-// Atoms
-import { Button, Icon } from '../../atoms';
-// Molecules
-import { Modal } from '../Modal';
-// Styled
-import { EditorScriptWrapper } from './styled';
-// Ace editor
-import 'ace-builds/webpack-resolver';
-import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/mode-css';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import 'ace-builds/src-noconflict/ext-language_tools';
-// Utils
-import { handleError } from '@antscorp/antsomi-ui/es/utils';
-const PATH = 'src/components/molecules/EditorScript/EditorScript.tsx';
-export const EditorScript = props => {
-    // Props
-    const { label, expandModalLabel, className, height, setOptions, hideExpand } = props, restOf = __rest(props, ["label", "expandModalLabel", "className", "height", "setOptions", "hideExpand"]);
-    // State
-    const [isExpandEditor, setExpandEditor] = useState(false);
-    const { t } = i18nInstance;
-    const renderAceEditor = (aceHeight = height) => {
-        try {
-            return (React.createElement(AceEditor, Object.assign({ setOptions: Object.assign({ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2 }, setOptions) }, restOf, { style: { width: '100%', height: aceHeight } })));
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'renderAceEditor',
-                args: {},
-            });
-        }
-    };
-    const onCancelModal = () => {
-        try {
-            setExpandEditor(false);
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'onCancelModal',
-                args: {},
-            });
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(EditorScriptWrapper, { className: className },
-            label && React.createElement("div", { className: "ants-mb-5" }, label),
-            renderAceEditor(),
-            !hideExpand && (React.createElement(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
-                    setExpandEditor(true);
-                } },
-                React.createElement(Icon, { type: "icon-ants-expand", size: 14, style: {
-                        transform: 'scaleX(-1)',
-                    } }),
-                t(translations.expandEditor.title)))),
-        React.createElement(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: React.createElement(Button, { onClick: onCancelModal }, t(translations.close.title)) }, renderAceEditor('500px'))));
-};
-EditorScript.defaultProps = {
-    expandModalLabel: 'Editor Script',
-    mode: 'javascript',
-    theme: 'tomorrow',
-    name: 'Editor Script',
-    placeholder: '',
-    fontSize: 12,
-    showPrintMargin: true,
-    showGutter: true,
-    highlightActiveLine: true,
-    setOptions: {},
-    hideExpand: false,
-    height: '267px',
-};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Button, Icon } from '../../atoms';
+// Molecules
+import { Modal } from '../Modal';
+// Styled
+import { EditorScriptWrapper } from './styled';
+// Ace editor
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/molecules/EditorScript/EditorScript.tsx';
+export const EditorScript = props => {
+    // Props
+    const { label, expandModalLabel, className, height, setOptions, hideExpand } = props, restOf = __rest(props, ["label", "expandModalLabel", "className", "height", "setOptions", "hideExpand"]);
+    // State
+    const [isExpandEditor, setExpandEditor] = useState(false);
+    const { t } = i18nInstance;
+    const renderAceEditor = (aceHeight = height) => {
+        try {
+            return (React.createElement(AceEditor, Object.assign({ setOptions: Object.assign({ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2 }, setOptions) }, restOf, { style: { width: '100%', height: aceHeight } })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'renderAceEditor',
+                args: {},
+            });
+        }
+    };
+    const onCancelModal = () => {
+        try {
+            setExpandEditor(false);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onCancelModal',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EditorScriptWrapper, { className: className },
+            label && React.createElement("div", { className: "ants-mb-5" }, label),
+            renderAceEditor(),
+            !hideExpand && (React.createElement(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
+                    setExpandEditor(true);
+                } },
+                React.createElement(Icon, { type: "icon-ants-expand", size: 14, style: {
+                        transform: 'scaleX(-1)',
+                    } }),
+                t(translations.expandEditor.title)))),
+        React.createElement(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: React.createElement(Button, { onClick: onCancelModal }, t(translations.close.title)) }, renderAceEditor('500px'))));
+};
+EditorScript.defaultProps = {
+    expandModalLabel: 'Editor Script',
+    mode: 'javascript',
+    theme: 'tomorrow',
+    name: 'Editor Script',
+    placeholder: '',
+    fontSize: 12,
+    showPrintMargin: true,
+    showGutter: true,
+    highlightActiveLine: true,
+    setOptions: {},
+    hideExpand: false,
+    height: '267px',
+};