mui-custom-form 0.1.1 → 0.1.3

package/dist/CustomForm.d.ts

@@ -0,0 +1,25 @@
+import { useForm } from "react-hook-form";
+import React from "react";
+export type $option<T = any> = {
+    icon?: React.ReactNode;
+    label: string;
+    value: T;
+};
+export interface ICustomField<T = string> {
+    label: string;
+    name: T extends string ? string : keyof T;
+    type: "text" | "number" | "single-select" | "multi-select" | "date" | "file";
+    list?: $option[];
+    required?: boolean;
+    otherProps?: any;
+    span?: number;
+}
+interface ICustomForm {
+    fieldsGroups: ICustomField<any>[][];
+    onSubmit: ReturnType<this["formControl"]["handleSubmit"]>;
+    formControl: ReturnType<typeof useForm>;
+    submitButton?: boolean;
+    otherProps?: any;
+}
+export declare const CustomForm: React.FC<ICustomForm>;
+export {};

package/dist/CustomForm.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomForm = void 0;
+var material_1 = require("@mui/material");
+var x_date_pickers_1 = require("@mui/x-date-pickers");
+var react_hook_form_1 = require("react-hook-form");
+var react_1 = __importDefault(require("react"));
+var CustomForm = function (_a) {
+    var fieldsGroups = _a.fieldsGroups, onSubmit = _a.onSubmit, formControl = _a.formControl, _b = _a.submitButton, submitButton = _b === void 0 ? true : _b, otherProps = _a.otherProps;
+    var control = formControl.control, setValue = formControl.setValue;
+    var renderField = function (field) {
+        switch (field.type) {
+            case "text":
+            case "number":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.TextField, __assign({}, controlField, field.otherProps, { label: field.label, type: field.type, fullWidth: true, required: field.required, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message })));
+                    } }));
+            case "single-select":
+            case "multi-select":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
+                        var _b;
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!error },
+                            react_1.default.createElement(material_1.InputLabel, { required: field.required }, field.label),
+                            react_1.default.createElement(material_1.Select, __assign({}, controlField, field.otherProps, { multiple: field.type === "multi-select" }), (_b = field.list) === null || _b === void 0 ? void 0 : _b.map(function (item) { return (react_1.default.createElement(material_1.MenuItem, { key: item.value, value: item.value }, item.label)); })),
+                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
+                    } }));
+            case "date":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(x_date_pickers_1.DatePicker, __assign({}, controlField, field.otherProps, { label: field.label, onChange: controlField.onChange, slotProps: {
+                                textField: {
+                                    required: field.required,
+                                    error: !!error,
+                                    helperText: error === null || error === void 0 ? void 0 : error.message,
+                                    fullWidth: true,
+                                },
+                            } })));
+                    } }));
+            case "file":
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(material_1.FormLabel, { component: "legend" }, field.label),
+                    react_1.default.createElement(material_1.Button, { variant: "contained", component: "label" },
+                        "Upload File",
+                        react_1.default.createElement("input", { type: "file", hidden: true, onChange: function (e) {
+                                // Set the value to either the File instance or undefined
+                                var fileValue = e.target.files && e.target.files.length > 0
+                                    ? e.target.files[0]
+                                    : undefined;
+                                setValue(field.name, fileValue);
+                            } }))));
+            default:
+                return null;
+        }
+    };
+    return (react_1.default.createElement(material_1.Stack, __assign({ component: "form", onSubmit: onSubmit, noValidate: true }, otherProps, { spacing: 3 }),
+        react_1.default.createElement(material_1.Grid, { container: true, spacing: 1 }, fieldsGroups.map(function (fields, rowIndex) { return (react_1.default.createElement(material_1.Grid, { container: true, item: true, key: rowIndex, spacing: 2 }, fields.map(function (field, fieldIndex) { return (react_1.default.createElement(material_1.Grid, { item: true, key: fieldIndex, xs: field.span || true }, renderField(field))); }))); })),
+        submitButton && (react_1.default.createElement(material_1.Button, { type: "submit", variant: "contained" }, "Submit"))));
+};
+exports.CustomForm = CustomForm;
+//# sourceMappingURL=CustomForm.js.map

package/package.json

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