@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
310 lines (268 loc) • 9.26 kB
JavaScript
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
import { SchemaForm, createAsyncFormActions } from '@formily/next';
import _ from 'lodash';
import PropTypes from 'prop-types';
import NoDataCom from '@riil-frontend/component-no-data-page';
import './ComponentContent.scss';
import { getComRequire } from '../../util';
import { FormCollapse, FormCollapsePanel } from './FormCollapse';
var actions = createAsyncFormActions();
var ComponentContent = /*#__PURE__*/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 ? getComRequire(selectItem.type, selectItem.importFrom, customGetComRequire) : null;
var ComAttrPanel = Com && Com.AttrPanel;
/**
* 组件选中id值的历史数据，仅保存两个状态
*/
var keyRef = useRef([]);
var _useState = useState({
schema: null,
customScCom: null,
configState: selectItem
}),
schemaProps = _useState[0],
setSchemaProps = _useState[1];
var comAttrPanelRef = useRef();
/**
* SchemaForm属性schema，components需要同时赋值生效
* @param isUpdateSchema 判断是否更新schema的属性
*/
var getSchema = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(isUpdateSchema) {
var _schema;
return _regeneratorRuntime.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(_extends({}, 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);
};
}();
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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var stopChangeOnValidateError, result;
return _regeneratorRuntime.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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(configState) {
var result;
return _regeneratorRuntime.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校验时，取消此声明周期代码
*/
useEffect(function () {
valdates();
}, [schemaProps.configState]);
var hasAttr = schemaProps.schema || ComAttrPanel;
useImperativeHandle(ref, function () {
return hasAttr ? {
actions: schemaProps.schema ? actions : null,
comAttrPanelRef: schemaProps.schema ? null : ComAttrPanel
} : {};
});
if (Com) {
return /*#__PURE__*/React.createElement(React.Fragment, null, hasAttr ? schemaProps.schema ? /*#__PURE__*/React.createElement(SchemaForm, {
key: schemaProps.configState.id,
components: _extends({
FormCollapse: FormCollapse,
FormCollapsePanel: FormCollapsePanel
}, schemaProps.customScCom),
style: {
width: '100%'
},
actions: actions,
value: schemaProps.configState.attributes,
onChange: function onChange(values) {
var _config = _.cloneDeep(schemaProps.configState);
_config.attributes = _extends({}, _config.attributes, values);
setSchemaProps(_extends({}, schemaProps, {
configState: _config
})); // valdates2(_config) TODO
},
schema: schemaProps.schema
}) : ComAttrPanel ? /*#__PURE__*/React.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 = _.cloneDeep(schemaProps.configState);
_config.attributes = _extends({}, _config.attributes, values);
setSchemaProps(_extends({}, schemaProps, {
configState: _config
})); // valdates2(_config) TODO
}
}) : null : /*#__PURE__*/React.createElement("div", {
style: {
height: '30%'
}
}, /*#__PURE__*/React.createElement(NoDataCom, {
statusCode: "\u6682\u65E0\u8BBE\u7F6E\u9879"
})));
} else {
return /*#__PURE__*/React.createElement("div", {
className: "com-content-title"
}, "\u8BF7\u5728\u753B\u5E03\u4E2D\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6");
}
});
ComponentContent.propTypes = {
/**
* 当前选中项的组件实例
*/
Com: PropTypes.any,
/**
* 当前选中项数据
*/
selectItem: PropTypes.object,
/**
* 页面透传属性
*/
pageProps: PropTypes.object,
/**
* 数据请求体
*/
request: PropTypes.any,
/**
* 属性变更回调
*/
onAttrChange: PropTypes.func,
/**
* 标记是否是容器内组件
*/
isInTemplate: PropTypes.bool
};
export default ComponentContent;