mui-custom-form
Version:
A versatile React form component utilizing MUI components and react-hook-form.
66 lines • 4.14 kB
JavaScript
import { Button, Grid, Stack } from "@mui/material";
import React from "react";
// Import modularized field components
import { TextField } from "./components/fields/TextField";
import { TextareaField } from "./components/fields/TextareaField";
import { SelectField } from "./components/fields/SelectField";
import { DateField } from "./components/fields/DateField";
import { FileField } from "./components/fields/FileField";
import { SwitchField } from "./components/fields/SwitchField";
import { CheckboxGroupField } from "./components/fields/CheckboxGroupField";
import { RadioGroupField } from "./components/fields/RadioGroupField";
import { CustomField as CustomComponentField } from "./components/fields/CustomField";
export const CustomForm = ({ fieldsGroups, onSubmit, formControl, submitButton = true, resetButton, actionButtonsPlacement, layout, otherProps, }) => {
const { control, reset } = formControl;
const renderField = (field) => {
switch (field.type) {
case "text":
case "number":
case "password":
return React.createElement(TextField, { field: field, formControl: formControl });
case "textarea":
return React.createElement(TextareaField, { field: field, formControl: formControl });
case "single-select":
case "multi-select":
return React.createElement(SelectField, { field: field, formControl: formControl });
case "date":
return React.createElement(DateField, { field: field, formControl: formControl });
case "file":
return React.createElement(FileField, { field: field, formControl: formControl });
case "switch":
return React.createElement(SwitchField, { field: field, formControl: formControl });
case "checkbox-group":
return React.createElement(CheckboxGroupField, { field: field, formControl: formControl });
case "radio-group":
return React.createElement(RadioGroupField, { field: field, formControl: formControl });
case "custom":
return React.createElement(CustomComponentField, { field: field, formControl: formControl });
default:
return null;
}
};
const submitButtonProps = submitButton && submitButton !== true ? submitButton : {};
const resetButtonProps = resetButton && resetButton !== true ? resetButton : {};
// Function to calculate spans dynamically
const calculateSpan = (fields) => {
const totalDefinedSpan = fields.reduce((acc, field) => acc + (field.span || 0), 0);
const autoSpanFields = fields.filter((field) => !field.span).length;
const remainingSpan = 12 - totalDefinedSpan;
const calculatedSpan = autoSpanFields > 0 ? Math.floor(remainingSpan / autoSpanFields) : 12;
return { calculatedSpan, autoSpanFields };
};
return (React.createElement(Stack, { component: "form", onSubmit: formControl.handleSubmit(onSubmit[0], onSubmit[1]), noValidate: true, direction: layout, ...otherProps, spacing: 3 },
fieldsGroups.map((fields, rowIndex) => {
const { calculatedSpan, autoSpanFields } = calculateSpan(fields);
return (React.createElement(Grid, { container: true, key: rowIndex, spacing: 2 }, fields.map((field, fieldIndex) => (React.createElement(Grid, { key: fieldIndex, size: field.span
? field.span
: autoSpanFields > 0
? calculatedSpan
: 12 }, renderField(field))))));
}),
React.createElement(Stack, { direction: "row", justifyContent: actionButtonsPlacement || "flex-end", spacing: 2 },
resetButton && (React.createElement(Button, { type: "reset", variant: "contained", onClick: () => reset(), ...resetButtonProps }, "Reset")),
submitButton && (React.createElement(Button, { type: "submit", variant: "contained", ...submitButtonProps }, "Submit")))));
};
export default CustomForm;
//# sourceMappingURL=CustomForm.js.map