@uiw-admin/components/esm/ProForm/index.js

业务组件集合

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import React, { useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
import { Collapse, Card } from 'uiw';
import FormDom from './formdom';
import ReadFormDom from './readform';
import { getFormFields } from './widgets';
import { StoreCtx, ColPropsContext } from './hooks/store';
import { isObjectEmpty } from './utils';
import './style/form-item.css';
import { jsx as _jsx } from "react/jsx-runtime";
export * from './type';
function ProForm(props, ref) {
  var {
    formDatas = [],
    title = '',
    formType = 'card',
    layout = 'vertical',
    readOnly = false,
    customWidgetsList = {},
    form,
    cardProps = {},
    collapseProps = {},
    collapsePanelProps = {},
    colProps
  } = props;

  // 获取表单配置
  var formfields = useMemo(() => getFormFields(readOnly, formDatas, customWidgetsList), [formDatas]);
  var {
    setFormState
  } = form || {};
  var store = useMemo(() => ({
    setFormState
  }), [form]);
  var formInstanceRef = useRef();

  // 通过ref导出实例方法
  useImperativeHandle(ref, () => {
    var _formInstanceRef$curr7;
    // 表单验证(同时兼容老api submitvalidate和新api onSubmit )
    var submitvalidate = () => {
      var _formInstanceRef$curr, _formInstanceRef$curr2;
      return (formInstanceRef == null ? void 0 : (_formInstanceRef$curr = formInstanceRef.current) == null ? void 0 : (_formInstanceRef$curr2 = _formInstanceRef$curr.current) == null ? void 0 : _formInstanceRef$curr2.onSubmit()) || null;
    };
    // 获取表单的值
    var getFieldValues = () => {
      var _formInstanceRef$curr3, _formInstanceRef$curr4;
      return (formInstanceRef == null ? void 0 : (_formInstanceRef$curr3 = formInstanceRef.current) == null ? void 0 : (_formInstanceRef$curr4 = _formInstanceRef$curr3.current) == null ? void 0 : _formInstanceRef$curr4.getFieldValues()) || {};
    };
    // 获取表单错误信息
    var getError = () => {
      var _formInstanceRef$curr5, _formInstanceRef$curr6;
      return (formInstanceRef == null ? void 0 : (_formInstanceRef$curr5 = formInstanceRef.current) == null ? void 0 : (_formInstanceRef$curr6 = _formInstanceRef$curr5.current) == null ? void 0 : _formInstanceRef$curr6.getError()) || {};
    };
    // 验证并获取表单值
    var validateFieldsAndGetValue = () => {
      return new Promise( /*#__PURE__*/function () {
        var _ref = _asyncToGenerator(function* (resolve, reject) {
          yield submitvalidate();
          var errors = (yield getError()) || {};
          if (isObjectEmpty(errors)) {
            var value = (yield getFieldValues()) || {};
            resolve(value);
          } else {
            reject(errors);
          }
        });
        return function (_x, _x2) {
          return _ref.apply(this, arguments);
        };
      }());
    };
    return _extends({}, (_formInstanceRef$curr7 = formInstanceRef.current) == null ? void 0 : _formInstanceRef$curr7.current, {
      getError,
      getFieldValues,
      submitvalidate,
      validateFieldsAndGetValue
    });
  });
  var children;
  var formDomProps = _extends({}, props, {
    layout,
    formfields,
    formInstanceRef
  });
  // 非详情模式下渲染标题
  var renderTitle = !readOnly ? title : undefined;
  // 判断是否是详情模式
  var child = readOnly ? /*#__PURE__*/_jsx(ReadFormDom, _extends({}, props)) : /*#__PURE__*/_jsx(FormDom, _extends({}, formDomProps));

  // 判断渲染的form类型
  if (formType === 'card') {
    children = /*#__PURE__*/_jsx(Card, _extends({
      title: renderTitle
    }, cardProps, {
      children: child
    }));
  } else if (formType === 'collapse') {
    children = /*#__PURE__*/_jsx(Collapse, _extends({
      activeKey: "1"
    }, collapseProps, {
      children: /*#__PURE__*/_jsx(Collapse.Panel, _extends({
        header: title
      }, collapsePanelProps, {
        children: child
      }), '1')
    }));
  } else {
    children = child;
  }
  return /*#__PURE__*/_jsx(StoreCtx.Provider, {
    value: store,
    children: /*#__PURE__*/_jsx(ColPropsContext.Provider, {
      value: colProps || {},
      children: /*#__PURE__*/_jsx("div", {
        className: "uiw-admin-proform uiw-admin-proform-" + layout,
        children: children
      })
    })
  });
}
export default /*#__PURE__*/forwardRef(ProForm);