Skip to content

Commit

Permalink
issue #362: improve validation & error handling
Browse files Browse the repository at this point in the history
  • Loading branch information
k-allagbe committed Dec 3, 2024
1 parent 4f17454 commit 7afc480
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 244 deletions.
82 changes: 43 additions & 39 deletions src/components/VerifiedFieldComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,55 +42,58 @@ const VerifiedFieldWrapper: React.FC<VerifiedFieldWrapperProps> = ({
});

return (
<Box
className={`flex items-center p-1 border-2 rounded-tr-md rounded-br-md ${
isFocused ? "border-fertiscan-blue" : ""
} ${verified ? "bg-green-100" : ""} ${className}`}
data-testid={`verified-field-${path}`}
>
<Box>
<Typography
className="px-2 !font-bold select-none"
className="px-2 !font-bold select-none text-left"
data-testid={`field-label-${path}`}
>
{label}
</Typography>
{renderField({ setIsFocused, control, valuePath, verified })}
<Divider
orientation="vertical"
flexItem
className={isFocused ? "!border-fertiscan-blue" : ""}
data-testid={`divider-${path}`}
/>
<Controller
name={verifiedPath}
control={control}
render={({ field: { value, onChange } }) => (
<Tooltip
title={
verified
? t("verifiedField.unverify", { label })
: t("verifiedField.verify", { label })
}
enterDelay={1000}
>
<IconButton
onClick={() => onChange(!value)}
data-testid={`toggle-verified-btn-${verifiedPath}`}
aria-label={

<Box
className={`flex items-center p-1 border-2 rounded-tr-md rounded-br-md ${
isFocused ? "border-fertiscan-blue" : ""
} ${verified ? "border-green-500" : ""} ${className}`}
data-testid={`verified-field-${path}`}
>
{renderField({ setIsFocused, control, valuePath, verified })}
<Divider
orientation="vertical"
flexItem
className={isFocused ? "!border-fertiscan-blue" : ""}
data-testid={`divider-${path}`}
/>
<Controller
name={verifiedPath}
control={control}
render={({ field: { value, onChange } }) => (
<Tooltip
title={
verified
? t("verifiedField.unverify", { label })
: t("verifiedField.verify", { label })
}
enterDelay={1000}
>
<CheckIcon
className={value ? "text-green-500" : ""}
data-testid={`verified-icon-${verifiedPath}`}
aria-hidden
/>
</IconButton>
</Tooltip>
)}
/>
<IconButton
onClick={() => onChange(!value)}
data-testid={`toggle-verified-btn-${verifiedPath}`}
aria-label={
verified
? t("verifiedField.unverify", { label })
: t("verifiedField.verify", { label })
}
>
<CheckIcon
className={value ? "text-green-500" : ""}
data-testid={`verified-icon-${verifiedPath}`}
aria-hidden
/>
</IconButton>
</Tooltip>
)}
/>
</Box>
</Box>
);
};
Expand Down Expand Up @@ -119,6 +122,7 @@ const VerifiedCheckbox: React.FC<VerifiedCheckboxProps> = ({
render={({ field }) => (
<Checkbox
{...field}
className="flex-1"
checked={field.value}
disabled={verified}
onFocus={() => setIsFocused(true)}
Expand Down
Loading

0 comments on commit 7afc480

Please sign in to comment.