UNPKG

@alilc/lowcode-editor-skeleton

Version:

alibaba lowcode editor skeleton

214 lines (213 loc) 7.63 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports["default"] = exports.PopupPipe = exports.PopupContext = exports.PopupContent = void 0; var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer")); var _configProvider = _interopRequireDefault(require("@alifd/next/lib/config-provider")); var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _react = require("react"); var _lowcodeUtils = require("@alilc/lowcode-utils"); var _lowcodeEditorCore = require("@alilc/lowcode-editor-core"); require("./style.less"); var PopupContext = exports.PopupContext = /*#__PURE__*/(0, _react.createContext)({}); var PopupPipe = exports.PopupPipe = /*#__PURE__*/function () { function PopupPipe() { this.emitter = (0, _lowcodeEditorCore.createModuleEventBus)('PopupPipe'); this.currentId = void 0; } var _proto = PopupPipe.prototype; _proto.create = function create(props) { var _this = this; var sendContent = null; var sendTitle = null; var id = (0, _lowcodeUtils.uniqueId)('popup'); return { send: function send(content, title) { sendContent = content; sendTitle = title; if (_this.currentId === id) { _this.popup((0, _extends2["default"])({}, props, { content: content, title: title })); } }, show: function show(target, actionKey) { _this.currentId = id; _this.popup((0, _extends2["default"])({}, props, { actionKey: actionKey, content: sendContent, title: sendTitle }), target); } }; }; _proto.popup = function popup(props, target) { var _this2 = this; Promise.resolve().then(function () { _this2.emitter.emit('popupchange', props, target); }); }; _proto.onPopupChange = function onPopupChange(fn) { var _this3 = this; this.emitter.on('popupchange', fn); return function () { _this3.emitter.removeListener('popupchange', fn); }; }; _proto.purge = function purge() { this.emitter.removeAllListeners(); }; return PopupPipe; }(); var PopupService = exports["default"] = /*#__PURE__*/function (_Component) { function PopupService() { var _this4; for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this4 = _Component.call.apply(_Component, [this].concat(args)) || this; _this4.popupPipe = _this4.props.popupPipe || new PopupPipe(); return _this4; } (0, _inheritsLoose2["default"])(PopupService, _Component); var _proto2 = PopupService.prototype; _proto2.componentWillUnmount = function componentWillUnmount() { this.popupPipe.purge(); }; _proto2.render = function render() { var _this$props = this.props, children = _this$props.children, actionKey = _this$props.actionKey, safeId = _this$props.safeId, popupContainer = _this$props.popupContainer; return /*#__PURE__*/React.createElement(PopupContext.Provider, { value: this.popupPipe }, children, /*#__PURE__*/React.createElement(PopupContent, { key: "pop" + actionKey, safeId: safeId, popupContainer: popupContainer })); }; return PopupService; }(_react.Component); var PopupContent = exports.PopupContent = /*#__PURE__*/function (_PureComponent) { function PopupContent() { var _this5; for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; } _this5 = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this; _this5.popupContainerId = (0, _lowcodeUtils.uniqueId)('popupContainer'); _this5.state = { visible: false, offsetX: -300 }; _this5.dispose = _this5.context.onPopupChange(function (props, target) { var state = (0, _extends2["default"])({}, props, { visible: true }); if (target) { var rect = target.getBoundingClientRect(); state.pos = { top: rect.top, height: rect.height }; // todo: compute the align method } _this5.setState(state); }); _this5.onClose = function () { _this5.setState({ visible: false }); }; return _this5; } (0, _inheritsLoose2["default"])(PopupContent, _PureComponent); var _proto3 = PopupContent.prototype; _proto3.componentDidMount = function componentDidMount() { var clientWidth = document.documentElement.clientWidth || document.body.clientWidth; if (clientWidth >= 1860) { this.setState({ offsetX: -400 }); } }; _proto3.componentWillUnmount = function componentWillUnmount() { this.dispose(); }; _proto3.render = function render() { var _this6 = this; var _this$state = this.state, content = _this$state.content, visible = _this$state.visible, title = _this$state.title, actionKey = _this$state.actionKey, pos = _this$state.pos, offsetX = _this$state.offsetX, _this$state$width = _this$state.width, width = _this$state$width === void 0 ? 360 : _this$state$width, _this$state$hasMask = _this$state.hasMask, hasMask = _this$state$hasMask === void 0 ? false : _this$state$hasMask, _this$state$canCloseB = _this$state.canCloseByOutSideClick, canCloseByOutSideClick = _this$state$canCloseB === void 0 ? true : _this$state$canCloseB, _this$state$safeNode = _this$state.safeNode, safeNode = _this$state$safeNode === void 0 ? [] : _this$state$safeNode; if (!visible) { return null; } var avoidLaterHidden = true; setTimeout(function () { avoidLaterHidden = false; }, 10); var id = (0, _lowcodeUtils.uniqueId)('ball'); return /*#__PURE__*/React.createElement(_drawer["default"], { width: width, visible: visible, offset: [offsetX, 0], hasMask: hasMask, onVisibleChange: function onVisibleChange(_visible, type) { if (avoidLaterHidden) { return; } if (!_visible && type === 'closeClick') { _this6.setState({ visible: false }); } }, trigger: /*#__PURE__*/React.createElement("div", { className: "lc-popup-placeholder", style: pos }), triggerType: "click", canCloseByOutSideClick: canCloseByOutSideClick, animation: false, onClose: this.onClose, id: this.props.safeId, safeNode: [id].concat(safeNode), closeable: true, container: this.props.popupContainer }, /*#__PURE__*/React.createElement("div", { className: "lc-ballon-title" }, title), /*#__PURE__*/React.createElement("div", { className: "lc-ballon-content" }, /*#__PURE__*/React.createElement(PopupService, { actionKey: actionKey, safeId: id, popupContainer: this.popupContainerId }, /*#__PURE__*/React.createElement(_configProvider["default"], { popupContainer: this.popupContainerId }, content))), /*#__PURE__*/React.createElement("div", { id: this.popupContainerId }), /*#__PURE__*/React.createElement("div", { id: "engine-variable-setter-dialog" }), /*#__PURE__*/React.createElement("div", { id: "engine-popup-container" })); }; return PopupContent; }(_react.PureComponent); PopupContent.contextType = PopupContext;