@bootstrap-styled/rsg-components/lib/Editor/Editor.js

Create documentation layouts for your react-styleguidist using Bootstrap-Styled rsg-component. Boostrap Styled rsg-components use the @bootstrap-styled/v4 for recreating the original rsg-components.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.propTypes = exports.defaultProps = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lodash = _interopRequireDefault(require("lodash.omit"));

var _lib = _interopRequireDefault(require("map-to-css-modules/lib"));

var _classnames = _interopRequireDefault(require("classnames"));

var _reactLifecyclesCompat = require("react-lifecycles-compat");

var _reactSimpleCodeEditor = _interopRequireDefault(require("react-simple-code-editor"));

var _prismCore = _interopRequireDefault(require("prismjs/components/prism-core"));

require("prismjs/components/prism-clike");

require("prismjs/components/prism-markup");

require("prismjs/components/prism-javascript");

require("prismjs/components/prism-jsx");

var _theme = require("react-styleguidist/lib/client/styles/theme");

var highlight = function highlight(code) {
  return _prismCore.default.highlight(code, _prismCore.default.languages.jsx, 'jsx');
};

var defaultProps = {
  theme: {
    styleguide: {
      '$rsg-editor-font-family': 'Consolas, "Liberation Mono", Menlo, monospace',
      '$rsg-editor-font-size': '13px',
      '$rsg-editor-bg-color': '#f5f5f5',
      '$rsg-editor-isolate': false,
      '$rsg-editor-transition': 'all ease-in-out .1s',
      '$rsg-editor-border-color': '#e8e8e8',
      '$rsg-editor-border-radius': '3px',
      '$rsg-editor-focus-outline': '0',
      '$rsg-editor-focus-border-color': '#1673b1',
      '$rsg-editor-focus-box-shadow': '0, 0, 0, 2, rgba(22, 115, 177, 0.25)',
      '$rsg-editor-code-comment-color': '#6d6d6d',
      '$rsg-editor-code-punctuation-color': '#999',
      '$rsg-editor-code-namespace-opacity': '0.7',
      '$rsg-editor-code-property-color': '#905',
      '$rsg-editor-code-deleted-color': '#905',
      '$rsg-editor-code-string-color': '#690',
      '$rsg-editor-code-inserted-color': '#690',
      '$rsg-editor-code-operator-color': '#9a6e3a',
      '$rsg-editor-code-keyword-color': '#1673b1',
      '$rsg-editor-code-function-color': '#DD4A68',
      '$rsg-editor-code-variable-color': '#e90',
      '$rsg-editor-code-font-weight': 'bold',
      '$rsg-editor-code-font-style': 'italic',
      '$rsg-editor-code-cursor': 'help'
    }
  }
};
/* eslint-disable react/require-default-props */

exports.defaultProps = defaultProps;
var propTypes = {
  /**
   * @ignore
   */
  className: _propTypes.default.string,
  // eslint-disable-line
  code: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func.isRequired,

  /** Theme variables. Can be: */
  theme: _propTypes.default.shape({
    styleguide: _propTypes.default.shape({
      '$rsg-editor-font-family': _propTypes.default.string,
      '$rsg-editor-font-size': _propTypes.default.string,
      '$rsg-editor-bg-color': _propTypes.default.string,
      '$rsg-editor-isolate': _propTypes.default.bool,
      '$rsg-editor-transition': _propTypes.default.string,
      '$rsg-editor-border-color': _propTypes.default.string,
      '$rsg-editor-border-radius': _propTypes.default.string,
      '$rsg-editor-focus-outline': _propTypes.default.string,
      '$rsg-editor-focus-border-color': _propTypes.default.string,
      '$rsg-editor-focus-box-shadow': _propTypes.default.string,
      '$rsg-editor-code-comment-color': _propTypes.default.string,
      '$rsg-editor-code-punctuation-color': _propTypes.default.string,
      '$rsg-editor-code-namespace-opacity': _propTypes.default.string,
      '$rsg-editor-code-property-color': _propTypes.default.string,
      '$rsg-editor-code-deleted-color': _propTypes.default.string,
      '$rsg-editor-code-string-color': _propTypes.default.string,
      '$rsg-editor-code-inserted-color': _propTypes.default.string,
      '$rsg-editor-code-operator-color': _propTypes.default.string,
      '$rsg-editor-code-keyword-color': _propTypes.default.string,
      '$rsg-editor-code-function-color': _propTypes.default.string,
      '$rsg-editor-code-variable-color': _propTypes.default.string,
      '$rsg-editor-code-font-weight': _propTypes.default.string,
      '$rsg-editor-code-font-style': _propTypes.default.string,
      '$rsg-editor-code-cursor': _propTypes.default.string
    })
  }),

  /**
   * Replace or remove a className from the component.
   * See example <a href="https://www.npmjs.com/package/map-to-css-modules" target="_blank">here</a>.
   */
  cssModule: _propTypes.default.object // eslint-disable-line

};
/* eslint-enable react/require-default-props */

exports.propTypes = propTypes;

var EditorUnstyled =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(EditorUnstyled, _Component);

  function EditorUnstyled() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, EditorUnstyled);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(EditorUnstyled)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      code: _this.props.code,
      prevCode: _this.props.code
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (code) {
      _this.setState({
        code: code
      });

      _this.props.onChange(code);
    });
    return _this;
  }

  (0, _createClass2.default)(EditorUnstyled, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      return nextState.code !== this.state.code;
    }
  }, {
    key: "render",
    value: function render() {
      var _omit = (0, _lodash.default)(this.props, ['theme']),
          className = _omit.className,
          cssModule = _omit.cssModule;

      return _react.default.createElement(_reactSimpleCodeEditor.default, {
        className: (0, _lib.default)((0, _classnames.default)(className, 'rsg-editor'), cssModule),
        value: this.state.code,
        onValueChange: this.handleChange,
        highlight: highlight // Padding should be passed via a prop (not CSS) for a proper
        // cursor position calculation
        ,
        padding: _theme.space[2]
      });
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var code = nextProps.code;

      if (prevState.prevCode !== code) {
        return {
          prevCode: code,
          code: code
        };
      }

      return null;
    }
  }]);
  return EditorUnstyled;
}(_react.Component); // Moved here because => Uncaught Error: Can only polyfill class components


(0, _defineProperty2.default)(EditorUnstyled, "propTypes", propTypes);
(0, _defineProperty2.default)(EditorUnstyled, "defaultProps", defaultProps);
(0, _reactLifecyclesCompat.polyfill)(EditorUnstyled);
var Editor = (0, _styledComponents.default)(EditorUnstyled).withConfig({
  displayName: "Editor",
  componentId: "fpi8rd-0"
})(["", ""], function (props) {
  return "\n    &.rsg-editor {\n      font-family: ".concat(props.theme.styleguide['$rsg-editor-font-family'], ";\n      font-size: ").concat(props.theme.styleguide['$rsg-editor-font-size'], ";\n      background-color: ").concat(props.theme.styleguide['$rsg-editor-bg-color'], ";\n      & textarea {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n        transition: ").concat(props.theme.styleguide['$rsg-editor-transition'], ";\n        border: 1px ").concat(props.theme.styleguide['$rsg-editor-border-color'], " solid !important;\n        border-radius: ").concat(props.theme.styleguide['$rsg-editor-border-radius'], ";\n      }\n      & textarea:focus {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-focus-isolate'], ";\n        outline: ").concat(props.theme.styleguide['$rsg-editor-focus-outline'], ";\n        border-color: ").concat(props.theme.styleguide['$rsg-editor-focus-border-color'], " !important;\n        box-shadow: ").concat(props.theme.styleguide['$rsg-editor-focus-box-shadow'], ";\n      }\n      & .token.comment,\n        & .token.doctype,\n          & .token.cdata {\n            isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n            color: ").concat(props.theme.styleguide['$rsg-editor-code-comment-color'], ";\n      }\n      & .token.punctuation {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n        color: ").concat(props.theme.styleguide['$rsg-editor-code-punctuation-color'], ";\n      }\n      & .namespace {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n        opacity: ").concat(props.theme.styleguide['$rsg-editor-code-namespace-opacity'], ";\n      }\n      & .token.property,\n        & .token.tag,\n          & .token.boolean,\n            & .token.number,\n              & .token.constant,\n                & .token.symbol {\n                  isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n                  color: ").concat(props.theme.styleguide['$rsg-editor-code-property-color'], ";\n      }\n      & .token.deleted {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n        color: ").concat(props.theme.styleguide['$rsg-editor-code-deleted-color'], ";\n      }\n      & .token.selector,\n        & .token.attr-name,\n          & .token.string,\n            & .token.char,\n              & .token.builtin {\n                isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n                color: ").concat(props.theme.styleguide['$rsg-editor-code-string-color'], ";\n      }\n      & .token.inserted {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n        color: ").concat(props.theme.styleguide['$rsg-editor-code-inserted-color'], ";\n      }\n      & .token.operator,\n        & .token.entity,\n          & .token.url,\n            & .language-css .token.string,\n              & .style .token.string {\n                isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n                color: ").concat(props.theme.styleguide['$rsg-editor-code-operator-color'], ";\n      }\n      & .token.atrule,\n        & .token.attr-value,\n          & .token.keyword {\n            isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n            color: ").concat(props.theme.styleguide['$rsg-editor-code-keyword-color'], ";\n      }\n      & .token.function,\n        & .token.class-name{\n          isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n          color: ").concat(props.theme.styleguide['$rsg-editor-code-function-color'], ";\n      }\n      & .token.regex,\n        & .token.important,\n          & .token.variable {\n            isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n            color: ").concat(props.theme.styleguide['$rsg-editor-code-variable-color'], ";\n      }\n      & .token.important,\n        & .token.bold{\n          isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n          font-weight: ").concat(props.theme.styleguide['$rsg-editor-code-font-weight'], ";\n      }\n      & .token.italic {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n        font-style: ").concat(props.theme.styleguide['$rsg-editor-code-font-style'], ";\n      }\n      & .token.entity {\n        isolate: ").concat(props.theme.styleguide['$rsg-editor-isolate'], ";\n        cursor: ").concat(props.theme.styleguide['$rsg-editor-code-cursor'], ";\n      }\n ");
});
Editor.defaultProps = defaultProps;
Editor.propTypes = propTypes;
/** @component */

var _default = Editor;
exports.default = _default;