40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
import { KeyValuePair } from "./KeyValuePair";
|
|
import { AddButton } from "../ui/buttons/AddButton";
|
|
import { RemoveButton } from "../ui/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>
|
|
);
|
|
});
|