@alilc/lowcode-editor-skeleton
Version:
alibaba lowcode editor skeleton
298 lines (296 loc) • 10.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.PopupField = exports.PlainField = exports.Field = exports.EntryField = void 0;
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = require("react");
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _lowcodeEditorCore = require("@alilc/lowcode-editor-core");
var _popup = require("../popup");
require("./index.less");
var _inlinetip = _interopRequireDefault(require("./inlinetip"));
var _locale = require("../../locale");
var _lowcodeUtils = require("@alilc/lowcode-utils");
/* eslint-disable react/no-unused-prop-types */
var logger = new _lowcodeUtils.Logger({
level: 'warn',
bizName: 'skeleton:field'
});
var Field = exports.Field = /*#__PURE__*/function (_Component) {
function Field(props) {
var _this;
_this = _Component.call(this, props) || this;
_this.state = {
collapsed: _this.props.collapsed,
display: _this.props.defaultDisplay || 'inline',
hasError: false
};
_this.body = null;
_this.dispose = void 0;
_this.toggleExpand = function () {
var onExpandChange = _this.props.onExpandChange;
// eslint-disable-next-line react/no-access-state-in-setstate
var collapsed = !_this.state.collapsed;
_this.setState({
collapsed: collapsed
});
onExpandChange && onExpandChange(!collapsed);
};
_this.handleClear = _this.handleClear.bind(_this);
_this.clickHandler = _this.clickHandler.bind(_this);
return _this;
}
(0, _inheritsLoose2["default"])(Field, _Component);
var _proto = Field.prototype;
_proto.deployBlockTesting = function deployBlockTesting() {
var _this2 = this;
if (this.dispose) {
this.dispose();
}
var body = this.body;
if (!body) {
return;
}
var check = function check() {
var setter = body.firstElementChild;
if (setter && setter.classList.contains('lc-block-setter')) {
_this2.setState({
display: 'block'
});
} else {
_this2.setState({
display: 'inline'
});
}
};
var observer = new MutationObserver(check);
check();
observer.observe(body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['class']
});
this.dispose = function () {
return observer.disconnect();
};
};
_proto.handleClear = function handleClear(e) {
e.stopPropagation();
this.props.onClear && this.props.onClear();
};
_proto.componentDidMount = function componentDidMount() {
var defaultDisplay = this.props.defaultDisplay;
if (!defaultDisplay || defaultDisplay === 'inline') {
this.deployBlockTesting();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
if (this.dispose) {
this.dispose();
}
};
Field.getDerivedStateFromError = function getDerivedStateFromError() {
return {
hasError: true
};
};
_proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
logger.error(this.props.title + " has error", error, errorInfo);
};
_proto.getTipContent = function getTipContent(propName, tip) {
var tipContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, (0, _locale.intl)('Attribute: '), propName));
if ((0, _lodash.isObject)(tip)) {
tipContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, (0, _locale.intl)('Attribute: '), propName), /*#__PURE__*/React.createElement("div", null, (0, _locale.intl)('Description: '), tip.content));
} else if (tip) {
tipContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, (0, _locale.intl)('Attribute: '), propName), /*#__PURE__*/React.createElement("div", null, (0, _locale.intl)('Description: '), tip));
}
return tipContent;
};
_proto.clickHandler = function clickHandler(event) {
var _this$props = this.props,
editor = _this$props.editor,
name = _this$props.name,
title = _this$props.title,
meta = _this$props.meta;
editor === null || editor === void 0 ? void 0 : editor.eventBus.emit('setting.setter.field.click', {
name: name,
title: title,
meta: meta,
event: event
});
};
_proto.render = function render() {
var _this3 = this;
var hasError = this.state.hasError;
if (hasError) {
return null;
}
var _this$props2 = this.props,
className = _this$props2.className,
children = _this$props2.children,
meta = _this$props2.meta,
title = _this$props2.title,
valueState = _this$props2.valueState,
propName = _this$props2.name,
tip = _this$props2.tip;
var _this$state = this.state,
display = _this$state.display,
collapsed = _this$state.collapsed;
var isAccordion = display === 'accordion';
var hostName = '';
if (typeof meta === 'object') {
hostName = ((meta === null || meta === void 0 ? void 0 : meta["package"]) || '') + "-" + (meta.componentName || '');
} else if (typeof meta === 'string') {
hostName = meta;
}
var id = hostName + "-" + (propName || title['en-US'] || title['zh-CN']);
var tipContent = this.getTipContent(propName, tip);
return /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])("lc-field lc-" + display + "-field", className, {
'lc-field-is-collapsed': isAccordion && collapsed
}),
id: id
}, display !== 'plain' && /*#__PURE__*/React.createElement("div", {
className: "lc-field-head",
onClick: isAccordion ? this.toggleExpand : undefined
}, /*#__PURE__*/React.createElement("div", {
className: "lc-field-title"
}, createValueState(valueState, this.handleClear), /*#__PURE__*/React.createElement(_lowcodeEditorCore.Title, {
title: title || '',
onClick: this.clickHandler
}), /*#__PURE__*/React.createElement(_inlinetip["default"], {
position: "top"
}, tipContent)), isAccordion && /*#__PURE__*/React.createElement(_icon["default"], {
className: "lc-field-icon",
type: "arrow-up",
size: "xs"
})), /*#__PURE__*/React.createElement("div", {
key: "body",
ref: function ref(shell) {
_this3.body = shell;
},
className: "lc-field-body"
}, children));
};
return Field;
}(_react.Component);
/**
* **交互专利点**
*
* -1 多种值
* 0 | null 无值
* 1 类似值，比如数组长度一样
* 2 单一植
* 10 必填
*
* TODO: turn number to enum
*/
function createValueState(/* valueState?: number, onClear?: (e: React.MouseEvent) => void */
) {
return null;
}
var PopupField = exports.PopupField = /*#__PURE__*/function (_Component2) {
function PopupField() {
var _this4;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this4 = _Component2.call.apply(_Component2, [this].concat(args)) || this;
_this4.pipe = void 0;
return _this4;
}
(0, _inheritsLoose2["default"])(PopupField, _Component2);
var _proto2 = PopupField.prototype;
_proto2.render = function render() {
var _this5 = this;
var _this$props3 = this.props,
className = _this$props3.className,
children = _this$props3.children,
title = _this$props3.title,
width = _this$props3.width;
if (!this.pipe) {
this.pipe = this.context.create({
width: width
});
}
var titleElement = title && /*#__PURE__*/React.createElement("div", {
className: "lc-field-title"
}, /*#__PURE__*/React.createElement(_lowcodeEditorCore.Title, {
title: title
}));
this.pipe.send(/*#__PURE__*/React.createElement("div", {
className: "lc-field-body"
}, children), titleElement);
return /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('lc-field lc-popup-field', className)
}, title && /*#__PURE__*/React.createElement("div", {
className: "lc-field-head",
onClick: function onClick(e) {
_this5.pipe.show(e.target);
}
}, /*#__PURE__*/React.createElement("div", {
className: "lc-field-title"
}, /*#__PURE__*/React.createElement(_lowcodeEditorCore.Title, {
title: title
})), /*#__PURE__*/React.createElement(_icon["default"], {
className: "lc-field-icon",
type: "arrow-left",
size: "xs"
})));
};
return PopupField;
}(_react.Component);
PopupField.contextType = _popup.PopupContext;
PopupField.defaultProps = {
width: 300
};
var EntryField = exports.EntryField = /*#__PURE__*/function (_Component3) {
function EntryField() {
return _Component3.apply(this, arguments) || this;
}
(0, _inheritsLoose2["default"])(EntryField, _Component3);
var _proto3 = EntryField.prototype;
_proto3.render = function render() {
var _this$props4 = this.props,
title = _this$props4.title,
className = _this$props4.className,
stageName = _this$props4.stageName;
var classNameList = (0, _classnames["default"])('lc-field', 'lc-entry-field', className);
return /*#__PURE__*/React.createElement("div", {
className: classNameList
}, /*#__PURE__*/React.createElement("div", {
className: "lc-field-head",
"data-stage-target": stageName
}, /*#__PURE__*/React.createElement("div", {
className: "lc-field-title"
}, /*#__PURE__*/React.createElement(_lowcodeEditorCore.Title, {
title: title || ''
})), /*#__PURE__*/React.createElement(_icon["default"], {
className: "lc-field-icon",
type: "arrow-right",
size: "xs"
})));
};
return EntryField;
}(_react.Component);
var PlainField = exports.PlainField = /*#__PURE__*/function (_Component4) {
function PlainField() {
return _Component4.apply(this, arguments) || this;
}
(0, _inheritsLoose2["default"])(PlainField, _Component4);
var _proto4 = PlainField.prototype;
_proto4.render = function render() {
var _this$props5 = this.props,
className = _this$props5.className,
children = _this$props5.children;
return /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('lc-field lc-plain-field', className)
}, /*#__PURE__*/React.createElement("div", {
className: "lc-field-body"
}, children));
};
return PlainField;
}(_react.Component);