react-view-router
Version:
react-view-router
166 lines (165 loc) • 6.7 kB
JavaScript
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; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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);
_defineProperty(this, "drawer", void 0);
_defineProperty(this, "needAnimation", void 0);
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;
const prevRoute = state.currentRoute;
if (!newState) newState = {
openDrawer: false
};else newState.openDrawer = false;
const currentRoute = super._refreshCurrentRoute(state, newState, callback);
let openDrawer;
if (this.isNull(prevRoute) && !this.isNull(currentRoute)) {
let r = state.parent && state.parent.state.currentRoute;
r && Object.keys(r.componentInstances).forEach(key => {
const c = r && r.componentInstances[key];
if (c && c.componentWillUnactivate) c.componentWillUnactivate();
});
openDrawer = true;
}
if (!this.isNull(prevRoute) && this.isNull(currentRoute)) {
let r = state.parent && state.parent.state.currentRoute;
r && Object.keys(r.componentInstances).forEach(key => {
const 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() {
const {
router,
parentRoute
} = this.state;
if (router) {
if (parentRoute && router.currentRoute && router.currentRoute.path !== parentRoute.path) router.back();
}
this.setState({
openDrawer: false
});
}
getZindex() {
const currentRoute = this.state.currentRoute;
if (!currentRoute) return config.zIndexStart;
const {
zIndex
} = this.props;
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) {
const {
routes
} = this.state;
if (!this.state.router || !currentRoute) return null;
const {
children,
props
} = this.getComponentProps();
const {
openDrawer,
prevRoute
} = this.state;
const {
query,
params
} = this.state.router.currentRoute || {};
Object.defineProperty(props, 'drawer', {
get() {
return this.drawer;
},
configurable: true
});
let ret = renderRoute(!openDrawer ? prevRoute : currentRoute, routes, props, children, {
name: this.name,
query,
params,
ref: this._updateRef
});
return ret;
}
renderContainer(current, currentRoute) {
let result = super.renderContainer(current, currentRoute);
if (this.isNull(currentRoute)) return result;
const {
prefixCls,
position,
drawerClassName,
touch
} = this.props;
const {
openDrawer
} = this.state;
let 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;
}
}
_defineProperty(RouterDrawer, "defaultProps", void 0);
RouterDrawer.defaultProps = _objectSpread(_objectSpread({}, RouterViewComponent.defaultProps), {}, {
prefixCls: 'rvr-route-drawer',
position: 'right',
touch: true,
excludeProps: [...RouterViewComponent.defaultProps.excludeProps, 'drawerClassName', 'touch', 'prefixCls', 'position', 'zIndexStart', 'delay']
});
const RouterDrawerWrapper = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(RouterDrawer, _objectSpread(_objectSpread({}, props), {}, {
_updateRef: ref
})));
export default RouterDrawerWrapper;