@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
90 lines (87 loc) • 2.78 kB
JavaScript
import _Collapse from "@alifd/next/es/collapse";
import _Form from "@alifd/next/es/form";
import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _Field from "@alifd/next/es/field";
import React, { useImperativeHandle, forwardRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import TagSelect from '@riil-frontend/component-tag-select';
import { LAYOUT_TYPE } from '../../constant';
var TemplateContent = /*#__PURE__*/forwardRef(function (props, ref) {
var templateData = props.templateData,
onTemplateChange = props.onTemplateChange,
imgPath = props.imgPath,
layoutList = props.layoutList;
var field = _Field.useField({
values: {
pageName: templateData.pageName,
description: templateData.description,
layoutType: templateData.layoutType
}
});
useImperativeHandle(ref, function () {
return {
field: field
};
});
useEffect(function () {
field.setValues({
pageName: templateData.pageName,
description: templateData.description,
layoutType: templateData.layoutType
});
field.validate();
}, [templateData]);
return /*#__PURE__*/React.createElement(_Form, {
style: {
height: '100%'
},
field: field,
onChange: function onChange(values, item) {
onTemplateChange(_extends({}, templateData, values));
}
}, /*#__PURE__*/React.createElement(_Collapse, {
defaultExpandedKeys: ['temp_base', 'temp_layout'],
className: "collapse-no-title-background"
}, /*#__PURE__*/React.createElement(_Collapse.Panel, {
key: "temp_base",
title: "\u57FA\u672C\u5C5E\u6027"
}, /*#__PURE__*/React.createElement(_Form.Item, {
label: "\u6A21\u677F\u540D\u79F0",
required: true,
requiredMessage: "\u6A21\u677F\u540D\u79F0\u4E0D\u80FD\u4E3A\u7A7A",
requiredTrigger: "onChange"
}, /*#__PURE__*/React.createElement(_Input, {
name: "pageName"
})), /*#__PURE__*/React.createElement(_Form.Item, {
label: "\u6A21\u677F\u63CF\u8FF0"
}, /*#__PURE__*/React.createElement(_Input.TextArea, {
name: "description"
}))), /*#__PURE__*/React.createElement(_Collapse.Panel, {
key: "temp_layout",
title: "\u5E03\u5C40"
}, /*#__PURE__*/React.createElement(_Form.Item, {
label: ""
}, /*#__PURE__*/React.createElement(TagSelect, {
name: "layoutType",
tagList: layoutList,
imgWidth: 100,
imgPath: imgPath,
boxProps: {
justify: 'flex-start'
}
})))));
});
TemplateContent.propTypes = {
/**
* 模板数据
*/
templateData: PropTypes.object,
/**
* 模板变更返回数据
*/
onTemplateChange: PropTypes.func,
imgPath: PropTypes.string,
layoutList: PropTypes.array
};
export default TemplateContent;