612 lines
23 KiB
JavaScript
612 lines
23 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
var _classnames2 = _interopRequireDefault(require("classnames"));
|
|
|
|
var _getScrollBarSize = _interopRequireDefault(require("rc-util/lib/getScrollBarSize"));
|
|
|
|
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _reactLifecyclesCompat = require("react-lifecycles-compat");
|
|
|
|
var _utils = require("./utils");
|
|
|
|
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
|
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
|
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
|
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
|
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
|
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
|
|
var currentDrawer = {};
|
|
|
|
var DrawerChild =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
_inherits(DrawerChild, _React$Component);
|
|
|
|
function DrawerChild(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, DrawerChild);
|
|
|
|
_this = _possibleConstructorReturn(this, _getPrototypeOf(DrawerChild).call(this, props));
|
|
|
|
_this.domFocus = function () {
|
|
if (_this.dom) {
|
|
_this.dom.focus();
|
|
}
|
|
};
|
|
|
|
_this.removeStartHandler = function (e) {
|
|
if (e.touches.length > 1) {
|
|
return;
|
|
}
|
|
|
|
_this.startPos = {
|
|
x: e.touches[0].clientX,
|
|
y: e.touches[0].clientY
|
|
};
|
|
};
|
|
|
|
_this.removeMoveHandler = function (e) {
|
|
if (e.changedTouches.length > 1) {
|
|
return;
|
|
}
|
|
|
|
var currentTarget = e.currentTarget;
|
|
var differX = e.changedTouches[0].clientX - _this.startPos.x;
|
|
var differY = e.changedTouches[0].clientY - _this.startPos.y;
|
|
|
|
if (currentTarget === _this.maskDom || currentTarget === _this.handlerDom || currentTarget === _this.contentDom && (0, _utils.getTouchParentScroll)(currentTarget, e.target, differX, differY)) {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
_this.transitionEnd = function (e) {
|
|
var dom = e.target;
|
|
(0, _utils.removeEventListener)(dom, _utils.transitionEnd, _this.transitionEnd);
|
|
dom.style.transition = '';
|
|
};
|
|
|
|
_this.onKeyDown = function (e) {
|
|
if (e.keyCode === _KeyCode.default.ESC) {
|
|
var onClose = _this.props.onClose;
|
|
e.stopPropagation();
|
|
|
|
if (onClose) {
|
|
onClose(e);
|
|
}
|
|
}
|
|
};
|
|
|
|
_this.onWrapperTransitionEnd = function (e) {
|
|
var _this$props = _this.props,
|
|
open = _this$props.open,
|
|
afterVisibleChange = _this$props.afterVisibleChange;
|
|
|
|
if (e.target === _this.contentWrapper && e.propertyName.match(/transform$/)) {
|
|
_this.dom.style.transition = '';
|
|
|
|
if (!open && _this.getCurrentDrawerSome()) {
|
|
document.body.style.overflowX = '';
|
|
|
|
if (_this.maskDom) {
|
|
_this.maskDom.style.left = '';
|
|
_this.maskDom.style.width = '';
|
|
}
|
|
}
|
|
|
|
if (afterVisibleChange) {
|
|
afterVisibleChange(!!open);
|
|
}
|
|
}
|
|
};
|
|
|
|
_this.openLevelTransition = function () {
|
|
var _this$props2 = _this.props,
|
|
open = _this$props2.open,
|
|
width = _this$props2.width,
|
|
height = _this$props2.height;
|
|
|
|
var _this$getHorizontalBo = _this.getHorizontalBoolAndPlacementName(),
|
|
isHorizontal = _this$getHorizontalBo.isHorizontal,
|
|
placementName = _this$getHorizontalBo.placementName;
|
|
|
|
var contentValue = _this.contentDom ? _this.contentDom.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] : 0;
|
|
var value = (isHorizontal ? width : height) || contentValue;
|
|
|
|
_this.setLevelAndScrolling(open, placementName, value);
|
|
};
|
|
|
|
_this.setLevelTransform = function (open, placementName, value, right) {
|
|
var _this$props3 = _this.props,
|
|
placement = _this$props3.placement,
|
|
levelMove = _this$props3.levelMove,
|
|
duration = _this$props3.duration,
|
|
ease = _this$props3.ease,
|
|
showMask = _this$props3.showMask; // router 切换时可能会导至页面失去滚动条，所以需要时时获取。
|
|
|
|
_this.levelDom.forEach(function (dom) {
|
|
dom.style.transition = "transform ".concat(duration, " ").concat(ease);
|
|
(0, _utils.addEventListener)(dom, _utils.transitionEnd, _this.transitionEnd);
|
|
var levelValue = open ? value : 0;
|
|
|
|
if (levelMove) {
|
|
var $levelMove = (0, _utils.transformArguments)(levelMove, {
|
|
target: dom,
|
|
open: open
|
|
});
|
|
levelValue = open ? $levelMove[0] : $levelMove[1] || 0;
|
|
}
|
|
|
|
var $value = typeof levelValue === 'number' ? "".concat(levelValue, "px") : levelValue;
|
|
var placementPos = placement === 'left' || placement === 'top' ? $value : "-".concat($value);
|
|
placementPos = showMask && placement === 'right' && right ? "calc(".concat(placementPos, " + ").concat(right, "px)") : placementPos;
|
|
dom.style.transform = levelValue ? "".concat(placementName, "(").concat(placementPos, ")") : '';
|
|
});
|
|
};
|
|
|
|
_this.setLevelAndScrolling = function (open, placementName, value) {
|
|
var onChange = _this.props.onChange;
|
|
|
|
if (!_utils.windowIsUndefined) {
|
|
var right = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth ? (0, _getScrollBarSize.default)(true) : 0;
|
|
|
|
_this.setLevelTransform(open, placementName, value, right);
|
|
|
|
_this.toggleScrollingToDrawerAndBody(right);
|
|
}
|
|
|
|
if (onChange) {
|
|
onChange(open);
|
|
}
|
|
};
|
|
|
|
_this.toggleScrollingToDrawerAndBody = function (right) {
|
|
var _this$props4 = _this.props,
|
|
getOpenCount = _this$props4.getOpenCount,
|
|
getContainer = _this$props4.getContainer,
|
|
showMask = _this$props4.showMask,
|
|
open = _this$props4.open;
|
|
var container = getContainer && getContainer();
|
|
var openCount = getOpenCount && getOpenCount(); // 处理 body 滚动
|
|
|
|
if (container && container.parentNode === document.body && showMask) {
|
|
var eventArray = ['touchstart'];
|
|
var domArray = [document.body, _this.maskDom, _this.handlerDom, _this.contentDom];
|
|
|
|
if (open && document.body.style.overflow !== 'hidden') {
|
|
if (right) {
|
|
_this.addScrollingEffect(right);
|
|
}
|
|
|
|
if (openCount === 1) {
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
document.body.style.touchAction = 'none'; // 手机禁滚
|
|
|
|
domArray.forEach(function (item, i) {
|
|
if (!item) {
|
|
return;
|
|
}
|
|
|
|
(0, _utils.addEventListener)(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
|
|
});
|
|
} else if (_this.getCurrentDrawerSome()) {
|
|
// 没有弹框的状态下清除 overflow;
|
|
if (!openCount) {
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
document.body.style.touchAction = '';
|
|
|
|
if (right) {
|
|
_this.remScrollingEffect(right);
|
|
} // 恢复事件
|
|
|
|
|
|
domArray.forEach(function (item, i) {
|
|
if (!item) {
|
|
return;
|
|
}
|
|
|
|
(0, _utils.removeEventListener)(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
_this.addScrollingEffect = function (right) {
|
|
var _this$props5 = _this.props,
|
|
placement = _this$props5.placement,
|
|
duration = _this$props5.duration,
|
|
ease = _this$props5.ease,
|
|
getOpenCount = _this$props5.getOpenCount,
|
|
switchScrollingEffect = _this$props5.switchScrollingEffect;
|
|
var openCount = getOpenCount && getOpenCount();
|
|
|
|
if (openCount === 1) {
|
|
switchScrollingEffect();
|
|
}
|
|
|
|
var widthTransition = "width ".concat(duration, " ").concat(ease);
|
|
var transformTransition = "transform ".concat(duration, " ").concat(ease);
|
|
_this.dom.style.transition = 'none';
|
|
|
|
switch (placement) {
|
|
case 'right':
|
|
_this.dom.style.transform = "translateX(-".concat(right, "px)");
|
|
break;
|
|
|
|
case 'top':
|
|
case 'bottom':
|
|
_this.dom.style.width = "calc(100% - ".concat(right, "px)");
|
|
_this.dom.style.transform = 'translateZ(0)';
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
|
|
clearTimeout(_this.timeout);
|
|
_this.timeout = setTimeout(function () {
|
|
if (_this.dom) {
|
|
_this.dom.style.transition = "".concat(transformTransition, ",").concat(widthTransition);
|
|
_this.dom.style.width = '';
|
|
_this.dom.style.transform = '';
|
|
}
|
|
});
|
|
};
|
|
|
|
_this.remScrollingEffect = function (right) {
|
|
var _this$props6 = _this.props,
|
|
placement = _this$props6.placement,
|
|
duration = _this$props6.duration,
|
|
ease = _this$props6.ease,
|
|
getOpenCount = _this$props6.getOpenCount,
|
|
switchScrollingEffect = _this$props6.switchScrollingEffect;
|
|
var openCount = getOpenCount && getOpenCount();
|
|
|
|
if (!openCount) {
|
|
switchScrollingEffect(true);
|
|
}
|
|
|
|
if (_utils.transitionStr) {
|
|
document.body.style.overflowX = 'hidden';
|
|
}
|
|
|
|
_this.dom.style.transition = 'none';
|
|
var heightTransition;
|
|
var widthTransition = "width ".concat(duration, " ").concat(ease);
|
|
var transformTransition = "transform ".concat(duration, " ").concat(ease);
|
|
|
|
switch (placement) {
|
|
case 'left':
|
|
{
|
|
_this.dom.style.width = '100%';
|
|
widthTransition = "width 0s ".concat(ease, " ").concat(duration);
|
|
break;
|
|
}
|
|
|
|
case 'right':
|
|
{
|
|
_this.dom.style.transform = "translateX(".concat(right, "px)");
|
|
_this.dom.style.width = '100%';
|
|
widthTransition = "width 0s ".concat(ease, " ").concat(duration);
|
|
|
|
if (_this.maskDom) {
|
|
_this.maskDom.style.left = "-".concat(right, "px");
|
|
_this.maskDom.style.width = "calc(100% + ".concat(right, "px)");
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
case 'top':
|
|
case 'bottom':
|
|
{
|
|
_this.dom.style.width = "calc(100% + ".concat(right, "px)");
|
|
_this.dom.style.height = '100%';
|
|
_this.dom.style.transform = 'translateZ(0)';
|
|
heightTransition = "height 0s ".concat(ease, " ").concat(duration);
|
|
break;
|
|
}
|
|
|
|
default:
|
|
break;
|
|
}
|
|
|
|
clearTimeout(_this.timeout);
|
|
_this.timeout = setTimeout(function () {
|
|
if (_this.dom) {
|
|
_this.dom.style.transition = "".concat(transformTransition, ",").concat(heightTransition ? "".concat(heightTransition, ",") : '').concat(widthTransition);
|
|
_this.dom.style.transform = '';
|
|
_this.dom.style.width = '';
|
|
_this.dom.style.height = '';
|
|
}
|
|
});
|
|
};
|
|
|
|
_this.getCurrentDrawerSome = function () {
|
|
return !Object.keys(currentDrawer).some(function (key) {
|
|
return currentDrawer[key];
|
|
});
|
|
};
|
|
|
|
_this.getLevelDom = function (_ref) {
|
|
var level = _ref.level,
|
|
getContainer = _ref.getContainer;
|
|
|
|
if (_utils.windowIsUndefined) {
|
|
return;
|
|
}
|
|
|
|
var container = getContainer && getContainer();
|
|
var parent = container ? container.parentNode : null;
|
|
_this.levelDom = [];
|
|
|
|
if (level === 'all') {
|
|
var children = parent ? Array.prototype.slice.call(parent.children) : [];
|
|
children.forEach(function (child) {
|
|
if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child.nodeName !== 'LINK' && child !== container) {
|
|
_this.levelDom.push(child);
|
|
}
|
|
});
|
|
} else if (level) {
|
|
(0, _utils.dataToArray)(level).forEach(function (key) {
|
|
document.querySelectorAll(key).forEach(function (item) {
|
|
_this.levelDom.push(item);
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
_this.getHorizontalBoolAndPlacementName = function () {
|
|
var placement = _this.props.placement;
|
|
var isHorizontal = placement === 'left' || placement === 'right';
|
|
var placementName = "translate".concat(isHorizontal ? 'X' : 'Y');
|
|
return {
|
|
isHorizontal: isHorizontal,
|
|
placementName: placementName
|
|
};
|
|
};
|
|
|
|
_this.state = {
|
|
_self: _assertThisInitialized(_this)
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(DrawerChild, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
if (!_utils.windowIsUndefined) {
|
|
var passiveSupported = false;
|
|
|
|
try {
|
|
window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
|
|
get: function get() {
|
|
passiveSupported = true;
|
|
return null;
|
|
}
|
|
}));
|
|
} catch (err) {}
|
|
|
|
this.passive = passiveSupported ? {
|
|
passive: false
|
|
} : false;
|
|
}
|
|
|
|
var open = this.props.open;
|
|
this.drawerId = "drawer_id_".concat(Number((Date.now() + Math.random()).toString().replace('.', Math.round(Math.random() * 9).toString())).toString(16));
|
|
this.getLevelDom(this.props);
|
|
|
|
if (open) {
|
|
currentDrawer[this.drawerId] = open; // 默认打开状态时推出 level;
|
|
|
|
this.openLevelTransition();
|
|
this.forceUpdate(function () {
|
|
_this2.domFocus();
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
var open = this.props.open;
|
|
|
|
if (open !== prevProps.open) {
|
|
if (open) {
|
|
this.domFocus();
|
|
}
|
|
|
|
currentDrawer[this.drawerId] = !!open;
|
|
this.openLevelTransition();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
var _this$props7 = this.props,
|
|
getOpenCount = _this$props7.getOpenCount,
|
|
open = _this$props7.open,
|
|
switchScrollingEffect = _this$props7.switchScrollingEffect;
|
|
var openCount = typeof getOpenCount === 'function' && getOpenCount();
|
|
delete currentDrawer[this.drawerId];
|
|
|
|
if (open) {
|
|
this.setLevelTransform(false);
|
|
document.body.style.touchAction = '';
|
|
}
|
|
|
|
if (!openCount) {
|
|
document.body.style.overflow = '';
|
|
switchScrollingEffect(true);
|
|
}
|
|
} // tslint:disable-next-line:member-ordering
|
|
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _classnames,
|
|
_this3 = this;
|
|
|
|
var _this$props8 = this.props,
|
|
className = _this$props8.className,
|
|
children = _this$props8.children,
|
|
style = _this$props8.style,
|
|
width = _this$props8.width,
|
|
height = _this$props8.height,
|
|
defaultOpen = _this$props8.defaultOpen,
|
|
$open = _this$props8.open,
|
|
prefixCls = _this$props8.prefixCls,
|
|
placement = _this$props8.placement,
|
|
level = _this$props8.level,
|
|
levelMove = _this$props8.levelMove,
|
|
ease = _this$props8.ease,
|
|
duration = _this$props8.duration,
|
|
getContainer = _this$props8.getContainer,
|
|
handler = _this$props8.handler,
|
|
onChange = _this$props8.onChange,
|
|
afterVisibleChange = _this$props8.afterVisibleChange,
|
|
showMask = _this$props8.showMask,
|
|
maskClosable = _this$props8.maskClosable,
|
|
maskStyle = _this$props8.maskStyle,
|
|
onClose = _this$props8.onClose,
|
|
onHandleClick = _this$props8.onHandleClick,
|
|
keyboard = _this$props8.keyboard,
|
|
getOpenCount = _this$props8.getOpenCount,
|
|
switchScrollingEffect = _this$props8.switchScrollingEffect,
|
|
props = _objectWithoutProperties(_this$props8, ["className", "children", "style", "width", "height", "defaultOpen", "open", "prefixCls", "placement", "level", "levelMove", "ease", "duration", "getContainer", "handler", "onChange", "afterVisibleChange", "showMask", "maskClosable", "maskStyle", "onClose", "onHandleClick", "keyboard", "getOpenCount", "switchScrollingEffect"]); // 首次渲染都将是关闭状态。
|
|
|
|
|
|
var open = this.dom ? $open : false;
|
|
var wrapperClassName = (0, _classnames2.default)(prefixCls, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-").concat(placement), true), _defineProperty(_classnames, "".concat(prefixCls, "-open"), open), _defineProperty(_classnames, className || '', !!className), _defineProperty(_classnames, 'no-mask', !showMask), _classnames));
|
|
|
|
var _this$getHorizontalBo2 = this.getHorizontalBoolAndPlacementName(),
|
|
placementName = _this$getHorizontalBo2.placementName; // 百分比与像素动画不同步，第一次打用后全用像素动画。
|
|
// const defaultValue = !this.contentDom || !level ? '100%' : `${value}px`;
|
|
|
|
|
|
var placementPos = placement === 'left' || placement === 'top' ? '-100%' : '100%';
|
|
var transform = open ? '' : "".concat(placementName, "(").concat(placementPos, ")");
|
|
var handlerChildren = handler && React.cloneElement(handler, {
|
|
onClick: function onClick(e) {
|
|
if (handler.props.onClick) {
|
|
handler.props.onClick();
|
|
}
|
|
|
|
if (onHandleClick) {
|
|
onHandleClick(e);
|
|
}
|
|
},
|
|
ref: function ref(c) {
|
|
_this3.handlerDom = c;
|
|
}
|
|
});
|
|
return React.createElement("div", Object.assign({}, props, {
|
|
tabIndex: -1,
|
|
className: wrapperClassName,
|
|
style: style,
|
|
ref: function ref(c) {
|
|
_this3.dom = c;
|
|
},
|
|
onKeyDown: open && keyboard ? this.onKeyDown : undefined,
|
|
onTransitionEnd: this.onWrapperTransitionEnd
|
|
}), showMask && React.createElement("div", {
|
|
className: "".concat(prefixCls, "-mask"),
|
|
onClick: maskClosable ? onClose : undefined,
|
|
style: maskStyle,
|
|
ref: function ref(c) {
|
|
_this3.maskDom = c;
|
|
}
|
|
}), React.createElement("div", {
|
|
className: "".concat(prefixCls, "-content-wrapper"),
|
|
style: {
|
|
transform: transform,
|
|
msTransform: transform,
|
|
width: (0, _utils.isNumeric)(width) ? "".concat(width, "px") : width,
|
|
height: (0, _utils.isNumeric)(height) ? "".concat(height, "px") : height
|
|
},
|
|
ref: function ref(c) {
|
|
_this3.contentWrapper = c;
|
|
}
|
|
}, React.createElement("div", {
|
|
className: "".concat(prefixCls, "-content"),
|
|
ref: function ref(c) {
|
|
_this3.contentDom = c;
|
|
},
|
|
onTouchStart: open && showMask ? this.removeStartHandler : undefined,
|
|
onTouchMove: open && showMask ? this.removeMoveHandler : undefined
|
|
}, children), handlerChildren));
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(props, _ref2) {
|
|
var prevProps = _ref2.prevProps,
|
|
_self = _ref2._self;
|
|
var nextState = {
|
|
prevProps: props
|
|
};
|
|
|
|
if (prevProps !== undefined) {
|
|
var placement = props.placement,
|
|
level = props.level;
|
|
|
|
if (placement !== prevProps.placement) {
|
|
// test 的 bug, 有动画过场，删除 dom
|
|
_self.contentDom = null;
|
|
}
|
|
|
|
if (level !== prevProps.level) {
|
|
_self.getLevelDom(props);
|
|
}
|
|
}
|
|
|
|
return nextState;
|
|
}
|
|
}]);
|
|
|
|
return DrawerChild;
|
|
}(React.Component);
|
|
|
|
DrawerChild.defaultProps = {
|
|
switchScrollingEffect: function switchScrollingEffect() {}
|
|
};
|
|
|
|
var _default = (0, _reactLifecyclesCompat.polyfill)(DrawerChild);
|
|
|
|
exports.default = _default; |