@omniumretail/component-library 1.0.65 → 1.0.66

package/src/components/Table/index.tsx

@@ -1,271 +1,271 @@
-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 FilterOptions {
-    value: string;
-    label: string;
-    direction: string;
-}
-
-export interface Actions {
-    key: string;
-    label: string;
-}
-
-export enum sortBy {
-    asc = 'asc',
-    desc = 'desc',
-}
-
-export interface TableCustomProps extends TableProps<any> {
-    fieldsToSort?: any[],
-    selectPlaceholder?: string,
-    onSort?: (field: any, sortBy: 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;
-}
-
-export const Table = (props: TableCustomProps) => {
-    const { t } = useTranslation();
-
-    const {
-        dataSource = undefined,
-        fieldsToSort,
-        selectPlaceholder = 'Sort By',
-        onSort,
-        headingTranslationsKey,
-        actionsArray: items,
-        rowKeyValue,
-        hiddenColumns,
-        rowSelection,
-        onSelectAllButtonClick,
-        AllItemsShowing,
-        selectAllStatus,
-        isTableDataRefreshed,
-        tableLoading,
-        tableMaxHeight,
-        sortByColumns,
-    } = 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;
-                }
-
-                return ({
-                    title: headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key,
-                    dataIndex: key,
-                    key: key,
-                    ellipsis: false,
-                    sorter: sortByColumns,
-                })
-            }).filter(el => el !== undefined) as any;
-
-            let columnActions = {
-                key: 'action',
-                title: headingTranslationsKey ? t(`${headingTranslationsKey}.${'action'}`) : 'action',
-                dataIndex: 6,
-                ellipsis: false,
-                render: () => (
-                    <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);
-
-            setCustomColumns(columns);
-
-            // Filters
-            const dataKeysToFilter = Object.keys(dataSource?.[0]).filter((el) => fieldsToSort?.includes(el));
-
-            const filters = ([] as FilterOptions[]).concat(
-                ...dataKeysToFilter.map(key => ({
-                    value: `${key}-${sortBy.desc}`,
-                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortBy.desc})`,
-                    direction: `${sortBy.desc}`,
-                })),
-                ...dataKeysToFilter.map(key => ({
-                    value: `${key}-${sortBy.asc}`,
-                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortBy.asc})`,
-                    direction: `${sortBy.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>
-    );
-};
+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 FilterOptions {
+    value: string;
+    label: string;
+    direction: string;
+}
+
+export interface Actions {
+    key: string;
+    label: string;
+}
+
+export enum sortBy {
+    asc = 'asc',
+    desc = 'desc',
+}
+
+export interface TableCustomProps extends TableProps<any> {
+    fieldsToSort?: any[],
+    selectPlaceholder?: string,
+    onSort?: (field: any, sortBy: 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;
+}
+
+export const Table = (props: TableCustomProps) => {
+    const { t } = useTranslation();
+
+    const {
+        dataSource = undefined,
+        fieldsToSort,
+        selectPlaceholder = 'Sort By',
+        onSort,
+        headingTranslationsKey,
+        actionsArray: items,
+        rowKeyValue,
+        hiddenColumns,
+        rowSelection,
+        onSelectAllButtonClick,
+        AllItemsShowing,
+        selectAllStatus,
+        isTableDataRefreshed,
+        tableLoading,
+        tableMaxHeight,
+        sortByColumns,
+    } = 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;
+                }
+
+                return ({
+                    title: headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key,
+                    dataIndex: key,
+                    key: key,
+                    ellipsis: false,
+                    sorter: sortByColumns,
+                })
+            }).filter(el => el !== undefined) as any;
+
+            let columnActions = {
+                key: 'action',
+                title: headingTranslationsKey ? t(`${headingTranslationsKey}.${'action'}`) : 'action',
+                dataIndex: 6,
+                ellipsis: false,
+                render: () => (
+                    <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);
+
+            setCustomColumns(columns);
+
+            // Filters
+            const dataKeysToFilter = Object.keys(dataSource?.[0]).filter((el) => fieldsToSort?.includes(el));
+
+            const filters = ([] as FilterOptions[]).concat(
+                ...dataKeysToFilter.map(key => ({
+                    value: `${key}-${sortBy.desc}`,
+                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortBy.desc})`,
+                    direction: `${sortBy.desc}`,
+                })),
+                ...dataKeysToFilter.map(key => ({
+                    value: `${key}-${sortBy.asc}`,
+                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortBy.asc})`,
+                    direction: `${sortBy.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>
+    );
+};