@elliemae/ds-codeeditor 3.0.0-next.1 → 3.0.0-next.5

package/cjs/components/DSCodeEditorForm.js

@@ -1,189 +0,0 @@
-'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

@@ -1,88 +0,0 @@
-'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

@@ -1,10 +0,0 @@
-'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

@@ -1,116 +0,0 @@
-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 };

package/esm/components/DSCodeEditorForm.js

@@ -1,182 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

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