From 5d4fad2d9617de8f83b02b4325913aa9f7c4870c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Tue, 18 Jul 2023 19:00:48 +0200
Subject: [PATCH] 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>
---
 .../modules/ui/input/components/Checkbox.tsx   |  4 ++--
 .../ui/table/components/CheckboxCell.tsx       | 18 +++++++-----------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/front/src/modules/ui/input/components/Checkbox.tsx b/front/src/modules/ui/input/components/Checkbox.tsx
index a7c35bb2c..4184250df 100644
--- a/front/src/modules/ui/input/components/Checkbox.tsx
+++ b/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);
   }
 
diff --git a/front/src/modules/ui/table/components/CheckboxCell.tsx b/front/src/modules/ui/table/components/CheckboxCell.tsx
index 9eeee393e..f324d9ee8 100644
--- a/front/src/modules/ui/table/components/CheckboxCell.tsx
+++ b/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) {
-    handleCheckboxChange(checked);
-  }
-
-  function handleCheckboxChange(newCheckedValue: boolean) {
-    setCurrentRowSelected(newCheckedValue);
-
+  const handleClick = useCallback(() => {
+    setCurrentRowSelected(!currentRowSelected);
     setContextMenuPosition({ x: null, y: null });
-  }
+  }, [currentRowSelected, setContextMenuPosition, setCurrentRowSelected]);
 
   return (
-    <StyledContainer>
-      <Checkbox checked={currentRowSelected} onChange={onChange} />
+    <StyledContainer onClick={handleClick}>
+      <Checkbox checked={currentRowSelected} />
     </StyledContainer>
   );
 }