@alilc/lowcode-editor-skeleton
Version:
alibaba lowcode editor skeleton
442 lines (437 loc) • 19.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SettingsPane = void 0;
exports.createSettingFieldView = createSettingFieldView;
var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
var _applyDecoratedDescriptor2 = _interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));
var _initializerWarningHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = require("react");
var _lowcodeEditorCore = require("@alilc/lowcode-editor-core");
var _lowcodeUtils = require("@alilc/lowcode-utils");
var _field = require("../field");
var _popup = _interopRequireWildcard(require("../popup"));
var _context = require("../../context");
var _locale = require("../../locale");
var _class, _SettingFieldView, _class2, _SettingGroupView, _class3, _class4, _descriptor, _SettingsPane;
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; }
function isStandardComponent(componentMeta) {
if (!componentMeta) return false;
var prototype = componentMeta.prototype;
return prototype == null;
}
/**
* 判断 initialValue 是否为非空，非空条件：
* 1. 当为 slot 结构时，value 为有长度的数组且 visible 不为 false
* 2. 不为 slot 结构，为非 undefined / null 值
* @param initialValue
* @returns
*/
function isInitialValueNotEmpty(initialValue) {
if ((0, _lowcodeUtils.isJSSlot)(initialValue)) {
// @ts-ignore visible 为 false 代表默认不展示
return initialValue.visible !== false && Array.isArray(initialValue.value) && initialValue.value.length > 0;
}
return initialValue !== undefined && initialValue !== null;
}
var SettingFieldView = (0, _lowcodeEditorCore.observer)(_class = (_SettingFieldView = /*#__PURE__*/function (_Component) {
function SettingFieldView(props) {
var _field$designer;
var _this;
_this = _Component.call(this, props) || this;
_this.stageName = void 0;
_this.setters = void 0;
var field = _this.props.field;
var extraProps = field.extraProps;
var display = extraProps.display;
var editor = (_field$designer = field.designer) === null || _field$designer === void 0 ? void 0 : _field$designer.editor;
var skeleton = editor === null || editor === void 0 ? void 0 : editor.get('skeleton');
var _ref = skeleton || {},
stages = _ref.stages;
_this.setters = editor === null || editor === void 0 ? void 0 : editor.get('setters');
var stageName;
if (display === 'entry') {
(0, _lowcodeEditorCore.runInAction)(function () {
var _field$name;
stageName = field.getNode().id + "_" + ((_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.toString());
// 清除原 stage，不然 content 引用的一直是老的 field，导致数据无法得到更新
stages.container.remove(stageName);
stages.add({
type: 'Widget',
name: stageName,
content: /*#__PURE__*/React.createElement(_react.Fragment, null, field.items.map(function (item, index) {
return createSettingFieldView(item, field, index);
})),
props: {
title: field.title
}
});
});
}
_this.stageName = stageName;
return _this;
}
(0, _inheritsLoose2["default"])(SettingFieldView, _Component);
var _proto = SettingFieldView.prototype;
_proto.initDefaultValue = function initDefaultValue() {
var _this$state;
var initialValue = this.setterInfo.initialValue;
if ((_this$state = this.state) !== null && _this$state !== void 0 && _this$state.fromOnChange || !isInitialValueNotEmpty(initialValue) || this.ignoreDefaultValue || this.value !== undefined) {
return;
}
// 当前 field 没有 value 值时，将 initialValue 写入 field
// 之所以用 initialValue，而不是 defaultValue 是为了保持跟 props.onInitial 的逻辑一致
var _initialValue = typeof initialValue === 'function' ? initialValue(this.field.internalToShellField()) : initialValue;
this.field.setValue(_initialValue);
};
_proto.componentDidMount = function componentDidMount() {
this.initDefaultValue();
};
_proto.render = function render() {
var _field$componentMeta,
_field$componentMeta2,
_this$setters,
_field$top,
_field$top$getNode,
_this2 = this;
var field = this.field;
var extraProps = field.extraProps;
var visible = this.visible;
if (!visible) {
return null;
}
var _this$setterInfo = this.setterInfo,
_this$setterInfo$sett = _this$setterInfo.setterProps,
setterProps = _this$setterInfo$sett === void 0 ? {} : _this$setterInfo$sett,
setterType = _this$setterInfo.setterType,
_this$setterInfo$init = _this$setterInfo.initialValue,
initialValue = _this$setterInfo$init === void 0 ? null : _this$setterInfo$init;
var value = this.value;
var onChangeAPI = extraProps === null || extraProps === void 0 ? void 0 : extraProps.onChange;
var stageName = this.stageName;
return (0, _field.createField)((0, _extends2["default"])({
meta: (field === null || field === void 0 ? void 0 : (_field$componentMeta = field.componentMeta) === null || _field$componentMeta === void 0 ? void 0 : _field$componentMeta.npm) || (field === null || field === void 0 ? void 0 : (_field$componentMeta2 = field.componentMeta) === null || _field$componentMeta2 === void 0 ? void 0 : _field$componentMeta2.componentName) || '',
title: field.title,
// editor: field.editor,
collapsed: !field.expanded,
valueState: field.isRequired ? 10 : field.valueState,
onExpandChange: function onExpandChange(expandState) {
return field.setExpanded(expandState);
},
onClear: function onClear() {
return field.clearValue();
},
// field: field,
// stages,
stageName: stageName
}, extraProps), !stageName && ((_this$setters = this.setters) === null || _this$setters === void 0 ? void 0 : _this$setters.createSetterContent(setterType, (0, _extends2["default"])({}, (0, _lowcodeEditorCore.shallowIntl)(setterProps), {
forceInline: extraProps.forceInline,
key: field.id,
// === injection
prop: field.internalToShellField(),
// for compatible vision
selected: (_field$top = field.top) === null || _field$top === void 0 ? void 0 : (_field$top$getNode = _field$top.getNode()) === null || _field$top$getNode === void 0 ? void 0 : _field$top$getNode.internalToShellNode(),
field: field.internalToShellField(),
// === IO
value: value,
// reaction point
initialValue: initialValue,
onChange: function onChange(value) {
_this2.setState({
fromOnChange: true,
// eslint-disable-next-line react/no-unused-state
value: value
});
field.setValue(value, true);
if (onChangeAPI) onChangeAPI(value, field.internalToShellField());
},
onInitial: function onInitial() {
if (initialValue == null) {
return;
}
var value = typeof initialValue === 'function' ? initialValue(field.internalToShellField()) : initialValue;
_this2.setState({
// eslint-disable-next-line react/no-unused-state
value: value
});
field.setValue(value, true);
},
removeProp: function removeProp() {
if (field.name) {
field.parent.clearPropValue(field.name);
}
}
}))), extraProps.forceInline ? 'plain' : extraProps.display);
};
return (0, _createClass2["default"])(SettingFieldView, [{
key: "field",
get: function get() {
return this.props.field;
}
}, {
key: "visible",
get: function get() {
var extraProps = this.field.extraProps;
var condition = extraProps.condition;
try {
return typeof condition === 'function' ? condition(this.field.internalToShellField()) !== false : true;
} catch (error) {
console.error('exception when condition (hidden) is excuted', error);
}
return true;
}
}, {
key: "ignoreDefaultValue",
get: function get() {
var extraProps = this.field.extraProps;
var ignoreDefaultValue = extraProps.ignoreDefaultValue;
try {
if (typeof ignoreDefaultValue === 'function') {
return ignoreDefaultValue(this.field.internalToShellField());
}
return false;
} catch (error) {
console.error('exception when ignoreDefaultValue is excuted', error);
}
return false;
}
}, {
key: "setterInfo",
get: function get() {
var _this$field$extraProp;
var _this$field = this.field,
extraProps = _this$field.extraProps,
componentMeta = _this$field.componentMeta;
var defaultValue = extraProps.defaultValue;
var setter = this.field.setter;
var setterProps = {};
var setterType;
var initialValue = null;
if (Array.isArray(setter)) {
setterType = 'MixedSetter';
setterProps = {
setters: setter
};
} else if ((0, _lowcodeUtils.isSetterConfig)(setter)) {
setterType = setter.componentName;
if (setter.props) {
setterProps = setter.props;
if (typeof setterProps === 'function') {
setterProps = setterProps(this.field.internalToShellField());
}
}
if (setter.initialValue != null) {
initialValue = setter.initialValue;
}
} else if (setter) {
setterType = setter;
}
if (defaultValue != null && !('defaultValue' in setterProps)) {
setterProps.defaultValue = defaultValue;
if (initialValue == null) {
initialValue = defaultValue;
}
}
if (this.field.valueState === -1) {
setterProps.multiValue = true;
if (!('placeholder' in setterProps)) {
setterProps.placeholder = (0, _locale.intl)('Multiple Value');
}
}
// 根据是否支持变量配置做相应的更改
var supportVariable = (_this$field$extraProp = this.field.extraProps) === null || _this$field$extraProp === void 0 ? void 0 : _this$field$extraProp.supportVariable;
// supportVariableGlobally 只对标准组件生效，vc 需要单独配置
var supportVariableGlobally = _lowcodeEditorCore.engineConfig.get('supportVariableGlobally', false) && isStandardComponent(componentMeta);
var isUseVariableSetter = (0, _lowcodeUtils.shouldUseVariableSetter)(supportVariable, supportVariableGlobally);
if (isUseVariableSetter === false) {
return {
setterProps: setterProps,
initialValue: initialValue,
setterType: setterType
};
}
if (setterType === 'MixedSetter') {
// VariableSetter 不单独使用
if (Array.isArray(setterProps.setters) && !setterProps.setters.includes('VariableSetter')) {
setterProps.setters.push('VariableSetter');
}
} else {
setterType = 'MixedSetter';
setterProps = {
setters: [setter, 'VariableSetter']
};
}
return {
setterProps: setterProps,
initialValue: initialValue,
setterType: setterType
};
}
}, {
key: "value",
get: function get() {
return this.field.valueState === -1 ? null : this.field.getValue();
}
}]);
}(_react.Component), _SettingFieldView.contextType = _context.SkeletonContext, _SettingFieldView)) || _class;
var SettingGroupView = (0, _lowcodeEditorCore.observer)(_class2 = (_SettingGroupView = /*#__PURE__*/function (_Component2) {
function SettingGroupView(props) {
var _this3$props$field$de;
var _this3;
_this3 = _Component2.call(this, props) || this;
_this3.stageName = void 0;
var field = _this3.props.field;
var extraProps = field.extraProps;
var display = extraProps.display;
var editor = (_this3$props$field$de = _this3.props.field.designer) === null || _this3$props$field$de === void 0 ? void 0 : _this3$props$field$de.editor;
var _ref2 = editor === null || editor === void 0 ? void 0 : editor.get('skeleton'),
stages = _ref2.stages;
// const items = field.items;
var stageName;
if (display === 'entry') {
(0, _lowcodeEditorCore.runInAction)(function () {
var _field$name2;
stageName = field.getNode().id + "_" + ((_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.toString());
// 清除原 stage，不然 content 引用的一直是老的 field，导致数据无法得到更新
stages.container.remove(stageName);
stages.add({
type: 'Widget',
name: stageName,
content: /*#__PURE__*/React.createElement(_react.Fragment, null, field.items.map(function (item, index) {
return createSettingFieldView(item, field, index);
})),
props: {
title: field.title
}
});
});
}
_this3.stageName = stageName;
return _this3;
}
(0, _inheritsLoose2["default"])(SettingGroupView, _Component2);
var _proto2 = SettingGroupView.prototype;
_proto2.render = function render() {
var _field$componentMeta3, _field$componentMeta4;
var field = this.props.field;
var extraProps = field.extraProps;
var condition = extraProps.condition,
display = extraProps.display;
var visible = field.isSingle && typeof condition === 'function' ? condition(field.internalToShellField()) !== false : true;
if (!visible) {
return null;
}
// todo: split collapsed state | field.items for optimize
return (0, _field.createField)({
meta: ((_field$componentMeta3 = field.componentMeta) === null || _field$componentMeta3 === void 0 ? void 0 : _field$componentMeta3.npm) || ((_field$componentMeta4 = field.componentMeta) === null || _field$componentMeta4 === void 0 ? void 0 : _field$componentMeta4.componentName) || '',
title: field.title,
// editor: field.editor,
collapsed: !field.expanded,
onExpandChange: function onExpandChange(expandState) {
return field.setExpanded(expandState);
},
// field: field,
// stages,
stageName: this.stageName
}, field.items.map(function (item, index) {
return createSettingFieldView(item, field, index);
}), display);
};
return SettingGroupView;
}(_react.Component), _SettingGroupView.contextType = _context.SkeletonContext, _SettingGroupView)) || _class2;
function createSettingFieldView(field, fieldEntry, index) {
if ((0, _lowcodeUtils.isSettingField)(field)) {
if (field.isGroup) {
return /*#__PURE__*/React.createElement(SettingGroupView, {
field: field,
key: field.id
});
} else {
return /*#__PURE__*/React.createElement(SettingFieldView, {
field: field,
key: field.id
});
}
} else {
return (0, _lowcodeUtils.createContent)(field, {
key: index,
field: fieldEntry
});
}
}
var SettingsPane = exports.SettingsPane = (0, _lowcodeEditorCore.observer)(_class3 = (_class4 = (_SettingsPane = /*#__PURE__*/function (_Component3) {
function SettingsPane() {
var _this4;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this4 = _Component3.call.apply(_Component3, [this].concat(args)) || this;
(0, _initializerDefineProperty2["default"])(_this4, "currentStage", _descriptor, _this4);
_this4.popupPipe = new _popup.PopupPipe();
_this4.pipe = _this4.popupPipe.create();
_this4.handleClick = function (e) {
// compatiable vision stageBox
// TODO: optimize these codes
var _this4$props$usePopup = _this4.props.usePopup,
usePopup = _this4$props$usePopup === void 0 ? true : _this4$props$usePopup;
if (!usePopup) return;
var pane = e.currentTarget;
function getTarget(node) {
if (!pane.contains(node) || node.nodeName === 'A' && node.getAttribute('href')) {
return null;
}
var target = node.dataset ? node.dataset.stageTarget : null;
if (target) {
return target;
}
return getTarget(node.parentNode);
}
var target = getTarget(e.target);
if (!target) {
return;
}
var skeleton = _this4.context;
if (!skeleton || !skeleton.stages) {
return;
}
var stage = skeleton.stages.container.get(target);
if (stage) {
if (_this4.currentStage) {
stage.setPrevious(_this4.currentStage);
}
_this4.currentStage = stage;
}
};
return _this4;
}
(0, _inheritsLoose2["default"])(SettingsPane, _Component3);
var _proto3 = SettingsPane.prototype;
_proto3.popStage = function popStage() {
var _this$currentStage;
this.currentStage = (_this$currentStage = this.currentStage) === null || _this$currentStage === void 0 ? void 0 : _this$currentStage.getPrevious();
};
_proto3.render = function render() {
var target = this.props.target;
var items = target.items;
return /*#__PURE__*/React.createElement("div", {
className: "lc-settings-pane",
onClick: this.handleClick
}, /*#__PURE__*/React.createElement(_popup["default"], {
popupPipe: this.popupPipe
}, /*#__PURE__*/React.createElement("div", {
className: "lc-settings-content"
}, items.map(function (item, index) {
return createSettingFieldView(item, target, index);
}))));
};
return SettingsPane;
}(_react.Component), _SettingsPane.contextType = _context.SkeletonContext, _SettingsPane), _descriptor = (0, _applyDecoratedDescriptor2["default"])(_class4.prototype, "currentStage", [_lowcodeEditorCore.obx], {
configurable: true,
enumerable: true,
writable: true,
initializer: null
}), _class4)) || _class3;