UNPKG

@alicloudfe/components

Version:

A react component library for aliyun

197 lines (196 loc) 10.1 kB
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');