react-router-hooks/lib/index.js

HoC over Route component that enables onEnter, onChange, and onLeave hooks

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: 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; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRouter = require('react-router');

var _reactRouterDom = require('react-router-dom');

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _bluebird = require('bluebird');

var _bluebird2 = _interopRequireDefault(_bluebird);

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 _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 HookedRoute = function (_React$Component) {
  _inherits(HookedRoute, _React$Component);

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

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

    _this.state = { pending: false };
    _this.replace = _this.replace.bind(_this);
    _this.callback = _this.callback.bind(_this);
    _this.arrityCheck = _this.arrityCheck.bind(_this);
    return _this;
  }

  _createClass(HookedRoute, [{
    key: 'arrityCheck',
    value: function arrityCheck() {
      var _props = this.props,
          onEnter = _props.onEnter,
          onChange = _props.onChange;

      return onEnter && onEnter.length > 2 || onChange && onChange.length > 3;
    }
  }, {
    key: 'replace',
    value: function replace(url) {
      this.props.history.push(url);
    }
  }, {
    key: 'callback',
    value: function callback() {
      if (this.state.pending) this.setState({ pending: false });
    }
  }, {
    key: 'runAsync',
    value: function runAsync(hookFunc) {

      var hookFuncAsync = _bluebird2.default.promisify(hookFunc);

      hookFuncAsync().then(this.callback).catch(console.error);
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      if (this.arrityCheck()) this.setState({ pending: true });
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      var onEnter = this.props.onEnter;

      if (onEnter) {
        if (onEnter.length > 2) {
          this.runAsync(function () {
            return onEnter(_this2.props, _this2.replace, _this2.callback);
          });
        } else {
          onEnter(this.props, this.replace);
        }
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var _this3 = this;

      var _props2 = this.props,
          onLeave = _props2.onLeave,
          onChange = _props2.onChange,
          computedMatch = _props2.computedMatch,
          location = _props2.location;

      if (onChange && nextProps.computedMatch && computedMatch && nextProps.computedMatch.path === computedMatch.path && (nextProps.location.search !== location.search || JSON.stringify(nextProps.computedMatch.params) !== JSON.stringify(computedMatch.params))) {
        if (onChange.length > 3) {
          this.runAsync(function () {
            return onChange(_this3.props, nextProps, _this3.replace, _this3.callback);
          });
        } else {
          onChange(this.props, nextProps, this.replace);
        }
      }
      if (onLeave && nextProps.computedMatch && computedMatch && nextProps.computedMatch.path !== computedMatch.path) {
        onLeave(this.props);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      if (this.state.pending) return null;else return _react2.default.createElement(_reactRouter.Route, this.props);
    }
  }]);

  return HookedRoute;
}(_react2.default.Component);

HookedRoute.propTypes = {
  computedMatch: _propTypes2.default.object,
  onEnter: _propTypes2.default.func,
  onChange: _propTypes2.default.func,
  onLeave: _propTypes2.default.func
};

exports.default = (0, _reactRouterDom.withRouter)(HookedRoute);