mui-custom-form 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CustomForm.d.ts +25 -0
- package/dist/CustomForm.js +76 -0
- package/dist/CustomForm.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { useForm } from "react-hook-form";
|
|
2
|
+
import React from "react";
|
|
3
|
+
export type $option<T = any> = {
|
|
4
|
+
icon?: React.ReactNode;
|
|
5
|
+
label: string;
|
|
6
|
+
value: T;
|
|
7
|
+
};
|
|
8
|
+
export interface ICustomField<T = string> {
|
|
9
|
+
label: string;
|
|
10
|
+
name: T extends string ? string : keyof T;
|
|
11
|
+
type: "text" | "number" | "single-select" | "multi-select" | "date" | "file";
|
|
12
|
+
list?: $option[];
|
|
13
|
+
required?: boolean;
|
|
14
|
+
otherProps?: any;
|
|
15
|
+
span?: number;
|
|
16
|
+
}
|
|
17
|
+
interface ICustomForm {
|
|
18
|
+
fieldsGroups: ICustomField<any>[][];
|
|
19
|
+
onSubmit: ReturnType<this["formControl"]["handleSubmit"]>;
|
|
20
|
+
formControl: ReturnType<typeof useForm>;
|
|
21
|
+
submitButton?: boolean;
|
|
22
|
+
otherProps?: any;
|
|
23
|
+
}
|
|
24
|
+
export declare const CustomForm: React.FC<ICustomForm>;
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.CustomForm = void 0;
|
|
18
|
+
var material_1 = require("@mui/material");
|
|
19
|
+
var x_date_pickers_1 = require("@mui/x-date-pickers");
|
|
20
|
+
var react_hook_form_1 = require("react-hook-form");
|
|
21
|
+
var react_1 = __importDefault(require("react"));
|
|
22
|
+
var CustomForm = function (_a) {
|
|
23
|
+
var fieldsGroups = _a.fieldsGroups, onSubmit = _a.onSubmit, formControl = _a.formControl, _b = _a.submitButton, submitButton = _b === void 0 ? true : _b, otherProps = _a.otherProps;
|
|
24
|
+
var control = formControl.control, setValue = formControl.setValue;
|
|
25
|
+
var renderField = function (field) {
|
|
26
|
+
switch (field.type) {
|
|
27
|
+
case "text":
|
|
28
|
+
case "number":
|
|
29
|
+
return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
|
|
30
|
+
var controlField = _a.field, error = _a.fieldState.error;
|
|
31
|
+
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 })));
|
|
32
|
+
} }));
|
|
33
|
+
case "single-select":
|
|
34
|
+
case "multi-select":
|
|
35
|
+
return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
|
|
36
|
+
var _b;
|
|
37
|
+
var controlField = _a.field, error = _a.fieldState.error;
|
|
38
|
+
return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!error },
|
|
39
|
+
react_1.default.createElement(material_1.InputLabel, { required: field.required }, field.label),
|
|
40
|
+
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)); })),
|
|
41
|
+
error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
|
|
42
|
+
} }));
|
|
43
|
+
case "date":
|
|
44
|
+
return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
|
|
45
|
+
var controlField = _a.field, error = _a.fieldState.error;
|
|
46
|
+
return (react_1.default.createElement(x_date_pickers_1.DatePicker, __assign({}, controlField, field.otherProps, { label: field.label, onChange: controlField.onChange, slotProps: {
|
|
47
|
+
textField: {
|
|
48
|
+
required: field.required,
|
|
49
|
+
error: !!error,
|
|
50
|
+
helperText: error === null || error === void 0 ? void 0 : error.message,
|
|
51
|
+
fullWidth: true,
|
|
52
|
+
},
|
|
53
|
+
} })));
|
|
54
|
+
} }));
|
|
55
|
+
case "file":
|
|
56
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
57
|
+
react_1.default.createElement(material_1.FormLabel, { component: "legend" }, field.label),
|
|
58
|
+
react_1.default.createElement(material_1.Button, { variant: "contained", component: "label" },
|
|
59
|
+
"Upload File",
|
|
60
|
+
react_1.default.createElement("input", { type: "file", hidden: true, onChange: function (e) {
|
|
61
|
+
// Set the value to either the File instance or undefined
|
|
62
|
+
var fileValue = e.target.files && e.target.files.length > 0
|
|
63
|
+
? e.target.files[0]
|
|
64
|
+
: undefined;
|
|
65
|
+
setValue(field.name, fileValue);
|
|
66
|
+
} }))));
|
|
67
|
+
default:
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
return (react_1.default.createElement(material_1.Stack, __assign({ component: "form", onSubmit: onSubmit, noValidate: true }, otherProps, { spacing: 3 }),
|
|
72
|
+
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))); }))); })),
|
|
73
|
+
submitButton && (react_1.default.createElement(material_1.Button, { type: "submit", variant: "contained" }, "Submit"))));
|
|
74
|
+
};
|
|
75
|
+
exports.CustomForm = CustomForm;
|
|
76
|
+
//# sourceMappingURL=CustomForm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomForm.js","sourceRoot":"","sources":["../src/CustomForm.tsx"],"names":[],"mappings":"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"}
|