-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b09db3d
commit c94ff14
Showing
8 changed files
with
90 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import { DynamicFormProps } from '../assets/interfaces'; | ||
| import React from 'react'; | ||
| declare const DynamicForm: React.FC<DynamicFormProps>; | ||
| export default DynamicForm; | ||
| import { DynamicFormProps } from '../assets/interfaces'; | ||
| declare const CustomizedDynamicForm: React.FC<DynamicFormProps>; | ||
| export default CustomizedDynamicForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,54 @@ | ||
| "use strict"; | ||
| var __importDefault = (this && this.__importDefault) || function (mod) { | ||
| return (mod && mod.__esModule) ? mod : { "default": mod }; | ||
| var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
| if (k2 === undefined) k2 = k; | ||
| var desc = Object.getOwnPropertyDescriptor(m, k); | ||
| if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { | ||
| desc = { enumerable: true, get: function() { return m[k]; } }; | ||
| } | ||
| Object.defineProperty(o, k2, desc); | ||
| }) : (function(o, m, k, k2) { | ||
| if (k2 === undefined) k2 = k; | ||
| o[k2] = m[k]; | ||
| })); | ||
| var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { | ||
| Object.defineProperty(o, "default", { enumerable: true, value: v }); | ||
| }) : function(o, v) { | ||
| o["default"] = v; | ||
| }); | ||
| var __importStar = (this && this.__importStar) || function (mod) { | ||
| if (mod && mod.__esModule) return mod; | ||
| var result = {}; | ||
| if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); | ||
| __setModuleDefault(result, mod); | ||
| return result; | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| const react_1 = require("react"); | ||
| const react_1 = __importStar(require("react")); | ||
| const react_hook_form_1 = require("react-hook-form"); | ||
| const ai_1 = require("react-icons/ai"); | ||
| const react_2 = __importDefault(require("react")); | ||
| const DynamicForm = ({ fields, onSubmit }) => { | ||
| const CustomizedDynamicForm = ({ fields, onSubmit, cssFramework }) => { | ||
| const [showPassword, setShowPassword] = (0, react_1.useState)(false); | ||
| const { register, handleSubmit, formState: { errors } } = (0, react_hook_form_1.useForm)({ mode: 'all' }); | ||
| const renderField = (field) => { | ||
| var _a, _b; | ||
| const error = (_a = errors[field.id]) === null || _a === void 0 ? void 0 : _a.message; | ||
| const isPasswordField = field.type === 'password'; | ||
| const inputType = isPasswordField && showPassword ? 'text' : field.type; | ||
| return (react_2.default.createElement("div", { id: 'input-wrapper' }, | ||
| react_2.default.createElement("div", { id: 'input-container' }, field.type === 'checkbox' && field.options ? (react_2.default.createElement("div", { className: 'grid grid-cols-2 gap-4' }, field.options.map(option => (react_2.default.createElement("div", { key: option.value, className: 'flex gap-1 items-center justify-center' }, | ||
| react_2.default.createElement("label", { htmlFor: `${field.id}-${option.value}`, className: 'ml-2 mt-1' }, | ||
| return (react_1.default.createElement("div", { id: 'input-wrapper', className: cssFramework === 'bootstrap' ? 'mb-3 w-1' : '' }, | ||
| react_1.default.createElement("div", { id: 'input-container', className: cssFramework === 'bootstrap' ? 'input-group' : '' }, field.type === 'checkbox' && field.options ? (react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'row' : 'grid grid-cols-2 gap-4' }, field.options.map(option => (react_1.default.createElement("div", { key: option.value, className: cssFramework === 'bootstrap' ? 'col-6 d-flex align-items-center' : 'flex gap-1 justify-center' }, | ||
| react_1.default.createElement("label", { htmlFor: `${field.id}-${option.value}`, className: cssFramework === 'bootstrap' ? 'form-check-label ms-2' : 'ml-2' }, | ||
| option.label, | ||
| " :"), | ||
| react_2.default.createElement("input", Object.assign({ id: `${field.id}-${option.value}` }, register(field.id, Object.assign({}, field.validation)), { type: field.type, value: option.value, className: 'w-max' }))))))) : field.type === 'select' ? (react_2.default.createElement("select", Object.assign({}, register(field.id, Object.assign({}, field.validation)), { id: field.id }), (_b = field.options) === null || _b === void 0 ? void 0 : _b.map((option) => (react_2.default.createElement("option", { key: option.value, value: option.value }, option.label))))) : (react_2.default.createElement("div", { className: 'flex items-center p-1 border' }, | ||
| field.icon && react_2.default.createElement("div", { className: 'ml-2' }, field.icon), | ||
| react_2.default.createElement("input", Object.assign({ id: field.id }, register(field.id, Object.assign({}, field.validation)), { type: inputType, placeholder: field.placeholder })), | ||
| isPasswordField && (react_2.default.createElement("div", { id: "prop-icon", className: "hover:cursor-pointer mr-3", onClick: () => setShowPassword(!showPassword) }, showPassword ? react_2.default.createElement(ai_1.AiOutlineEye, null) : react_2.default.createElement(ai_1.AiOutlineEyeInvisible, null)))))), | ||
| error && react_2.default.createElement("span", { id: field.errorId }, error))); | ||
| react_1.default.createElement("input", Object.assign({ id: `${field.id}-${option.value}` }, register(field.id, Object.assign({}, field.validation)), { type: field.type, value: option.value, className: cssFramework === 'bootstrap' ? 'form-check-input ms-2' : '' }))))))) : field.type === 'select' ? (react_1.default.createElement("select", Object.assign({}, register(field.id, Object.assign({}, field.validation)), { id: field.id, className: cssFramework === 'bootstrap' ? 'form-select' : "border rounded w-full sm:py-2 sm:px-3 py-1 px-3 text-stone-600 leading-tight focus:outline-none text-sm sm:text-base" }), (_b = field.options) === null || _b === void 0 ? void 0 : _b.map((option) => (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label))))) : (react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'input-group' : 'flex items-center p-1 border' }, | ||
| field.icon && react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'input-group-text' : 'ml-2' }, field.icon), | ||
| react_1.default.createElement("input", Object.assign({ id: field.id }, register(field.id, Object.assign({}, field.validation)), { type: inputType, placeholder: field.placeholder, className: cssFramework === 'bootstrap' ? `form-control ${error ? 'is-invalid' : ''}` : 'rounded w-full sm:py-2 sm:px-3 py-1 px-2 text-stone-600 leading-tight focus:outline-none text-sm sm:text-base' })), | ||
| isPasswordField && (react_1.default.createElement("div", { id: "prop-icon", className: cssFramework === 'bootstrap' ? 'input-group-text' : 'hover:cursor-pointer mr-3', onClick: () => setShowPassword(!showPassword) }, showPassword ? react_1.default.createElement(ai_1.AiOutlineEye, null) : react_1.default.createElement(ai_1.AiOutlineEyeInvisible, null)))))), | ||
| error && react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'text-danger' : 'text-orange-500 italic text-sm sm:text-base', id: field.errorId }, error))); | ||
| }; | ||
| return (react_2.default.createElement("main", { className: 'md:w-3/4 m-auto md:h-0' }, | ||
| react_2.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "flex flex-col md:w-1/2 m-auto p-5 gap-5 md:mt-5 md:border border-black" }, | ||
| fields.map((field) => (react_2.default.createElement("div", { key: field.id }, | ||
| react_2.default.createElement("label", { htmlFor: field.id }, field.label), | ||
| renderField(field)))), | ||
| react_2.default.createElement("button", { type: 'submit', disabled: Object.keys(errors).length ? true : false, className: 'px-4 py-2 bg-slate-400 hover:bg-slate-600 hover:transition hover:text-white rounded-lg disabled:bg-gray-600 disabled:hover:bg-gray-600' }, "Submit")))); | ||
| return (react_1.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: cssFramework === 'bootstrap' ? 'card p-4 w-50 m-auto' : 'flex flex-col md:w-1/2 m-auto p-5 gap-5 md:mt-5 md:border border-slate-400 rounded-lg' }, | ||
| fields.map((field) => (react_1.default.createElement("div", { key: field.id, className: cssFramework === 'bootstrap' ? 'mb-3' : '' }, | ||
| react_1.default.createElement("label", { htmlFor: field.id, className: cssFramework === 'bootstrap' ? "form-label" : "block text-gray-700 sm:text-lg font-bold mb-2" }, field.label), | ||
| renderField(field)))), | ||
| react_1.default.createElement("button", { type: 'submit', disabled: Object.keys(errors).length ? true : false, className: cssFramework === 'bootstrap' ? 'btn btn-primary w-100 mt-3' : 'px-4 py-2 bg-slate-400 hover:bg-slate-600 hover:transition hover:text-white rounded-lg disabled:bg-gray-600 disabled:hover:bg-gray-600 disabled:text-white' }, "Submit"))); | ||
| }; | ||
| exports.default = DynamicForm; | ||
| exports.default = CustomizedDynamicForm; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters