@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
313 lines (269 loc) • 10.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Checkbox from "@alifd/next/es/checkbox";
import _NumberPicker from "@alifd/next/es/number-picker";
import React, { Component, useMemo } from 'react';
import PropTypes from 'prop-types';
import { getComRequire, getBaseAttributes } from '../util';
import './index.scss';
import { SchemaForm } from '@formily/next';
import { setup, requestselect } from '@formily/next-components'; //formily表单初始化
setup();
/**
* 组件公共属性面板，预设padding值
* @param {object} props - 属性集
* @param {object} props.attributes - 组件属性数据
* @param {(columns:array)=>{}} props.onChange - 编辑后回调
* @param {object} props.comContainerAttributes 组件容器公共属性数据
*/
var BasePanel = function BasePanel(_ref) {
var attributes = _ref.attributes,
comContainerAttributes = _ref.comContainerAttributes,
onChange = _ref.onChange;
var item = comContainerAttributes ? _.cloneDeep(comContainerAttributes) : getBaseAttributes();
var trigger = function trigger(key, value) {
item[key] = value;
onChange && onChange(item);
};
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'grid'
}
}, /*#__PURE__*/React.createElement("span", null, "\u7EC4\u4EF6\u7C7B\u578B\uFF1A", attributes.comName), /*#__PURE__*/React.createElement("span", null, "\u5DE6\u95F4\u8DDD\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: item.paddingLeft,
onChange: function onChange(value) {
trigger('paddingLeft', value);
}
})), /*#__PURE__*/React.createElement("span", null, "\u4E0A\u95F4\u8DDD\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: item.paddingTop,
onChange: function onChange(value) {
trigger('paddingTop', value);
}
})), /*#__PURE__*/React.createElement("span", null, "\u53F3\u95F4\u8DDD\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: item.paddingRight,
onChange: function onChange(value) {
trigger('paddingRight', value);
}
})), /*#__PURE__*/React.createElement("span", null, "\u4E0B\u95F4\u8DDD\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: item.paddingBottom,
onChange: function onChange(value) {
trigger('paddingBottom', value);
}
})));
};
/**
* 画布属性面板,预设间距，栅格，高度
* @param {object} props - 属性集
* @param {object} props.layoutConfig - 画布布局配置
* @param {(columns:array)=>{}} props.onChange - 编辑后回调
*/
var CanvasAttr = function CanvasAttr(_ref2) {
var layoutConfig = _ref2.layoutConfig,
onChange = _ref2.onChange;
var items = _.cloneDeep(layoutConfig);
var trigger = function trigger(key, value) {
items[key] = value;
onChange && onChange(items);
};
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'grid'
}
}, /*#__PURE__*/React.createElement("span", null, "\u753B\u5E03\u5C5E\u6027\uFF1A"), /*#__PURE__*/React.createElement("span", null, "\u6805\u683C\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: items.cols,
onChange: function onChange(value) {
trigger('cols', value);
}
})), /*#__PURE__*/React.createElement("span", null, "\u884C\u9AD8\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: items.rowHeight,
onChange: function onChange(value) {
trigger('rowHeight', value);
}
})), /*#__PURE__*/React.createElement("span", null, "\u6C34\u5E73\u95F4\u8DDD\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: items.margin[0],
onChange: function onChange(value) {
trigger('margin', [value, items.margin[1]]);
}
})), /*#__PURE__*/React.createElement("span", null, "\u5782\u76F4\u95F4\u8DDD\uFF1A", /*#__PURE__*/React.createElement(_NumberPicker, {
value: items.margin[1],
onChange: function onChange(value) {
trigger('margin', [items.margin[0], value]);
}
})), /*#__PURE__*/React.createElement("span", null, "\u662F\u5426\u5782\u76F4\u6EE1\u5C4F\uFF1A", /*#__PURE__*/React.createElement(_Checkbox, {
checked: items.isFitHeight,
onChange: function onChange(b) {
trigger('isFitHeight', b);
}
})));
};
/**
* 属性面板
*/
var AttrPanel = /*#__PURE__*/function (_Component) {
_inheritsLoose(AttrPanel, _Component);
function AttrPanel(props) {
var _this;
_this = _Component.call(this, props) || this;
_this.state = {
schema: undefined
};
return _this;
}
var _proto = AttrPanel.prototype;
_proto.componentDidUpdate = function componentDidUpdate(preProps, preState) {
if (preProps.selectId != this.props.selectId) {
this.getSchema();
}
};
_proto.componentDidMount = function componentDidMount() {
this.getSchema();
};
_proto.getSchema = /*#__PURE__*/function () {
var _getSchema = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _this$props, pageConfig, selectId, ExpCom, pageProps, request, selectItem, Com, schema;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this$props = this.props, pageConfig = _this$props.pageConfig, selectId = _this$props.selectId, ExpCom = _this$props.ExpCom, pageProps = _this$props.pageProps, request = _this$props.request;
selectItem = selectId ? pageConfig.widgets.find(function (item) {
return item.id === selectId;
}) : undefined;
Com = selectItem ? ExpCom ? ExpCom : getComRequire(selectItem.type, selectItem.importFrom) : null;
_context.t0 = Com && Com.getSchema;
if (!_context.t0) {
_context.next = 8;
break;
}
_context.next = 7;
return Com.getSchema({
pageProps: pageProps,
config: selectItem,
request: request
});
case 7:
_context.t0 = _context.sent;
case 8:
schema = _context.t0;
this.setState({
schema: schema
});
case 10:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function getSchema() {
return _getSchema.apply(this, arguments);
}
return getSchema;
}();
_proto.onChange = function onChange(widget) {
var _this$props2 = this.props,
pageConfig = _this$props2.pageConfig,
onChange = _this$props2.onChange,
selectId = _this$props2.selectId,
ExpCom = _this$props2.ExpCom;
var widgets = _.cloneDeep(pageConfig.widgets);
widgets = widgets.map(function (item) {
if (item.id === selectId) {
item = widget;
}
return item;
});
onChange(_extends({}, pageConfig, {
widgets: widgets
}));
};
_proto.render = function render() {
var _this2 = this;
var _this$props3 = this.props,
pageConfig = _this$props3.pageConfig,
_onChange = _this$props3.onChange,
selectId = _this$props3.selectId,
ExpCom = _this$props3.ExpCom,
pageProps = _this$props3.pageProps,
request = _this$props3.request;
var schema = this.state.schema;
var selectItem = selectId ? pageConfig.widgets.find(function (item) {
return item.id === selectId;
}) : undefined;
var Com = selectItem ? ExpCom ? ExpCom : getComRequire(selectItem.type, selectItem.importFrom) : null;
var ComAttrPanel = Com && Com.AttrPanel;
return /*#__PURE__*/React.createElement("div", {
className: "attr-panel"
}, Com ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(BasePanel, {
attributes: selectItem.attributes,
comContainerAttributes: selectItem.comContainerAttributes,
onChange: function onChange(comContainerAttributes) {
var _config = _.cloneDeep(selectItem);
_config.comContainerAttributes = comContainerAttributes;
_this2.onChange(_config);
}
}), schema ? /*#__PURE__*/React.createElement(SchemaForm, {
value: selectItem.attributes,
onChange: function onChange(values) {
var _config = _.cloneDeep(selectItem);
_config.attributes = _extends({}, _config.attributes, values);
_this2.onChange(_config);
},
schema: schema
}) : ComAttrPanel ? /*#__PURE__*/React.createElement(ComAttrPanel, {
pageProps: pageProps,
request: request,
config: selectItem,
attributes: selectItem.attributes,
trigger: function trigger(key, value) {
var _config = _.cloneDeep(selectItem);
_config.attributes[key] = value;
_this2.onChange(_config);
}
}) : null) : /*#__PURE__*/React.createElement("span", {
style: {
color: 'red'
}
}, /*#__PURE__*/React.createElement(CanvasAttr, {
layoutConfig: pageConfig.layoutConfig,
onChange: function onChange(lc) {
_onChange(_extends({}, pageConfig, {
layoutConfig: lc
}));
}
})));
};
return AttrPanel;
}(Component);
AttrPanel.propTypes = {
/**
* 画布的配置数据
*/
pageConfig: PropTypes.object,
/**
* 当前选中组件id
*/
selectId: PropTypes.string,
/**
* (pageConfig)=>{}属性面板发生改变时的回调
*/
onChange: PropTypes.func,
/**
* 在开发npm包组件时需用到此属性。面板使用者无需使用此属性
*/
ExpCom: PropTypes.any,
/**
* 页面公共属性
*/
pageProps: PropTypes.any,
/**
* 数据请求体
*/
request: PropTypes.any
};
AttrPanel.defaultProps = {
ExpCom: undefined
};
export default AttrPanel;