@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
331 lines (274 loc) • 10.2 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _next = require("@formily/next");
var _lodash = _interopRequireDefault(require("lodash"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _componentNoDataPage = _interopRequireDefault(require("@riil-frontend/component-no-data-page"));
require("./ComponentContent.scss");
var _util = require("../../util");
var _FormCollapse = require("./FormCollapse");
var actions = (0, _next.createAsyncFormActions)();
var ComponentContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var selectItem = props.selectItem,
pageProps = props.pageProps,
request = props.request,
onAttrChange = props.onAttrChange,
isInTemplate = props.isInTemplate,
customGetComRequire = props.customGetComRequire;
var Com = selectItem ? (0, _util.getComRequire)(selectItem.type, selectItem.importFrom, customGetComRequire) : null;
var ComAttrPanel = Com && Com.AttrPanel;
/**
* 组件选中id值的历史数据，仅保存两个状态
*/
var keyRef = (0, _react.useRef)([]);
var _useState = (0, _react.useState)({
schema: null,
customScCom: null,
configState: selectItem
}),
schemaProps = _useState[0],
setSchemaProps = _useState[1];
var comAttrPanelRef = (0, _react.useRef)();
/**
* SchemaForm属性schema，components需要同时赋值生效
* @param isUpdateSchema 判断是否更新schema的属性
*/
var getSchema = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(isUpdateSchema) {
var _schema;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (isUpdateSchema === void 0) {
isUpdateSchema = true;
}
if (isUpdateSchema) {
_context.next = 4;
break;
}
setSchemaProps((0, _extends2["default"])({}, schemaProps, {
configState: selectItem
}));
return _context.abrupt("return");
case 4:
//当组件切换选择时，调用getSchema
_schema = null;
_context.prev = 5;
_context.t0 = Com && Com.getSchema;
if (!_context.t0) {
_context.next = 11;
break;
}
_context.next = 10;
return Com.getSchema({
pageProps: pageProps,
config: selectItem,
request: request
});
case 10:
_context.t0 = _context.sent;
case 11:
_schema = _context.t0;
_context.next = 17;
break;
case 14:
_context.prev = 14;
_context.t1 = _context["catch"](5);
console.error('getSchema报错，请检查组件getSchema方法', _context.t1);
case 17:
setSchemaProps({
schema: _schema,
customScCom: Com === null || Com === void 0 ? void 0 : Com.CustomScCom,
configState: selectItem
});
case 18:
case "end":
return _context.stop();
}
}
}, _callee, null, [[5, 14]]);
}));
return function getSchema(_x) {
return _ref.apply(this, arguments);
};
}();
(0, _react.useEffect)(function () {
//将当前选择项装入ref变量中，用来判断是否是id值发生变化，
if (selectItem) {
keyRef.current.push(selectItem.id);
} else {
keyRef.current = [];
} //只保存一次历史数据
if (keyRef.current.length > 2) {
keyRef.current = [keyRef.current[1], keyRef.current[2]];
} //若是key值未发生变化，则不更新schma属性
if (keyRef.current.length === 2 && keyRef.current[0] === keyRef.current[1]) {
getSchema(false);
} else {
getSchema();
}
}, [selectItem]);
/**
* TODO 将来可优化此项,用valdates2代替此方法，
* 避免出现重复的回调
*/
var valdates = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
var stopChangeOnValidateError, result;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
stopChangeOnValidateError = Com === null || Com === void 0 ? void 0 : Com.stopChangeOnValidateError;
_context2.next = 3;
return actions.validate().then(function () {
return true;
})["catch"](function () {
return false;
});
case 3:
result = _context2.sent;
if (result || !stopChangeOnValidateError) {
onAttrChange(schemaProps.configState, isInTemplate);
}
case 5:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function valdates() {
return _ref2.apply(this, arguments);
};
}();
/**
* TODO 将来可优化此项,代替valdates方法，并在表单onChange时调用
* 避免出现重复的回调
* @param {*} configState
*/
var valdates2 = /*#__PURE__*/function () {
var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(configState) {
var result;
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return actions.validate().then(function () {
return true;
})["catch"](function () {
return false;
});
case 2:
result = _context3.sent;
if (result) {
onAttrChange(configState, isInTemplate);
}
case 4:
case "end":
return _context3.stop();
}
}
}, _callee3);
}));
return function valdates2(_x2) {
return _ref3.apply(this, arguments);
};
}();
/**
* TODO 将来可优化此项，使用validates2校验时，取消此声明周期代码
*/
(0, _react.useEffect)(function () {
valdates();
}, [schemaProps.configState]);
var hasAttr = schemaProps.schema || ComAttrPanel;
(0, _react.useImperativeHandle)(ref, function () {
return hasAttr ? {
actions: schemaProps.schema ? actions : null,
comAttrPanelRef: schemaProps.schema ? null : ComAttrPanel
} : {};
});
if (Com) {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hasAttr ? schemaProps.schema ? /*#__PURE__*/_react["default"].createElement(_next.SchemaForm, {
key: schemaProps.configState.id,
components: (0, _extends2["default"])({
FormCollapse: _FormCollapse.FormCollapse,
FormCollapsePanel: _FormCollapse.FormCollapsePanel
}, schemaProps.customScCom),
style: {
width: '100%'
},
actions: actions,
value: schemaProps.configState.attributes,
onChange: function onChange(values) {
var _config = _lodash["default"].cloneDeep(schemaProps.configState);
_config.attributes = (0, _extends2["default"])({}, _config.attributes, values);
setSchemaProps((0, _extends2["default"])({}, schemaProps, {
configState: _config
})); // valdates2(_config) TODO
},
schema: schemaProps.schema
}) : ComAttrPanel ? /*#__PURE__*/_react["default"].createElement(ComAttrPanel, {
key: schemaProps.configState.id,
ref: comAttrPanelRef,
pageProps: pageProps,
request: request,
config: schemaProps.configState,
attributes: configState.attributes,
onChange: function onChange(values, item) {
var _config = _lodash["default"].cloneDeep(schemaProps.configState);
_config.attributes = (0, _extends2["default"])({}, _config.attributes, values);
setSchemaProps((0, _extends2["default"])({}, schemaProps, {
configState: _config
})); // valdates2(_config) TODO
}
}) : null : /*#__PURE__*/_react["default"].createElement("div", {
style: {
height: '30%'
}
}, /*#__PURE__*/_react["default"].createElement(_componentNoDataPage["default"], {
statusCode: "\u6682\u65E0\u8BBE\u7F6E\u9879"
})));
} else {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "com-content-title"
}, "\u8BF7\u5728\u753B\u5E03\u4E2D\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6");
}
});
ComponentContent.propTypes = {
/**
* 当前选中项的组件实例
*/
Com: _propTypes["default"].any,
/**
* 当前选中项数据
*/
selectItem: _propTypes["default"].object,
/**
* 页面透传属性
*/
pageProps: _propTypes["default"].object,
/**
* 数据请求体
*/
request: _propTypes["default"].any,
/**
* 属性变更回调
*/
onAttrChange: _propTypes["default"].func,
/**
* 标记是否是容器内组件
*/
isInTemplate: _propTypes["default"].bool
};
var _default = ComponentContent;
exports["default"] = _default;