UNPKG

@alilc/lowcode-editor-skeleton

Version:

alibaba lowcode editor skeleton

277 lines (275 loc) 13.7 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.SettingsPrimaryPane = void 0; var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); var _tab = _interopRequireDefault(require("@alifd/next/lib/tab")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _breadcrumb = _interopRequireDefault(require("@alifd/next/lib/breadcrumb")); var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty")); var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose")); var _applyDecoratedDescriptor2 = _interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor")); var _initializerWarningHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper")); var _react = _interopRequireWildcard(require("react")); var _lowcodeEditorCore = require("@alilc/lowcode-editor-core"); var _classnames = _interopRequireDefault(require("classnames")); var _main = require("./main"); var _settingsPane = require("./settings-pane"); var _stageBox = require("../stage-box"); var _context2 = require("../../context"); var _locale = require("../../locale"); var _lowcodeUtils = require("@alilc/lowcode-utils"); var _dec, _class, _class2, _descriptor; function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; } var SettingsPrimaryPane = exports.SettingsPrimaryPane = (_dec = _lowcodeEditorCore.obx.ref, (0, _lowcodeEditorCore.observer)(_class = (_class2 = /*#__PURE__*/function (_Component) { function SettingsPrimaryPane(props) { var _this; _this = _Component.call(this, props) || this; _this.state = { shouldIgnoreRoot: false }; _this.main = new _main.SettingsMain(_this.props.engineEditor); (0, _initializerDefineProperty2["default"])(_this, "_activeKey", _descriptor, _this); (0, _lowcodeEditorCore.makeObservable)(_this); return _this; } (0, _inheritsLoose2["default"])(SettingsPrimaryPane, _Component); var _proto = SettingsPrimaryPane.prototype; _proto.componentDidMount = function componentDidMount() { var _this2 = this; this.setShouldIgnoreRoot(); var editor = this.props.engineEditor; editor.eventBus.on('designer.selection.change', function () { if (!_lowcodeEditorCore.engineConfig.get('stayOnTheSameSettingTab', false)) { _this2._activeKey = null; } }); }; _proto.setShouldIgnoreRoot = /*#__PURE__*/function () { var _setShouldIgnoreRoot = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() { var designMode; return _regenerator["default"].wrap(function _callee$(_context) { while (1) switch (_context.prev = _context.next) { case 0: _context.next = 2; return _lowcodeEditorCore.globalContext.get('editor').get('designMode'); case 2: designMode = _context.sent; this.setState({ shouldIgnoreRoot: designMode === 'live' }); case 4: case "end": return _context.stop(); } }, _callee, this); })); function setShouldIgnoreRoot() { return _setShouldIgnoreRoot.apply(this, arguments); } return setShouldIgnoreRoot; }(); _proto.componentWillUnmount = function componentWillUnmount() { this.main.purge(); }; _proto.renderBreadcrumb = function renderBreadcrumb() { var _designer$currentSele, _designer$currentSele2, _node2, _node2$document, _this$main$componentM; var _this$main = this.main, settings = _this$main.settings, editor = _this$main.editor, designer = _this$main.designer; var shouldIgnoreRoot = this.state.shouldIgnoreRoot; if (!settings) { return null; } if (settings.isMultiple) { var _settings$componentMe; return /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-navigator" }, (0, _lowcodeUtils.createIcon)((_settings$componentMe = settings.componentMeta) === null || _settings$componentMe === void 0 ? void 0 : _settings$componentMe.icon, { className: 'lc-settings-navigator-icon' }), /*#__PURE__*/_react["default"].createElement("div", { style: { marginLeft: '5px' } }, /*#__PURE__*/_react["default"].createElement(_lowcodeEditorCore.Title, { title: settings.componentMeta.title }), /*#__PURE__*/_react["default"].createElement("span", null, " x ", settings.nodes.length))); } var current = designer === null || designer === void 0 ? void 0 : (_designer$currentSele = designer.currentSelection) === null || _designer$currentSele === void 0 ? void 0 : (_designer$currentSele2 = _designer$currentSele.getNodes()) === null || _designer$currentSele2 === void 0 ? void 0 : _designer$currentSele2[0]; var node = settings.first; var focusNode = (_node2 = node) === null || _node2 === void 0 ? void 0 : (_node2$document = _node2.document) === null || _node2$document === void 0 ? void 0 : _node2$document.focusNode; var items = []; var l = 3; var _loop = function _loop() { var _node = node; // dirty code: should remove if (shouldIgnoreRoot && node.isRoot()) { return 1; // break } if (focusNode && node.contains(focusNode)) { l = 0; } var props = l === 2 ? {} : { onMouseOver: hoverNode.bind(null, _node, true), onMouseOut: hoverNode.bind(null, _node, false), onClick: function onClick() { if (!_node) { return; } selectNode.call(null, _node); var getName = function getName(node) { var _node$componentMeta, _node$componentMeta2; var npm = node === null || node === void 0 ? void 0 : (_node$componentMeta = node.componentMeta) === null || _node$componentMeta === void 0 ? void 0 : _node$componentMeta.npm; return [npm === null || npm === void 0 ? void 0 : npm["package"], npm === null || npm === void 0 ? void 0 : npm.componentName].filter(function (item) { return !!item; }).join('-') || (node === null || node === void 0 ? void 0 : (_node$componentMeta2 = node.componentMeta) === null || _node$componentMeta2 === void 0 ? void 0 : _node$componentMeta2.componentName) || ''; }; var selected = getName(current); var target = getName(_node); editor === null || editor === void 0 ? void 0 : editor.eventBus.emit('skeleton.settingsPane.Breadcrumb', { selected: selected, target: target }); } }; items.unshift(/*#__PURE__*/_react["default"].createElement(_breadcrumb["default"].Item, (0, _extends2["default"])({}, props, { key: node.id }), /*#__PURE__*/_react["default"].createElement(_lowcodeEditorCore.Title, { title: node.title }))); node = node.parent; }; while (l-- > 0 && node) { if (_loop()) break; } return /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-navigator" }, (0, _lowcodeUtils.createIcon)((_this$main$componentM = this.main.componentMeta) === null || _this$main$componentM === void 0 ? void 0 : _this$main$componentM.icon, { className: 'lc-settings-navigator-icon', "class": 'lc-settings-navigator-icon' }), /*#__PURE__*/_react["default"].createElement(_breadcrumb["default"], { className: "lc-settings-node-breadcrumb" }, items)); }; _proto.render = function render() { var _this3 = this; var settings = this.main.settings; var editor = this.props.engineEditor; if (!settings || !settings.first) { // 未选中节点,提示选中 或者 显示根节点设置 return /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-main" }, /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-notice" }, /*#__PURE__*/_react["default"].createElement("p", null, (0, _locale.intl)('Please select a node in canvas')))); } // 当节点被锁定,且未开启锁定后容器可设置属性 if (settings.isLocked && !_lowcodeEditorCore.engineConfig.get('enableLockedNodeSetting', false)) { return /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-main" }, /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-notice" }, /*#__PURE__*/_react["default"].createElement("p", null, (0, _locale.intl)('Current node is locked')))); } if (Array.isArray(settings.items) && settings.items.length === 0) { return /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-main" }, /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-notice" }, /*#__PURE__*/_react["default"].createElement("p", null, (0, _locale.intl)('No config found for this type of component')))); } if (!settings.isSameComponent) { // TODO: future support 获取设置项交集编辑 return /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-main" }, /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-notice" }, /*#__PURE__*/_react["default"].createElement("p", null, (0, _locale.intl)('Please select same kind of components')))); } var items = settings.items; if (items.length > 5 || items.some(function (item) { return !(0, _lowcodeUtils.isSettingField)(item) || !item.isGroup; })) { return /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-main" }, this.renderBreadcrumb(), /*#__PURE__*/_react["default"].createElement("div", { className: "lc-settings-body" }, /*#__PURE__*/_react["default"].createElement(_context2.SkeletonContext.Consumer, null, function (skeleton) { if (skeleton) { return /*#__PURE__*/_react["default"].createElement(_stageBox.StageBox, { skeleton: skeleton, target: settings, key: settings.id }, /*#__PURE__*/_react["default"].createElement(_settingsPane.SettingsPane, { target: settings, usePopup: false })); } return null; }))); } var matched = false; var tabs = items.map(function (field) { if (_this3._activeKey === field.name) { matched = true; } return /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, { className: "lc-settings-tab-item", title: /*#__PURE__*/_react["default"].createElement(_lowcodeEditorCore.Title, { title: field.title }), key: field.name, onClick: function onClick() { editor === null || editor === void 0 ? void 0 : editor.eventBus.emit('skeleton.settingsPane.change', { name: field.name, title: field.title }); } }, /*#__PURE__*/_react["default"].createElement(_context2.SkeletonContext.Consumer, null, function (skeleton) { if (skeleton) { return /*#__PURE__*/_react["default"].createElement(_stageBox.StageBox, { skeleton: skeleton, target: field, key: field.id }, /*#__PURE__*/_react["default"].createElement(_settingsPane.SettingsPane, { target: field, key: field.id, usePopup: false })); } return null; })); }); var activeKey = matched ? this._activeKey : items[0].name; var className = (0, _classnames["default"])('lc-settings-main', { 'lc-settings-hide-tabs': items.length === 1 && _lowcodeEditorCore.engineConfig.get('hideSettingsTabsWhenOnlyOneItem', false) }); return /*#__PURE__*/_react["default"].createElement("div", { className: className }, this.renderBreadcrumb(), /*#__PURE__*/_react["default"].createElement(_tab["default"], { activeKey: activeKey, onChange: function onChange(tabKey) { _this3._activeKey = tabKey; }, navClassName: "lc-settings-tabs", animation: false, excessMode: "dropdown", contentClassName: "lc-settings-tabs-content" }, tabs)); }; return SettingsPrimaryPane; }(_react.Component), _descriptor = (0, _applyDecoratedDescriptor2["default"])(_class2.prototype, "_activeKey", [_dec], { configurable: true, enumerable: true, writable: true, initializer: null }), _class2)) || _class); function hoverNode(node, flag) { node.hover(flag); } function selectNode(node) { node === null || node === void 0 ? void 0 : node.select(); }