redux-import-export-monitor/lib/ImportExportMonitor.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 _reduxDevtools = require('redux-devtools');

var _parseKey = require('parse-key');

var _parseKey2 = _interopRequireDefault(_parseKey);

var _reducers = require('./reducers');

var _reducers2 = _interopRequireDefault(_reducers);

var _InputModal = require('./InputModal');

var _InputModal2 = _interopRequireDefault(_InputModal);

var importState = _reduxDevtools.ActionCreators.importState;

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

  _createClass(ImportExportMonitor, null, [{
    key: 'update',
    value: _reducers2['default'],
    enumerable: true
  }]);

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

    _Component.call(this, props);

    this.state = {
      inputOpen: false
    };

    this.matchesKey = this.matchesKey.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.handleImport = this.handleImport.bind(this);
    this.getStateAndActions = this.getStateAndActions.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

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

  ImportExportMonitor.prototype.componentDidMount = function componentDidMount() {
    window.addEventListener('keydown', this.handleKeyPress.bind(this));
  };

  ImportExportMonitor.prototype.componentWillUnmount = function componentWillUnmount() {
    window.removeEventListener('keydown', this.handleKeyPress.bind(this));
  };

  ImportExportMonitor.prototype.matchesKey = function matchesKey(key, event) {
    var charCode = event.keyCode || event.which;
    var char = String.fromCharCode(charCode);
    return key.name.toUpperCase() === char.toUpperCase() && key.alt === event.altKey && key.ctrl === event.ctrlKey && key.meta === event.metaKey && key.shift === event.shiftKey;
  };

  ImportExportMonitor.prototype.handleKeyPress = function handleKeyPress(e) {
    var modalKey = _parseKey2['default'](this.props.openModalKey);

    if (this.matchesKey(modalKey, e)) {
      e.preventDefault();
      this.setState({ inputOpen: true });
    }
  };

  ImportExportMonitor.prototype.handleImport = function handleImport(newState) {
    try {
      var appState = JSON.parse(newState);
      this.props.dispatch(importState(appState));
    } catch (e) {
      console.warn('Invalid app state JSON passed into the input prompt: ', e);
      this.props.dispatch(importState(this.getStateAndActions()));
    }
  };

  ImportExportMonitor.prototype.getStateAndActions = function getStateAndActions() {
    return {
      monitorState: this.props.monitorState,
      actionsById: this.props.actionsById,
      nextActionId: this.props.nextActionId,
      stagedActionIds: this.props.stagedActionIds,
      skippedActionIds: this.props.skippedActionIds,
      committedState: this.props.committedState,
      computedStates: [], // trigger instrument.recomputeStates()
      currentStateIndex: this.props.currentStateIndex
    };
  };

  ImportExportMonitor.prototype.closeModal = function closeModal() {
    this.setState({ inputOpen: false });
  };

  ImportExportMonitor.prototype.render = function render() {
    var appState = JSON.stringify(this.getStateAndActions());

    return _react2['default'].createElement(_InputModal2['default'], {
      isOpen: this.state.inputOpen,
      appState: appState,
      closeModal: this.closeModal,
      onSubmit: this.handleImport
    });
  };

  _createClass(ImportExportMonitor, null, [{
    key: 'propTypes',
    value: {
      dispatch: _react.PropTypes.func,
      computedStates: _react.PropTypes.array,
      stagedActionIds: _react.PropTypes.array,
      actionsById: _react.PropTypes.object,
      currentStateIndex: _react.PropTypes.number,
      committedState: _react.PropTypes.object,
      monitorState: _react.PropTypes.shape({
        initialScrollTop: _react.PropTypes.number
      }),
      stagedActions: _react.PropTypes.array,
      skippedActionIds: _react.PropTypes.array,
      nextActionId: _react.PropTypes.number,
      select: _react.PropTypes.func.isRequired,
      openModalKey: _react.PropTypes.string
    },
    enumerable: true
  }, {
    key: 'defaultProps',
    value: {
      select: function select(state) {
        return state;
      },
      openModalKey: 'meta-shift-e'
    },
    enumerable: true
  }]);

  return ImportExportMonitor;
})(_react.Component);

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