fx-form-widget/es/packages/previewPlatform/component/ContentWrap/index.js

动态表单组件库

import _Row from "antd/es/row";
import _Col from "antd/es/col";
import _Form from "antd/es/form";
import React, { useContext, forwardRef, useImperativeHandle } from 'react';
import { toJS } from 'mobx';
import { ProSkeleton, ProCard } from '@ant-design/pro-components';
import { Context } from '../../index';
import RenderWidget from './renderWidget';
import EditableTable from '../EditableTable';
import Group from '../Group';
import { nanoid } from 'nanoid';
import './index.less';
var Item = _Form.Item;

// 不同布局组件的id集合
var LAYOUT_COMPONENTIDS = {
  SUB_FORM_ID: 100,
  GROUP_ID: 101,
  SEPARATOR_ID: 102
};
export var renderDifferentLayputComponent = function renderDifferentLayputComponent(schema, wid, onCheck) {
  var id = schema.id,
    children = schema.children,
    viewSchema = schema.viewSchema;
  if (id === LAYOUT_COMPONENTIDS['SUB_FORM_ID']) {
    return /*#__PURE__*/React.createElement(_Col, {
      span: 24,
      key: wid
    }, /*#__PURE__*/React.createElement(Item, {
      name: schema.wid,
      wrapperCol: {
        span: 24
      },
      labelCol: {
        span: 0
      }
    }, /*#__PURE__*/React.createElement(EditableTable, {
      schema: schema,
      wid: schema.wid,
      schemaChildrenData: children,
      viewSchema: viewSchema
    })));
  }
  if (id === LAYOUT_COMPONENTIDS['GROUP_ID']) {
    return /*#__PURE__*/React.createElement(_Col, {
      span: 24,
      key: wid
    }, /*#__PURE__*/React.createElement(Item, {
      wrapperCol: {
        span: 24
      },
      labelCol: {
        span: 0
      }
    }, /*#__PURE__*/React.createElement(Group, {
      schemaChildrenData: children,
      viewSchema: viewSchema,
      wid: wid
    })));
  }
  return /*#__PURE__*/React.createElement(RenderWidget, {
    onCheck: onCheck,
    schema: schema,
    key: schema.wid ? schema.wid : nanoid()
  });
};
var ContentWrap = function ContentWrap(_ref, ref) {
  var variant = _ref.variant,
    loading = _ref.loading,
    valuesChanged = _ref.valuesChanged,
    onCheck = _ref.onCheck;
  var _Form$useForm = _Form.useForm(),
    dynamicForm = _Form$useForm[0];
  var ContentContext = useContext(Context);
  var schemaData = ContentContext.schemaData;
  useImperativeHandle(ref, function () {
    return {
      dynamicForm: dynamicForm
    };
  });

  // 隐藏系统字段
  var realShowSchemaData = schemaData === null || schemaData === void 0 ? void 0 : schemaData.filter(function (value) {
    return value.viewSchema.isSystem !== true;
  });
  var renderForm = function renderForm() {
    if ((realShowSchemaData === null || realShowSchemaData === void 0 ? void 0 : realShowSchemaData.length) === 0) {
      return null;
    }
    return /*#__PURE__*/React.createElement(_Form, {
      variant: variant,
      form: dynamicForm,
      validateTrigger: "onBlur",
      onValuesChange: function onValuesChange(changedValues) {
        return valuesChanged(changedValues);
      },
      requiredMark: false,
      colon: false
    }, /*#__PURE__*/React.createElement(_Row, {
      gutter: 16
    }, toJS(realShowSchemaData).map(function (schema) {
      return renderDifferentLayputComponent(schema, schema.wid, onCheck);
    })));
  };
  var renderProSkeleton = function renderProSkeleton(loading) {
    if (!loading) {
      return false;
    }
    return /*#__PURE__*/React.createElement(ProSkeleton, {
      list: realShowSchemaData.length,
      type: "descriptions"
    });
  };
  return /*#__PURE__*/React.createElement(ProCard, {
    loading: renderProSkeleton(loading)
  }, renderForm());
};
export default /*#__PURE__*/forwardRef(ContentWrap);