@alicloudfe/components
Version:
A react component library for aliyun
202 lines (201 loc) • 11 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 __());
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var react_dom_1 = __importDefault(require("react-dom"));
var config_provider_1 = __importDefault(require("../config-provider"));
var classnames_1 = __importDefault(require("classnames"));
var button_1 = __importDefault(require("../button"));
var input_1 = __importDefault(require("../input"));
var switch_1 = __importDefault(require("../switch"));
var balloon_1 = __importDefault(require("../balloon"));
var icon_1 = __importDefault(require("../icon"));
var utils_1 = require("../utils");
var Tooltip = balloon_1.default.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 = utils_1.events.on(document, 'keydown', _this.handleDocumentKeyDown);
}
};
_this.handleDocumentKeyDown = function (e) {
if (_this.state.visible && e.keyCode === utils_1.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_1.default.createElement(input_1.default, { autoFocus: true, value: title, onChange: _this.onEditTitleChange, onBlur: _this.onLeaveEditing, onPressEnter: _this.onLeaveEditing, style: { width: titleInputWidth } })) : (react_1.default.createElement("span", null,
react_1.default.createElement("span", { className: "edit-title" }, title),
react_1.default.createElement(Tooltip, { trigger: react_1.default.createElement(button_1.default, { className: prefix + "modal-edit-icon", type: "secondary", onClick: _this.onEnterEditing, size: "small", text: true },
react_1.default.createElement(icon_1.default, { type: "edit" })), align: "r" }, titleEditTooltip)));
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: prefix + "modal-title-box" },
_this.props.hasArrow && (react_1.default.createElement(icon_1.default, { 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_1.default.createElement("div", { className: prefix + "modal-title" }, titleEditable ? editTitle : title))),
titleAlign === 'center' && (react_1.default.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_1.default.createElement("div", { className: prefix + "modal-header" },
react_1.default.createElement("div", { className: "left-part" },
title,
react_1.default.createElement("div", { className: prefix + "modal-description" }, description)),
_this.isYunxiaoTheme() && groups && (react_1.default.createElement("div", { className: "middle-part" },
react_1.default.createElement("div", { className: prefix + "modal-groups" }, groups))),
react_1.default.createElement("div", { className: "right-part" },
react_1.default.createElement("div", { className: prefix + "modal-operations" }, operations),
sideDrawer ? (react_1.default.createElement("div", { className: prefix + "modal-side-drawer-switch" },
react_1.default.createElement("span", { className: prefix + "modal-side-drawer-switch-label" }, sideDrawerLabel),
react_1.default.createElement(switch_1.default, { size: "small", checked: sideDrawerVisible, onChange: _this.onSideDrawerVisibleChange }))) : null,
react_1.default.createElement(button_1.default, { className: prefix + "modal-close", onClick: _this.onClose, text: true },
react_1.default.createElement(icon_1.default, { 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_1.default.createElement("div", { className: prefix + "modal-body" },
react_1.default.createElement("div", { className: prefix + "modal-children" }, children),
sideDrawer ? (react_1.default.createElement("div", { className: classnames_1.default((_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_1.default.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_1.default.createElement("div", { className: classnames_1.default((_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 react_dom_1.default.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_1.default.Component));
exports.default = config_provider_1.default.config(Modal, 'Modal');