improve checkbox

IntersectMBO · Feb 14, 2024 · b5452eb · b5452eb
1 parent 85389d2
commit b5452eb
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
@@ -43,9 +43,11 @@ export type SpacerProps = {
   y?: number;
 };
 
-export type CheckboxProps = MUICheckboxProps & {
+export type CheckboxProps = Omit<MUICheckboxProps, "onChange" | "value"> & {
   dataTestId?: string;
   errorMessage?: string;
+  onChange: (newValue: boolean) => void;
+  value: boolean;
 };
 
 export type FormErrorMessageProps = {

diff --git a/govtool/frontend/src/components/molecules/Field/Checkbox.tsx b/govtool/frontend/src/components/molecules/Field/Checkbox.tsx
@@ -1,9 +1,9 @@
 import { Box } from "@mui/material";
 
-import { Checkbox as CheckboxBase, Typography } from "@atoms";
+import { Checkbox as CheckboxBase, FormErrorMessage, Typography } from "@atoms";
 
 import { CheckboxFieldProps } from "./types";
-import { FormErrorMessage } from "@/components/atoms/FormErrorMessage";
+import { useCallback } from "react";
 
 export const Checkbox = ({
   errorMessage,
@@ -12,18 +12,30 @@ export const Checkbox = ({
   labelStyles,
   layoutStyles,
   onChange,
+  value,
   ...rest
 }: CheckboxFieldProps) => {
+  const handleValue = useCallback(() => {
+    onChange(!value);
+  }, [value]);
+
   return (
     <Box sx={{ width: "100%", ...layoutStyles }}>
       <Box
+        onClick={handleValue}
         sx={{
           alignItems: "center",
+          cursor: "pointer",
           display: "flex",
           flexDirection: "row",
+          width: "fit-content",
         }}
       >
-        <CheckboxBase errorMessage={errorMessage} {...rest} />
+        <CheckboxBase
+          {...{ onChange, value }}
+          errorMessage={errorMessage}
+          {...rest}
+        />
         {label && (
           <Typography variant="caption" {...labelStyles}>
             {label}

diff --git a/govtool/frontend/src/components/organisms/ControlledField/Checkbox.tsx b/govtool/frontend/src/components/organisms/ControlledField/Checkbox.tsx
@@ -20,7 +20,7 @@ export const Checkbox = ({
         checked={!!field.value}
         errorMessage={errorMessage}
         name={field.name}
-        onChange={(newValue) => field.onChange(newValue)}
+        onChange={field.onChange}
         value={field.value}
         {...props}
       />

diff --git a/govtool/frontend/src/components/organisms/ControlledField/types.ts b/govtool/frontend/src/components/organisms/ControlledField/types.ts
@@ -15,7 +15,10 @@ export type ControlledInputProps = InputFieldProps & {
   rules?: Omit<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
 };
 
-export type ControlledCheckboxProps = CheckboxFieldProps & {
+export type ControlledCheckboxProps = Omit<
+  CheckboxFieldProps,
+  "onChange" | "value"
+> & {
   control: Control<any>;
   errors: FieldErrors<any>;
   name: Path<any>;