feat: select line on checkbox container click (#732)

* feat: select line on checkbox container click

Closes #703

* Make onChange optional

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/input/components/Checkbox.tsx

@@ -6,7 +6,7 @@ import { IconCheck, IconMinus } from '@/ui/icon';
 type OwnProps = {
   checked: boolean;
   indeterminate?: boolean;
-  onChange: (value: boolean) => void;
+  onChange?: (value: boolean) => void;
 };
 
 const StyledInputContainer = styled.div`
@@ -71,7 +71,7 @@ export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
   }, [checked]);
 
   function handleChange(value: boolean) {
-    onChange(value);
+    onChange?.(value);
     setIsInternalChecked(!isInternalChecked);
   }
 

front/src/modules/ui/table/components/CheckboxCell.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 
@@ -9,6 +9,7 @@ import { contextMenuPositionState } from '../states/contextMenuPositionState';
 
 const StyledContainer = styled.div`
   align-items: center;
+  cursor: pointer;
 
   display: flex;
   height: 32px;
@@ -21,19 +22,14 @@ export function CheckboxCell() {
 
   const { currentRowSelected, setCurrentRowSelected } = useCurrentRowSelected();
 
-  function onChange(checked: boolean) {
+  const handleClick = useCallback(() => {
-    handleCheckboxChange(checked);
+    setCurrentRowSelected(!currentRowSelected);
-  }
-
-  function handleCheckboxChange(newCheckedValue: boolean) {
-    setCurrentRowSelected(newCheckedValue);
-
     setContextMenuPosition({ x: null, y: null });
-  }
+  }, [currentRowSelected, setContextMenuPosition, setCurrentRowSelected]);
 
   return (
-    <StyledContainer>
+    <StyledContainer onClick={handleClick}>
-      <Checkbox checked={currentRowSelected} onChange={onChange} />
+      <Checkbox checked={currentRowSelected} />
     </StyledContainer>
   );
 }