@helpscout/hsds-react/components/RouteWrapper/RouteWrapper.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.createLocation = createLocation;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _lodash = _interopRequireDefault(require("lodash.get"));

var _lodash2 = _interopRequireDefault(require("lodash.isstring"));

var _hoistNonReactStatics = _interopRequireDefault(require("@helpscout/react-utils/dist/hoistNonReactStatics"));

var _getComponentName = _interopRequireDefault(require("@helpscout/react-utils/dist/getComponentName"));

var _keys = require("../../utilities/keys");

var _WithRouterCheck = _interopRequireDefault(require("../WithRouterCheck"));

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var RouteWrapper = function RouteWrapper(WrappedComponent) {
  var namespace = (0, _getComponentName.default)(WrappedComponent);

  var RouteWrapperComponent = /*#__PURE__*/function (_React$Component) {
    (0, _inheritsLoose2.default)(RouteWrapperComponent, _React$Component);

    function RouteWrapperComponent() {
      var _this;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

      _this.handleOnClick = function (event) {
        var _this$props = _this.props,
            fetch = _this$props.fetch,
            replace = _this$props.replace,
            to = _this$props.to,
            history = _this$props.history;

        _this.props.onClick(event);

        if (!to || !history) return; // Allow ctrl + clicks + non-left-clicks to function normally

        if ((0, _keys.isModifierKeyPressed)(event) || event.button) {
          return;
        }

        event && event.preventDefault();
        var method = replace ? history.replace : history.push;
        fetch().then(function () {
          return method(to);
        }).catch(console.log);
      };

      _this.getHref = function () {
        var _this$props2 = _this.props,
            href = _this$props2.href,
            to = _this$props2.to,
            historyLocation = _this$props2.location;
        var createHref = (0, _lodash.default)(_this.props, 'history.createHref');

        if ((0, _lodash2.default)(to) && createHref) {
          var location = historyLocation && createLocation(to, null, null, historyLocation);
          return location ? createHref(location) : '';
        }

        return to || href;
      };

      return _this;
    }

    var _proto = RouteWrapperComponent.prototype;

    _proto.render = function render() {
      var _this$props3 = this.props,
          fetch = _this$props3.fetch,
          replace = _this$props3.replace,
          to = _this$props3.to,
          rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["fetch", "replace", "to"]);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, rest, {
        href: this.getHref(),
        onClick: this.handleOnClick
      }));
    };

    return RouteWrapperComponent;
  }(_react.default.Component);

  RouteWrapperComponent.defaultProps = {
    onClick: noop,
    fetch: function fetch() {
      return Promise.resolve();
    },
    replace: false
  };
  RouteWrapperComponent.displayName = "withRoute(" + namespace + ")";
  RouteWrapperComponent.propTypes = {
    fetch: _propTypes.default.func,
    href: _propTypes.default.string,
    onClick: _propTypes.default.func,
    replace: _propTypes.default.bool,
    target: _propTypes.default.string,
    o: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
  };
  return (0, _hoistNonReactStatics.default)((0, _WithRouterCheck.default)(RouteWrapperComponent), WrappedComponent);
};

RouteWrapper.propTypes = {
  fetch: _propTypes.default.func,
  href: _propTypes.default.string,
  onClick: _propTypes.default.func,
  replace: _propTypes.default.bool,
  target: _propTypes.default.string,
  o: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
};

function sanitizePathName(pathname) {
  return pathname.replace(/\:(.*)\//g, '');
}

function generateKey() {
  return Math.random().toString(36).substr(2, 5);
}

function createLocation(path, state, key, location) {
  if (location === void 0) {
    location = {};
  }

  var a = document.createElement('a');
  a.href = path || location.pathname;
  var pathname = sanitizePathName(a.pathname);
  var locationKey = key || generateKey();
  return {
    state: state || null,
    pathname: '/' + pathname.split('/').filter(Boolean).join('/'),
    search: a.search,
    hash: a.hash,
    key: locationKey
  };
}

var _default = RouteWrapper;
exports.default = _default;