zent
Version:
一套前端设计语言和基于React的实现
107 lines (106 loc) • 5.53 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import focusWithoutScroll from '../utils/dom/focusWithoutScroll';
import Icon from '../icon';
import { getPositionTransformOrigin } from './position';
var DialogInnerEl = (function (_super) {
__extends(DialogInnerEl, _super);
function DialogInnerEl() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.dialogEl = null;
_this.onClickClose = function (e) {
var onClose = _this.props.onClose;
if (onClose) {
onClose(e);
}
};
return _this;
}
DialogInnerEl.prototype.componentDidMount = function () {
this.resetTransformOrigin();
};
DialogInnerEl.prototype.componentDidUpdate = function () {
this.resetTransformOrigin();
};
DialogInnerEl.prototype.setTransformOrigin = function (style, origin) {
['Webkit', 'Moz', 'Ms', 'ms'].forEach(function (prefix) {
style[prefix + "TransformOrigin"] = origin;
});
style.transformOrigin = origin;
};
DialogInnerEl.prototype.resetTransformOrigin = function (props) {
if (props === void 0) { props = this.props; }
var mousePosition = props.mousePosition, position = props.position;
var origin = getPositionTransformOrigin(position, this.dialogEl);
if (origin === undefined &&
mousePosition &&
mousePosition.x >= 0 &&
mousePosition.y >= 0 &&
this.dialogEl &&
this.dialogEl.getBoundingClientRect) {
var _a = this.dialogEl.getBoundingClientRect(), x = _a.left, y = _a.top;
origin = mousePosition.x - x + "px " + (mousePosition.y - y) + "px 0";
}
if (origin && this.dialogEl) {
this.setTransformOrigin(this.dialogEl.style, origin);
}
};
DialogInnerEl.prototype.renderHeader = function () {
var title = this.props.title;
if (!title) {
return null;
}
title =
typeof title === 'number' || typeof title === 'string' ? (_jsx("span", __assign({ className: "zent-dialog-r-title-text", "data-zv": '10.0.17' }, { children: title }), void 0)) : (title);
return (_jsx("div", __assign({ className: "zent-dialog-r-header", "data-zv": '10.0.17' }, { children: _jsx("div", __assign({ className: "zent-dialog-r-title", "data-zv": '10.0.17' }, { children: title }), void 0) }), void 0));
};
DialogInnerEl.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, closeBtn = _a.closeBtn, footer = _a.footer, style = _a.style, children = _a.children;
var Header = this.renderHeader();
var closeBtnCls = cx('zent-dialog-r-close', {
'zent-dialog-r-has-title': !!Header,
});
var Closer = closeBtn && (_jsx("button", __assign({ type: "button", className: closeBtnCls, onClick: this.onClickClose, "data-zv": '10.0.17' }, { children: _jsx(Icon, { type: "close" }, void 0) }), void 0));
var Footer = footer && (_jsx("div", __assign({ className: "zent-dialog-r-footer", "data-zv": '10.0.17' }, { children: footer }), void 0));
return (_jsxs("div", __assign({ className: cx('zent-dialog-r', className, {
'zent-dialog-r--has-header': !!Header,
'zent-dialog-r--has-footer': !!Footer,
'zent-dialog-r--no-close-btn': !Closer,
}), style: style, ref: function (el) { return (_this.dialogEl = el); }, "data-zv": '10.0.17' }, { children: [Closer, Header, _jsx("div", __assign({ className: "zent-dialog-r-body", "data-zv": '10.0.17' }, { children: _jsx("div", __assign({ className: "zent-dialog-r-body-content", "data-zv": '10.0.17' }, { children: children }), void 0) }), void 0), Footer] }), void 0));
};
return DialogInnerEl;
}(Component));
export { DialogInnerEl };
var DialogElWrapper = (function (_super) {
__extends(DialogElWrapper, _super);
function DialogElWrapper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.rootRef = createRef();
_this.onMaskClick = function (e) {
if (e.target === e.currentTarget &&
_this.props.mask &&
_this.props.maskClosable) {
_this.props.onClose(e);
}
};
return _this;
}
DialogElWrapper.prototype.componentDidMount = function () {
var activeElement = document.activeElement;
var dialogNode = this.rootRef.current;
if (dialogNode !== activeElement &&
dialogNode &&
!dialogNode.contains(activeElement)) {
focusWithoutScroll(dialogNode);
}
};
DialogElWrapper.prototype.render = function () {
var _a = this.props, mask = _a.mask, visible = _a.visible, children = _a.children;
return (_jsxs("div", __assign({ ref: this.rootRef, tabIndex: -1, className: "zent-dialog-r-root", "data-zv": '10.0.17' }, { children: [visible && mask && _jsx("div", { className: "zent-dialog-r-backdrop", "data-zv": '10.0.17' }, void 0), _jsx("div", __assign({ className: "zent-dialog-r-wrap", onClick: this.onMaskClick, "data-zv": '10.0.17' }, { children: children }), void 0)] }), void 0));
};
return DialogElWrapper;
}(Component));
export { DialogElWrapper };