From 6e9bc20b5269516d7bce2cd4d124cb245ca0aa50 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 24 Jun 2024 22:34:11 +0530
Subject: [PATCH] feat: key value form

---
 src/components/molecules/KeyValueForm.tsx | 39 +++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/molecules/KeyValueForm.tsx

diff --git a/src/components/molecules/KeyValueForm.tsx b/src/components/molecules/KeyValueForm.tsx
new file mode 100644
index 00000000..c6dd374a
--- /dev/null
+++ b/src/components/molecules/KeyValueForm.tsx
@@ -0,0 +1,39 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { KeyValuePair } from "../atoms/KeyValuePair";
+import { AddButton } from "../atoms/buttons/AddButton";
+import { RemoveButton } from "../atoms/buttons/RemoveButton";
+
+export const KeyValueForm = forwardRef((props, ref) => {
+  const [numberOfPairs, setNumberOfPairs] = React.useState<number>(1);
+  const keyValuePairRefs = useRef<{getKeyValuePair: () => { key: string, value: string }}[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    getObject() {
+      let reducedObject = {};
+      for (let i = 0; i < numberOfPairs; i++) {
+        const keyValuePair = keyValuePairRefs.current[i]?.getKeyValuePair();
+        if (keyValuePair) {
+          reducedObject = {
+            ...reducedObject,
+            [keyValuePair.key]: keyValuePair.value
+          }
+        }
+      }
+      return reducedObject;
+    }
+  }));
+
+  return (
+    <div>
+      {
+        new Array(numberOfPairs).fill(1).map((_, index) => {
+          return <KeyValuePair keyLabel={`key ${index + 1}`} valueLabel={`value ${index + 1}`} key={`keyValuePair-${index}`}
+         //@ts-ignore
+          ref={el => keyValuePairRefs.current[index] = el}/>
+        })
+      }
+      <AddButton handleClick={() => setNumberOfPairs(numberOfPairs + 1)} hoverEffect={false}/>
+      <RemoveButton handleClick={() => setNumberOfPairs(numberOfPairs - 1)}/>
+    </div>
+  );
+});