Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 80 81 82 83 84 | 1x | import React, { useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import GiveInputWithTags from "./GiveInputWithTags";
import { IChipProps } from "@shared/Chip/GiveChip";
import { InputProps } from "@shared/GiveInputs/GiveInput";
type TGiveEmailInputWithTags = {
name: string;
forceEnableButton?: (v: boolean) => void;
chipProps?: IChipProps;
inputProps?: InputProps;
};
const GiveEmailInputWithTags: React.FC<TGiveEmailInputWithTags> = ({
name,
forceEnableButton,
chipProps,
inputProps,
}) => {
const { control, setValue, getValues, trigger } = useFormContext();
const [inputValue, setInputValue] = useState("");
const getEmailsArray = () => {
const currentTags = getValues(name) || [];
return [...currentTags, inputValue];
};
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
const hasAtSign = value.indexOf("@") > -1;
setInputValue(value);
forceEnableButton && forceEnableButton(hasAtSign);
};
const createChip = () => {
const emailsArray = getEmailsArray();
setValue(name, emailsArray, { shouldDirty: true });
trigger(name);
setInputValue("");
};
const onKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {
const key = event.key;
if ([" ", ",", "Enter"].includes(key)) {
event.preventDefault();
if (inputValue) createChip();
else return;
}
};
const handleDelete = (index: number) => {
const currentTags = getValues(name) || [];
const updatedTags = [...currentTags];
updatedTags.splice(index, 1);
setValue(name, updatedTags, { shouldDirty: true, shouldValidate: true });
trigger(name);
};
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => {
return (
<GiveInputWithTags
value={field.value}
error={error}
chipProps={chipProps}
inputProps={inputProps}
onKeydown={onKeydown}
handleInputChange={handleInputChange}
handleDelete={handleDelete}
inputValue={inputValue}
setInputValue={setInputValue}
/>
);
}}
/>
);
};
export default GiveEmailInputWithTags;
|