@elliemae/ds-codeeditor 2.3.0-alpha.8 → 2.3.0-next.10

package/cjs/DSCodeEditor.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var DSModal = require('@elliemae/ds-modal');
+var AceEditor = require('react-ace');
+var DSCodeEditorForm = require('./components/DSCodeEditorForm.js');
+require('brace/mode/javascript.js');
+require('brace/theme/tomorrow.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
+var AceEditor__default = /*#__PURE__*/_interopDefaultLegacy(AceEditor);
+
+const DSCodeEditor = _ref => {
+  let {
+    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
+  } = _ref;
+  const [{
+    value,
+    errors
+  }, setState] = React.useState({
+    value: defaultValue,
+    errors: []
+  });
+  const reactAceComponent = React.useRef();
+
+  const editor = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [showHeader && /*#__PURE__*/_jsx__default["default"](DSCodeEditorForm, {
+      fileName: fileName,
+      reactAceComponent: reactAceComponent
+    }), /*#__PURE__*/jsxRuntime.jsx(AceEditor__default["default"], {
+      ref: reactAceComponent,
+      editorProps: {
+        $blockScrolling: true
+      },
+      maxLines: maxLines,
+      minLines: 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: value
+    })]
+  });
+
+  if (!useModal) return editor;
+  return /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
+    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, editor);
+};
+
+const codeEditorProps = {
+  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
+  value: reactDesc.PropTypes.string.description('editors content').isRequired,
+  onSave: reactDesc.PropTypes.func.description('function called when the user press save'),
+  onClose: reactDesc.PropTypes.func.description('function called when the user closes the modal'),
+  onReject: reactDesc.PropTypes.func.description('function called when is rejected'),
+  onChange: reactDesc.PropTypes.func.description('function executed when code editor value changes').isRequired,
+  isOpen: reactDesc.PropTypes.bool.description('Whether the modal is opened or not').defaultValue(false),
+  fileName: reactDesc.PropTypes.string.description('File name to open in the editor'),
+  maxLines: reactDesc.PropTypes.number.description('Max lines in the editor content').defaultValue(20),
+  minLines: reactDesc.PropTypes.number.description('Min lines in the editor content').defaultValue(20),
+  modalTitle: reactDesc.PropTypes.string.description('Modal title').defaultValue('Javascript Editor'),
+  confirmLabel: reactDesc.PropTypes.string.description('Customize modal confirm label').defaultValue('Save'),
+  rejectLabel: reactDesc.PropTypes.string.description('Customize modal rejection label').defaultValue('Close'),
+  modalType: reactDesc.PropTypes.oneOf(DSModal.modalTypes).description('Modal type').defaultValue('confirm'),
+  size: reactDesc.PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']).description('modal size').defaultValue('large'),
+  style: reactDesc.PropTypes.object.description('css inline style'),
+  useModal: reactDesc.PropTypes.bool.description('whether to use code editor inside modal or not').defaultValue(true),
+  showHeader: reactDesc.PropTypes.bool.description('show editors header').defaultValue(true),
+  showSyntaxChecks: reactDesc.PropTypes.bool.description('show syntax warnings and checks').defaultValue(true)
+};
+const CodeEditorWithSchema = reactDesc.describe(DSCodeEditor);
+CodeEditorWithSchema.propTypes = codeEditorProps;
+
+exports.CodeEditorWithSchema = CodeEditorWithSchema;
+exports["default"] = DSCodeEditor;

package/cjs/components/DSCodeEditorForm.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/es.string.replace.js');
+require('core-js/modules/es.string.replace-all.js');
+var React = require('react');
+var DSButton = require('@elliemae/ds-button');
+var dsForm = require('@elliemae/ds-form');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsIcons = require('@elliemae/ds-icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _DSButton, _ChevronSmallRight;
+const blockName = 'code-editor';
+const {
+  cssClassName,
+  classNameBlock
+} = dsClassnames.convertPropToCssClassName(blockName);
+const CheckOptionsGroup = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-options-group"));
+
+class DSCodeEditorForm extends React.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__default["default"]("div", {
+      className: "".concat(cssClassName)
+    }, void 0, fileName ? /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('file-name')
+    }, void 0, "File Name: ", /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, " ", fileName, " ")) : null, /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('find-replace-btn')
+    }, void 0, !find && !replace ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "secondary",
+      labelText: "Find",
+      onClick: () => this.setState({
+        find: true
+      }),
+      size: "m"
+    }) : null, !replace ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "secondary",
+      labelText: "Find & Replace",
+      onClick: () => this.setState({
+        replace: true
+      }),
+      size: "m"
+    }) : null), find || replace ? /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
+      className: classNameBlock('find')
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSTextBox, {
+      className: "find-word",
+      fluidWidth: false,
+      id: "find-textbox",
+      onChange: e => this.setState({
+        filteredText: e.currentTarget.value
+      }),
+      placeholder: "Find",
+      rightComponent: /*#__PURE__*/_jsx__default["default"]("div", {
+        className: classNameBlock('next-back-btn')
+      }, void 0, _DSButton || (_DSButton = /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+        icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallLeft, {}),
+        size: "m"
+      })), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+        icon: _ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {})),
+        onClick: () => this.searchWord(),
+        size: "m"
+      })),
+      value: filteredText
+    }), /*#__PURE__*/_jsx__default["default"](CheckOptionsGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
+      checked: isCaseSensitive,
+      id: "case-sensitive-check",
+      labelText: "Case Sensitive",
+      name: "case-sensitive-check",
+      onChange: () => this.setState({
+        isCaseSensitive: !isCaseSensitive
+      })
+    }), /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
+      checked: isWholeWord,
+      id: "whole-word-check",
+      labelText: "Whole Word",
+      name: "whole-word-check",
+      onChange: () => this.setState({
+        isWholeWord: !isWholeWord
+      })
+    }), /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
+      checked: replace,
+      id: "replace-check",
+      labelText: "Replace",
+      name: "replace-check",
+      onChange: () => this.setState({
+        replace: !replace
+      })
+    })), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "secondary",
+      labelText: "Done",
+      onClick: () => this.setState({
+        replace: false,
+        find: false
+      }),
+      size: "m"
+    })) : null, replace ? /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('replace')
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSTextBox, {
+      className: "find-word",
+      fluidWidth: false,
+      id: "replace-textbox",
+      onChange: e => this.setState({
+        replaceText: e.currentTarget.value
+      }),
+      placeholder: "Replace",
+      value: replaceText
+    }), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('replace-btns')
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "secondary",
+      labelText: "Replace",
+      onClick: () => this.searchWord(true, false),
+      size: "m"
+    }), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "secondary",
+      labelText: "Replace All",
+      onClick: () => this.searchWord(true, true),
+      size: "m"
+    }))) : null);
+  }
+
+}
+
+module.exports = DSCodeEditorForm;

package/cjs/components/DSCodeEditorImpl.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var AceEditor = require('react-ace');
+var DSModal = require('@elliemae/ds-modal');
+var DSCodeEditorForm = require('./DSCodeEditorForm.js');
+require('brace/mode/javascript.js');
+require('brace/theme/tomorrow.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var AceEditor__default = /*#__PURE__*/_interopDefaultLegacy(AceEditor);
+var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
+
+class DSCodeEditorImpl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      errors: []
+    };
+    this.reactAceComponent = /*#__PURE__*/React__default["default"].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__default["default"](DSModal__default["default"], {
+      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__default["default"](DSCodeEditorForm, {
+      fileName: fileName,
+      reactAceComponent: this.reactAceComponent
+    }), /*#__PURE__*/jsxRuntime.jsx(AceEditor__default["default"], {
+      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
+    }));
+  }
+
+}
+
+module.exports = DSCodeEditorImpl;

package/cjs/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSCodeEditor = require('./DSCodeEditor.js');
+
+
+
+exports.CodeEditorWithSchema = DSCodeEditor.CodeEditorWithSchema;
+exports["default"] = DSCodeEditor["default"];

package/esm/DSCodeEditor.js

@@ -0,0 +1,116 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import DSModal, { modalTypes } from '@elliemae/ds-modal';
+import AceEditor from 'react-ace';
+import DSCodeEditorForm from './components/DSCodeEditorForm.js';
+import 'brace/mode/javascript.js';
+import 'brace/theme/tomorrow.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const DSCodeEditor = _ref => {
+  let {
+    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
+  } = _ref;
+  const [{
+    value,
+    errors
+  }, setState] = useState({
+    value: defaultValue,
+    errors: []
+  });
+  const reactAceComponent = useRef();
+
+  const editor = /*#__PURE__*/jsxs(Fragment, {
+    children: [showHeader && /*#__PURE__*/_jsx(DSCodeEditorForm, {
+      fileName: fileName,
+      reactAceComponent: reactAceComponent
+    }), /*#__PURE__*/jsx(AceEditor, {
+      ref: reactAceComponent,
+      editorProps: {
+        $blockScrolling: true
+      },
+      maxLines: maxLines,
+      minLines: 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: value
+    })]
+  });
+
+  if (!useModal) return editor;
+  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, editor);
+};
+
+const codeEditorProps = {
+  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
+  value: PropTypes.string.description('editors content').isRequired,
+  onSave: PropTypes.func.description('function called when the user press save'),
+  onClose: PropTypes.func.description('function called when the user closes the modal'),
+  onReject: PropTypes.func.description('function called when is rejected'),
+  onChange: PropTypes.func.description('function executed when code editor value changes').isRequired,
+  isOpen: PropTypes.bool.description('Whether the modal is opened or not').defaultValue(false),
+  fileName: PropTypes.string.description('File name to open in the editor'),
+  maxLines: PropTypes.number.description('Max lines in the editor content').defaultValue(20),
+  minLines: PropTypes.number.description('Min lines in the editor content').defaultValue(20),
+  modalTitle: PropTypes.string.description('Modal title').defaultValue('Javascript Editor'),
+  confirmLabel: PropTypes.string.description('Customize modal confirm label').defaultValue('Save'),
+  rejectLabel: PropTypes.string.description('Customize modal rejection label').defaultValue('Close'),
+  modalType: PropTypes.oneOf(modalTypes).description('Modal type').defaultValue('confirm'),
+  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']).description('modal size').defaultValue('large'),
+  style: PropTypes.object.description('css inline style'),
+  useModal: PropTypes.bool.description('whether to use code editor inside modal or not').defaultValue(true),
+  showHeader: PropTypes.bool.description('show editors header').defaultValue(true),
+  showSyntaxChecks: PropTypes.bool.description('show syntax warnings and checks').defaultValue(true)
+};
+const CodeEditorWithSchema = describe(DSCodeEditor);
+CodeEditorWithSchema.propTypes = codeEditorProps;
+
+export { CodeEditorWithSchema, DSCodeEditor as default };