You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
14 KiB
325 lines
14 KiB
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
|
|
var _react = require('react');
|
|
|
|
var React = _interopRequireWildcard(_react);
|
|
|
|
var _reactDom = require('react-dom');
|
|
|
|
var ReactDOM = _interopRequireWildcard(_reactDom);
|
|
|
|
var _KeyCode = require('rc-util/lib/KeyCode');
|
|
|
|
var _KeyCode2 = _interopRequireDefault(_KeyCode);
|
|
|
|
var _contains = require('rc-util/lib/Dom/contains');
|
|
|
|
var _contains2 = _interopRequireDefault(_contains);
|
|
|
|
var _rcAnimate = require('rc-animate');
|
|
|
|
var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
|
|
|
|
var _LazyRenderBox = require('./LazyRenderBox');
|
|
|
|
var _LazyRenderBox2 = _interopRequireDefault(_LazyRenderBox);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var uuid = 0;
|
|
/* eslint react/no-is-mounted:0 */
|
|
function getScroll(w, top) {
|
|
var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
|
|
var method = 'scroll' + (top ? 'Top' : 'Left');
|
|
if (typeof ret !== 'number') {
|
|
var d = w.document;
|
|
ret = d.documentElement[method];
|
|
if (typeof ret !== 'number') {
|
|
ret = d.body[method];
|
|
}
|
|
}
|
|
return ret;
|
|
}
|
|
function setTransformOrigin(node, value) {
|
|
var style = node.style;
|
|
['Webkit', 'Moz', 'Ms', 'ms'].forEach(function (prefix) {
|
|
style[prefix + 'TransformOrigin'] = value;
|
|
});
|
|
style['transformOrigin'] = value;
|
|
}
|
|
function offset(el) {
|
|
var rect = el.getBoundingClientRect();
|
|
var pos = {
|
|
left: rect.left,
|
|
top: rect.top
|
|
};
|
|
var doc = el.ownerDocument;
|
|
var w = doc.defaultView || doc.parentWindow;
|
|
pos.left += getScroll(w);
|
|
pos.top += getScroll(w, true);
|
|
return pos;
|
|
}
|
|
|
|
var Dialog = function (_React$Component) {
|
|
_inherits(Dialog, _React$Component);
|
|
|
|
function Dialog(props) {
|
|
_classCallCheck(this, Dialog);
|
|
|
|
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
|
|
|
_this.inTransition = false;
|
|
_this.onAnimateLeave = function () {
|
|
var _this$props = _this.props,
|
|
afterClose = _this$props.afterClose,
|
|
getOpenCount = _this$props.getOpenCount;
|
|
// need demo?
|
|
// https://github.com/react-component/dialog/pull/28
|
|
|
|
if (_this.wrap) {
|
|
_this.wrap.style.display = 'none';
|
|
}
|
|
_this.inTransition = false;
|
|
// 如果没有打开的状态，则清除 effect 和 overflow: hidden;
|
|
// https://github.com/ant-design/ant-design/issues/21539
|
|
if (!getOpenCount()) {
|
|
_this.switchScrollingEffect();
|
|
}
|
|
if (afterClose) {
|
|
afterClose();
|
|
}
|
|
};
|
|
_this.onDialogMouseDown = function () {
|
|
_this.dialogMouseDown = true;
|
|
};
|
|
_this.onMaskMouseUp = function () {
|
|
if (_this.dialogMouseDown) {
|
|
_this.timeoutId = setTimeout(function () {
|
|
_this.dialogMouseDown = false;
|
|
}, 0);
|
|
}
|
|
};
|
|
_this.onMaskClick = function (e) {
|
|
// android trigger click on open (fastclick??)
|
|
if (Date.now() - _this.openTime < 300) {
|
|
return;
|
|
}
|
|
if (e.target === e.currentTarget && !_this.dialogMouseDown) {
|
|
_this.close(e);
|
|
}
|
|
};
|
|
_this.onKeyDown = function (e) {
|
|
var props = _this.props;
|
|
if (props.keyboard && e.keyCode === _KeyCode2['default'].ESC) {
|
|
e.stopPropagation();
|
|
_this.close(e);
|
|
return;
|
|
}
|
|
// keep focus inside dialog
|
|
if (props.visible) {
|
|
if (e.keyCode === _KeyCode2['default'].TAB) {
|
|
var activeElement = document.activeElement;
|
|
var sentinelStart = _this.sentinelStart;
|
|
if (e.shiftKey) {
|
|
if (activeElement === sentinelStart) {
|
|
_this.sentinelEnd.focus();
|
|
}
|
|
} else if (activeElement === _this.sentinelEnd) {
|
|
sentinelStart.focus();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
_this.getDialogElement = function () {
|
|
var props = _this.props;
|
|
var closable = props.closable;
|
|
var prefixCls = props.prefixCls;
|
|
var dest = {};
|
|
if (props.width !== undefined) {
|
|
dest.width = props.width;
|
|
}
|
|
if (props.height !== undefined) {
|
|
dest.height = props.height;
|
|
}
|
|
var footer = void 0;
|
|
if (props.footer) {
|
|
footer = React.createElement("div", { className: prefixCls + '-footer', ref: _this.saveRef('footer') }, props.footer);
|
|
}
|
|
var header = void 0;
|
|
if (props.title) {
|
|
header = React.createElement("div", { className: prefixCls + '-header', ref: _this.saveRef('header') }, React.createElement("div", { className: prefixCls + '-title', id: _this.titleId }, props.title));
|
|
}
|
|
var closer = void 0;
|
|
if (closable) {
|
|
closer = React.createElement("button", { type: "button", onClick: _this.close, "aria-label": "Close", className: prefixCls + '-close' }, props.closeIcon || React.createElement("span", { className: prefixCls + '-close-x' }));
|
|
}
|
|
var style = _extends({}, props.style, dest);
|
|
var sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
|
|
var transitionName = _this.getTransitionName();
|
|
var dialogElement = React.createElement(_LazyRenderBox2['default'], { key: "dialog-element", role: "document", ref: _this.saveRef('dialog'), style: style, className: prefixCls + ' ' + (props.className || ''), visible: props.visible, forceRender: props.forceRender, onMouseDown: _this.onDialogMouseDown }, React.createElement("div", { tabIndex: 0, ref: _this.saveRef('sentinelStart'), style: sentinelStyle, "aria-hidden": "true" }), React.createElement("div", { className: prefixCls + '-content' }, closer, header, React.createElement("div", _extends({ className: prefixCls + '-body', style: props.bodyStyle, ref: _this.saveRef('body') }, props.bodyProps), props.children), footer), React.createElement("div", { tabIndex: 0, ref: _this.saveRef('sentinelEnd'), style: sentinelStyle, "aria-hidden": "true" }));
|
|
return React.createElement(_rcAnimate2['default'], { key: "dialog", showProp: "visible", onLeave: _this.onAnimateLeave, transitionName: transitionName, component: "", transitionAppear: true }, props.visible || !props.destroyOnClose ? dialogElement : null);
|
|
};
|
|
_this.getZIndexStyle = function () {
|
|
var style = {};
|
|
var props = _this.props;
|
|
if (props.zIndex !== undefined) {
|
|
style.zIndex = props.zIndex;
|
|
}
|
|
return style;
|
|
};
|
|
_this.getWrapStyle = function () {
|
|
return _extends({}, _this.getZIndexStyle(), _this.props.wrapStyle);
|
|
};
|
|
_this.getMaskStyle = function () {
|
|
return _extends({}, _this.getZIndexStyle(), _this.props.maskStyle);
|
|
};
|
|
_this.getMaskElement = function () {
|
|
var props = _this.props;
|
|
var maskElement = void 0;
|
|
if (props.mask) {
|
|
var maskTransition = _this.getMaskTransitionName();
|
|
maskElement = React.createElement(_LazyRenderBox2['default'], _extends({ style: _this.getMaskStyle(), key: "mask", className: props.prefixCls + '-mask', hiddenClassName: props.prefixCls + '-mask-hidden', visible: props.visible }, props.maskProps));
|
|
if (maskTransition) {
|
|
maskElement = React.createElement(_rcAnimate2['default'], { key: "mask", showProp: "visible", transitionAppear: true, component: "", transitionName: maskTransition }, maskElement);
|
|
}
|
|
}
|
|
return maskElement;
|
|
};
|
|
_this.getMaskTransitionName = function () {
|
|
var props = _this.props;
|
|
var transitionName = props.maskTransitionName;
|
|
var animation = props.maskAnimation;
|
|
if (!transitionName && animation) {
|
|
transitionName = props.prefixCls + '-' + animation;
|
|
}
|
|
return transitionName;
|
|
};
|
|
_this.getTransitionName = function () {
|
|
var props = _this.props;
|
|
var transitionName = props.transitionName;
|
|
var animation = props.animation;
|
|
if (!transitionName && animation) {
|
|
transitionName = props.prefixCls + '-' + animation;
|
|
}
|
|
return transitionName;
|
|
};
|
|
_this.close = function (e) {
|
|
var onClose = _this.props.onClose;
|
|
|
|
if (onClose) {
|
|
onClose(e);
|
|
}
|
|
};
|
|
_this.saveRef = function (name) {
|
|
return function (node) {
|
|
_this[name] = node;
|
|
};
|
|
};
|
|
_this.titleId = 'rcDialogTitle' + uuid++;
|
|
_this.switchScrollingEffect = props.switchScrollingEffect || function () {};
|
|
return _this;
|
|
}
|
|
|
|
Dialog.prototype.componentDidMount = function componentDidMount() {
|
|
this.componentDidUpdate({});
|
|
// if forceRender is true, set element style display to be none;
|
|
if ((this.props.forceRender || this.props.getContainer === false && !this.props.visible) && this.wrap) {
|
|
this.wrap.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
Dialog.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
var _props = this.props,
|
|
visible = _props.visible,
|
|
mask = _props.mask,
|
|
focusTriggerAfterClose = _props.focusTriggerAfterClose;
|
|
|
|
var mousePosition = this.props.mousePosition;
|
|
if (visible) {
|
|
// first show
|
|
if (!prevProps.visible) {
|
|
this.openTime = Date.now();
|
|
this.switchScrollingEffect();
|
|
this.tryFocus();
|
|
var dialogNode = ReactDOM.findDOMNode(this.dialog);
|
|
if (mousePosition) {
|
|
var elOffset = offset(dialogNode);
|
|
setTransformOrigin(dialogNode, mousePosition.x - elOffset.left + 'px ' + (mousePosition.y - elOffset.top) + 'px');
|
|
} else {
|
|
setTransformOrigin(dialogNode, '');
|
|
}
|
|
}
|
|
} else if (prevProps.visible) {
|
|
this.inTransition = true;
|
|
if (mask && this.lastOutSideFocusNode && focusTriggerAfterClose) {
|
|
try {
|
|
this.lastOutSideFocusNode.focus();
|
|
} catch (e) {
|
|
this.lastOutSideFocusNode = null;
|
|
}
|
|
this.lastOutSideFocusNode = null;
|
|
}
|
|
}
|
|
};
|
|
|
|
Dialog.prototype.componentWillUnmount = function componentWillUnmount() {
|
|
var _props2 = this.props,
|
|
visible = _props2.visible,
|
|
getOpenCount = _props2.getOpenCount;
|
|
|
|
if ((visible || this.inTransition) && !getOpenCount()) {
|
|
this.switchScrollingEffect();
|
|
}
|
|
clearTimeout(this.timeoutId);
|
|
};
|
|
|
|
Dialog.prototype.tryFocus = function tryFocus() {
|
|
if (!(0, _contains2['default'])(this.wrap, document.activeElement)) {
|
|
this.lastOutSideFocusNode = document.activeElement;
|
|
this.sentinelStart.focus();
|
|
}
|
|
};
|
|
|
|
Dialog.prototype.render = function render() {
|
|
var props = this.props;
|
|
var prefixCls = props.prefixCls,
|
|
maskClosable = props.maskClosable;
|
|
|
|
var style = this.getWrapStyle();
|
|
// clear hide display
|
|
// and only set display after async anim, not here for hide
|
|
if (props.visible) {
|
|
style.display = null;
|
|
}
|
|
return React.createElement("div", { className: prefixCls + '-root' }, this.getMaskElement(), React.createElement("div", _extends({ tabIndex: -1, onKeyDown: this.onKeyDown, className: prefixCls + '-wrap ' + (props.wrapClassName || ''), ref: this.saveRef('wrap'), onClick: maskClosable ? this.onMaskClick : null, onMouseUp: maskClosable ? this.onMaskMouseUp : null, role: "dialog", "aria-labelledby": props.title ? this.titleId : null, style: style }, props.wrapProps), this.getDialogElement()));
|
|
};
|
|
|
|
return Dialog;
|
|
}(React.Component);
|
|
|
|
exports['default'] = Dialog;
|
|
|
|
Dialog.defaultProps = {
|
|
className: '',
|
|
mask: true,
|
|
visible: false,
|
|
keyboard: true,
|
|
closable: true,
|
|
maskClosable: true,
|
|
destroyOnClose: false,
|
|
prefixCls: 'rc-dialog',
|
|
focusTriggerAfterClose: true
|
|
};
|
|
module.exports = exports['default']; |