@txdfe/at
Version:
一个设计体系组件库
310 lines (309 loc) • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _configProvider = _interopRequireDefault(require("../config-provider"));
var _classnames = _interopRequireDefault(require("classnames"));
var _button = _interopRequireDefault(require("../button"));
var _input = _interopRequireDefault(require("../input"));
var _switch = _interopRequireDefault(require("../switch"));
var _balloon = _interopRequireDefault(require("../balloon"));
var _util = require("../util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var Tooltip = _balloon["default"].Tooltip;
var Modal = /*#__PURE__*/function (_React$Component) {
function Modal(props) {
var _this;
_classCallCheck(this, Modal);
_this = _callSuper(this, Modal, [props]);
_defineProperty(_this, "addDocumentEvents", function () {
if (_this.props.canCloseByEsc) {
_this._keydownEvents = _util.events.on(document, 'keydown', _this.handleDocumentKeyDown);
}
});
_defineProperty(_this, "handleDocumentKeyDown", function (e) {
if (_this.state.visible && e.keyCode === _util.KEYCODE.ESC) {
_this.setState({
visible: false
});
_this.props.onClose();
}
});
_defineProperty(_this, "removeDocumentEvents", function () {
if (_this._keydownEvents) {
_this._keydownEvents.off();
_this._keydownEvents = null;
}
});
_defineProperty(_this, "onSideDrawerVisibleChange", function (checked) {
_this.props.onSideDrawerVisibleChange(checked);
});
_defineProperty(_this, "onEditTitleChange", function (value) {
_this.props.onEditTitleChange(value);
});
_defineProperty(_this, "onEnterEditing", function () {
_this.setState({
isEditing: true
});
});
_defineProperty(_this, "onLeaveEditing", function () {
_this.setState({
isEditing: false
});
});
_defineProperty(_this, "onClose", function () {
var onClose = _this.props.onClose;
if (!('visible' in _this.props)) {
_this.setState({
visible: false
});
}
onClose();
});
_defineProperty(_this, "renderTitle", function () {
var _this$props = _this.props,
prefix = _this$props.prefix,
title = _this$props.title,
titleEditable = _this$props.titleEditable,
titleEditTooltip = _this$props.titleEditTooltip,
titleInputWidth = _this$props.titleInputWidth;
var isEditing = _this.state.isEditing;
var editTitle = isEditing ? /*#__PURE__*/_react["default"].createElement(_input["default"], {
size: "xs",
autoFocus: true,
value: title,
onChange: _this.onEditTitleChange,
onBlur: _this.onLeaveEditing,
onPressEnter: _this.onLeaveEditing,
style: {
width: titleInputWidth
}
}) : /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("span", {
className: "edit-title"
}, title), /*#__PURE__*/_react["default"].createElement(Tooltip, {
trigger: /*#__PURE__*/_react["default"].createElement(_button["default"].Icon, {
className: "".concat(prefix, "modal-edit-icon"),
type: "secondary",
color: "gray",
name: "pencil",
onClick: _this.onEnterEditing
}),
align: "r"
}, titleEditTooltip));
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "modal-title")
}, titleEditable ? editTitle : title);
});
_defineProperty(_this, "renderHeader", function () {
var _this$props2 = _this.props,
prefix = _this$props2.prefix,
description = _this$props2.description,
operations = _this$props2.operations,
sideDrawer = _this$props2.sideDrawer,
sideDrawerLabel = _this$props2.sideDrawerLabel,
sideDrawerVisible = _this$props2.sideDrawerVisible;
var title = _this.renderTitle();
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "modal-header")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "left-part"
}, title, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "modal-description")
}, description)), /*#__PURE__*/_react["default"].createElement("div", {
className: "right-part"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "modal-operations")
}, operations), sideDrawer ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "modal-side-drawer-switch")
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefix, "modal-side-drawer-switch-label")
}, sideDrawerLabel), /*#__PURE__*/_react["default"].createElement(_switch["default"], {
size: "small",
checked: sideDrawerVisible,
onChange: _this.onSideDrawerVisibleChange
})) : null, /*#__PURE__*/_react["default"].createElement(_button["default"].Icon, {
className: "".concat(prefix, "modal-close"),
name: "remove",
color: "gray",
onClick: _this.onClose
})));
});
_defineProperty(_this, "renderBody", function () {
var _this$props3 = _this.props,
prefix = _this$props3.prefix,
sideDrawer = _this$props3.sideDrawer,
sideDrawerVisible = _this$props3.sideDrawerVisible,
sideDrawerWidth = _this$props3.sideDrawerWidth,
children = _this$props3.children;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "modal-body")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "modal-children")
}, children), sideDrawer ? /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "modal-side-drawer"), true), "".concat(prefix, "modal-side-drawer-visible"), sideDrawerVisible)),
style: {
width: sideDrawerVisible ? sideDrawerWidth : 0
}
}, sideDrawer) : null);
});
_defineProperty(_this, "renderModal", function () {
var _this$props4 = _this.props,
prefix = _this$props4.prefix,
className = _this$props4.className,
style = _this$props4.style;
var header = _this.renderHeader();
var body = _this.renderBody();
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "modal"), true), className, !!className)),
style: style
}, header, body);
});
_this.state = {
visible: 'visible' in props ? props.visible : props.defaultVisible || false,
isEditing: false
};
_this.container = document.createElement('div');
return _this;
}
_inherits(Modal, _React$Component);
return _createClass(Modal, [{
key: "componentDidMount",
value: function componentDidMount() {
document.body.appendChild(this.container);
if (this.state.visible) {
document.body.classList.add('next-modal-open');
}
this.addDocumentEvents();
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.visible !== this.props.visible) {
this.setState({
visible: nextProps.visible
});
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (this.state.visible === false) {
document.body.classList.remove('next-modal-open');
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.body.removeChild(this.container);
document.body.classList.remove('next-modal-open');
this.container = null;
this.removeDocumentEvents();
}
}, {
key: "render",
value: function render() {
var visible = this.state.visible;
if (visible) {
return /*#__PURE__*/_reactDom["default"].createPortal(this.renderModal(), this.container);
}
return null;
}
}]);
}(_react["default"].Component);
_defineProperty(Modal, "propTypes", {
prefix: _propTypes["default"].string,
style: _propTypes["default"].object,
className: _propTypes["default"].string,
/**
* 是否默认可见，非受控
*/
defaultVisible: _propTypes["default"].bool,
/**
* 是否可见，受控
*/
visible: _propTypes["default"].bool,
/**
* 点击关闭按钮回调
*/
onClose: _propTypes["default"].func,
/**
* Modal标题
*/
title: _propTypes["default"].string.isRequired,
/**
* Modal标题是否可编辑
*/
titleEditable: _propTypes["default"].bool,
/**
* 标题编辑图标提示文案
*/
titleEditTooltip: _propTypes["default"].string,
/**
* 可编辑时标题输入框的宽度
*/
titleInputWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/**
* 标题编辑回调
*/
onEditTitleChange: _propTypes["default"].func,
/**
* Modal描述
*/
description: _propTypes["default"].string,
/**
* 操作区
*/
operations: _propTypes["default"].element,
/**
* 侧边栏内容
*/
sideDrawer: _propTypes["default"].node,
/**
* 侧边栏内容宽度
*/
sideDrawerWidth: _propTypes["default"].number,
/**
* 侧边栏切换显示Switch前label
*/
sideDrawerLabel: _propTypes["default"].string,
/**
* 侧边栏内容是否可见
*/
sideDrawerVisible: _propTypes["default"].bool,
/**
* 侧边栏内容切换可见回调
*/
onSideDrawerVisibleChange: _propTypes["default"].func,
/**
* 是否支持 esc 按键关闭弹层
*/
canCloseByEsc: _propTypes["default"].bool
});
_defineProperty(Modal, "defaultProps", {
prefix: 'next-',
sideDrawerWidth: 400,
titleEditTooltip: '点击即可编辑',
onClose: function onClose() {},
onSideDrawerVisibleChange: function onSideDrawerVisibleChange() {},
onEditTitleChange: function onEditTitleChange() {},
canCloseByEsc: true
});
var _default = exports["default"] = _configProvider["default"].config(Modal);