redux-import-export-monitor/lib/InputModal.js

Redux DevTools monitor for copying state/action log to clipboard as well as pasting it back in.

'use strict';

exports.__esModule = true;

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; }; })();

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

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

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactAddonsShallowCompare = require('react-addons-shallow-compare');

var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);

var _reactModal = require('react-modal');

var _reactModal2 = _interopRequireDefault(_reactModal);

var style = {
  overlay: {
    zIndex: 100
  },
  content: {
    overflow: 'hidden',
    left: '25%',
    height: 10,
    width: '50%',
    display: 'flex',
    alignItems: 'center'
  }
};

var formStyle = {
  flex: 1,
  display: 'flex',
  justifyContent: 'space-around',
  alignItems: 'center'
};

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

  _createClass(InputModal, null, [{
    key: 'defaultProps',
    value: {
      contentLabel: 'Modal'
    },
    enumerable: true
  }, {
    key: 'propTypes',
    value: {
      closeModal: _react.PropTypes.func.isRequired,
      onSubmit: _react.PropTypes.func.isRequired,
      isOpen: _react.PropTypes.bool,
      appState: _react.PropTypes.string,
      contentLabel: _react.PropTypes.string
    },
    enumerable: true
  }]);

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

    _Component.call(this, props);

    this.state = {
      appState: props.appState
    };

    this.onInputChange = this.onInputChange.bind(this);
    this.onModalOpen = this.onModalOpen.bind(this);
    this.onRequestClose = this.onRequestClose.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
  }

  InputModal.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    return _reactAddonsShallowCompare2['default'](this, nextProps, nextState);
  };

  InputModal.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var _this = this;

    var onModalOpen = undefined;
    if (!this.props.isOpen && nextProps.isOpen) {
      onModalOpen = true;
    }
    this.setState({
      appState: nextProps.appState
    }, function () {
      if (onModalOpen) {
        _this.onModalOpen();
      }
    });
  };

  InputModal.prototype.onInputChange = function onInputChange(e) {
    this.setState({ appState: e.target.value });
  };

  InputModal.prototype.onModalOpen = function onModalOpen() {
    this.modalInput.setSelectionRange(0, this.modalInput.value.length);
  };

  InputModal.prototype.onRequestClose = function onRequestClose() {
    this.props.onSubmit(this.state.appState);
    this.props.closeModal();
  };

  InputModal.prototype.onKeyDown = function onKeyDown(e) {
    if (e.keyCode === 13) {
      this.onRequestClose();
    }
  };

  InputModal.prototype.render = function render() {
    var _this2 = this;

    return _react2['default'].createElement(
      _reactModal2['default'],
      { style: style, isOpen: this.props.isOpen, onRequestClose: this.onRequestClose, contentLabel: this.props.contentLabel },
      _react2['default'].createElement(
        'div',
        { style: formStyle },
        _react2['default'].createElement('input', { ref: function (ref) {
            return _this2.modalInput = ref;
          },
          style: { flex: 10 },
          onChange: this.onInputChange,
          value: this.state.appState,
          onKeyDown: this.onKeyDown
        }),
        _react2['default'].createElement(
          'button',
          { style: { flex: 1 }, onClick: this.props.closeModal },
          'Cancel'
        )
      )
    );
  };

  return InputModal;
})(_react.Component);

exports['default'] = InputModal;
module.exports = exports['default'];