74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import React, { memo, useState } from 'react'
|
|
import { Row as RowProps } from '@tanstack/react-table'
|
|
import { Button, chakra, Fade } from '@chakra-ui/react'
|
|
import { ExpandIcon } from 'assets/icons'
|
|
|
|
type Props = {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
row: RowProps<any>
|
|
isSelected: boolean
|
|
bottomElement?: React.MutableRefObject<HTMLDivElement | null>
|
|
onExpandButtonClick: () => void
|
|
}
|
|
|
|
const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => {
|
|
const [isExpandButtonVisible, setIsExpandButtonVisible] = useState(false)
|
|
|
|
const showExpandButton = () => setIsExpandButtonVisible(true)
|
|
const hideExpandButton = () => setIsExpandButtonVisible(false)
|
|
return (
|
|
<tr
|
|
key={row.id}
|
|
data-rowid={row.id}
|
|
ref={(ref) => {
|
|
if (bottomElement && bottomElement.current?.dataset.rowid !== row.id)
|
|
bottomElement.current = ref
|
|
}}
|
|
onMouseEnter={showExpandButton}
|
|
onClick={showExpandButton}
|
|
onMouseLeave={hideExpandButton}
|
|
>
|
|
{row.getVisibleCells().map((cell, cellIndex) => (
|
|
<chakra.td
|
|
key={cell.id}
|
|
px="4"
|
|
py="2"
|
|
border="1px"
|
|
borderColor="gray.200"
|
|
whiteSpace="nowrap"
|
|
wordBreak="normal"
|
|
overflow="hidden"
|
|
pos="relative"
|
|
>
|
|
{cell.renderCell()}
|
|
<chakra.span
|
|
pos="absolute"
|
|
top="0"
|
|
right={2}
|
|
h="full"
|
|
display="inline-flex"
|
|
alignItems="center"
|
|
>
|
|
<Fade unmountOnExit in={isExpandButtonVisible && cellIndex === 1}>
|
|
<Button
|
|
leftIcon={<ExpandIcon />}
|
|
shadow="lg"
|
|
size="xs"
|
|
onClick={onExpandButtonClick}
|
|
>
|
|
Open
|
|
</Button>
|
|
</Fade>
|
|
</chakra.span>
|
|
</chakra.td>
|
|
))}
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
export default memo(
|
|
Row,
|
|
(prev, next) =>
|
|
prev.row.id === next.row.id && prev.isSelected === next.isSelected
|
|
)
|