All files / src/components/Inputs/InputTypes CompositeField.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Add, Delete } from "@mui/icons-material";
import CustomButton from "../../common/CustomButton";
import CustomInput from "../CustomInput";
import { HandleInputRenderType } from "../HandleInputRender";
import { useState } from "react";
import extractOptions from "../../../utils/playbook/extractOptions";
import { KeyType } from "../../../utils/playbook/key";
 
function CompositeField(props: Omit<HandleInputRenderType, "inputType">) {
  Iif (!props.compositeFields) return null;
  const emptyFormData = props.compositeFields.reduce((val, field) => {
    Iif (!field.key) return val;
    val[field.key] = "";
    return val;
  }, {});
  const [data, setData] = useState(() =>
    props.value ? (props.value as any[]) : [emptyFormData],
  );
 
  const addData = () => {
    setData([...data, emptyFormData]);
  };
 
  const deleteData = (index: number) => {
    const newData = structuredClone(data);
    newData.splice(index, 1);
    setData(newData);
  };
 
  const handleChange = (value: string, index: number, key: string) => {
    const newData = data.map((item, i) =>
      i === index ? { ...item, [key]: value } : item,
    );
    setData(newData);
    Iif (props.handleChange) props.handleChange(JSON.stringify(newData));
  };
 
  const handleOptions = (field: HandleInputRenderType, index: number) => {
    const options = extractOptions(field.key as KeyType, undefined, index);
    Iif (options?.length > 0) {
      return options;
    }
    return field.options ?? [];
  };
 
  return (
    <div className="flex gap-1 rounded border p-1 flex-wrap !w-fit">
      <div className="flex flex-wrap items-end gap-2">
        {data.map((val, index) => (
          <div key={index} className="flex flex-wrap items-end gap-1">
            {props.compositeFields!.map((field) => (
              <CustomInput
                key={field.key}
                {...field}
                value={val[field.key!]}
                handleChange={(val) =>
                  handleChange(val as string, index, field.key!)
                }
                options={handleOptions(field, index)}
                className="!max-w-[100px]"
              />
            ))}
            {index > 0 && (
              <CustomButton onClick={() => deleteData(index)}>
                <Delete fontSize="small" />
              </CustomButton>
            )}
          </div>
        ))}
        <CustomButton onClick={addData}>
          <Add fontSize="small" />
        </CustomButton>
      </div>
    </div>
  );
}
 
export default CompositeField;