97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import { Input, Button } from "antd";
|
|
import { useFormikContext } from "formik";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface FieldGroupProps {
|
|
array_name: string;
|
|
title:string;
|
|
static?: boolean;
|
|
only_value?: boolean;
|
|
}
|
|
|
|
const FieldGroup: React.FC<FieldGroupProps> = ({ array_name ,title,static:isStatic,only_value}) => {
|
|
const { values, setFieldValue } = useFormikContext<any>();
|
|
const addFieldGroup = () => {
|
|
setFieldValue(array_name, [
|
|
...(values?.[array_name] || []),
|
|
{ key: null, value: null },
|
|
]);
|
|
};
|
|
const deleteFieldGroup = () => {
|
|
const updatedArray = values?.[array_name]?.slice(0, -1) || [];
|
|
setFieldValue(array_name, updatedArray);
|
|
};
|
|
|
|
|
|
const handleChangeKey = (
|
|
e: React.ChangeEvent<HTMLInputElement>,
|
|
index: number
|
|
) => {
|
|
const Selects = values?.[array_name] ?? [];
|
|
Selects[index].key = e.target.value;
|
|
setFieldValue(array_name, Selects);
|
|
};
|
|
|
|
const handleChangeValue = (
|
|
e: React.ChangeEvent<HTMLInputElement>,
|
|
index: number
|
|
) => {
|
|
const Selects = values?.[array_name] ?? [];
|
|
Selects[index].value = e.target.value;
|
|
setFieldValue(array_name, Selects);
|
|
};
|
|
|
|
const selectsArray = values?.[array_name] ?? [];
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<label htmlFor={array_name} className="text">
|
|
<h5 className="mb-2">{t(`header.${title}`)}</h5>
|
|
</label>
|
|
{selectsArray.map((group: { key: string; value: string }, index: number) => (
|
|
<div key={index} className="d-flex gap-2 mb-3">
|
|
<Input
|
|
placeholder={t("practical.key")}
|
|
onChange={(e) => handleChangeKey(e, index)}
|
|
value={group.key}
|
|
size="large"
|
|
style={{ width: "100%" }}
|
|
allowClear
|
|
disabled={only_value}
|
|
/>
|
|
<Input
|
|
placeholder={t("practical.value")}
|
|
onChange={(e) => handleChangeValue(e, index)}
|
|
value={group.value}
|
|
size="large"
|
|
style={{ width: "100%" }}
|
|
allowClear
|
|
|
|
/>
|
|
</div>
|
|
))}
|
|
{!isStatic &&
|
|
<div className="d-flex gap-2 mb-4">
|
|
<Button
|
|
type="dashed"
|
|
onClick={addFieldGroup}
|
|
>
|
|
{t("practical.add_new")}
|
|
</Button>
|
|
<Button
|
|
type="dashed"
|
|
onClick={deleteFieldGroup}
|
|
>
|
|
{t("practical.delete_last")}
|
|
</Button>
|
|
</div>
|
|
}
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FieldGroup;
|