From d88b28e321f24e94f8a6125323c03b1501f17db1 Mon Sep 17 00:00:00 2001
From: sianida26 <chesakeselekkebo@gmail.com>
Date: Fri, 17 May 2024 01:47:06 +0700
Subject: [PATCH] Added create input helper

---
 .../src/utils/createInputComponents.tsx       | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 apps/frontend/src/utils/createInputComponents.tsx

diff --git a/apps/frontend/src/utils/createInputComponents.tsx b/apps/frontend/src/utils/createInputComponents.tsx
new file mode 100644
index 0000000..444967d
--- /dev/null
+++ b/apps/frontend/src/utils/createInputComponents.tsx
@@ -0,0 +1,93 @@
+import {
+	MultiSelect,
+	MultiSelectProps,
+	NumberInput,
+	NumberInputProps,
+	PasswordInput,
+	PasswordInputProps,
+	TextInput,
+	TextInputProps,
+} from "@mantine/core";
+import { ReactNode } from "@tanstack/react-router";
+
+type GeneralInputProps = {
+	hidden?: boolean;
+};
+
+type TextInputType = {
+	type: "text";
+} & TextInputProps;
+
+type MultiSelectInputType = {
+	type: "multi-select";
+} & MultiSelectProps;
+
+type PasswordInputType = {
+	type: "password";
+} & PasswordInputProps;
+
+type NumberInputType = {
+	type: "number";
+} & Omit<NumberInputProps, "type">;
+
+interface Options {
+	disableAll?: boolean;
+	readonlyAll?: boolean;
+	inputs: ((
+		| TextInputType
+		| MultiSelectInputType
+		| PasswordInputType
+		| NumberInputType
+	) &
+		GeneralInputProps)[];
+}
+
+function createInputComponents(options: Options) {
+	const components = [] as ReactNode[];
+
+	for (const input of options.inputs) {
+		if (input.hidden) continue;
+
+		switch (input.type) {
+			case "text":
+				components.push(
+					<TextInput
+						{...input}
+						readOnly={options.readonlyAll || input.readOnly}
+						disabled={options.disableAll || input.disabled}
+					/>
+				);
+				break;
+			case "multi-select":
+				components.push(
+					<MultiSelect
+						{...input}
+						readOnly={options.readonlyAll || input.readOnly}
+						disabled={options.disableAll || input.disabled}
+					/>
+				);
+				break;
+			case "password":
+				components.push(
+					<PasswordInput
+						{...input}
+						readOnly={options.readonlyAll || input.readOnly}
+						disabled={options.disableAll || input.disabled}
+					/>
+				);
+				break;
+			case "number":
+				components.push(
+					<NumberInput
+						{...input}
+						type="text"
+						readOnly={options.readonlyAll || input.readOnly}
+						disabled={options.disableAll || input.disabled}
+					/>
+				);
+				break;
+		}
+	}
+}
+
+export default createInputComponents;