@jannie-shao/components-antd4/es/form/components/item-list/index.js

基于 Antd 4 的组件封装

import "antd/es/form/style";
import _Form from "antd/es/form";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["model", "itemRender"];
import React, { useImperativeHandle, forwardRef, useEffect, useState, useRef } from 'react';
import Item from "./Item";
var RenderList = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var model = _ref.model,
    itemRender = _ref.itemRender,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var value = props.value;
  var compListItem = useRef();
  // 用于透出 add 方法时，实现条数限制
  var eleCount = useRef(1);
  var _useState = useState([{}]),
    data = _useState[0],
    setData = _useState[1];
  useEffect(function () {
    var val = value || [];
    if (val.length === 0) {
      (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange([{}]));
      return;
    }
    setData(value);
    eleCount.current = value.length;
  }, [value]);
  useImperativeHandle(ref, function () {
    return _extends({}, compListItem.current || {});
  });
  return /*#__PURE__*/React.createElement(_Form.List, props, function (fields, operation) {
    return /*#__PURE__*/React.createElement(Item, {
      ref: compListItem,
      eleCount: eleCount,
      fields: fields,
      operation: operation,
      model: model,
      data: data,
      onChange: props === null || props === void 0 ? void 0 : props.onChange,
      itemRender: itemRender
    });
  });
});
export default RenderList;