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

React component library for Help Scout's Design System

"use strict";

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

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

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

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

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

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

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

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// This HoC checks if there is Router context present, if yes, it wraps provided Component with `withRouter`
// This is necessary for backward compatibility after upgrading react-router version
// Previously old Context API has been used, so there was no need to check, but now there is error thrown if Context is not present
// some components are used without Router Context present, so this check is to not break them
function WithRouterCheck(WrappedComponent) {
  var namespace = (0, _getComponentName.default)(WrappedComponent);

  var Wrapper = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    var routerContext = (0, _react.useContext)(_reactRouter.__RouterContext);
    var previousComponent = (0, _react.useRef)();
    var Component = (0, _react.useMemo)(function () {
      if (routerContext) {
        // Let's remember and re-use previous component if it had router context and it has changed
        // It would not break anything, but prevent from recreating component from scratch in case of re-rendering
        // this case might be only for testing purposes, but I might have just not encounter it in real case yet
        // in tests this occur when calling `rerender` from react-testing-library
        var currentComponent = previousComponent.current ? previousComponent.current : (0, _reactRouter.withRouter)(WrappedComponent);
        previousComponent.current = currentComponent;
        return currentComponent;
      }

      return WrappedComponent;
    }, [routerContext]);
    var refProps = (0, _react.useMemo)(function () {
      var _ref;

      var refKey = routerContext ? 'wrappedComponentRef' : 'ref';
      return ref ? (_ref = {}, _ref[refKey] = ref, _ref) : {};
    }, [routerContext, ref]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, refProps, props));
  });

  Wrapper.displayName = "withRouterCheck(" + namespace + ")";
  return (0, _hoistNonReactStatics.default)(Wrapper, WrappedComponent);
}

var _default = WithRouterCheck;
exports.default = _default;