@omniumretail/component-library 1.1.19 → 1.1.21

package/src/components/ResponsiveTable/index.tsx

@@ -0,0 +1,307 @@
+import { useState, useEffect } from 'react';
+import { Space, TableProps, Select, Dropdown, MenuProps } from 'antd';
+import { Table as AntdTable } from 'antd';
+import type { ColumnsType } from 'antd/es/table/interface';
+import styles from './styles.module.scss';
+import { useTranslation } from 'react-i18next';
+import { MoreOutlined } from '@ant-design/icons';
+import classnames from 'classnames';
+import { Button } from '../Button';
+
+export interface FilterTableOptions {
+    value: string;
+    label: string;
+    direction: string;
+}
+
+export interface TableActions {
+    key: string;
+    label: string;
+}
+
+export enum sortByOption {
+    asc = 'asc',
+    desc = 'desc',
+}
+
+export interface ResponsiveTableCustomProps extends TableProps<any> {
+    fieldsToSort?: any[],
+    selectPlaceholder?: string,
+    onSort?: (field: any, sortByOption: any) => void;
+    sortInfo?: any;
+    paginationInfo?: any;
+    headingTranslationsKey?: string;
+    actionsArray?: any;
+    rowSelectionInfo?: any;
+    rowKeyValue?: string;
+    hiddenColumns?: string[];
+    rowSelection?: any;
+    onSelectAllButtonClick?: () => void;
+    AllItemsShowing?: boolean;
+    selectAllStatus?: any;
+    isTableDataRefreshed?: any;
+    tableLoading?: any;
+    tableMaxHeight?: any;
+    columnsSortChange?: any;
+    sortByColumns?: boolean;
+    columnsToSort?: string[];
+    fixedColumns?: { dataIndex: string; side: 'left' | 'right' }[];
+    customColumnWidths?: { columnName: string; width: string }[];
+}
+
+export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
+    const { t } = useTranslation();
+
+    const {
+        dataSource = undefined,
+        fieldsToSort,
+        selectPlaceholder = 'Sort By',
+        onSort,
+        headingTranslationsKey,
+        actionsArray: items,
+        rowKeyValue,
+        hiddenColumns,
+        rowSelection,
+        onSelectAllButtonClick,
+        AllItemsShowing,
+        selectAllStatus,
+        isTableDataRefreshed,
+        tableLoading,
+        tableMaxHeight,
+        sortByColumns,
+        columnsToSort,
+        fixedColumns,
+        customColumnWidths
+    } = props;
+
+    const [customFilters, setCustomFilters] = useState<any>([]);
+    const [customColumns, setCustomColumns] = useState<ColumnsType<any>>([]);
+    const [sortInfo, setSortInfo] = useState<any>([]);
+    const [selectedRowKeys, setselectedRowKeys] = useState<any>(rowSelection?.selectedRowKeys || []);
+    const [selectedAllRowKeys, setSelectedAllRowKeys] = useState(false);
+    const [deselectAll, setDeselectAll] = useState(false);
+
+
+    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+        if (rowSelection.type === 'radio') {
+            setselectedRowKeys(newSelectedRowKeys);
+            return;
+        }
+
+        setselectedRowKeys((prevKeys: any) => {
+            const dataSourceIds = dataSource?.map((data) => data[rowKeyValue as any])
+
+            const oldKeys = prevKeys.filter((key: any) => {
+                return !dataSourceIds?.includes(key)
+            });
+
+            return [...oldKeys, ...newSelectedRowKeys];
+        });
+
+        setSelectedAllRowKeys(false);
+        setDeselectAll(false);
+    };
+
+    const handleChange: TableProps<any>['onChange'] = (pagination, filters, sorter: any, extra) => {
+        const getPagination = {
+            currentPage: pagination.current,
+        }
+
+        const getSortAndPaginationInfo = { ...sortInfo, ...getPagination }
+        props.paginationInfo(getSortAndPaginationInfo);
+
+        // SORT 
+        if (sortByColumns) {
+            const { field, order } = sorter;
+            let mappedOrder = null;
+            if (order === "ascend") {
+                mappedOrder = "asc";
+            } else if (order === "descend") {
+                mappedOrder = "desc";
+            }
+
+            if (field && mappedOrder) {
+                props.columnsSortChange({ field, order: mappedOrder });
+            }
+        }
+    };
+
+    const setSorter = (option: any) => {
+        onSort?.(option.value.split('-')[0], option.direction);
+        const sortData = {
+            sortDirection: option.direction,
+            sortValue: option.value.split('-')[0],
+        }
+
+        setSortInfo(sortData)
+    };
+
+    const selectAllRows = () => {
+        if (selectedAllRowKeys) {
+            setDeselectAll(true);
+        } else {
+            onSelectAllButtonClick?.(); // Call the onSelectAllButtonClick callback
+        }
+    };
+
+    useEffect(() => {
+        if (isTableDataRefreshed && !tableLoading || AllItemsShowing) {
+            if (selectAllStatus && AllItemsShowing) {
+                const allRowKeys = dataSource?.map((record) => record[rowKeyValue as any]);
+                setselectedRowKeys(allRowKeys);
+                setSelectedAllRowKeys(true);
+            }
+        }
+    }, [isTableDataRefreshed, tableLoading, selectAllStatus, AllItemsShowing]);
+
+    useEffect(() => {
+        if (deselectAll) {
+            setselectedRowKeys([]);
+            setDeselectAll(false);
+            setSelectedAllRowKeys(false);
+        }
+    }, [deselectAll]);
+
+    useEffect(() => {
+        props.rowSelectionInfo(selectedRowKeys);
+    }, [selectedRowKeys]);
+
+    useEffect(() => {
+        if (dataSource && (dataSource as any)?.length > 0) {
+            // Columns
+            let columns = Object.keys(dataSource?.[0]).map(key => {
+                if (hiddenColumns?.includes(key)) {
+                    return;
+                }
+
+                const isColumnSortable = columnsToSort?.includes(key) ? sortByColumns : false;
+
+                const column = {
+                    title: headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key,
+                    dataIndex: key,
+                    key: key,
+                    ellipsis: false,
+                    sorter: isColumnSortable,
+                    // No fixed property here, we'll add it later based on the fixedColumns prop
+                };
+
+                return column;
+
+            }).filter(el => el !== undefined) as any;
+
+            let columnActions = {
+                key: 'action',
+                title: headingTranslationsKey ? t(`${headingTranslationsKey}.${'action'}`) : 'action',
+                dataIndex: 6,
+                ellipsis: false,
+                render: () => {
+                    if (!items?.[0]) return null; // Verifica se o array items é nulo
+
+                    return (
+                        <Space size="middle">
+                            <Dropdown menu={{ items }}>
+                                <a>
+                                    <MoreOutlined style={{ color: 'var(--color-blue)', transform: 'scale(1.6)' }} />
+                                </a>
+                            </Dropdown>
+                        </Space>
+                    );
+                },
+            };
+
+            items && columns.push(columnActions as any);
+
+            if (fixedColumns) {
+                fixedColumns.forEach((column) => {
+                    const { dataIndex, side } = column;
+                    const foundColumn = columns.find((col: any) => col.dataIndex === dataIndex);
+                    if (foundColumn) {
+                        foundColumn.fixed = side;
+                    }
+                });
+            }
+
+            if (customColumnWidths) {
+                customColumnWidths.forEach((column) => {
+                    const { columnName, width } = column;
+                    const foundColumn = columns.find((col: any) => col.dataIndex === columnName);
+                    if (foundColumn) {
+                        foundColumn.width = width;
+                    }
+                });
+            }
+
+            setCustomColumns(columns);
+
+            // Filters
+            const dataKeysToFilter = Object.keys(dataSource?.[0]).filter((el) => fieldsToSort?.includes(el));
+
+            const filters = ([] as FilterTableOptions[]).concat(
+                ...dataKeysToFilter.map(key => ({
+                    value: `${key}-${sortByOption.desc}`,
+                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortByOption.desc})`,
+                    direction: `${sortByOption.desc}`,
+                })),
+                ...dataKeysToFilter.map(key => ({
+                    value: `${key}-${sortByOption.asc}`,
+                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortByOption.asc})`,
+                    direction: `${sortByOption.asc}`,
+                }))
+            );
+
+            setCustomFilters(filters);
+        }
+    }, [dataSource]);
+
+    const shouldRenderSortDropdown = customFilters.length > 0;
+
+    const tableWrapperClasses = classnames({
+        [styles.tableWrapperNoSelection]: !rowSelection
+    }, [styles.tableWrapper]);
+
+    return (
+        <div className={tableWrapperClasses}>
+            {shouldRenderSortDropdown &&
+                <Space style={{ marginBottom: 16 }}>
+                    <Select
+                        style={{ width: 'auto', minWidth: 200 }}
+                        placeholder={selectPlaceholder}
+                        onSelect={(_, option: any) => {
+                            setSorter(option);
+                        }}
+                        optionFilterProp="children"
+                        filterOption={(input, option) => (option?.label ?? '').includes(input)}
+                        filterSort={(optionA, optionB) =>
+                            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
+                        }
+                        options={customFilters}
+                    />
+                </Space>
+            }
+
+            <AntdTable
+                dataSource={dataSource}
+                onChange={handleChange}
+                {...props}
+                columns={customColumns}
+                {...props.rowSelection ? (
+                    {
+                        rowSelection: {
+                            selectedRowKeys: selectedRowKeys,
+                            onChange: onSelectChange,
+                            type: props.rowSelection?.type,
+                        }
+                    }
+                ) : null}
+                rowKey={rowKeyValue}
+                {...(tableMaxHeight ? { scroll: { y: tableMaxHeight } } : {})}
+            />
+            {
+                onSelectAllButtonClick &&
+                <Button onClick={selectAllRows} className={styles.selectAllRows}>
+                    {selectedAllRowKeys ? t('components.table.deselectAll') : t('components.table.selectAll')}
+                </Button>
+            }
+        </div>
+    );
+};

package/src/components/ResponsiveTable/styles.module.scss

@@ -0,0 +1,153 @@
+.tableWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    :global {
+        .ant-table-thead > tr > th {
+            background-color: transparent;
+            border: 0px;
+            color: var(--color-blue);
+
+            &:before {
+                display: none;
+            }
+        }
+
+        .ant-table-wrapper {
+            margin-bottom: 12px;
+        }
+    
+        .ant-table-cell {
+            word-break: break-word;
+        }
+
+        .ant-table-tbody {
+            > tr {
+                cursor: pointer;
+
+                &:last-child {
+                    > td {
+                        border-bottom: 1px solid var(--color-grey-light) !important;
+                    }
+                }
+
+                &:first-child {
+                    > td {
+                        border-top: 1px solid var(--color-blue) !important;
+                    }
+                }
+
+                &:hover {
+                    td {
+                        border-radius: 0 !important;
+                        border-bottom-color: var(--color-grey-light) !important;
+                    }
+                }
+            }
+        }
+
+        .ant-space {
+            align-self: flex-end;
+        }
+
+        .ant-select-selection-placeholder {
+            color: var(--color-black);
+        }
+
+        .ant-select-selector,
+        .ant-select-focused .ant-select-selection-search {
+            border: none !important;
+            box-shadow: none !important;
+
+            &:focus,
+            &:hover {
+                border: none !important;
+                box-shadow: none !important;
+            }
+        }
+
+        .ant-pagination {
+            max-width: calc(100% - 200px);
+            margin-left: auto !important;
+        }
+
+        button[type="button"].ant-pagination-item-link {
+            margin-top: 0 !important;
+        }
+    }
+
+    button[type="button"] {
+        margin-top: -50px;
+    }
+
+
+    @media screen and (max-width: 1024px) {
+        :global {
+            .ant-table-thead>tr>th {
+                font-size: 12px;
+            }
+    
+            .ant-table-tbody>tr>td {
+                font-size: 12px;
+            }
+
+            .ant-table-wrapper .ant-table-thead>tr>th {
+                padding: 8px;
+            }
+    
+            .ant-table-wrapper .ant-table-tbody>tr>td {
+                padding: 8px;
+            }
+        }
+    }
+    
+    @media screen and (max-width: 767px) {
+        :global {
+            .ant-table-thead>tr>th {
+                font-size: 10px;
+            }
+    
+            .ant-table-tbody>tr>td {
+                font-size: 10px;
+            }
+    
+            .ant-table-content table {
+                width: 100%;
+            }
+    
+            .ant-table-content {
+                width: 100%;
+            }
+    
+            .ant-table-wrapper .ant-table .ant-table-title, 
+            .ant-table-wrapper .ant-table .ant-table-header {
+                word-break: break-all;
+            }
+
+            .ant-table-wrapper .ant-table-thead>tr>th {
+                padding: 4px;
+            }
+    
+            .ant-table-wrapper .ant-table-tbody>tr>td {
+                padding: 4px;
+            }
+
+            .ant-table-wrapper .ant-table-column-sorter {
+                margin-inline-start: 0px;
+            }
+
+            .ant-table-wrapper .ant-table-column-sorter-up {
+                font-size: 8px;
+            }
+
+            .ant-table-wrapper .ant-table-column-sorter-down {
+                font-size: 8px;
+            }
+
+            .ant-pagination {
+                max-width: unset;
+            }
+        }
+    }
+}

package/src/components/index.tsx

@@ -25,3 +25,4 @@ export * from './CategoryReadOnly';
 export * from './Notification';
 export * from './ExportTableData';
 export * from './DropdownButton';
+export * from './ResponsiveTable';