@etsoo/materialui 1.0.1

package/src/DataGridEx.tsx

@@ -0,0 +1,713 @@
+import { css } from '@emotion/css';
+import {
+    GridAlignGet,
+    GridCellFormatterProps,
+    GridCellRendererProps,
+    GridColumn,
+    GridHeaderCellRendererProps,
+    GridLoaderStates,
+    ScrollerGrid,
+    ScrollerGridForwardRef,
+    ScrollerGridItemRendererProps,
+    ScrollerGridProps,
+    useCombinedRefs
+} from '@etsoo/react';
+import { DataTypes, IdDefaultType, Utils } from '@etsoo/shared';
+import {
+    Box,
+    BoxProps,
+    Checkbox,
+    Paper,
+    TableSortLabel,
+    useTheme
+} from '@mui/material';
+import React from 'react';
+import { DataGridRenderers } from './DataGridRenderers';
+import { MouseEventWithDataHandler } from './MUGlobal';
+
+/**
+ * Footer item renderer props
+ */
+export type DataGridExFooterItemRendererProps<T extends object> = {
+    column: GridColumn<T>;
+    index: number;
+    states: GridLoaderStates<T>;
+    cellProps: any;
+    checkable: boolean;
+};
+
+/**
+ * Extended DataGrid with VariableSizeGrid props
+ */
+export type DataGridExProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> = Omit<
+    ScrollerGridProps<T, D>,
+    'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
+> & {
+    /**
+     * Alternating colors for odd/even rows
+     */
+    alternatingColors?: [string?, string?];
+
+    /**
+     * Checkable to choose multiple items
+     * @default false
+     */
+    checkable?: boolean;
+
+    /**
+     * Rows count to have the bottom border
+     */
+    borderRowsCount?: number;
+
+    /**
+     * Bottom height
+     */
+    bottomHeight?: number;
+
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+
+    /**
+     * Footer item renderer
+     */
+    footerItemRenderer?: (
+        rows: T[],
+        props: DataGridExFooterItemRendererProps<T>
+    ) => React.ReactNode;
+
+    /**
+     * Header height
+     * @default 56
+     */
+    headerHeight?: number;
+
+    /**
+     * Hide the footer
+     * @default false
+     */
+    hideFooter?: boolean;
+
+    /**
+     * Hover color
+     */
+    hoverColor?: string;
+
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Selectable to support hover over and out effect and row clickable
+     * @default true
+     */
+    selectable?: boolean;
+
+    /**
+     * Selected color
+     */
+    selectedColor?: string;
+
+    /**
+     * Width
+     */
+    width?: number;
+};
+
+// Borders
+const boldBorder = '2px solid rgba(224, 224, 224, 1)';
+const thinBorder = '1px solid rgba(224, 224, 224, 1)';
+
+// Scroll bar size
+const scrollbarSize = 16;
+
+// Minimum width
+const minWidth = 120;
+
+const createGridStyle = (
+    alternatingColors: [string?, string?],
+    selectedColor: string,
+    hoverColor: string
+) => {
+    return css({
+        '.DataGridEx-Selected': {
+            backgroundColor: selectedColor
+        },
+        '.DataGridEx-Hover:not(.DataGridEx-Selected)': {
+            backgroundColor: hoverColor
+        },
+        '& .DataGridEx-Cell0:not(.DataGridEx-Hover):not(.DataGridEx-Selected)':
+            {
+                backgroundColor: alternatingColors[0]
+            },
+        '& .DataGridEx-Cell1:not(.DataGridEx-Hover):not(.DataGridEx-Selected)':
+            {
+                backgroundColor: alternatingColors[1]
+            },
+        '& .DataGridEx-Cell-Border': {
+            borderBottom: thinBorder
+        }
+    });
+};
+
+const rowItems = (
+    div: HTMLDivElement,
+    callback: (div: HTMLDivElement) => void
+) => {
+    const row = div.dataset['row'];
+    if (div.parentElement == null || row == null) return;
+    doRowItems(div.parentElement, parseFloat(row), callback);
+};
+
+const doRowItems = (
+    parent: HTMLElement,
+    rowIndex: number,
+    callback: (div: HTMLDivElement) => void
+) => {
+    if (parent == null || rowIndex == null) return;
+
+    parent
+        ?.querySelectorAll<HTMLDivElement>(`div[data-row="${rowIndex}"]`)
+        .forEach((rowItem) => {
+            callback(rowItem);
+        });
+};
+
+/**
+ * Extended datagrid columns calculation
+ * @param columns
+ * @returns Total width and unset items
+ */
+export function DataGridExCalColumns<T>(columns: GridColumn<T>[]) {
+    return columns.reduce<{ total: number; unset: number }>(
+        (previousValue, currentItem) => {
+            previousValue.total +=
+                currentItem.width ?? currentItem.minWidth ?? minWidth;
+            if (currentItem.width == null) previousValue.unset++;
+            return previousValue;
+        },
+        {
+            total: 0,
+            unset: 0
+        }
+    );
+}
+
+/**
+ * Extended DataGrid with VariableSizeGrid
+ * @param props Props
+ * @returns Component
+ */
+export function DataGridEx<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(props: DataGridExProps<T, D>) {
+    // Theme
+    const theme = useTheme();
+
+    const defaultHeaderRenderer = (states: GridLoaderStates<T>) => {
+        const { orderBy } = states;
+        return (
+            <Box
+                className="DataGridEx-Header"
+                display="flex"
+                alignItems="center"
+                borderBottom={boldBorder}
+                fontWeight={500}
+                minWidth={widthCalculator.total}
+                height={headerHeight}
+            >
+                {columns.map((column, index) => {
+                    // Destruct
+                    const {
+                        align,
+                        field,
+                        header,
+                        headerCellRenderer,
+                        sortable,
+                        sortAsc = true,
+                        type
+                    } = column;
+
+                    // Header text
+                    const headerText = header ?? field;
+
+                    // Cell props
+                    const cellProps: BoxProps = {};
+
+                    // Sortable
+                    let sortLabel: React.ReactNode;
+                    if (headerCellRenderer) {
+                        sortLabel = headerCellRenderer({
+                            cellProps,
+                            column,
+                            columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
+                            states
+                        });
+                    } else if (sortable && field != null) {
+                        const active = orderBy === field;
+
+                        sortLabel = (
+                            <TableSortLabel
+                                active={active}
+                                direction={sortAsc ? 'asc' : 'desc'}
+                                onClick={(_event) => {
+                                    if (active) column.sortAsc = !sortAsc;
+
+                                    handleSort(field, column.sortAsc);
+                                }}
+                            >
+                                {headerText}
+                            </TableSortLabel>
+                        );
+                    } else {
+                        sortLabel = headerText;
+                    }
+
+                    return (
+                        <Box
+                            key={field ?? index.toString()}
+                            textAlign={GridAlignGet(align, type)}
+                            width={columnWidth(index)}
+                        >
+                            <Box
+                                className="DataGridEx-Cell"
+                                onMouseEnter={handleMouseEnter}
+                                {...cellProps}
+                            >
+                                {sortLabel}
+                            </Box>
+                        </Box>
+                    );
+                })}
+            </Box>
+        );
+    };
+
+    function defaultFooterRenderer(rows: T[], states: GridLoaderStates<T>) {
+        return (
+            <Box
+                className="DataGridEx-Footer"
+                display="flex"
+                alignItems="center"
+                borderTop={thinBorder}
+                marginTop="1px"
+                minWidth={widthCalculator.total}
+                height={bottomHeight - 1}
+            >
+                {columns.map((column, index) => {
+                    // Destruct
+                    const { align, field, type } = column;
+
+                    // Cell props
+                    const cellProps: BoxProps = {};
+
+                    // Cell
+                    const cell = footerItemRenderer
+                        ? footerItemRenderer(rows, {
+                              column,
+                              index: checkable ? index - 1 : index, // Ignore the checkbox case
+                              states,
+                              cellProps,
+                              checkable
+                          })
+                        : undefined;
+
+                    return (
+                        <Box
+                            key={'bottom-' + (field ?? index.toString())}
+                            textAlign={GridAlignGet(align, type)}
+                            width={columnWidth(index)}
+                        >
+                            <Box
+                                className="DataGridEx-Cell"
+                                onMouseEnter={handleMouseEnter}
+                                {...cellProps}
+                            >
+                                {cell}
+                            </Box>
+                        </Box>
+                    );
+                })}
+            </Box>
+        );
+    }
+
+    // Destruct
+    const {
+        alternatingColors = [theme.palette.grey[100], undefined],
+        borderRowsCount,
+        bottomHeight = 53,
+        checkable = false,
+        className,
+        columns,
+        defaultOrderBy,
+        height,
+        headerHeight = 56,
+        headerRenderer = defaultHeaderRenderer,
+        footerRenderer = defaultFooterRenderer,
+        footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer,
+        hideFooter = false,
+        hoverColor = '#f6f9fb',
+        idField = 'id' as D,
+        mRef = React.createRef(),
+        onClick,
+        onDoubleClick,
+        selectable = true,
+        selectedColor = '#edf4fb',
+        width,
+        ...rest
+    } = props;
+
+    if (checkable) {
+        const cbColumn: GridColumn<T> = {
+            field: 'selected' as any, // Avoid validation from data model
+            header: '',
+            sortable: false,
+            width: 50,
+            cellRenderer: ({
+                cellProps,
+                data,
+                selected
+            }: GridCellRendererProps<T, BoxProps>) => {
+                cellProps.sx = {
+                    padding: '4px!important'
+                };
+
+                return (
+                    <Checkbox
+                        color="primary"
+                        checked={selected}
+                        onChange={(_event, checked) => {
+                            refs.current.ref?.selectItem(data, checked);
+                        }}
+                    />
+                );
+            },
+            headerCellRenderer: ({
+                cellProps,
+                states
+            }: GridHeaderCellRendererProps<T, BoxProps>) => {
+                // 2 = border height
+                const hpad = (headerHeight - 42) / 2;
+                cellProps.sx = {
+                    padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
+                };
+
+                return (
+                    <Checkbox
+                        color="primary"
+                        indeterminate={
+                            states.selectedItems.length > 0 &&
+                            states.selectedItems.length < states.loadedItems
+                        }
+                        checked={states.selectedItems.length > 0}
+                        onChange={(_event, checked) =>
+                            refs.current.ref?.selectAll(checked)
+                        }
+                    />
+                );
+            }
+        };
+
+        // Update to the latest version
+        if (columns[0].field === 'selected') {
+            columns[0] = cbColumn;
+        } else {
+            columns.unshift(cbColumn);
+        }
+    }
+
+    const refs = React.useRef<{ ref?: ScrollerGridForwardRef<T> }>({});
+
+    const mRefLocal = useCombinedRefs(
+        mRef,
+        (ref: ScrollerGridForwardRef<T>) => {
+            if (ref == null) return;
+            refs.current.ref = ref;
+        }
+    );
+
+    // New sort
+    const handleSort = (field: string, asc?: boolean) => {
+        reset({ orderBy: field, orderByAsc: asc });
+    };
+
+    // Reset
+    const reset = (add: object) => {
+        refs.current.ref?.reset(add);
+    };
+
+    // Show hover tooltip for trucated text
+    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
+        const div = event.currentTarget;
+        const { innerText, offsetWidth, scrollWidth } = div;
+        if (offsetWidth < scrollWidth) {
+            div.title = innerText;
+        } else {
+            div.title = '';
+        }
+    };
+
+    // selectedRowIndex state
+    const selectedRowIndex = React.useRef(-1);
+
+    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+        const div = event.currentTarget;
+        const row = div.dataset['row'];
+        if (div.parentElement == null || row == null) return;
+
+        const rowIndex = parseFloat(row);
+
+        // No change
+        if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current) return;
+
+        if (selectedRowIndex.current != -1) {
+            doRowItems(
+                div.parentElement,
+                selectedRowIndex.current,
+                (preDiv) => {
+                    preDiv.classList.remove('DataGridEx-Selected');
+                }
+            );
+        }
+
+        rowItems(div, (currentDiv) => {
+            currentDiv.classList.add('DataGridEx-Selected');
+        });
+
+        selectedRowIndex.current = rowIndex;
+    };
+
+    const handleMouseOver = (event: React.MouseEvent<HTMLDivElement>) => {
+        rowItems(event.currentTarget, (div) => {
+            div.classList.add('DataGridEx-Hover');
+        });
+    };
+
+    const handleMouseOut = (event: React.MouseEvent<HTMLDivElement>) => {
+        rowItems(event.currentTarget, (div) => {
+            div.classList.remove('DataGridEx-Hover');
+        });
+    };
+
+    /**
+     * Item renderer
+     */
+    const itemRenderer = ({
+        columnIndex,
+        rowIndex,
+        style,
+        data,
+        selectedItems
+    }: ScrollerGridItemRendererProps<T>) => {
+        // Column
+        const {
+            align,
+            cellRenderer = DataGridRenderers.defaultCellRenderer,
+            field,
+            type,
+            valueFormatter,
+            renderProps
+        } = columns[columnIndex];
+
+        // Props
+        const formatProps: GridCellFormatterProps<T> = {
+            data,
+            field,
+            rowIndex,
+            columnIndex
+        };
+
+        let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
+        if (
+            borderRowsCount != null &&
+            borderRowsCount > 0 &&
+            (rowIndex + 1) % borderRowsCount === 0
+        ) {
+            rowClass += ` DataGridEx-Cell-Border`;
+        }
+
+        // Selected
+        const selected =
+            data != null &&
+            (selectedRowIndex.current === rowIndex ||
+                selectedItems.some(
+                    (selectedItem) =>
+                        selectedItem != null &&
+                        selectedItem[idField] === data[idField]
+                ));
+
+        if (selected) {
+            rowClass += ` DataGridEx-Selected`;
+        }
+
+        const cellProps: BoxProps = {
+            className: 'DataGridEx-Cell',
+            textAlign: GridAlignGet(align, type)
+        };
+
+        const child = cellRenderer({
+            data,
+            field,
+            formattedValue: valueFormatter
+                ? valueFormatter(formatProps)
+                : undefined,
+            selected,
+            type,
+            rowIndex,
+            columnIndex,
+            cellProps,
+            renderProps
+        });
+
+        return (
+            <div
+                className={rowClass}
+                style={style}
+                data-row={rowIndex}
+                data-column={columnIndex}
+                onMouseDown={
+                    selectable && !checkable ? handleMouseDown : undefined
+                }
+                onMouseOver={selectable ? handleMouseOver : undefined}
+                onMouseOut={selectable ? handleMouseOut : undefined}
+                onClick={(event) =>
+                    onClick && data != null && onClick(event, data)
+                }
+                onDoubleClick={(event) =>
+                    onDoubleClick && data != null && onDoubleClick(event, data)
+                }
+            >
+                <Box {...cellProps} onMouseEnter={handleMouseEnter}>
+                    {child}
+                </Box>
+            </div>
+        );
+    };
+
+    // Column width calculator
+    const widthCalculator = React.useMemo(
+        () => DataGridExCalColumns(columns),
+        [columns]
+    );
+
+    // Column width
+    const columnWidth = React.useCallback(
+        (index: number) => {
+            // Ignore null case
+            if (width == null) return 0;
+
+            // Column
+            const column = columns[index];
+            if (column.width != null) return column.width;
+
+            // More space
+            const leftWidth =
+                width -
+                widthCalculator.total -
+                (width < 800 ? 0 : scrollbarSize);
+
+            // Shared width
+            const sharedWidth =
+                leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
+
+            return (column.minWidth || minWidth) + sharedWidth;
+        },
+        [columns, width]
+    );
+
+    // Table
+    const table = React.useMemo(() => {
+        const defaultOrderByAsc = defaultOrderBy
+            ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
+            : undefined;
+
+        return (
+            <ScrollerGrid<T, D>
+                className={Utils.mergeClasses(
+                    'DataGridEx-Body',
+                    'DataGridEx-CustomBar',
+                    className,
+                    createGridStyle(
+                        alternatingColors,
+                        selectedColor,
+                        hoverColor
+                    )
+                )}
+                columnCount={columns.length}
+                columnWidth={columnWidth}
+                defaultOrderBy={defaultOrderBy}
+                defaultOrderByAsc={defaultOrderByAsc}
+                height={
+                    height -
+                    headerHeight -
+                    (hideFooter ? 0 : bottomHeight + 1) -
+                    scrollbarSize
+                }
+                headerRenderer={headerRenderer}
+                idField={idField}
+                itemRenderer={itemRenderer}
+                footerRenderer={hideFooter ? undefined : footerRenderer}
+                width={Math.max(width ?? 0, widthCalculator.total)}
+                mRef={mRefLocal}
+                {...rest}
+            />
+        );
+    }, [width]);
+
+    return (
+        <Paper
+            sx={{
+                fontSize: '0.875rem',
+                height,
+                '& .DataGridEx-Cell': {
+                    padding: 2,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                },
+                '& .DataGridEx-CustomBar': {
+                    '@media (min-width: 800px)': {
+                        '::-webkit-scrollbar': {
+                            width: scrollbarSize,
+                            height: scrollbarSize,
+                            backgroundColor: '#f6f6f6'
+                        },
+                        '::-webkit-scrollbar-thumb': {
+                            backgroundColor: 'rgba(0,0,0,0.4)',
+                            borderRadius: '2px'
+                        },
+                        '::-webkit-scrollbar-track-piece:start': {
+                            background: 'transparent'
+                        },
+                        '::-webkit-scrollbar-track-piece:end': {
+                            background: 'transparent'
+                        }
+                    }
+                }
+            }}
+        >
+            <div
+                className="DataGridEx-CustomBar"
+                style={{
+                    width,
+                    overflowX: 'auto',
+                    overflowY: 'hidden'
+                }}
+            >
+                {table}
+            </div>
+        </Paper>
+    );
+}