nav-link-with-prop/lib/index.js

React Router NavLink that uses an active prop rather than css class.

"use strict";

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

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

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

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

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

// TODO: prop for active

/**
 * A Render Props wrapper that knows if it's "active" or not.
 */
function NavLinkWithProp(_ref) {
  var exact = _ref.exact,
      isActiveProp = _ref.isActive,
      activeProp = _ref.activeProp,
      location = _ref.location,
      strict = _ref.strict,
      to = _ref.to,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["exact", "isActive", "activeProp", "location", "strict", "to", "children"]);

  var path = typeof to === 'object' ? to.pathname : to; // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202

  var escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1');
  return _react.default.createElement(_reactRouterDom.Route, {
    path: escapedPath,
    exact: exact,
    strict: strict,
    location: location
  }, function (_ref2) {
    var _objectSpread2;

    var loc = _ref2.location,
        match = _ref2.match;
    var isActive = !!(isActiveProp ? isActiveProp(match, loc) : match);
    return children(_objectSpread((_objectSpread2 = {}, _objectSpread2[activeProp] = isActive, _objectSpread2.to = to, _objectSpread2), rest));
  });
}

NavLinkWithProp.propTypes = {
  exact: _reactRouterDom.Route.propTypes.exact,
  isActive: _propTypes.default.func,
  activeProp: _propTypes.default.string,
  // eslint-disable-next-line react/forbid-prop-types
  location: _propTypes.default.object,
  strict: _reactRouterDom.Route.propTypes.strict,
  to: _reactRouterDom.Link.propTypes.to,
  children: _propTypes.default.func
};
NavLinkWithProp.defaultProps = {
  exact: undefined,
  isActive: undefined,
  activeProp: 'active',
  location: undefined,
  strict: undefined,
  to: undefined,
  children: undefined
};
var _default = NavLinkWithProp;
exports.default = _default;
module.exports = exports.default;
//# sourceMappingURL=index.js.map