@lyra/vision/lib/components/QueryEditor.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 _reactCodemirror = require('react-codemirror2');

var _reactCodemirror2 = _interopRequireDefault(_reactCodemirror);

var _codemirror = require('codemirror');

var _codemirror2 = _interopRequireDefault(_codemirror);

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

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

class QueryEditor extends _react2.default.PureComponent {
  constructor(props) {
    super(props);

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

  getHint(cm, option) {
    const schema = this.props.schema;

    const cursor = cm.getCursor();
    // const line = cm.getLine(cursor.line)
    const start = cursor.ch;
    const end = cursor.ch;
    const suggestions = [{
      text: '...',
      displayText: '... (Includes everything)'
    }];

    if (schema) {
      schema._original.types.forEach(type => {
        suggestions.push({
          text: type.name,
          displayText: `${type.name} (${type.type}) - ${type.title}`
        });
      });
    }
    return {
      list: suggestions,
      from: _codemirror2.default.Pos(cursor.line, start),
      to: _codemirror2.default.Pos(cursor.line, end)
    };
  }

  handleChange(editor, metadata, value) {
    this.props.onChange({ query: value });
  }

  render() {
    const options = {
      lineNumbers: true,
      tabSize: 2,
      scrollbarStyle: null,
      mode: { name: 'javascript', json: true },
      hintOptions: { hint: this.getHint },
      extraKeys: {
        'Ctrl-Space': 'autocomplete',
        'Ctrl-Enter': this.props.onExecute
      }
    };
    return _react2.default.createElement(_reactCodemirror2.default, {
      value: this.props.value,
      onChange: this.handleChange,
      options: options,
      className: this.props.className
    });
  }
}

QueryEditor.propTypes = {
  onExecute: _propTypes2.default.func.isRequired,
  onChange: _propTypes2.default.func.isRequired,
  value: _propTypes2.default.string,
  schema: _propTypes2.default.object
};

QueryEditor.defaultProps = {
  className: 'vision_query-editor'
};

exports.default = QueryEditor;