mui-custom-form 1.1.1 → 1.1.3

package/README.md

@@ -189,7 +189,7 @@ const Fields = z.object({
     .array(z.enum(HOBBIES), { required_error: "Hobbies are required" })
     .nonempty("Please choose at least one hobby"),
   birthDate: z.date({ required_error: "Birthdate is required" }),
-  file: z.instanceof(File).optional(),
+  file: z.instanceof(FileList).optional(),
 });
 
 type FieldTypes = z.infer<typeof Fields>;

package/dist/CustomForm.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ICustomForm } from "./types";
-export declare const CustomForm: <T extends FieldValues>({ fieldsGroups, onSubmit, formControl, submitButton, resetButton, actionButtonsPlacement, otherProps, }: ICustomForm<T>) => React.JSX.Element;
+export declare const CustomForm: <T extends FieldValues>({ fieldsGroups, onSubmit, formControl, submitButton, resetButton, actionButtonsPlacement, layout, otherProps, }: ICustomForm<T>) => React.JSX.Element;

package/dist/CustomForm.js

@@ -30,8 +30,8 @@ var x_date_pickers_1 = require("@mui/x-date-pickers");
 var react_1 = __importDefault(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var CustomForm = function (_a) {
-    var fieldsGroups = _a.fieldsGroups, onSubmit = _a.onSubmit, formControl = _a.formControl, _b = _a.submitButton, submitButton = _b === void 0 ? true : _b, resetButton = _a.resetButton, actionButtonsPlacement = _a.actionButtonsPlacement, otherProps = _a.otherProps;
-    var control = formControl.control, setValue = formControl.setValue, reset = formControl.reset, register = formControl.register;
+    var fieldsGroups = _a.fieldsGroups, onSubmit = _a.onSubmit, formControl = _a.formControl, _b = _a.submitButton, submitButton = _b === void 0 ? true : _b, resetButton = _a.resetButton, actionButtonsPlacement = _a.actionButtonsPlacement, layout = _a.layout, otherProps = _a.otherProps;
+    var control = formControl.control, setValue = formControl.setValue, reset = formControl.reset;
     var renderField = function (field) {
         switch (field.type) {
             case "text":
@@ -76,7 +76,7 @@ var CustomForm = function (_a) {
                         "Upload File",
                         react_1.default.createElement("input", __assign({ type: "file", hidden: true, onChange: function (e) {
                                 var fileValue = e.target.files && e.target.files.length > 0
-                                    ? e.target.files[0]
+                                    ? e.target.files
                                     : undefined;
                                 setValue(field.name, fileValue);
                             } }, field.otherProps)))));
@@ -135,8 +135,8 @@ var CustomForm = function (_a) {
     };
     var submitButtonProps = submitButton && submitButton !== true ? submitButton : {};
     var resetButtonProps = resetButton && resetButton !== true ? resetButton : {};
-    return (react_1.default.createElement(material_1.Stack, __assign({ component: "form", onSubmit: formControl.handleSubmit(onSubmit[0], onSubmit[1]), noValidate: true }, otherProps, { spacing: 3 }),
-        react_1.default.createElement(material_1.Grid2, { container: true, spacing: 1 }, fieldsGroups.map(function (fields, rowIndex) { return (react_1.default.createElement(material_1.Grid2, { container: true, key: rowIndex, spacing: 2 }, fields.map(function (field, fieldIndex) { return (react_1.default.createElement(material_1.Grid2, { key: fieldIndex, size: field.span || 12 }, renderField(field))); }))); })),
+    return (react_1.default.createElement(material_1.Stack, __assign({ component: "form", onSubmit: formControl.handleSubmit(onSubmit[0], onSubmit[1]), noValidate: true, direction: layout }, otherProps, { spacing: 3 }),
+        fieldsGroups.map(function (fields, rowIndex) { return (react_1.default.createElement(material_1.Grid2, { container: true, key: rowIndex, spacing: 2, className: "debug" }, fields.map(function (field, fieldIndex) { return (react_1.default.createElement(material_1.Grid2, { key: fieldIndex, size: field.span || 12 }, renderField(field))); }))); }),
         react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: actionButtonsPlacement || "flex-end", spacing: 2 },
             resetButton && (react_1.default.createElement(material_1.Button, __assign({ type: "reset", variant: "contained", onClick: function () { return reset(); } }, resetButtonProps), "Reset")),
             submitButton && (react_1.default.createElement(material_1.Button, __assign({ type: "submit", variant: "contained" }, submitButtonProps), "Submit")))));

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@mui/material";
+import { ButtonProps, StackProps } from "@mui/material";
 import { CSSProperties } from "react";
 import { FieldValues, SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
 type name<T> = T extends string ? string : keyof T;
@@ -40,7 +40,8 @@ export interface ICustomForm<T extends FieldValues> {
     actionButtonsPlacement?: CSSProperties["justifyContent"];
     submitButton?: ButtonProps | boolean;
     resetButton?: ButtonProps | boolean;
-    otherProps?: any;
+    layout?: StackProps["direction"];
+    otherProps?: StackProps;
 }
 export interface CustomComponentProps {
     value: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-custom-form",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A versatile React form component utilizing MUI components and react-hook-form.",
   "main": "dist/CustomForm.js",
   "types": "dist/CustomForm.d.ts",