react-view-router
Version:
react-view-router
225 lines • 9.19 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["router", "onRouteActive", "onRouteInactive", "onRouteChange", "exact", "activeClass", "exactActiveClass", "tag", "to", "replace", "append", "event", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import "core-js/modules/es6.regexp.replace.js";
import "core-js/modules/es6.symbol.js";
import "core-js/modules/es6.array.filter.js";
import "core-js/modules/es7.object.get-own-property-descriptors.js";
import React from 'react';
import PropTypes from 'prop-types';
import { camelize, normalizeLocation, getHostRouterView, isPropChanged } from './util';
function guardEvent(e) {
// don't redirect with control keys
if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
// don't redirect when preventDefault called
if (e.defaultPrevented) return;
// don't redirect on right click
if (e.button !== undefined && e.button !== 0) return;
// don't redirect if `target="_blank"`
if (e.currentTarget && e.currentTarget.getAttribute) {
var target = e.currentTarget.getAttribute('target');
if (/\b_blank\b/i.test(target)) return;
}
// this may be a Weex event which doesn't have this method
if (e.preventDefault) {
e.preventDefault();
}
return true;
}
var routerLinkSeed = 0;
class RouterLink extends React.Component {
constructor(props) {
super(props);
var router = props.router;
this.state = {
inited: false,
router,
routerView: null,
seed: routerLinkSeed++,
isMatched: false
};
}
_remount() {
var seed = this.state.seed;
var router = this.state.router;
if (this.unplugin) {
this.unplugin();
this.unplugin = undefined;
}
var routerView = router ? router.viewRoot : getHostRouterView(this);
if (!router && routerView) router = routerView.state.router;
this.unplugin = router ? router.plugin({
name: `router-link-plugin-${seed}`,
onRouteChange: currentRoute => {
var isMatchedOld = this.state.isMatched;
var _this$props = this.props,
onRouteChange = _this$props.onRouteChange,
onRouteActive = _this$props.onRouteActive,
onRouteInactive = _this$props.onRouteInactive;
var isMatched = this.isMatched(currentRoute);
this.setState({
isMatched
});
if (isMatched !== isMatchedOld) {
if (isMatched) onRouteActive && onRouteActive(currentRoute, this);else onRouteInactive && onRouteInactive(currentRoute, this);
}
if (onRouteChange) onRouteChange(currentRoute, this);
}
}) : undefined;
var onRouteActive = this.props.onRouteActive;
var isMatched = Boolean(router && this.isMatched(router.currentRoute, routerView));
if (router && isMatched) onRouteActive && onRouteActive(router.currentRoute, this);
var state = {
inited: true,
router,
routerView,
isMatched
};
this.setState(state);
}
getFallbackClassName(isMatched) {
var exact = this.props.exact;
var _this$props2 = this.props,
activeClass = _this$props2.activeClass,
exactActiveClass = _this$props2.exactActiveClass;
var router = this.state.router;
if (router) {
if (router.linkActiveClass) {
activeClass = activeClass ? `${activeClass} ${router.linkActiveClass}` : router.linkActiveClass;
}
if (router.linkExactActiveClass) {
exactActiveClass = exactActiveClass ? `${exactActiveClass} ${router.linkExactActiveClass}` : router.linkExactActiveClass;
}
}
var fallbackClass = '';
if (isMatched) fallbackClass = exact ? exactActiveClass : activeClass;
return fallbackClass;
}
isMatched(currentRoute = null, routerView = null) {
var router = this.state.router;
if (!currentRoute && router) currentRoute = router.currentRoute;
if (!currentRoute) return false;
var _this$props3 = this.props,
exact = _this$props3.exact,
append = _this$props3.append;
var to = this.props.to;
if (!routerView) routerView = this.state.routerView;
to = normalizeLocation(to, {
route: routerView ? routerView.state.currentRoute : null,
append,
queryProps: router && router.queryProps
});
var isMatched = false;
if (to && currentRoute) {
isMatched = exact ? to.path === currentRoute.path : currentRoute.path.startsWith(to.path);
}
return isMatched;
}
componentDidMount() {
this._remount();
}
componentWillUnmount() {
if (this.unplugin) {
this.unplugin();
this.unplugin = undefined;
}
}
shouldComponentUpdate(nextProps, nextState) {
if (isPropChanged(this.props, nextProps)) return true;
if (this.state.inited !== nextState.inited) return true;
if (this.state.isMatched !== nextState.isMatched) return true;
return false;
}
componentDidUpdate(prevProps) {
var newState = {};
if (this.props.router !== prevProps.router) newState.router = this.props.router;
// if (this.props.to !== prevProps.to) {
// if (!isPlainObject(this.props.to) || !isPlainObject(prevProps.to)
// || isPropChanged(this.props.to, prevProps.to)) {
// newState.to = this.props.to;
// }
// }
if (Object.keys(newState).length) {
this.setState(newState, () => this._remount());
}
}
render() {
if (!this.state.inited) return null;
if (!this.props.tag) return this.props.children;
var _this$props4 = this.props,
router1 = _this$props4.router,
onRouteActive = _this$props4.onRouteActive,
onRouteInactive = _this$props4.onRouteInactive,
onRouteChange = _this$props4.onRouteChange,
exact = _this$props4.exact,
activeClass = _this$props4.activeClass,
exactActiveClass = _this$props4.exactActiveClass,
tag = _this$props4.tag,
to = _this$props4.to,
replace = _this$props4.replace,
append = _this$props4.append,
event = _this$props4.event,
_this$props4$children = _this$props4.children,
children = _this$props4$children === void 0 ? [] : _this$props4$children,
remainProps = _objectWithoutProperties(_this$props4, _excluded);
var _this$state = this.state,
router = _this$state.router,
isMatched = _this$state.isMatched,
routerView = _this$state.routerView;
var events = {};
to = normalizeLocation(to, {
route: routerView ? routerView.state.currentRoute : null,
append,
queryProps: router && router.queryProps
});
var fallbackClass = this.getFallbackClassName(isMatched);
if (fallbackClass) {
if (remainProps.className) remainProps.className = `${fallbackClass} ${remainProps.className}`;else remainProps.className = fallbackClass;
}
if (!Array.isArray(event)) event = event ? [event] : [];
event.forEach(evt => {
if (!evt) return;
var eventName = evt.startsWith('on') ? evt : camelize(`on-${evt}`);
events[eventName] = e => {
if (!to || !router || remainProps.disabled) return;
if (remainProps[eventName] && remainProps[eventName](e, to) === false) return;
guardEvent(e);
if (replace) router.replace(to);else router.push(to);
};
});
if (to && tag === 'a') remainProps.href = to.path;
return /*#__PURE__*/React.createElement(tag, _objectSpread(_objectSpread({}, remainProps), events), children);
}
}
RouterLink.propTypes = {
className: PropTypes.string,
to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
replace: PropTypes.bool,
append: PropTypes.bool,
tag: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
activeClass: PropTypes.string,
exact: PropTypes.bool,
disabled: PropTypes.bool,
exactActiveClass: PropTypes.string,
event: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
onRouteChange: PropTypes.func,
onRouteActive: PropTypes.func,
onRouteInactive: PropTypes.func
};
RouterLink.defaultProps = {
tag: '',
activeClass: 'router-link-active',
exactActiveClass: 'exact-active-class',
event: 'click'
};
export { RouterLink, guardEvent };
export default function createRouterLink(router) {
return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(RouterLink, _objectSpread(_objectSpread({
router
}, props), {}, {
ref
}), props.children));
}
//# sourceMappingURL=router-link.js.map