diff --git a/src/components/Table/TableCards/index.tsx b/src/components/Table/TableCards/index.tsx index 3aa0a19b..2deba08d 100644 --- a/src/components/Table/TableCards/index.tsx +++ b/src/components/Table/TableCards/index.tsx @@ -1,12 +1,12 @@ import { TableProps } from 'antd/lib/table'; import { S } from './styles'; -import { Empty, Pagination, TablePaginationConfig } from 'antd'; +import { Checkbox, Empty, Pagination, TablePaginationConfig } from 'antd'; import { ColumnTitle, SorterResult, TableCurrentDataSource } from 'antd/lib/table/interface'; import _ from 'lodash'; export function TableCards(props: TableProps) { - const { pagination, onChange, dataSource = [], columns = [], rowKey } = props; + const { pagination, onChange, dataSource = [], columns = [], rowKey, rowSelection } = props; const renderTitle = (title: ColumnTitle) => { if (typeof title === 'function') { @@ -32,28 +32,52 @@ export function TableCards(props: TableProps) { {dataSource.map((resource, index) => { const key = getCardKey(resource); + const selectedRowKeys = rowSelection?.selectedRowKeys ?? []; return ( - {columns.map((column) => ( - - {column?.title ? renderTitle(column.title) : null} - - { - // @ts-ignore - column?.render - ? (column?.render( - // @ts-ignore - column.dataIndex ? _.get(resource, column.dataIndex) : null, - resource, - index, - ) as React.ReactNode) - : // @ts-ignore - _.get(resource, column.dataIndex) - } - - - ))} + + {columns.map((column) => ( + + {column?.title ? renderTitle(column.title) : null} + + { + // @ts-ignore + column?.render + ? (column?.render( + // @ts-ignore + column.dataIndex ? _.get(resource, column.dataIndex) : null, + resource, + index, + ) as React.ReactNode) + : // @ts-ignore + _.get(resource, column.dataIndex) + } + + + ))} + + {rowSelection ? ( + + { + const checked = e.target.checked; + + if (checked) { + rowSelection.onChange?.([...selectedRowKeys, key], [], { + type: 'single', + }); + } else { + const filteredKeys = selectedRowKeys.filter((k) => k !== key); + rowSelection.onChange?.(filteredKeys, [], { + type: 'single', + }); + } + }} + /> + + ) : null} ); })} diff --git a/src/components/Table/TableCards/styles.ts b/src/components/Table/TableCards/styles.ts index 4961596a..3de92a2c 100644 --- a/src/components/Table/TableCards/styles.ts +++ b/src/components/Table/TableCards/styles.ts @@ -6,17 +6,23 @@ export const S = { display: flex; flex-direction: column; gap: 10px 0; - color: ${({ theme }) => theme.neutral.primaryText} + color: ${({ theme }) => theme.neutral.primaryText}; `, Card: styled.div` display: flex; - flex-direction: column; - gap: 16px 0; + gap: 0 24px; padding: 16px; border: 1px solid ${({ theme }) => theme.neutralPalette.gray_4}; border-radius: 6px; background-color: ${({ theme }) => theme.neutralPalette.gray_1}; `, + Columns: styled.div` + flex: 1; + display: flex; + flex-direction: column; + gap: 16px 0; + `, + RowSelection: styled.div``, Column: styled.div` display: flex; flex-direction: column;