@lyra/vision/lib/components/ParamsEditor.js

React-based data management tool for Lyra projects

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactCodemirror = require('react-codemirror2');

var _reactCodemirror2 = _interopRequireDefault(_reactCodemirror);

var _isPlainObject = require('../util/isPlainObject');

var _isPlainObject2 = _interopRequireDefault(_isPlainObject);

var _tryParseParams = require('../util/tryParseParams');

var _tryParseParams2 = _interopRequireDefault(_tryParseParams);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

require('codemirror/mode/javascript/javascript');
require('codemirror/addon/hint/show-hint');

const ENTER_KEY = 13;

class ParamsEditor extends _react2.default.PureComponent {
  constructor(props) {
    super(props);
    this.state = { valid: true };

    this.handleChange = this.handleChange.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  handleKeyUp(evt) {
    if (evt.ctrlKey && evt.which === ENTER_KEY) {
      this.props.onExecute();
    }
  }

  handleChange(editor, metadata, value) {
    const params = (0, _tryParseParams2.default)(value);
    this.setState({ valid: (0, _isPlainObject2.default)(params) });
    this.props.onChange({ parsed: params, raw: value });
  }

  render() {
    var _props = this.props;
    const className = _props.className,
          classNameInvalid = _props.classNameInvalid;

    const options = {
      lineNumbers: true,
      tabSize: 2,
      mode: { name: 'javascript', json: true }
    };
    return _react2.default.createElement(_reactCodemirror2.default, {
      className: (0, _classnames2.default)(className, {
        [classNameInvalid]: !this.state.valid
      }),
      value: this.props.value,
      onChange: this.handleChange,
      options: options
    });
  }
}

ParamsEditor.propTypes = {
  className: _propTypes2.default.string,
  classNameInvalid: _propTypes2.default.string,
  onExecute: _propTypes2.default.func.isRequired,
  onChange: _propTypes2.default.func.isRequired,
  onHeightChange: _propTypes2.default.func,
  value: _propTypes2.default.string,
  style: _propTypes2.default.object // eslint-disable-line react/forbid-prop-types
};

ParamsEditor.defaultProps = {
  value: '{\n  \n}',
  className: 'vision_params-editor',
  classNameInvalid: 'vision_params-editor-invalid'
};

exports.default = ParamsEditor;