@omniumretail/component-library 1.2.70 → 1.2.72

package/src/components/Table/Table.stories.tsx

@@ -1,337 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Table, TableCustomProps } from '.';
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export default {
-    title: 'Table',
-    component: Table,
-} as Meta;
-
-const Template: StoryFn<TableCustomProps> = (args: any) => {
-    const { t } = useTranslation();
-    const [pageInfo, setPageInfo] = useState<any>({});
-    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
-    const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
-
-    const handleSortByColumnChange = (sortState: any) => {
-        console.log('handleSortChange called with:', sortState);
-        // Do something with the new sort state
-        // For example, trigger an API call
-    };
-    
-    return <Table scroll={{y: 1000, x: 3000}}   fixedColumns={[
-      { dataIndex: 'name', side: 'left' },
-      { dataIndex: 'mecanographicNumber', side: 'left' },
-    ]} customColumnWidths={[{columnName: 'name', width: "2%"}]} columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
-        [
-            { key: '1', label: `${t('actions.one')}`, onClick: () => {
-                console.log('onClick');
-            } },
-            { key: '2', label: `${t('actions.two')}` },
-            {
-                key: '3', label: 'label 3'
-            }
-        ]
-    } {...args}></Table>;
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    selectPlaceholder: 'Order by',
-    rowKeyValue: 'mecanographicNumber',
-    dataSource: [
-        {
-            id: `1`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `2`,
-            name: `Filipe Martins`,
-            mecanographicNumber: "32",
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-          },
-          {
-            id: `3`,
-            name: `Anna Astori`,
-            mecanographicNumber: "3212",
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-          },
-          {
-            id: `4`,
-            name: `Yield Ona`,
-            mecanographicNumber: "21232",
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `5`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `6`,
-            name: `Filipe Martins`,
-            mecanographicNumber: "32",
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-          },
-          {
-            id: `7`,
-            name: `Anna Astori`,
-            mecanographicNumber: "3212",
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-          },
-          {
-            id: `8`,
-            name: `Yield Ona`,
-            mecanographicNumber: "21232",
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `9`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `10`,
-            name: `Filipe Martins`,
-            mecanographicNumber: "32",
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-          },
-          {
-            id: `11`,
-            name: `Anna Astori`,
-            mecanographicNumber: "3212",
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-          },
-          {
-            id: `12`,
-            name: `Yield Ona`,
-            mecanographicNumber: "21232",
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `13`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `14`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `15`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `16`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `17`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-          {
-            id: `18`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-          },
-    ],
-    pagination: {
-        total: 24,
-        pageSize: 20
-    },
-    hiddenColumns: ['id'],
-    sortByColumns: true,
-    columnsToSort: ["name", "mecanographicNumber"]
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    dataSource: [
-        {
-            key: `1`,
-            name: `as John Brown`,
-            mecanographicNumber: 232,
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            key: `2`,
-            name: `bv Mary Brown`,
-            mecanographicNumber: 32,
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            key: `3`,
-            name: `as Anna Astori`,
-            mecanographicNumber: 3212,
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            key: `4`,
-            name: `bv Yield Ona`,
-            mecanographicNumber: 21232,
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-    pagination: {
-        total: 4,
-        pageSize: 10
-    }
-};
-
-export const WithCheckbox = Template.bind({});
-WithCheckbox.args = {
-    dataSource: [
-        {
-            key: `1`,
-            name: `John Brown`,
-            mecanographicNumber: 232,
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            key: `2`,
-            name: `Mary Brown`,
-            mecanographicNumber: 32,
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            key: `3`,
-            name: `Anna Astori`,
-            mecanographicNumber: 3212,
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            key: `4`,
-            name: `Yield Ona`,
-            mecanographicNumber: 21232,
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-};
-
-export const withActions = Template.bind({});
-withActions.args = {
-    fieldsToSort: ['store', 'mecanographicNumber'],
-    selectPlaceholder: 'Order by',
-    dataSource: [
-        {
-            key: `1`,
-            name: `John Brown`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            key: `2`,
-            name: `Mary Brown`,
-            mecanographicNumber: "32",
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            key: `3`,
-            name: `Anna Astori`,
-            mecanographicNumber: "3212",
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            key: `4`,
-            name: `Yield Ona`,
-            mecanographicNumber: "21232",
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-    pagination: {
-        total: 24,
-        pageSize: 4
-    },
-    rowSelection: {
-        type: 'checkbox',
-        selectedRowKeys: ['1']
-    }
-};
-
-export const NoData = Template.bind({});
-NoData.args = {
-    fieldsToSort: ['store', 'mecanographicNumber'],
-    selectPlaceholder: 'Order by',
-    rowKeyValue: 'mecanographicNumber',
-    dataSource: undefined,
-    pagination: {
-        total: 24,
-        pageSize: 4
-    },
-    hiddenColumns: ['id']
-};

package/src/components/Table/index.tsx

@@ -1,313 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Space, TableProps, Select, Dropdown } 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;
-    columnsToSort?: string[];
-    fixedColumns?: { dataIndex: string; side: 'left' | 'right' }[];
-    customColumnWidths?: { columnName: string; width: string }[];
-    getRowActions?: (record: any) => any;
-}
-
-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,
-        columnsToSort,
-        fixedColumns,
-        customColumnWidths,
-        getRowActions
-    } = 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: (_: any, record: any) => {
-                    const rowActions = getRowActions ? getRowActions(record) : null;
-
-                    if ((!items?.[0] && !rowActions)) return null;
-
-                    const actions = rowActions ? rowActions : items;
-
-                    return (
-                        <Space size="middle">
-                            <Dropdown menu={{ items: actions }}>
-                                <a>
-                                    <MoreOutlined style={{ color: 'var(--color-blue)', transform: 'scale(1.6)' }} />
-                                </a>
-                            </Dropdown>
-                        </Space>
-                    );
-                },
-            };
-
-            (items || getRowActions) && 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 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>
-    );
-};