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 ( - - + + ); }