react-view-router
Version:
react-view-router
260 lines (257 loc) • 11.3 kB
JavaScript
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 _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["name", "transition", "transitionPrefix", "transitionZIndex", "transitionFallback", "routerView", "router", "container", "containerStyle", "onScrollToPosition", "onSavePosition"];
import "core-js/modules/es7.array.includes.js";
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 React, { useMemo, useState } from 'react';
import { RouterView as RouterViewOrigin, useRouter, useMatchedRouteIndex, isPlainObject, isFunction, getSessionStorage, setSessionStorage, nextTick } from 'react-view-router';
import SwitchTransition from './SwitchTransition';
import CSSTransition from './CSSTransition';
import './router-view.css';
var SAVED_POSITION_KEY = '_REACT_VIEW_ROUTER_TRANSITION_POSITIONS_';
/**
* @param {import('react-view-router').Route} to
*/
function isPush(to) {
return to && (to.action === 'PUSH' || to.params.isPush || to.query.isPush);
}
/**
* @param {import('react-view-router').Route} to
* @param {import('react-view-router').Route} [prevRoute]
*/
function isPop(to, prevRoute) {
return !to && prevRoute || to.action === 'POP' || to.params.isBack || to.params.isPop || to.query.back;
}
/**
* @param {import('react-view-router').Route} to
* @param {import('react-view-router').Route} [prevRoute]
*/
function isReplace(to, prevRoute) {
return to && to.action === 'REPLACE' && !isPush(to) && !isPop(to, prevRoute);
}
/**
* @typedef {import('react-view-router').RouterView} RouterView
* @typedef {import('../types/router-view').TransitionRouterViewProps} TransitionRouterViewProps
*/
/**
* @type {React.ForwardRefExoticComponent<TransitionRouterViewProps & React.RefAttributes<RouterView>>}
*/
var RouterViewTransition = /*#__PURE__*/React.forwardRef((props, ref) => {
var name = props.name,
_props$transition = props.transition,
transition = _props$transition === void 0 ? 'slide' : _props$transition,
_props$transitionPref = props.transitionPrefix,
transitionPrefix = _props$transitionPref === void 0 ? 'react-view-router-' : _props$transitionPref,
_props$transitionZInd = props.transitionZIndex,
transitionZIndex = _props$transitionZInd === void 0 ? 1000 : _props$transitionZInd,
_props$transitionFall = props.transitionFallback,
transitionFallback = _props$transitionFall === void 0 ? '' : _props$transitionFall,
routerView = props.routerView,
defaultRouter = props.router,
container = props.container,
_props$containerStyle = props.containerStyle,
containerStyle = _props$containerStyle === void 0 ? {} : _props$containerStyle,
onScrollToPosition = props.onScrollToPosition,
onSavePosition = props.onSavePosition,
restProps = _objectWithoutProperties(props, _excluded);
var router = useRouter(defaultRouter);
var matchedRouteIndex = useMatchedRouteIndex();
var savedPositionsKey = useMemo(() => `${name || 'default'}_${matchedRouteIndex}`, [name, matchedRouteIndex]);
var _useState = useState(() => {
var positions = getSessionStorage(SAVED_POSITION_KEY, true) || {};
if (!positions[savedPositionsKey]) positions[savedPositionsKey] = {};
return {
positions,
onScrollToPosition,
onSavePosition
};
}),
_useState2 = _slicedToArray(_useState, 1),
$refs = _useState2[0];
$refs.onScrollToPosition = onScrollToPosition;
$refs.onSavePosition = onSavePosition;
if (routerView === RouterViewTransition) routerView = null;
var backgroundColor = useMemo(() => containerStyle && containerStyle.backgroundColor || document.defaultView.getComputedStyle(document.body, null).getPropertyValue('background-color'),
// eslint-disable-next-line react-hooks/exhaustive-deps
[containerStyle && containerStyle.backgroundColor]);
containerStyle = _objectSpread({
height: '100%'
}, containerStyle);
var containerTag = 'div';
if (isPlainObject(transition)) {
transitionZIndex = transition.zIndex || transitionZIndex;
containerStyle = Object.assign(containerStyle, transition.containerStyle);
containerTag = transition.containerTag || containerTag;
transition = transition.name || 'slide';
}
var transitionMap = useMemo(() => {
var isSlideNode = node => node && node.className.includes(transitionPrefix + 'slide');
var isFadeNode = node => node && node.className.includes(transitionPrefix + 'fade');
var _savePosition = maybeNode => {
var node = maybeNode && maybeNode.children[0];
var to = router.currentRoute;
if (node && isPush(to)) {
var from = router.prevRoute;
var key = from ? from.path : '-';
// const matchedRoute = to && to.matched[matchedRouteIndex + 1];
var position = from !== null && from !== void 0 && from.metaComputed.savePosition ? {
x: node.scrollLeft,
y: node.scrollTop
} : $refs.onSavePosition ? $refs.onSavePosition(node, {
to,
from
}) : null;
if (position && (position.x || position.y)) {
$refs.positions[savedPositionsKey][key] = position;
setSessionStorage(SAVED_POSITION_KEY, $refs.positions);
}
}
};
var _scrollToPosition = maybeNode => {
var node = maybeNode && maybeNode.children[0];
var to = router.currentRoute;
if (node && isPop(to, router.prevRoute)) {
var key = to ? to.path : '-';
var savedPosition = $refs.positions[savedPositionsKey][key];
if (savedPosition) {
if ($refs.onScrollToPosition) $refs.onScrollToPosition(node, savedPosition);else node.scrollTo(savedPosition.x, savedPosition.y);
delete $refs.positions[savedPositionsKey][key];
setSessionStorage(SAVED_POSITION_KEY, $refs.positions);
}
}
};
var transitionProps = {
addEndListener: (node, done) => {
var to = router.currentRoute;
if (!isFadeNode(node) && isReplace(to, router.prevRoute) || node.className.includes('slide-right-enter') || node.className.includes('slide-left-exit')) {
return done();
}
node.addEventListener('transitionend', done, false);
},
onEnter: maybeNode => {
// if (maybeNode && $refs.route) {
// maybeNode.childNodes.forEach(node => {
// if (!node[KEEP_ALIVE_REPLACOR]
// || node.$refs.mountRoot === maybeNode) return;
// node.mountView(maybeNode, node);
// })
// }
if (isSlideNode(maybeNode)) {
if (transitionZIndex) maybeNode.style.zIndex = transitionZIndex;
if (backgroundColor) maybeNode.style.backgroundColor = backgroundColor;
}
},
onEntering: maybeNode => {
nextTick(() => _scrollToPosition(maybeNode));
},
onEntered: maybeNode => {
if (isSlideNode(maybeNode)) {
if (transitionZIndex) maybeNode.style.zIndex = '';
if (backgroundColor) maybeNode.style.backgroundColor = '';
}
},
onExit: maybeNode => {
_savePosition(maybeNode);
if (isSlideNode(maybeNode)) {
if (transitionZIndex) maybeNode.style.zIndex = transitionZIndex;
if (backgroundColor) maybeNode.style.backgroundColor = backgroundColor;
}
},
onExited: maybeNode => {
// if (maybeNode) {
// maybeNode.childNodes.forEach(node => {
// if (!node[KEEP_ALIVE_REPLACOR]
// || node.$refs.mountRoot !== maybeNode) return;
// node.unmountView();
// })
// }
if (isSlideNode(maybeNode)) {
if (transitionZIndex) maybeNode.style.zIndex = '';
if (backgroundColor) maybeNode.style.backgroundColor = '';
}
}
};
/**
* @type {{
* [key: string]: {
* mode: string,
* props: Partial<any>
* }}
* */
var map = {
fade: {
mode: 'out-in',
props: {
classNames: transitionPrefix + 'fade'
}
},
slide: {
mode: 'in-out',
props: {
classNames: () => {
var ret = '';
var to = router.currentRoute;
if (isPush(to)) {
ret = 'slide-left';
} else if (isPop(to, router.prevRoute)) {
ret = 'slide-right';
} else {
ret = isFunction(transitionFallback) ? transitionFallback(to) : transitionFallback;
}
return ret ? `${transitionPrefix}${ret}` : ret;
}
}
},
carousel: {
mode: 'together',
props: {
classNames: () => {
var ret = '';
var to = router.currentRoute;
if (isPush(to)) {
ret = 'carousel-left';
} else if (isPop(to, router.prevRoute)) {
ret = 'carousel-right';
} else {
ret = isFunction(transitionFallback) ? transitionFallback(to) : transitionFallback;
}
return ret ? `${transitionPrefix}${ret}` : ret;
}
}
}
};
var transitionItem = map[transition];
if (transitionItem) Object.assign(transitionItem.props, transitionProps);
return transitionItem || {
mode: '',
props: {}
};
}, [$refs, matchedRouteIndex, savedPositionsKey, router, transitionFallback, transition, transitionPrefix, transitionZIndex, backgroundColor]);
return /*#__PURE__*/React.createElement(routerView || RouterViewOrigin, _objectSpread({
ref: ref ? {
ref
} : undefined,
name,
router: defaultRouter,
container: transition ? (result, route, props, view) => {
if (container) result = container(result, route, props, view);
// if (view.state.enableKeepAlive) return result;
// console.log('router-view container', route, route.path, this.transitionName, router.stacks.length);
return /*#__PURE__*/React.createElement(SwitchTransition, {
mode: transitionMap.mode
}, /*#__PURE__*/React.createElement(CSSTransition, _objectSpread({
key: route.path
}, transitionMap.props), /*#__PURE__*/React.createElement(containerTag, {
style: containerStyle
// [`data-${KEEP_ALIVE_KEEP_COPIES}`]: true,
}, result)));
} : container
}, restProps));
});
export { SAVED_POSITION_KEY };
export default RouterViewTransition;