Files
medusa-store/packages/admin-ui/ui/src/hooks/use-selection-column.tsx
2023-03-03 10:09:16 +01:00

40 lines
1.0 KiB
TypeScript

import React from "react"
import Checkbox from "../components/atoms/checkbox"
import Table from "../components/molecules/table"
const IndeterminateCheckbox = React.forwardRef(
({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef()
const resolvedRef = ref || defaultRef
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate
}, [resolvedRef, indeterminate])
return (
<div onClickCapture={(e) => e.stopPropagation()}>
<Checkbox
className="justify-center"
label=""
ref={resolvedRef}
{...rest}
/>
</div>
)
}
)
export const useSelectionColumn = () => {
return {
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<Table.Cell className="text-center">
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</Table.Cell>
),
}
}