kitchensink/lib/components/PropsEditor.js

Dispatch's awesome components and style guide

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactTabs = require('react-tabs');

var _styles = require('../styles');

var _styles2 = _interopRequireDefault(_styles);

var _PropInput = require('./PropInput');

var _PropInput2 = _interopRequireDefault(_PropInput);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var PropsEditor = function (_Component) {
  _inherits(PropsEditor, _Component);

  function PropsEditor(props) {
    _classCallCheck(this, PropsEditor);

    var _this = _possibleConstructorReturn(this, (PropsEditor.__proto__ || Object.getPrototypeOf(PropsEditor)).call(this, props));

    _initialiseProps.call(_this);

    _this.state = {
      customProps: {}
    };

    // We immediately call onUpdateProps if there is an example state selected
    // by default
    var _props$component = props.component,
        component = _props$component === undefined ? {} : _props$component,
        onUpdateProps = props.onUpdateProps;
    var exampleProps = component.exampleProps;

    if (exampleProps) {
      if (Array.isArray(exampleProps)) {
        onUpdateProps(exampleProps[0].props);
      } else {
        onUpdateProps(exampleProps);
      }
    }
    return _this;
  }

  _createClass(PropsEditor, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      var _props$component2 = this.props.component,
          component = _props$component2 === undefined ? {} : _props$component2;
      var _prevProps$component = prevProps.component,
          oldComponent = _prevProps$component === undefined ? {} : _prevProps$component;


      if (oldComponent.name !== component.name || oldComponent.displayName !== component.displayName) {
        this.handleSelect(this.lastSelectedTabIndex || 0);
      }
    }
  }, {
    key: 'renderPropInputs',
    value: function renderPropInputs() {
      var _this2 = this;

      var _props$component3 = this.props.component,
          component = _props$component3 === undefined ? {} : _props$component3;


      return _lodash2.default.map(component.propTypes, function (propType, propName) {
        return _react2.default.createElement(
          'tr',
          { key: propName },
          _react2.default.createElement(
            'td',
            null,
            propName
          ),
          _react2.default.createElement('td', { style: { width: '20px' } }),
          _react2.default.createElement(
            'td',
            null,
            _react2.default.createElement(_PropInput2.default, { name: propName, type: propType, onChange: _this2.handleUpdateProps })
          )
        );
      });
    }
  }, {
    key: 'renderTabs',
    value: function renderTabs() {
      var _props$component4 = this.props.component,
          component = _props$component4 === undefined ? {} : _props$component4;

      var tabs = [];

      if (component.exampleProps) {
        if (Array.isArray(component.exampleProps)) {
          // New style, with multiple states
          component.exampleProps.forEach(function (_ref) {
            var name = _ref.name;

            tabs.push(name + ' State');
          });
        } else {
          // Old style, just one example state
          tabs.push('Example State');
        }
      }

      tabs.push('Custom Props');

      return tabs.map(function (name) {
        return _react2.default.createElement(
          _reactTabs.Tab,
          { key: name },
          name
        );
      });
    }
  }, {
    key: 'renderTabPanels',
    value: function renderTabPanels() {
      var _props$component5 = this.props.component,
          component = _props$component5 === undefined ? {} : _props$component5;

      var panels = [];

      if (component.exampleProps) {
        if (Array.isArray(component.exampleProps)) {
          // New style, with multiple states
          component.exampleProps.forEach(function (_ref2) {
            var props = _ref2.props;

            panels.push(props);
          });
        } else {
          // Old style, just one example state
          panels.push(component.exampleProps);
        }
      }

      return panels.map(function (json, index) {
        return _react2.default.createElement(
          _reactTabs.TabPanel,
          { key: String(index) },
          _react2.default.createElement(
            'pre',
            { style: PropsEditor.preStyles },
            JSON.stringify(json || {}, null, 2)
          )
        );
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { style: { width: '50%', overflow: 'auto' } },
        _react2.default.createElement(
          'span',
          { style: PropsEditor.labelStyles },
          'PROPS'
        ),
        _react2.default.createElement(
          _reactTabs.Tabs,
          {
            onSelect: this.handleSelect
          },
          _react2.default.createElement(
            _reactTabs.TabList,
            null,
            this.renderTabs()
          ),
          this.renderTabPanels(),
          _react2.default.createElement(
            _reactTabs.TabPanel,
            null,
            _react2.default.createElement(
              'table',
              { style: this.props.style },
              _react2.default.createElement(
                'tbody',
                null,
                this.renderPropInputs()
              )
            )
          )
        )
      );
    }
  }]);

  return PropsEditor;
}(_react.Component);

PropsEditor.propTypes = {
  component: _propTypes2.default.func,
  onUpdateProps: _propTypes2.default.func,
  style: _propTypes2.default.object
};
PropsEditor.labelStyles = {
  fontSize: _styles2.default.font.size.small,
  fontWeight: _styles2.default.font.weight.boldSemi,
  color: _styles2.default.color.grey37
};
PropsEditor.preStyles = {
  paddingTop: '1rem',
  paddingRight: '1rem',
  paddingBottom: '1rem',
  paddingLeft: '1rem',
  backgroundColor: _styles2.default.color.white,
  height: 300,
  overflow: 'auto'
};

var _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.handleUpdateProps = function (event, propName, value) {
    var onUpdateProps = _this3.props.onUpdateProps;


    var customProps = _extends({}, _this3.state.customProps, _defineProperty({}, propName, value));

    _this3.setState({
      customProps: customProps
    });

    onUpdateProps(customProps);
  };

  this.handleSelect = function (selectedIndex) {
    var _props = _this3.props,
        _props$component6 = _props.component,
        component = _props$component6 === undefined ? {} : _props$component6,
        onUpdateProps = _props.onUpdateProps;
    var exampleProps = component.exampleProps;

    // Clear custom props because form will always be cleared when we change tabs

    _this3.setState({ customProps: {} });

    var totalTabCount = 1; // always custom
    if (exampleProps) {
      if (Array.isArray(exampleProps)) {
        // New style, with multiple states
        totalTabCount += exampleProps.length;
      } else {
        // Old style, just one example state
        totalTabCount += 1;
      }
    }

    var newProps = void 0;
    if (selectedIndex === totalTabCount - 1) {
      // Switched to custom tab, which starts out blank
      newProps = {};
    } else if (Array.isArray(exampleProps)) {
      newProps = exampleProps[selectedIndex].props;
    } else {
      newProps = exampleProps;
    }

    onUpdateProps(newProps);

    _this3.lastSelectedTabIndex = selectedIndex;
  };
};

exports.default = PropsEditor;