diff --git a/apps/builder/components/results/ResultsTable/Cell.tsx b/apps/builder/components/results/ResultsTable/Cell.tsx new file mode 100644 index 000000000..bdc9efa7a --- /dev/null +++ b/apps/builder/components/results/ResultsTable/Cell.tsx @@ -0,0 +1,66 @@ +import { chakra, Fade, Button } from '@chakra-ui/react' +import { Cell as CellProps } from '@tanstack/react-table' +import { ExpandIcon } from 'assets/icons' +import { memo } from 'react' + +type Props = { + cell: CellProps + size: number + isExpandButtonVisible: boolean + cellIndex: number + onExpandButtonClick: () => void +} + +const Cell = ({ + cell, + size, + isExpandButtonVisible, + cellIndex, + onExpandButtonClick, +}: Props) => { + return ( + + {cell.renderCell()} + + + + + + + ) +} + +export default memo( + Cell, + (prev, next) => + prev.size === next.size && + prev.isExpandButtonVisible === next.isExpandButtonVisible +) diff --git a/apps/builder/components/results/ResultsTable/ResultsTable.tsx b/apps/builder/components/results/ResultsTable/ResultsTable.tsx index 38094ff83..7e8912b8b 100644 --- a/apps/builder/components/results/ResultsTable/ResultsTable.tsx +++ b/apps/builder/components/results/ResultsTable/ResultsTable.tsx @@ -23,7 +23,7 @@ import { ColumnSettingsButton } from './ColumnsSettingsButton' import { useTypebot } from 'contexts/TypebotContext' import { useDebounce } from 'use-debounce' import { ResultsActionButtons } from './ResultsActionButtons' -import Row from './Row' +import { Row } from './Row' import { HeaderRow } from './HeaderRow' type RowType = { diff --git a/apps/builder/components/results/ResultsTable/Row.tsx b/apps/builder/components/results/ResultsTable/Row.tsx index 5061e5f50..78f3ad1ca 100644 --- a/apps/builder/components/results/ResultsTable/Row.tsx +++ b/apps/builder/components/results/ResultsTable/Row.tsx @@ -1,7 +1,6 @@ -import React, { memo, useState } from 'react' +import React, { useState } from 'react' import { Row as RowProps } from '@tanstack/react-table' -import { Button, chakra, Fade } from '@chakra-ui/react' -import { ExpandIcon } from 'assets/icons' +import Cell from './Cell' type Props = { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -11,7 +10,7 @@ type Props = { onExpandButtonClick: () => void } -const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => { +export const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => { const [isExpandButtonVisible, setIsExpandButtonVisible] = useState(false) const showExpandButton = () => setIsExpandButtonVisible(true) @@ -29,45 +28,15 @@ const Row = ({ row, bottomElement, onExpandButtonClick }: Props) => { onMouseLeave={hideExpandButton} > {row.getVisibleCells().map((cell, cellIndex) => ( - - {cell.renderCell()} - - - - - - + cell={cell} + size={cell.column.getSize()} + isExpandButtonVisible={isExpandButtonVisible} + cellIndex={cellIndex} + onExpandButtonClick={onExpandButtonClick} + /> ))} ) } - -export default memo( - Row, - (prev, next) => - prev.row.id === next.row.id && prev.isSelected === next.isSelected -)