@alexkuz/react-json-tree/lib/JSONNestedNode.js

React JSON Viewer Component, Extracted from redux-devtools

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _dec, _class;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactMixin = require('react-mixin');

var _reactMixin2 = _interopRequireDefault(_reactMixin);

var _mixins = require('./mixins');

var _JSONArrow = require('./JSONArrow');

var _JSONArrow2 = _interopRequireDefault(_JSONArrow);

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

/**
 * Renders nested values (eg. objects, arrays, lists, etc.)
 */

var styles = {
  base: {
    position: 'relative',
    paddingTop: 3,
    paddingBottom: 3,
    marginLeft: 14
  },
  label: {
    margin: 0,
    padding: 0,
    display: 'inline-block'
  },
  span: {
    cursor: 'default'
  },
  spanType: {
    marginLeft: 5,
    marginRight: 5
  }
};

var JSONNestedNode = (_dec = _reactMixin2.default.decorate(_mixins.ExpandedStateHandlerMixin), _dec(_class = function (_React$Component) {
  (0, _inherits3.default)(JSONNestedNode, _React$Component);


  // flag to see if we still need to render our child nodes

  function JSONNestedNode(props) {
    (0, _classCallCheck3.default)(this, JSONNestedNode);

    var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));

    _this.defaultProps = {
      data: [],
      initialExpanded: false,
      allExpanded: false
    };
    _this.itemString = false;
    _this.needsChildNodes = true;
    _this.renderedChildren = [];

    _this.state = {
      expanded: _this.props.initialExpanded || _this.props.allExpanded,
      createdChildNodes: false
    };
    return _this;
  }

  // cache store for our child nodes


  // cache store for the number of items string we display


  JSONNestedNode.prototype.render = function render() {
    var _props;

    var childListStyle = {
      padding: 0,
      margin: 0,
      listStyle: 'none',
      display: this.state.expanded ? 'block' : 'none'
    };
    var containerStyle = undefined;
    var spanStyle = (0, _extends3.default)({}, styles.span, {
      color: this.props.theme.base0B
    });
    containerStyle = (0, _extends3.default)({}, styles.base);
    if (this.state.expanded) {
      spanStyle = (0, _extends3.default)({}, spanStyle, {
        color: this.props.theme.base03
      });
    }

    if (this.state.expanded && this.needsChildNodes) {
      this.needsChildNodes = false;
      this.renderedChildren = this.props.getChildNodes((0, _extends3.default)({}, this.props));
    }

    var itemType = _react2.default.createElement(
      'span',
      { style: styles.spanType },
      this.props.nodeTypeIndicator
    );
    var renderedItemString = this.props.renderItemString({
      data: this.props.data,
      getItemString: this.props.getItemString,
      itemString: this.itemString,
      itemType: itemType
    });

    return _react2.default.createElement(
      'li',
      { style: containerStyle },
      _react2.default.createElement(_JSONArrow2.default, { theme: this.props.theme, open: this.state.expanded, onClick: this.handleClick.bind(this), style: this.props.styles.getArrowStyle(this.state.expanded) }),
      _react2.default.createElement(
        'label',
        { style: (0, _extends3.default)({}, styles.label, {
            color: this.props.theme.base0D
          }, this.props.styles.getLabelStyle(this.props.nodeType, this.state.expanded)), onClick: this.handleClick.bind(this) },
        (_props = this.props).labelRenderer.apply(_props, this.props.keyPath),
        ':'
      ),
      _react2.default.createElement(
        'span',
        { style: (0, _extends3.default)({}, spanStyle, this.props.styles.getItemStringStyle(this.props.nodeType, this.state.expanded)), onClick: this.handleClick.bind(this) },
        renderedItemString
      ),
      _react2.default.createElement(
        'ul',
        { style: (0, _extends3.default)({}, childListStyle, this.props.styles.getListStyle(this.props.nodeType, this.state.expanded)) },
        this.renderedChildren
      )
    );
  };

  return JSONNestedNode;
}(_react2.default.Component)) || _class);
exports.default = JSONNestedNode;