43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Row as RowProps } from '@tanstack/react-table'
|
|
import Cell from './Cell'
|
|
import { TableData } from 'services/typebots/results'
|
|
|
|
type Props = {
|
|
row: RowProps<TableData>
|
|
isSelected: boolean
|
|
bottomElement?: React.MutableRefObject<HTMLDivElement | null>
|
|
onExpandButtonClick: () => void
|
|
}
|
|
|
|
export 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) => (
|
|
<Cell
|
|
key={cell.id}
|
|
cell={cell}
|
|
size={cell.column.getSize()}
|
|
isExpandButtonVisible={isExpandButtonVisible}
|
|
cellIndex={cellIndex}
|
|
onExpandButtonClick={onExpandButtonClick}
|
|
/>
|
|
))}
|
|
</tr>
|
|
)
|
|
}
|