@alicloudfe/components
Version:
A react component library for aliyun
197 lines (196 loc) • 10.1 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React from 'react';
import ReactDOM from 'react-dom';
import ConfigProvider from '../config-provider';
import cls from 'classnames';
import Button from '../button';
import Input from '../input';
import Switch from '../switch';
import Balloon from '../balloon';
import Icon from '../icon';
import { events, KEYCODE } from '../utils';
var Tooltip = Balloon.Tooltip;
var Modal = /** @class */ (function (_super) {
__extends(Modal, _super);
function Modal(props) {
var _this = _super.call(this, props) || this;
_this.addDocumentEvents = function () {
if (_this.props.canCloseByEsc) {
_this._keydownEvents = events.on(document, 'keydown', _this.handleDocumentKeyDown);
}
};
_this.handleDocumentKeyDown = function (e) {
if (_this.state.visible && e.keyCode === KEYCODE.ESC) {
_this.setState({
visible: false
});
_this.onClose();
}
};
_this.removeDocumentEvents = function () {
if (_this._keydownEvents) {
_this._keydownEvents.off();
_this._keydownEvents = null;
}
};
_this.onSideDrawerVisibleChange = function (checked) {
_this.props.onSideDrawerVisibleChange(checked);
};
_this.onEditTitleChange = function (value) {
_this.props.onEditTitleChange(value);
};
_this.onEnterEditing = function () {
_this.setState({
isEditing: true
});
};
_this.onLeaveEditing = function () {
_this.setState({
isEditing: false
});
};
_this.onClose = function () {
var onClose = _this.props.onClose;
if (!('visible' in _this.props)) {
_this.setState({
visible: false
});
}
onClose();
};
_this.renderTitle = function () {
var _a = _this.props, prefix = _a.prefix, title = _a.title, titleEditable = _a.titleEditable, titleEditTooltip = _a.titleEditTooltip, titleInputWidth = _a.titleInputWidth, _b = _a.hasArrow, hasArrow = _b === void 0 ? false : _b, _c = _a.titleAlign, titleAlign = _c === void 0 ? 'left' : _c;
// const refElement = ConfigProvider.useRefElement()
// const theme = window.getComputedStyle?.(refElement).getPropertyValue('--alicloudfe-components-theme') ?? ''
// console.log(theme);
var isEditing = _this.state.isEditing;
var editTitle = isEditing ? (React.createElement(Input, { autoFocus: true, value: title, onChange: _this.onEditTitleChange, onBlur: _this.onLeaveEditing, onPressEnter: _this.onLeaveEditing, style: { width: titleInputWidth } })) : (React.createElement("span", null,
React.createElement("span", { className: "edit-title" }, title),
React.createElement(Tooltip, { trigger: React.createElement(Button, { className: prefix + "modal-edit-icon", type: "secondary", onClick: _this.onEnterEditing, size: "small", text: true },
React.createElement(Icon, { type: "edit" })), align: "r" }, titleEditTooltip)));
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: prefix + "modal-title-box" },
_this.props.hasArrow && (React.createElement(Icon, { type: "Back", className: prefix + "modal-title-icon", onClick: function () {
var onBack = _this.props.onBack;
onBack === null || onBack === void 0 ? void 0 : onBack();
} })),
' ',
titleAlign === 'left' && (React.createElement("div", { className: prefix + "modal-title" }, titleEditable ? editTitle : title))),
titleAlign === 'center' && (React.createElement("div", { className: prefix + "modal-title " + prefix + "modal-title-center" }, titleEditable ? editTitle : title))));
};
_this.isYunxiaoTheme = function () {
var _a;
var theme = ((_a = window.getComputedStyle(window.document.body)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--alicloudfe-components-theme')) || '';
return theme.trim().startsWith('yunxiao-v5');
};
_this.renderHeader = function () {
var _a = _this.props, prefix = _a.prefix, description = _a.description, groups = _a.groups, operations = _a.operations, sideDrawer = _a.sideDrawer, sideDrawerLabel = _a.sideDrawerLabel, sideDrawerVisible = _a.sideDrawerVisible;
var title = _this.renderTitle();
return (React.createElement("div", { className: prefix + "modal-header" },
React.createElement("div", { className: "left-part" },
title,
React.createElement("div", { className: prefix + "modal-description" }, description)),
_this.isYunxiaoTheme() && groups && (React.createElement("div", { className: "middle-part" },
React.createElement("div", { className: prefix + "modal-groups" }, groups))),
React.createElement("div", { className: "right-part" },
React.createElement("div", { className: prefix + "modal-operations" }, operations),
sideDrawer ? (React.createElement("div", { className: prefix + "modal-side-drawer-switch" },
React.createElement("span", { className: prefix + "modal-side-drawer-switch-label" }, sideDrawerLabel),
React.createElement(Switch, { size: "small", checked: sideDrawerVisible, onChange: _this.onSideDrawerVisibleChange }))) : null,
React.createElement(Button, { className: prefix + "modal-close", onClick: _this.onClose, text: true },
React.createElement(Icon, { type: "close" })))));
};
_this.renderBody = function () {
var _a;
var _b = _this.props, prefix = _b.prefix, sideDrawer = _b.sideDrawer, sideDrawerVisible = _b.sideDrawerVisible, sideDrawerWidth = _b.sideDrawerWidth, children = _b.children;
return (React.createElement("div", { className: prefix + "modal-body" },
React.createElement("div", { className: prefix + "modal-children" }, children),
sideDrawer ? (React.createElement("div", { className: cls((_a = {},
_a[prefix + "modal-side-drawer"] = true,
_a[prefix + "modal-side-drawer-visible"] = sideDrawerVisible,
_a)), style: {
width: sideDrawerVisible ? sideDrawerWidth : 0
} }, sideDrawer)) : null));
};
_this.renderExtra = function () {
var _a = _this.props, prefix = _a.prefix, extra = _a.extra;
return extra && (React.createElement("div", { className: prefix + "modal-header-extra" }, extra));
};
_this.renderModal = function () {
var _a;
var _b = _this.props, prefix = _b.prefix, className = _b.className, style = _b.style;
var header = _this.renderHeader();
var extra = _this.renderExtra();
var body = _this.renderBody();
return (React.createElement("div", { className: cls((_a = {},
_a[prefix + "modal"] = true,
_a[className] = !!className,
_a)), style: style },
header,
_this.isYunxiaoTheme() && extra,
body));
};
_this.state = {
visible: 'visible' in props ? props.visible : props.defaultVisible || false,
isEditing: false
};
_this.container = document.createElement('div');
return _this;
}
Modal.prototype.componentDidMount = function () {
document.body.appendChild(this.container);
if (this.state.visible) {
document.body.classList.add('next-modal-open');
}
this.addDocumentEvents();
};
Modal.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
if (nextProps.visible !== this.props.visible) {
this.setState({
visible: nextProps.visible
});
}
};
Modal.prototype.componentDidUpdate = function () {
if (this.state.visible === false) {
document.body.classList.remove('next-modal-open');
}
};
Modal.prototype.componentWillUnmount = function () {
document.body.removeChild(this.container);
document.body.classList.remove('next-modal-open');
this.container = null;
this.removeDocumentEvents();
};
Modal.prototype.render = function () {
var visible = this.state.visible;
if (visible) {
return ReactDOM.createPortal(this.renderModal(), this.container);
}
return null;
};
Modal.defaultProps = {
prefix: 'next-',
sideDrawerWidth: 400,
titleEditTooltip: '点击即可编辑',
onClose: function () { },
onBack: function () { },
onSideDrawerVisibleChange: function () { },
onEditTitleChange: function () { },
canCloseByEsc: true
};
return Modal;
}(React.Component));
export default ConfigProvider.config(Modal, 'Modal');