@elliemae/ds-codeeditor 2.3.0-alpha.6 → 2.3.0-next.0

package/esm/components/DSCodeEditorForm.js

@@ -0,0 +1,182 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.replace-all.js';
+import { Component } from 'react';
+import DSButton from '@elliemae/ds-button';
+import { DSInputGroup, DSTextBox, DSCheckbox } from '@elliemae/ds-form';
+import { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';
+import { ChevronSmallLeft, ChevronSmallRight } from '@elliemae/ds-icons';
+
+var _DSButton, _ChevronSmallRight;
+const blockName = 'code-editor';
+const {
+  cssClassName,
+  classNameBlock
+} = convertPropToCssClassName(blockName);
+const CheckOptionsGroup = aggregatedClasses('div')("".concat(blockName, "-options-group"));
+
+class DSCodeEditorForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      find: false,
+      replace: false,
+      isCaseSensitive: false,
+      isWholeWord: false,
+      filteredText: '',
+      replaceText: ''
+    };
+  }
+
+  searchWord(isReplace, all) {
+    const {
+      reactAceComponent: {
+        current: {
+          editor
+        }
+      }
+    } = this.props;
+    const {
+      isCaseSensitive,
+      isWholeWord,
+      filteredText,
+      replaceText
+    } = this.state;
+    const options = {
+      backwards: false,
+      wrap: true,
+      caseSensitive: isCaseSensitive,
+      wholeWord: isWholeWord,
+      regExp: true
+    };
+    editor.find(filteredText, options);
+    const selectedContent = editor.getSelectedText();
+
+    if (isReplace && replaceText && selectedContent) {
+      if (all) {
+        editor.findAll(filteredText, options);
+        editor.replaceAll(replaceText);
+      } else {
+        const range = editor.selection.getRange();
+        editor.session.replace(range, replaceText);
+      }
+    }
+  }
+
+  render() {
+    const {
+      fileName
+    } = this.props;
+    const {
+      find,
+      replace,
+      isCaseSensitive,
+      isWholeWord,
+      filteredText,
+      replaceText
+    } = this.state;
+    return /*#__PURE__*/_jsx("div", {
+      className: "".concat(cssClassName)
+    }, void 0, fileName ? /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('file-name')
+    }, void 0, "File Name: ", /*#__PURE__*/_jsx("span", {}, void 0, " ", fileName, " ")) : null, /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('find-replace-btn')
+    }, void 0, !find && !replace ? /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "secondary",
+      labelText: "Find",
+      onClick: () => this.setState({
+        find: true
+      }),
+      size: "m"
+    }) : null, !replace ? /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "secondary",
+      labelText: "Find & Replace",
+      onClick: () => this.setState({
+        replace: true
+      }),
+      size: "m"
+    }) : null), find || replace ? /*#__PURE__*/_jsx(DSInputGroup, {
+      className: classNameBlock('find')
+    }, void 0, /*#__PURE__*/_jsx(DSTextBox, {
+      className: "find-word",
+      fluidWidth: false,
+      id: "find-textbox",
+      onChange: e => this.setState({
+        filteredText: e.currentTarget.value
+      }),
+      placeholder: "Find",
+      rightComponent: /*#__PURE__*/_jsx("div", {
+        className: classNameBlock('next-back-btn')
+      }, void 0, _DSButton || (_DSButton = /*#__PURE__*/_jsx(DSButton, {
+        icon: /*#__PURE__*/_jsx(ChevronSmallLeft, {}),
+        size: "m"
+      })), /*#__PURE__*/_jsx(DSButton, {
+        icon: _ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx(ChevronSmallRight, {})),
+        onClick: () => this.searchWord(),
+        size: "m"
+      })),
+      value: filteredText
+    }), /*#__PURE__*/_jsx(CheckOptionsGroup, {}, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
+      checked: isCaseSensitive,
+      id: "case-sensitive-check",
+      labelText: "Case Sensitive",
+      name: "case-sensitive-check",
+      onChange: () => this.setState({
+        isCaseSensitive: !isCaseSensitive
+      })
+    }), /*#__PURE__*/_jsx(DSCheckbox, {
+      checked: isWholeWord,
+      id: "whole-word-check",
+      labelText: "Whole Word",
+      name: "whole-word-check",
+      onChange: () => this.setState({
+        isWholeWord: !isWholeWord
+      })
+    }), /*#__PURE__*/_jsx(DSCheckbox, {
+      checked: replace,
+      id: "replace-check",
+      labelText: "Replace",
+      name: "replace-check",
+      onChange: () => this.setState({
+        replace: !replace
+      })
+    })), /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "secondary",
+      labelText: "Done",
+      onClick: () => this.setState({
+        replace: false,
+        find: false
+      }),
+      size: "m"
+    })) : null, replace ? /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('replace')
+    }, void 0, /*#__PURE__*/_jsx(DSTextBox, {
+      className: "find-word",
+      fluidWidth: false,
+      id: "replace-textbox",
+      onChange: e => this.setState({
+        replaceText: e.currentTarget.value
+      }),
+      placeholder: "Replace",
+      value: replaceText
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('replace-btns')
+    }, void 0, /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "secondary",
+      labelText: "Replace",
+      onClick: () => this.searchWord(true, false),
+      size: "m"
+    }), /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "secondary",
+      labelText: "Replace All",
+      onClick: () => this.searchWord(true, true),
+      size: "m"
+    }))) : null);
+  }
+
+}
+
+export { DSCodeEditorForm as default };

package/esm/components/DSCodeEditorImpl.js

@@ -0,0 +1,79 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React, { Component } from 'react';
+import AceEditor from 'react-ace';
+import DSModal from '@elliemae/ds-modal';
+import DSCodeEditorForm from './DSCodeEditorForm.js';
+import 'brace/mode/javascript.js';
+import 'brace/theme/tomorrow.js';
+import { jsx } from 'react/jsx-runtime';
+
+class DSCodeEditorImpl extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      errors: []
+    };
+    this.reactAceComponent = /*#__PURE__*/React.createRef();
+  }
+
+  render() {
+    const {
+      onSave,
+      onClose,
+      onReject,
+      isOpen,
+      fileName,
+      confirmLabel,
+      maxLines,
+      minLines,
+      modalTitle,
+      modalType,
+      rejectLabel,
+      size,
+      style,
+      containerProps
+    } = this.props;
+    const {
+      value,
+      errors
+    } = this.state;
+    return /*#__PURE__*/_jsx(DSModal, {
+      centered: false,
+      confirmLabel: confirmLabel,
+      containerProps: containerProps,
+      isOpen: isOpen,
+      modalTitle: modalTitle,
+      modalType: modalType,
+      onClose: () => onClose(value, fileName, errors),
+      onConfirm: () => onSave(value, fileName, errors),
+      onReject: () => onReject(value, fileName, errors),
+      rejectLabel: rejectLabel,
+      size: size,
+      style: style
+    }, void 0, /*#__PURE__*/_jsx(DSCodeEditorForm, {
+      fileName: fileName,
+      reactAceComponent: this.reactAceComponent
+    }), /*#__PURE__*/jsx(AceEditor, {
+      ref: this.reactAceComponent,
+      editorProps: {
+        $blockScrolling: true
+      },
+      maxLines: maxLines,
+      minLines: minLines,
+      mode: "javascript",
+      name: "ace-code-edior",
+      onChange: val => this.setState({
+        value: val
+      }),
+      onValidate: annotations => this.setState({
+        errors: annotations
+      }),
+      theme: "tomorrow",
+      value: value
+    }));
+  }
+
+}
+
+export { DSCodeEditorImpl as default };

package/esm/index.js

@@ -0,0 +1 @@
+export { CodeEditorWithSchema, default } from './DSCodeEditor.js';

package/package.json

@@ -1,30 +1,27 @@
 {
   "name": "@elliemae/ds-codeeditor",
-  "version": "2.3.0-alpha.6",
+  "version": "2.3.0-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Code Editor",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./DSCodeEditor": {
-      "import": "./dist/esm/DSCodeEditor.js",
-      "require": "./dist/cjs/DSCodeEditor.js"
+      "import": "./esm/DSCodeEditor.js",
+      "require": "./cjs/DSCodeEditor.js"
     },
     "./components/DSCodeEditorImpl": {
-      "import": "./dist/esm/components/DSCodeEditorImpl.js",
-      "require": "./dist/cjs/components/DSCodeEditorImpl.js"
+      "import": "./esm/components/DSCodeEditorImpl.js",
+      "require": "./cjs/components/DSCodeEditorImpl.js"
     },
     "./components/DSCodeEditorForm": {
-      "import": "./dist/esm/components/DSCodeEditorForm.js",
-      "require": "./dist/cjs/components/DSCodeEditorForm.js"
+      "import": "./esm/components/DSCodeEditorForm.js",
+      "require": "./cjs/components/DSCodeEditorForm.js"
     }
   },
   "sideEffects": [
@@ -36,16 +33,22 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.6",
-    "@elliemae/ds-classnames": "2.3.0-alpha.6",
-    "@elliemae/ds-form": "2.3.0-alpha.6",
-    "@elliemae/ds-icons": "2.3.0-alpha.6",
-    "@elliemae/ds-modal": "2.3.0-alpha.6",
+    "@elliemae/ds-button": "2.3.0-next.0",
+    "@elliemae/ds-classnames": "2.3.0-next.0",
+    "@elliemae/ds-form": "2.3.0-next.0",
+    "@elliemae/ds-icons": "2.3.0-next.0",
+    "@elliemae/ds-modal": "2.3.0-next.0",
     "brace": "~0.11.1",
     "react-ace": "~6.6.0",
     "react-desc": "~4.1.3"
@@ -57,12 +60,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSCodeEditor.d.ts

@@ -0,0 +1,107 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+import 'brace/mode/javascript.js';
+import 'brace/theme/tomorrow.js';
+declare const DSCodeEditor: {
+    ({ containerProps, value: defaultValue, onSave, onClose, onReject, onChange, isOpen, fileName, confirmLabel, maxLines, minLines, modalTitle, modalType, rejectLabel, size, style, useModal, showHeader, showSyntaxChecks, }: {
+        containerProps?: {} | undefined;
+        value?: string | undefined;
+        onSave?: (() => null) | undefined;
+        onClose?: (() => null) | undefined;
+        onReject?: (() => null) | undefined;
+        onChange?: (() => null) | undefined;
+        isOpen?: boolean | undefined;
+        fileName?: string | undefined;
+        confirmLabel?: string | undefined;
+        maxLines?: number | undefined;
+        minLines?: number | undefined;
+        modalTitle?: string | undefined;
+        modalType?: string | undefined;
+        rejectLabel?: string | undefined;
+        size?: string | undefined;
+        style?: {} | undefined;
+        useModal?: boolean | undefined;
+        showHeader?: boolean | undefined;
+        showSyntaxChecks?: boolean | undefined;
+    }): JSX.Element;
+    propTypes: {
+        containerProps: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        value: import("react-desc").PropTypesDescValue;
+        onSave: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        onClose: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        onReject: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        onChange: import("react-desc").PropTypesDescValue;
+        isOpen: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        fileName: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        maxLines: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        minLines: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        modalTitle: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        confirmLabel: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        rejectLabel: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        modalType: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        size: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        style: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        useModal: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        showHeader: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        showSyntaxChecks: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+    };
+};
+declare const CodeEditorWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { CodeEditorWithSchema };
+export default DSCodeEditor;

package/types/components/DSCodeEditorForm.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'react';
+declare class DSCodeEditorForm extends Component {
+    constructor(props: any);
+    searchWord(isReplace: any, all: any): void;
+    render(): JSX.Element;
+}
+export default DSCodeEditorForm;

package/types/components/DSCodeEditorImpl.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+import 'brace/mode/javascript.js';
+import 'brace/theme/tomorrow.js';
+declare class DSCodeEditorImpl extends Component {
+    constructor(props: any);
+    render(): JSX.Element;
+}
+export default DSCodeEditorImpl;

package/types/index.d.ts

@@ -0,0 +1 @@
+export { default, CodeEditorWithSchema } from './DSCodeEditor';

package/dist/cjs/DSCodeEditor.js

@@ -1,131 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSCodeEditor_exports = {};
-__export(DSCodeEditor_exports, {
-  CodeEditorWithSchema: () => CodeEditorWithSchema,
-  default: () => DSCodeEditor_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_ds_modal = __toESM(require("@elliemae/ds-modal"));
-var import_react_ace = __toESM(require("react-ace"));
-var import_DSCodeEditorForm = __toESM(require("./components/DSCodeEditorForm"));
-var import_javascript = require("brace/mode/javascript.js");
-var import_tomorrow = require("brace/theme/tomorrow.js");
-const DSCodeEditor = ({
-  containerProps = {},
-  value: defaultValue = "",
-  onSave = () => null,
-  onClose = () => null,
-  onReject = () => null,
-  onChange = () => null,
-  isOpen = false,
-  fileName = "",
-  confirmLabel = "Save",
-  maxLines = 20,
-  minLines = 20,
-  modalTitle = "Javascript Editor",
-  modalType = "confirm",
-  rejectLabel = "Close",
-  size = "large",
-  style = {},
-  useModal = true,
-  showHeader = true,
-  showSyntaxChecks = true
-}) => {
-  const [{ value, errors }, setState] = (0, import_react.useState)({
-    value: defaultValue,
-    errors: []
-  });
-  const reactAceComponent = (0, import_react.useRef)();
-  const editor = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showHeader && /* @__PURE__ */ import_react.default.createElement(import_DSCodeEditorForm.default, {
-    fileName,
-    reactAceComponent
-  }), /* @__PURE__ */ import_react.default.createElement(import_react_ace.default, {
-    ref: reactAceComponent,
-    editorProps: { $blockScrolling: true },
-    maxLines,
-    minLines,
-    mode: "javascript",
-    name: "ace-code-edior",
-    onChange: (val) => {
-      setState({ errors, value: val });
-      onChange(val, errors);
-    },
-    onValidate: (annotations) => setState({ value, errors: annotations }),
-    theme: "tomorrow",
-    setOptions: {
-      useWorker: showSyntaxChecks
-    },
-    value
-  }));
-  if (!useModal)
-    return editor;
-  return /* @__PURE__ */ import_react.default.createElement(import_ds_modal.default, {
-    centered: false,
-    confirmLabel,
-    containerProps,
-    isOpen,
-    modalTitle,
-    modalType,
-    onClose: () => onClose(value, fileName, errors),
-    onConfirm: () => onSave(value, fileName, errors),
-    onReject: () => onReject(value, fileName, errors),
-    rejectLabel,
-    size,
-    style
-  }, editor);
-};
-const codeEditorProps = {
-  containerProps: import_react_desc.PropTypes.object.description("Set of Properties attached to the main container"),
-  value: import_react_desc.PropTypes.string.description("editors content").isRequired,
-  onSave: import_react_desc.PropTypes.func.description("function called when the user press save"),
-  onClose: import_react_desc.PropTypes.func.description("function called when the user closes the modal"),
-  onReject: import_react_desc.PropTypes.func.description("function called when is rejected"),
-  onChange: import_react_desc.PropTypes.func.description("function executed when code editor value changes").isRequired,
-  isOpen: import_react_desc.PropTypes.bool.description("Whether the modal is opened or not").defaultValue(false),
-  fileName: import_react_desc.PropTypes.string.description("File name to open in the editor"),
-  maxLines: import_react_desc.PropTypes.number.description("Max lines in the editor content").defaultValue(20),
-  minLines: import_react_desc.PropTypes.number.description("Min lines in the editor content").defaultValue(20),
-  modalTitle: import_react_desc.PropTypes.string.description("Modal title").defaultValue("Javascript Editor"),
-  confirmLabel: import_react_desc.PropTypes.string.description("Customize modal confirm label").defaultValue("Save"),
-  rejectLabel: import_react_desc.PropTypes.string.description("Customize modal rejection label").defaultValue("Close"),
-  modalType: import_react_desc.PropTypes.oneOf(import_ds_modal.modalTypes).description("Modal type").defaultValue("confirm"),
-  size: import_react_desc.PropTypes.oneOf(["xsmall", "small", "medium", "large", "xlarge"]).description("modal size").defaultValue("large"),
-  style: import_react_desc.PropTypes.object.description("css inline style"),
-  useModal: import_react_desc.PropTypes.bool.description("whether to use code editor inside modal or not").defaultValue(true),
-  showHeader: import_react_desc.PropTypes.bool.description("show editors header").defaultValue(true),
-  showSyntaxChecks: import_react_desc.PropTypes.bool.description("show syntax warnings and checks").defaultValue(true)
-};
-DSCodeEditor.propTypes = codeEditorProps;
-const CodeEditorWithSchema = (0, import_react_desc.describe)(DSCodeEditor);
-CodeEditorWithSchema.propTypes = codeEditorProps;
-var DSCodeEditor_default = DSCodeEditor;
-module.exports = __toCommonJS(DSCodeEditor_exports);
-//# sourceMappingURL=DSCodeEditor.js.map

package/dist/cjs/DSCodeEditor.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSCodeEditor.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useRef } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport DSModal, { modalTypes } from '@elliemae/ds-modal';\nimport AceEditor from 'react-ace';\nimport DSCodeEditorForm from './components/DSCodeEditorForm';\nimport 'brace/mode/javascript.js';\nimport 'brace/theme/tomorrow.js';\n\nconst DSCodeEditor = ({\n  containerProps = {},\n  value: defaultValue = '',\n  onSave = () => null,\n  onClose = () => null,\n  onReject = () => null,\n  onChange = () => null,\n  isOpen = false,\n  fileName = '',\n  confirmLabel = 'Save',\n  maxLines = 20,\n  minLines = 20,\n  modalTitle = 'Javascript Editor',\n  modalType = 'confirm',\n  rejectLabel = 'Close',\n  size = 'large',\n  style = {},\n  useModal = true,\n  showHeader = true,\n  showSyntaxChecks = true,\n}) => {\n  const [{ value, errors }, setState] = useState({\n    value: defaultValue,\n    errors: [],\n  });\n  const reactAceComponent = useRef();\n\n  const editor = (\n    <>\n      {showHeader && (\n        <DSCodeEditorForm\n          fileName={fileName}\n          reactAceComponent={reactAceComponent}\n        />\n      )}\n      <AceEditor\n        ref={reactAceComponent}\n        editorProps={{ $blockScrolling: true }}\n        maxLines={maxLines}\n        minLines={minLines}\n        mode=\"javascript\"\n        name=\"ace-code-edior\"\n        onChange={(val) => {\n          setState({ errors, value: val });\n          onChange(val, errors);\n        }}\n        onValidate={(annotations) => setState({ value, errors: annotations })}\n        theme=\"tomorrow\"\n        setOptions={{\n          useWorker: showSyntaxChecks,\n        }}\n        value={value}\n      />\n    </>\n  );\n  if (!useModal) return editor;\n  return (\n    <DSModal\n      centered={false}\n      confirmLabel={confirmLabel}\n      containerProps={containerProps}\n      isOpen={isOpen}\n      modalTitle={modalTitle}\n      modalType={modalType}\n      onClose={() => onClose(value, fileName, errors)}\n      onConfirm={() => onSave(value, fileName, errors)}\n      onReject={() => onReject(value, fileName, errors)}\n      rejectLabel={rejectLabel}\n      size={size}\n      style={style}\n    >\n      {editor}\n    </DSModal>\n  );\n};\n\nconst codeEditorProps = {\n  containerProps: PropTypes.object.description(\n    'Set of Properties attached to the main container',\n  ),\n  value: PropTypes.string.description('editors content').isRequired,\n  onSave: PropTypes.func.description(\n    'function called when the user press save',\n  ),\n  onClose: PropTypes.func.description(\n    'function called when the user closes the modal',\n  ),\n  onReject: PropTypes.func.description('function called when is rejected'),\n  onChange: PropTypes.func.description(\n    'function executed when code editor value changes',\n  ).isRequired,\n  isOpen: PropTypes.bool\n    .description('Whether the modal is opened or not')\n    .defaultValue(false),\n  fileName: PropTypes.string.description('File name to open in the editor'),\n  maxLines: PropTypes.number\n    .description('Max lines in the editor content')\n    .defaultValue(20),\n  minLines: PropTypes.number\n    .description('Min lines in the editor content')\n    .defaultValue(20),\n  modalTitle: PropTypes.string\n    .description('Modal title')\n    .defaultValue('Javascript Editor'),\n  confirmLabel: PropTypes.string\n    .description('Customize modal confirm label')\n    .defaultValue('Save'),\n  rejectLabel: PropTypes.string\n    .description('Customize modal rejection label')\n    .defaultValue('Close'),\n  modalType: PropTypes.oneOf(modalTypes)\n    .description('Modal type')\n    .defaultValue('confirm'),\n  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge'])\n    .description('modal size')\n    .defaultValue('large'),\n  style: PropTypes.object.description('css inline style'),\n  useModal: PropTypes.bool\n    .description('whether to use code editor inside modal or not')\n    .defaultValue(true),\n  showHeader: PropTypes.bool\n    .description('show editors header')\n    .defaultValue(true),\n  showSyntaxChecks: PropTypes.bool\n    .description('show syntax warnings and checks')\n    .defaultValue(true),\n};\n\nDSCodeEditor.propTypes = codeEditorProps;\n\nconst CodeEditorWithSchema = describe(DSCodeEditor);\nCodeEditorWithSchema.propTypes = codeEditorProps;\n\nexport { CodeEditorWithSchema };\nexport default DSCodeEditor;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
-}