@riil-frontend/component-page-creater/lib/components/attr-panel/AttrContents/TemplateContent.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 _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 _react = _interopRequireWildcard(require("react"));

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

var _componentTagSelect = _interopRequireDefault(require("@riil-frontend/component-tag-select"));

var _constant = require("../../constant");

var TemplateContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var templateData = props.templateData,
      onTemplateChange = props.onTemplateChange,
      imgPath = props.imgPath,
      layoutList = props.layoutList;

  var field = _field["default"].useField({
    values: {
      pageName: templateData.pageName,
      description: templateData.description,
      layoutType: templateData.layoutType
    }
  });

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      field: field
    };
  });
  (0, _react.useEffect)(function () {
    field.setValues({
      pageName: templateData.pageName,
      description: templateData.description,
      layoutType: templateData.layoutType
    });
    field.validate();
  }, [templateData]);
  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
    style: {
      height: '100%'
    },
    field: field,
    onChange: function onChange(values, item) {
      onTemplateChange((0, _extends2["default"])({}, templateData, values));
    }
  }, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
    defaultExpandedKeys: ['temp_base', 'temp_layout'],
    className: "collapse-no-title-background"
  }, /*#__PURE__*/_react["default"].createElement(_collapse["default"].Panel, {
    key: "temp_base",
    title: "\u57FA\u672C\u5C5E\u6027"
  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
    label: "\u6A21\u677F\u540D\u79F0",
    required: true,
    requiredMessage: "\u6A21\u677F\u540D\u79F0\u4E0D\u80FD\u4E3A\u7A7A",
    requiredTrigger: "onChange"
  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
    name: "pageName"
  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
    label: "\u6A21\u677F\u63CF\u8FF0"
  }, /*#__PURE__*/_react["default"].createElement(_input["default"].TextArea, {
    name: "description"
  }))), /*#__PURE__*/_react["default"].createElement(_collapse["default"].Panel, {
    key: "temp_layout",
    title: "\u5E03\u5C40"
  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
    label: ""
  }, /*#__PURE__*/_react["default"].createElement(_componentTagSelect["default"], {
    name: "layoutType",
    tagList: layoutList,
    imgWidth: 100,
    imgPath: imgPath,
    boxProps: {
      justify: 'flex-start'
    }
  })))));
});
TemplateContent.propTypes = {
  /**
   * 模板数据
   */
  templateData: _propTypes["default"].object,

  /**
   * 模板变更返回数据
   */
  onTemplateChange: _propTypes["default"].func,
  imgPath: _propTypes["default"].string,
  layoutList: _propTypes["default"].array
};
var _default = TemplateContent;
exports["default"] = _default;