react-view-router
Version:
react-view-router
206 lines • 7.46 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 ReactDOM from 'react-dom';
import Animate from 'rc-animate';
import { Swipeable } from 'react-swipeable';
import { CAN_USE_DOM } from '../..';
class Drawer extends React.Component {
constructor(props) {
super(props);
this.closed = false;
this.isTouching = null;
this.container = null;
this.drawerRef = null;
this.getContainer = this.getContainer.bind(this);
this.removeContainer = this.removeContainer.bind(this);
this.onAnimateAppear = this.onAnimateAppear.bind(this);
this.onAnimateLeave = this.onAnimateLeave.bind(this);
this.onTouchMove = this.onTouchMove.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this);
this.close = this.close.bind(this);
this.onMaskClick = this.onMaskClick.bind(this);
}
componentWillUnmount() {
this.restoreOverflow();
this.removeContainer();
}
onTouchMove(event) {
if (!this.drawerRef) return;
if (this.isTouching === null) {
this.isTouching = event.dir === 'Right';
if (!this.isTouching) return;
}
if (this.isTouching === false) return;
var drawerRef = this.drawerRef;
var deltaX = Math.max(-event.deltaX, 0);
drawerRef.style.webkitTransform = drawerRef.style.transform = `translateX(${deltaX}px)`;
}
onTouchEnd(event) {
if (this.isTouching && -event.deltaX > this.props.touchThreshold) {
var drawerRef = this.drawerRef;
if (!drawerRef) return;
var viewLength = drawerRef.getBoundingClientRect().width;
drawerRef.classList.add('touched');
var close = null;
var actionClass = '';
if (-event.deltaX > viewLength / 2) {
actionClass = 'touch-hide';
close = () => {
this.closed = true;
this.close();
};
} else actionClass = 'touch-restore';
drawerRef.style.webkitTransform = drawerRef.style.transform = '';
if (actionClass) drawerRef.classList.add(actionClass);
setTimeout(() => {
close && close();
drawerRef.classList.remove(actionClass);
drawerRef.classList.remove('touched');
}, this.props.delay);
}
this.isTouching = null;
}
removeContainer() {
if (!this.container) return;
if (this.container.parentNode) this.container.parentNode.removeChild(this.container);
this.container = null;
}
getContainer() {
if (!this.container) {
var container = document.createElement('div');
var containerId = `${this.props.prefixCls}-container-${new Date().getTime()}`;
container.setAttribute('id', containerId);
document.body.appendChild(container);
this.container = container;
}
return this.container;
}
getZIndexStyle() {
var style = {};
if (this.props.zIndex !== undefined) style.zIndex = this.props.zIndex;
return style;
}
getWrapStyle() {
var wrapStyle = this.props.wrapStyle || {};
return _objectSpread(_objectSpread({}, this.getZIndexStyle()), wrapStyle);
}
getMaskStyle() {
var maskStyle = this.props.maskStyle || {};
return _objectSpread(_objectSpread({}, this.getZIndexStyle()), maskStyle);
}
getMaskTransitionName() {
if (this.closed) return '';
var props = this.props;
var transitionName = props.maskTransitionName;
var animation = props.maskAnimation;
if (!transitionName && animation) {
transitionName = `${props.prefixCls}-${animation}`;
}
return transitionName;
}
getTransitionName() {
if (this.closed) return '';
var props = this.props;
var transitionName = props.transitionName;
var animation = props.animation;
if (!transitionName && animation) {
transitionName = `${props.prefixCls}-${animation}`;
}
return transitionName;
}
getDrawerElement() {
var props = this.props;
var prefixCls = props.prefixCls;
var dialogElement = /*#__PURE__*/React.createElement('div', {
key: 'drawer-element',
role: 'document',
ref: el => this.drawerRef = el,
style: props.style || {},
className: `${prefixCls} ${props.className || ''}`,
open: props.open
}, props.children);
var transitionName = this.getTransitionName();
if (transitionName) {
dialogElement = /*#__PURE__*/React.createElement(Animate, {
key: 'drawer',
showProp: 'open',
onAppear: this.onAnimateAppear,
onLeave: this.onAnimateLeave,
transitionName,
component: '',
transitionAppear: true
}, dialogElement);
}
if (this.props.touch) {
dialogElement = /*#__PURE__*/React.createElement(Swipeable, {
className: `${props.prefixCls}-wrap`,
onSwiping: this.onTouchMove,
onSwiped: this.onTouchEnd
}, dialogElement);
}
return dialogElement;
}
restoreOverflow() {
if (document.body.style.overflow) document.body.style.overflow = '';
}
onAnimateAppear() {
document.body.style.overflow = 'hidden';
if (this.props.onAnimateStart) this.props.onAnimateStart();
}
onAnimateLeave() {
this.restoreOverflow();
if (this.props.onAnimateLeave) this.props.onAnimateLeave();
if (this.props.afterClose) this.props.afterClose();
}
close(e) {
if (this.props.onClose) this.props.onClose(e);
}
onMaskClick(e) {
if (!this.props.maskClosable) return;
if (e.target === e.currentTarget) this.close(e);
}
render() {
if (!CAN_USE_DOM) return null;
var props = this.props;
if (props.open) this.closed = false;
var drawer = this.getDrawerElement();
if (props.mask) {
drawer = /*#__PURE__*/React.createElement('div', _objectSpread(_objectSpread({
style: this.getMaskStyle(),
key: 'mask-element',
className: `${props.prefixCls}-mask ${props.open ? `${props.prefixCls}-mask-hidden` : ''}`,
open: props.open
}, props.maskProps), {}, {
onClick: this.onMaskClick
}), drawer);
var transitionName = this.getMaskTransitionName();
if (transitionName) {
drawer = /*#__PURE__*/React.createElement(Animate, {
key: 'mask',
showProp: 'open',
transitionAppear: true,
component: '',
transitionName
}, drawer);
}
}
return /*#__PURE__*/ReactDOM.createPortal(drawer, this.getContainer());
}
}
Drawer.defaultProps = {
prefixCls: 'rvr-drawer',
className: '',
mask: true,
open: false,
maskClosable: false,
touch: true,
touchThreshold: 10,
delay: 400
};
export default Drawer;
//# sourceMappingURL=drawer.js.map