react-antd-dashboard/build/core/components/FormModal/index.js

React dashboard layout solution created using AntD and permission based navigation. Supports theming with Less, parameterized routes and private routing. Contains useful components for dashboard application.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useEffect } from 'react';
import { withModal } from "react-antd-dashboard";
import { Modal, Form } from 'antd';

const FormModal = props => {
  const {
    modalData,
    modalProps,
    addTitle,
    editTitle,
    formProps,
    ...rest
  } = props;
  const [form] = Form.useForm();
  const formLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 20
    }
  };
  useEffect(() => {
    if (modalData) form.setFieldsValue(modalData);else form.resetFields();
  }, [modalData, form]);

  const onSubmit = () => {
    form.validateFields().then(values => {
      if (modalData) props.onEdit({ ...modalData,
        ...values
      });else props.onAdd({ ...modalData,
        ...values
      });
    });
  };

  return /*#__PURE__*/React.createElement(Modal, _extends({}, modalProps, {
    title: modalData ? editTitle : addTitle,
    onOk: onSubmit
  }, rest), /*#__PURE__*/React.createElement(Form, _extends({}, formLayout, {
    form: form,
    onFinish: onSubmit,
    onSubmit: onSubmit
  }, formProps), props.children));
};

export default withModal()(FormModal);