diff --git a/src/renderer/components/virtual-table/hooks/use-click-outside-deselect.tsx b/src/renderer/components/virtual-table/hooks/use-click-outside-deselect.tsx new file mode 100644 index 00000000..c0f21108 --- /dev/null +++ b/src/renderer/components/virtual-table/hooks/use-click-outside-deselect.tsx @@ -0,0 +1,15 @@ +import { MutableRefObject } from 'react'; +import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; +import { useClickOutside } from '@mantine/hooks'; + +export const useClickOutsideDeselect = (tableRef: MutableRefObject) => { + const handleDeselect = () => { + if (tableRef.current) { + tableRef.current.api.deselectAll(); + } + }; + + const ref = useClickOutside(handleDeselect); + + return ref; +}; diff --git a/src/renderer/components/virtual-table/index.tsx b/src/renderer/components/virtual-table/index.tsx index be7ccd58..81b0fa38 100644 --- a/src/renderer/components/virtual-table/index.tsx +++ b/src/renderer/components/virtual-table/index.tsx @@ -9,7 +9,7 @@ import type { import type { AgGridReactProps } from '@ag-grid-community/react'; import { AgGridReact } from '@ag-grid-community/react'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; -import { useMergedRef } from '@mantine/hooks'; +import { useClickOutside, useMergedRef } from '@mantine/hooks'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import formatDuration from 'format-duration'; @@ -30,6 +30,7 @@ import { FavoriteCell } from '/@/renderer/components/virtual-table/cells/favorit export * from './table-config-dropdown'; export * from './table-pagination'; export * from './hooks/use-fixed-table-header'; +export * from './hooks/use-click-outside-deselect'; const TableWrapper = styled.div` display: flex; @@ -314,14 +315,25 @@ export const getColumnDefs = (columns: PersistedTableColumn[]) => { return columnDefs; }; +interface VirtualTableProps extends AgGridReactProps { + deselectOnClickOutside?: boolean; +} + export const VirtualTable = forwardRef( - ({ ...rest }: AgGridReactProps, ref: Ref) => { + ({ deselectOnClickOutside, ...rest }: VirtualTableProps, ref: Ref) => { const tableRef = useRef(null); const mergedRef = useMergedRef(ref, tableRef); + const deselectRef = useClickOutside(() => { + return deselectOnClickOutside ? tableRef?.current?.api?.deselectAll() : undefined; + }); + return ( - +