@riil-frontend/component-page-creater/es/components/attr-panel/AttrContents/PageContent.js

page creater components,include components list,component attribute panel and page canvas

import _Checkbox from "@alifd/next/es/checkbox";
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 _Radio from "@alifd/next/es/radio";
import React, { useImperativeHandle, forwardRef, useEffect } from 'react';
import PropTypes from 'prop-types'; // import IconSelect from '@riil-frontend/component-icon-select';
// import { iconList, LAYOUT_TYPE } from '../../constant';

var RadioGroup = _Radio.Group;
var PageContent = /*#__PURE__*/forwardRef(function (props, ref) {
  var pageConfig = props.pageConfig,
      templateData = props.templateData,
      onTemplateChange = props.onTemplateChange,
      _props$style = props.style,
      style = _props$style === void 0 ? {} : _props$style;

  var field = _Field.useField({
    values: {
      pageName: templateData.pageName,
      description: templateData.description,
      isFitHeight: pageConfig.layoutConfig.isFitHeight || false
    }
  });

  useEffect(function () {
    field.setValues({
      pageName: templateData.pageName,
      description: templateData.description,
      isFitHeight: pageConfig.layoutConfig.isFitHeight || false,
      isShowGrid: pageConfig.layoutConfig.isShowGrid || false
    });
    field.validate();
  }, [pageConfig, templateData]);
  useImperativeHandle(ref, function () {
    return {
      field: field
    };
  });
  return /*#__PURE__*/React.createElement(_Form, {
    style: {
      height: '100%',
      paddingTop: 4
    },
    field: field,
    onChange: function onChange(values, item) {
      onTemplateChange(_extends({}, templateData, {
        pageName: values.pageName,
        description: values.description,
        configs: templateData.configs.map(function (ele) {
          if (ele.pageId === pageConfig.pageId) {
            return _extends({}, ele, {
              layoutConfig: _extends({}, ele.layoutConfig, {
                isFitHeight: values.isFitHeight,
                isShowGrid: values.isShowGrid
              })
            });
          } else {
            return ele;
          }
        })
      }));
    }
  }, /*#__PURE__*/React.createElement(_Collapse, {
    defaultExpandedKeys: ['page_base', 'temp_layout'],
    className: "collapse-no-title-background formily-collapse-panel collapse-no-title-background-inner "
  }, /*#__PURE__*/React.createElement(_Collapse.Panel, {
    key: "page_base",
    title: "\u57FA\u672C\u5C5E\u6027"
  }, /*#__PURE__*/React.createElement(_Form.Item, {
    label: "\u540D\u79F0",
    required: true,
    requiredMessage: "\u540D\u79F0\u4E0D\u80FD\u4E3A\u7A7A",
    requiredTrigger: "onChange"
  }, /*#__PURE__*/React.createElement(_Input, {
    name: "pageName",
    maxLength: 30,
    placeholder: "\u8BF7\u8F93\u5165"
  })), /*#__PURE__*/React.createElement(_Form.Item, {
    label: "\u63CF\u8FF0"
  }, /*#__PURE__*/React.createElement(_Input.TextArea, {
    name: "description",
    placeholder: "\u8BF7\u8F93\u5165"
  }))), /*#__PURE__*/React.createElement(_Collapse.Panel, {
    key: "temp_layout",
    title: "\u753B\u5E03"
  }, /*#__PURE__*/React.createElement(_Form.Item, {
    label: ""
  }, /*#__PURE__*/React.createElement(_Checkbox, {
    name: "isShowGrid"
  }, "\u663E\u793A\u7F51\u683C")), /*#__PURE__*/React.createElement(_Form.Item, {
    label: ""
  }, /*#__PURE__*/React.createElement(_Checkbox, {
    name: "isFitHeight"
  }, "\u4E00\u5C4F\u663E\u793A\u5185\u5BB9")))));
});
PageContent.propTypes = {
  /**
   * 画布的配置数据
   */
  pageConfig: PropTypes.object,

  /**
   * (pageConfig)=>{}属性面板发生改变时的回调
   */
  onChange: PropTypes.func
};
export default PageContent;