Add card selection

beda-software · Dec 19, 2024 · 275e2fc · 275e2fc
1 parent f8e522c
commit 275e2fc
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 24 deletions.
diff --git 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<T extends object>(props: TableProps<T>) {
-    const { pagination, onChange, dataSource = [], columns = [], rowKey } = props;
+    const { pagination, onChange, dataSource = [], columns = [], rowKey, rowSelection } = props;
 
     const renderTitle = (title: ColumnTitle<T>) => {
         if (typeof title === 'function') {
@@ -32,28 +32,52 @@ export function TableCards<T extends object>(props: TableProps<T>) {
         <S.Container>
             {dataSource.map((resource, index) => {
                 const key = getCardKey(resource);
+                const selectedRowKeys = rowSelection?.selectedRowKeys ?? [];
 
                 return (
                     <S.Card key={key}>
-                        {columns.map((column) => (
-                            <S.Column key={`${key}-${column.key}`}>
-                                {column?.title ? renderTitle(column.title) : null}
-                                <S.Content>
-                                    {
-                                        // @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)
-                                    }
-                                </S.Content>
-                            </S.Column>
-                        ))}
+                        <S.Columns>
+                            {columns.map((column) => (
+                                <S.Column key={`${key}-${column.key}`}>
+                                    {column?.title ? renderTitle(column.title) : null}
+                                    <S.Content>
+                                        {
+                                            // @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)
+                                        }
+                                    </S.Content>
+                                </S.Column>
+                            ))}
+                        </S.Columns>
+                        {rowSelection ? (
+                            <S.RowSelection>
+                                <Checkbox
+                                    checked={selectedRowKeys.includes(key)}
+                                    onChange={(e) => {
+                                        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',
+                                            });
+                                        }
+                                    }}
+                                />
+                            </S.RowSelection>
+                        ) : null}
                     </S.Card>
                 );
             })}

diff --git 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;