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

基于 Antd 4 的组件封装

import "antd/es/modal/style";
import _Modal from "antd/es/modal";
import _extends from "@babel/runtime/helpers/extends";
import "antd/es/button/style";
import _Button from "antd/es/button";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["btnText", "btnGroup", "title", "addonBefore", "model", "beforePop", "afterPopSubmit", "afterClose", "onSubmit", "className", "initialValues", "values", "children", "useChildren", "getContainer", "formProps"];
import React, { useImperativeHandle, forwardRef, useRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { merge, isEqual } from 'lodash';
import Form from "../form";
import { callFun, cloneElement } from "../utils";
import { rootPrefix } from "../style/config";
var prefix = rootPrefix + "-pop-form";
var PopForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var btnText = _ref.btnText,
    btnGroup = _ref.btnGroup,
    title = _ref.title,
    addonBefore = _ref.addonBefore,
    model = _ref.model,
    beforePop = _ref.beforePop,
    afterPopSubmit = _ref.afterPopSubmit,
    afterClose = _ref.afterClose,
    onSubmit = _ref.onSubmit,
    className = _ref.className,
    initialValues = _ref.initialValues,
    values = _ref.values,
    children = _ref.children,
    useChildren = _ref.useChildren,
    getContainer = _ref.getContainer,
    formProps = _ref.formProps,
    moreProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var compForm = useRef();
  var _useState = useState(false),
    visible = _useState[0],
    setVisible = _useState[1];
  var _useState2 = useState(false),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var _useState3 = useState(values),
    lastValues = _useState3[0],
    setLastValues = _useState3[1];
  var handleShowForm = function handleShowForm() {
    return callFun(function () {
      return beforePop();
    }, function (res) {
      setVisible(true);
      if (res && compForm.current) {
        compForm.current.setFieldsValue(res);
      }
    });
  };
  var handleCancel = function handleCancel() {
    setVisible(false);
    setLoading(false);
  };
  var handleAfterClose = function handleAfterClose() {
    compForm.current && compForm.current.resetFields();
    afterClose();
  };
  var handleSubmit = function handleSubmit(data) {
    setLoading(true);
    callFun(function () {
      return onSubmit(data);
    }, function () {
      handleCancel();
      afterPopSubmit();
    }, function () {
      return setLoading(false);
    });
  };
  useEffect(function () {
    if (!isEqual(values, lastValues) && compForm.current) {
      compForm.current.setFieldsValue(values);
      setLastValues(values);
    }
  }, [values]);
  useEffect(function () {
    compForm.current && compForm.current.setFieldsValue(merge({}, initialValues, values));
  }, []);
  useImperativeHandle(ref, function () {
    return {
      handleShowForm: handleShowForm
    };
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, function () {
    if (children) {
      return cloneElement(children, {
        onClick: handleShowForm
      });
    }
    if (useChildren) {
      return /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        onClick: handleShowForm
      }, btnText);
    }
    return '';
  }(), /*#__PURE__*/React.createElement(_Modal, _extends({
    className: classnames(prefix, className),
    getContainer: getContainer,
    maskClosable: false,
    title: title,
    width: 690,
    footer: null
  }, moreProps, {
    open: visible,
    onCancel: handleCancel,
    afterClose: handleAfterClose
  }), /*#__PURE__*/React.createElement("div", {
    className: prefix + "-addon-before"
  }, addonBefore), /*#__PURE__*/React.createElement("div", {
    className: prefix + "-content"
  }, /*#__PURE__*/React.createElement(Form, _extends({
    ref: compForm,
    layout: "horizontal",
    colon: false,
    model: model,
    btnGroup: btnGroup
  }, formProps, {
    isLoading: loading,
    initialValues: initialValues,
    onSubmit: handleSubmit,
    onCancel: handleCancel
  })))));
});
PopForm.propTypes = {
  btnText: PropTypes.string,
  btnGroup: PropTypes.array,
  title: PropTypes.string,
  addonBefore: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  model: PropTypes.array,
  beforePop: PropTypes.func,
  afterPopSubmit: PropTypes.func,
  afterClose: PropTypes.func,
  onSubmit: PropTypes.func,
  className: PropTypes.string,
  initialValues: PropTypes.object,
  values: PropTypes.object,
  useChildren: PropTypes.bool,
  getContainer: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.node]),
  formProps: PropTypes.object
};
PopForm.defaultProps = {
  btnText: 'Create',
  btnGroup: [{
    opType: 'submit',
    btnText: 'Ok'
  }, 'cancel'],
  addonBefore: /*#__PURE__*/React.createElement(React.Fragment, null),
  model: [],
  title: 'New',
  beforePop: function beforePop() {},
  afterPopSubmit: function afterPopSubmit() {},
  afterClose: function afterClose() {},
  onSubmit: function onSubmit() {},
  className: '',
  initialValues: {},
  values: {},
  useChildren: true,
  getContainer: function getContainer() {
    return document.body;
  },
  formProps: {}
};
export default PopForm;