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

React-based data management tool for Lyra projects

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _jsonLexer = require('json-lexer');

var _jsonLexer2 = _interopRequireDefault(_jsonLexer);

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

const punctuator = token => _react2.default.createElement(
  'span',
  { className: token.className },
  token.raw
); /* eslint-disable react/prop-types, react/no-multi-comp */

const number = token => _react2.default.createElement(
  'span',
  { className: token.className },
  token.raw
);
const string = token => _react2.default.createElement(
  'span',
  { className: token.className },
  token.raw
);
const key = token => _react2.default.createElement(
  'span',
  { className: token.className },
  token.raw.slice(1, -1)
);
const formatters = { punctuator, key, string, number };

class JsonBlock extends _react2.default.PureComponent {
  render() {
    const styles = this.context.styles.jsonDump;
    const json = JSON.stringify(this.props.data, null, 2);
    const tokens = (0, _jsonLexer2.default)(json).map((token, i, arr) => {
      const prevToken = i === 0 ? token : arr[i - 1];
      if (token.type === 'string' && prevToken.type === 'whitespace' && /^\n\s+$/.test(prevToken.value)) {
        token.type = 'key';
      }

      return token;
    });

    return _react2.default.createElement(
      'pre',
      { className: styles.block },
      tokens.map((token, i) => {
        const Formatter = formatters[token.type];
        return Formatter ? _react2.default.createElement(Formatter, { key: i, className: styles[token.type], raw: token.raw }) : token.raw;
      })
    );
  }
}

JsonBlock.contextTypes = {
  styles: _propTypes2.default.object
};

function JsonDump(props) {
  if (!Array.isArray(props.data)) {
    return _react2.default.createElement(JsonBlock, { data: props.data });
  }

  return _react2.default.createElement(
    'code',
    null,
    props.data.map((row, i) => _react2.default.createElement(JsonBlock, { key: row._id || row.eventId || i, data: row }))
  );
}