react-view-router
Version:
react-view-router
264 lines • 11.3 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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/es7.array.includes.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 _regeneratorRuntime from "@babel/runtime/regenerator";
import { useContext, useState, useEffect, useCallback, useImperativeHandle } from 'react';
import { RouterContext, RouterViewContext } from '../context';
import { _checkActivate, _checkDeactivate } from '../router-view';
import { innumerable, isFunction, isPlainObject, isNumber, readRouteMeta, isEmptyRouteState } from '../util';
function isCommonPage(matched, commonPageName) {
return Boolean(commonPageName && matched.some(r => readRouteMeta(r.config, commonPageName)));
}
function getRouteMatched(router, currentRoute, commonPageName) {
if (!currentRoute || !router) return [];
var _currentRoute$matched = currentRoute.matched,
matched = _currentRoute$matched === void 0 ? [] : _currentRoute$matched;
if (matched) {
var _isCommonPage = isCommonPage(matched, commonPageName);
if (_isCommonPage && currentRoute.query.redirect) {
matched = router.getMatched(currentRoute.query.redirect);
}
}
return matched;
}
function useRouter(defaultRouter) {
// eslint-disable-next-line react-hooks/rules-of-hooks
return defaultRouter || useContext(RouterContext);
}
function useRoute(defaultRouter, options = {}, anotherWatch = null) {
var router = useRouter(defaultRouter);
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
setSeed = _useState2[1];
if (options.watch && router) {
// eslint-disable-next-line react-hooks/rules-of-hooks
var onRouteChange = useCallback(/*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(route, prevRoute, router) {
var _t, _t2, _t3, _t4;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(options.ignoreSamePath !== false && route && prevRoute && route.fullPath === prevRoute.fullPath)) {
_context.next = 1;
break;
}
return _context.abrupt("return");
case 1:
_t = anotherWatch;
if (!_t) {
_context.next = 3;
break;
}
_context.next = 2;
return anotherWatch(route, prevRoute, router);
case 2:
_t2 = _context.sent;
_t = _t2 === false;
case 3:
if (!_t) {
_context.next = 4;
break;
}
return _context.abrupt("return");
case 4:
_t3 = isFunction(options.watch);
if (!_t3) {
_context.next = 6;
break;
}
_context.next = 5;
return options.watch(route, prevRoute, router);
case 5:
_t4 = _context.sent;
_t3 = _t4 === false;
case 6:
if (!_t3) {
_context.next = 7;
break;
}
return _context.abrupt("return");
case 7:
if (options.delay) {
setTimeout(() => setSeed(seed => seed + 1), isNumber(options.delay) ? options.delay : 0);
} else setSeed(seed => seed + 1);
case 8:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x, _x2, _x3) {
return _ref.apply(this, arguments);
};
}(), [options, anotherWatch]);
// eslint-disable-next-line react-hooks/rules-of-hooks
useRouteChanged(router, onRouteChange);
}
return router ? router.currentRoute || router.initialRoute : null;
}
function useRouterView() {
return useContext(RouterViewContext);
}
function useMatchedRouteIndex(matchedOffset = 0) {
var view = useRouterView();
var index = view ? view.state.depth : 0;
return Math.max(0, index + matchedOffset);
}
function useMatchedRouteAndIndex(defaultRouter, options = {}) {
var matchedOffset = options.matchedOffset;
var router = useRouter(defaultRouter);
var routeIndex = useMatchedRouteIndex(matchedOffset);
var matchRouteWatch = useCallback((route, prevRoute) => route.matched[routeIndex] !== prevRoute.matched[routeIndex], [routeIndex]);
var route = useRoute(defaultRouter, options, matchRouteWatch);
var matched = getRouteMatched(router, route, options.commonPageName);
var matchedRoute = matched && matched[routeIndex] || null;
return [matchedRoute, routeIndex];
}
function useMatchedRoute(defaultRouter, options) {
var ret = useMatchedRouteAndIndex(defaultRouter, options);
return ret[0];
}
function useRouteMeta(metaKey, defaultRouter, options) {
var router = useRouter(defaultRouter);
var route = useMatchedRoute(router, options);
var meta = route && route.meta;
var keyIsArray = Array.isArray(metaKey);
if (keyIsArray && !metaKey.length) throw new Error('metaKey is Empty!');
var _useState3 = useState(() => keyIsArray ? metaKey.reduce((p, key) => {
if (!meta) return p;
p[key] = meta[key];
return p;
}, {}) : {
[metaKey]: meta && meta[metaKey]
}),
_useState4 = _slicedToArray(_useState3, 2),
value = _useState4[0],
_setValue = _useState4[1];
var setValue = useCallback((newValue, setAll = false) => {
if (!meta) return;
if (!keyIsArray) {
newValue = {
[metaKey]: newValue
};
} else if (!setAll) {
newValue = Object.keys(newValue).reduce((p, key) => {
if (metaKey.includes(key)) p[key] = newValue[key];
return p;
}, {});
}
var changed = route && router && router.updateRouteMeta(route, newValue, {
ignoreConfigRoute: options === null || options === void 0 ? void 0 : options.ignoreConfigRoute
});
if (!changed) return;
_setValue(_objectSpread(_objectSpread({}, value), newValue));
}, [meta, keyIsArray, route, router, value, metaKey, options === null || options === void 0 ? void 0 : options.ignoreConfigRoute]);
return keyIsArray ? [value, setValue] : [value[metaKey], setValue];
}
function useRouteState(defaultRouter, stateAction, options) {
var _useState5 = useState(stateAction || {}),
_useState6 = _slicedToArray(_useState5, 1),
defaultState = _useState6[0];
var router = useRouter(defaultRouter);
var route = useMatchedRoute(router || defaultRouter, options);
var routeUrl = route && route.url;
var setRouteState = useCallback(newState => router && router.replaceState(newState, route || undefined),
// eslint-disable-next-line react-hooks/exhaustive-deps
[router, routeUrl]);
var state = route && route.state;
if (isEmptyRouteState(state) && defaultState) state = defaultState;
return [state, setRouteState];
}
function useRouteParams(defaultRouter, options) {
var router = useRouter(defaultRouter);
var route = useMatchedRoute(router || defaultRouter, options);
var params = route ? route.params : {};
return params;
}
function useRouteQuery(defaultRouter, options) {
var router = useRouter(defaultRouter);
var route = useRoute(router || defaultRouter, options);
return route ? route.query : {};
}
function useRouteChanged(router, onChange, deps = []) {
var _useState7 = useState({}),
_useState8 = _slicedToArray(_useState7, 1),
plugin = _useState8[0];
plugin.onRouteChange = onChange;
return useEffect(() => {
var unplugin = router.plugin(plugin);
return () => unplugin && unplugin();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [router, plugin, ...deps]);
}
function useRouteMetaChanged(router, onChange, deps = []) {
var _useState9 = useState({}),
_useState0 = _slicedToArray(_useState9, 1),
plugin = _useState0[0];
plugin.onRouteMetaChange = useCallback((newVal, oldVal, route, router) => {
if (deps.length && !deps.some(v => {
if (isPlainObject(v)) return v === route.meta;
return v in oldVal;
})) return;
return onChange(newVal, oldVal, route, router);
}, [deps, onChange]);
return useEffect(() => {
var unplugin = router.plugin(plugin);
return () => unplugin && unplugin();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [router, plugin, ...deps]);
}
function createRouteGuardsRef(ref) {
if (ref && !ref.__routeGuardInfoHooks) innumerable(ref, '__routeGuardInfoHooks', true);
return ref;
}
function useRouteGuardsRef(ref, guards, deps = []) {
if (!isFunction(guards)) deps.concat(guards);
return useImperativeHandle(ref, (...args) => {
var ret;
if (isFunction(guards)) ret = guards(...args);else ret = guards;
return createRouteGuardsRef(ret);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
deps);
}
function useRouterViewEvent(name, onEvent, unshift) {
var view = useRouterView();
var _useState1 = useState({}),
_useState10 = _slicedToArray(_useState1, 1),
$refs = _useState10[0];
$refs.onEvent = onEvent;
$refs.unshift = unshift;
useEffect(() => {
if (!view) return;
var fn = (...args) => $refs.onEvent(...args);
view._events[name][$refs.unshift ? 'unshift' : 'push'](fn);
return () => {
var idx = view._events[name].indexOf(fn);
if (~idx) view._events[name].splice(idx, 1);
};
}, [$refs, view, name]);
}
function useViewActivate(onEvent) {
var router = useRouter();
var current = useMatchedRoute();
useRouterViewEvent('activate', event => {
if (!onEvent || !_checkActivate(router, current, event)) return;
onEvent(event);
});
}
function useViewDeactivate(onEvent) {
var router = useRouter();
var current = useMatchedRoute();
useRouterViewEvent('deactivate', event => {
if (!onEvent || !_checkDeactivate(router, current, event)) return;
onEvent(event);
}, true);
}
export { isCommonPage, getRouteMatched, useRouter, useRouteChanged, useRouteMetaChanged, useRoute, useRouteMeta, useRouteState, useRouteParams, useRouteQuery, useRouterView, useMatchedRouteIndex, useMatchedRoute, useMatchedRouteAndIndex, useRouteGuardsRef, useRouterViewEvent, useViewActivate, useViewDeactivate, createRouteGuardsRef };
//# sourceMappingURL=base.js.map