react-view-router
Version:
react-view-router
154 lines (153 loc) • 6.48 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";
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 from 'react';
import { RouterViewComponent, renderRoute, config, isFunction
// eslint-disable-next-line import/no-relative-packages
} from '../..';
import Drawer from './drawer';
import '../style/drawer.css';
class RouterDrawer extends RouterViewComponent {
constructor(props) {
super(props);
this.needAnimation = false;
Object.assign(this.state, {
openDrawer: false,
prevRoute: null,
_routerDrawer: true
});
this._handleClose = this._handleClose.bind(this);
this._handleAnimationEnd = this._handleAnimationEnd.bind(this);
}
_refreshCurrentRoute(state, newState, callback) {
if (!state) state = this.state;
var prevRoute = state.currentRoute;
if (!newState) newState = {
openDrawer: false
};else newState.openDrawer = false;
var currentRoute = super._refreshCurrentRoute(state, newState, callback);
var openDrawer;
if (this.isNull(prevRoute) && !this.isNull(currentRoute)) {
var r = state.parent && state.parent.state.currentRoute;
r && Object.keys(r.componentInstances).forEach(key => {
var c = r && r.componentInstances[key];
if (c && c.componentWillUnactivate) c.componentWillUnactivate();
});
openDrawer = true;
}
if (!this.isNull(prevRoute) && this.isNull(currentRoute)) {
var _r = state.parent && state.parent.state.currentRoute;
_r && Object.keys(_r.componentInstances).forEach(key => {
var c = _r && _r.componentInstances[key];
if (c && c.componentDidActivate) c.componentDidActivate();
});
openDrawer = false;
}
if (openDrawer !== undefined && this.state.openDrawer !== openDrawer) {
newState.openDrawer = openDrawer;
if (!openDrawer && this.props.position && !this.isNull(this.state.prevRoute)) newState.prevRoute = prevRoute;
}
if (this.state && this.state.inited) this.setState(newState);else Object.assign(state, newState);
return currentRoute;
}
_handleAnimationEnd() {
if (!this.props.position) return;
if (!this.state.openDrawer) this.setState({
prevRoute: null
});
}
_handleClose() {
var _this$state = this.state,
router = _this$state.router,
parentRoute = _this$state.parentRoute;
if (router) {
if (parentRoute && router.currentRoute && router.currentRoute.path !== parentRoute.path) router.back();
}
this.setState({
openDrawer: false
});
}
getZIndex() {
var currentRoute = this.state.currentRoute;
if (!currentRoute) return config.zIndexStart;
var zIndex = this.props.zIndex;
if (zIndex !== undefined) {
if (isFunction(zIndex)) return zIndex(currentRoute, {
config,
view: this
});
return zIndex;
}
return config.zIndexStart + currentRoute.depth * config.zIndexStep;
}
shouldComponentUpdate(nextProps, nextState) {
if (this.state.openDrawer !== nextState.openDrawer) return true;
if (this.state.prevRoute !== nextState.prevRoute) return true;
return super.shouldComponentUpdate(nextProps, nextState);
}
renderCurrent(currentRoute) {
var routes = this.state.routes;
if (!this.state.router || !currentRoute) return null;
var _this$getComponentPro = this.getComponentProps(),
children = _this$getComponentPro.children,
props = _this$getComponentPro.props;
var _this$state2 = this.state,
openDrawer = _this$state2.openDrawer,
prevRoute = _this$state2.prevRoute;
var _ref = this.state.router.currentRoute || {},
query = _ref.query,
params = _ref.params;
Object.defineProperty(props, 'drawer', {
get() {
return this.drawer;
},
configurable: true
});
var ret = renderRoute(!openDrawer ? prevRoute : currentRoute, routes, props, children, {
name: this.name,
query,
params,
ref: this._updateRef
});
return ret;
}
renderContainer(current, currentRoute) {
var result = super.renderContainer(current, currentRoute);
if (this.isNull(currentRoute)) return result;
var _this$props = this.props,
prefixCls = _this$props.prefixCls,
position = _this$props.position,
drawerClassName = _this$props.drawerClassName,
touch = _this$props.touch;
var openDrawer = this.state.openDrawer;
var needAnimation = this.state.router && !this.isNull(this.state.router.prevRoute);
if (!openDrawer) needAnimation = this.needAnimation && needAnimation;
this.needAnimation = Boolean(needAnimation);
result = /*#__PURE__*/React.createElement(Drawer, {
ref: el => this.drawer = el,
prefixCls,
className: drawerClassName,
touch: touch && needAnimation,
transitionName: needAnimation && position ? `rvr-slide-${position}` : '',
open: Boolean(openDrawer && result),
zIndex: this.getZIndex(),
onAnimateLeave: this._handleAnimationEnd,
onClose: this._handleClose
}, result);
return result;
}
}
RouterDrawer.defaultProps = _objectSpread(_objectSpread({}, RouterViewComponent.defaultProps), {}, {
prefixCls: 'rvr-route-drawer',
position: 'right',
touch: true,
excludeProps: [...RouterViewComponent.defaultProps.excludeProps, 'drawerClassName', 'touch', 'prefixCls', 'position', 'zIndexStart', 'delay']
});
var RouterDrawerWrapper = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(RouterDrawer, _objectSpread(_objectSpread({}, props), {}, {
_updateRef: ref
})));
export default RouterDrawerWrapper;
//# sourceMappingURL=index.js.map