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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));

var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));

var _form = _interopRequireDefault(require("@alifd/next/lib/form"));

var _input = _interopRequireDefault(require("@alifd/next/lib/input"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _field = _interopRequireDefault(require("@alifd/next/lib/field"));

var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

// import IconSelect from '@riil-frontend/component-icon-select';
// import { iconList, LAYOUT_TYPE } from '../../constant';
var RadioGroup = _radio["default"].Group;
var PageContent = /*#__PURE__*/(0, _react.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["default"].useField({
    values: {
      pageName: templateData.pageName,
      description: templateData.description,
      isFitHeight: pageConfig.layoutConfig.isFitHeight || false
    }
  });

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

  /**
   * (pageConfig)=>{}属性面板发生改变时的回调
   */
  onChange: _propTypes["default"].func
};
var _default = PageContent;
exports["default"] = _default;