@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
335 lines (276 loc) • 11.3 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));
var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _util = require("../util");
require("./index.scss");
var _next = require("@formily/next");
var _nextComponents = require("@formily/next-components");
//formily表单初始化
(0, _nextComponents.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) : (0, _util.getBaseAttributes)();
var trigger = function trigger(key, value) {
item[key] = value;
onChange && onChange(item);
};
return /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: 'grid'
}
}, /*#__PURE__*/_react["default"].createElement("span", null, "\u7EC4\u4EF6\u7C7B\u578B\uFF1A", attributes.comName), /*#__PURE__*/_react["default"].createElement("span", null, "\u5DE6\u95F4\u8DDD\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
value: item.paddingLeft,
onChange: function onChange(value) {
trigger('paddingLeft', value);
}
})), /*#__PURE__*/_react["default"].createElement("span", null, "\u4E0A\u95F4\u8DDD\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
value: item.paddingTop,
onChange: function onChange(value) {
trigger('paddingTop', value);
}
})), /*#__PURE__*/_react["default"].createElement("span", null, "\u53F3\u95F4\u8DDD\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
value: item.paddingRight,
onChange: function onChange(value) {
trigger('paddingRight', value);
}
})), /*#__PURE__*/_react["default"].createElement("span", null, "\u4E0B\u95F4\u8DDD\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
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["default"].createElement("div", {
style: {
display: 'grid'
}
}, /*#__PURE__*/_react["default"].createElement("span", null, "\u753B\u5E03\u5C5E\u6027\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", null, "\u6805\u683C\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
value: items.cols,
onChange: function onChange(value) {
trigger('cols', value);
}
})), /*#__PURE__*/_react["default"].createElement("span", null, "\u884C\u9AD8\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
value: items.rowHeight,
onChange: function onChange(value) {
trigger('rowHeight', value);
}
})), /*#__PURE__*/_react["default"].createElement("span", null, "\u6C34\u5E73\u95F4\u8DDD\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
value: items.margin[0],
onChange: function onChange(value) {
trigger('margin', [value, items.margin[1]]);
}
})), /*#__PURE__*/_react["default"].createElement("span", null, "\u5782\u76F4\u95F4\u8DDD\uFF1A", /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
value: items.margin[1],
onChange: function onChange(value) {
trigger('margin', [items.margin[0], value]);
}
})), /*#__PURE__*/_react["default"].createElement("span", null, "\u662F\u5426\u5782\u76F4\u6EE1\u5C4F\uFF1A", /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
checked: items.isFitHeight,
onChange: function onChange(b) {
trigger('isFitHeight', b);
}
})));
};
/**
* 属性面板
*/
var AttrPanel = /*#__PURE__*/function (_Component) {
(0, _inheritsLoose2["default"])(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 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var _this$props, pageConfig, selectId, ExpCom, pageProps, request, selectItem, Com, schema;
return _regenerator["default"].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 : (0, _util.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((0, _extends2["default"])({}, 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 : (0, _util.getComRequire)(selectItem.type, selectItem.importFrom) : null;
var ComAttrPanel = Com && Com.AttrPanel;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "attr-panel"
}, Com ? /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].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["default"].createElement(_next.SchemaForm, {
value: selectItem.attributes,
onChange: function onChange(values) {
var _config = _.cloneDeep(selectItem);
_config.attributes = (0, _extends2["default"])({}, _config.attributes, values);
_this2.onChange(_config);
},
schema: schema
}) : ComAttrPanel ? /*#__PURE__*/_react["default"].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["default"].createElement("span", {
style: {
color: 'red'
}
}, /*#__PURE__*/_react["default"].createElement(CanvasAttr, {
layoutConfig: pageConfig.layoutConfig,
onChange: function onChange(lc) {
_onChange((0, _extends2["default"])({}, pageConfig, {
layoutConfig: lc
}));
}
})));
};
return AttrPanel;
}(_react.Component);
AttrPanel.propTypes = {
/**
* 画布的配置数据
*/
pageConfig: _propTypes["default"].object,
/**
* 当前选中组件id
*/
selectId: _propTypes["default"].string,
/**
* (pageConfig)=>{}属性面板发生改变时的回调
*/
onChange: _propTypes["default"].func,
/**
* 在开发npm包组件时需用到此属性。面板使用者无需使用此属性
*/
ExpCom: _propTypes["default"].any,
/**
* 页面公共属性
*/
pageProps: _propTypes["default"].any,
/**
* 数据请求体
*/
request: _propTypes["default"].any
};
AttrPanel.defaultProps = {
ExpCom: undefined
};
var _default = AttrPanel;
exports["default"] = _default;