@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/core/VirtualTable/hooks/useLayout.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {useDebounce} from "./useDebounce";
+import {useScrollBarSize} from "./useScrollBarSize";
+import {useColumnWidths} from "./useColumnWidths";
+import {useStickyPosition} from "./useStickyPosition";
+import {useScrollToEdge} from "./useScrollToEdge";
+import type {VirtualTableColumn} from "../type";
+
+interface Props<RowType extends object> {
+    headersRef: React.RefObject<HTMLDivElement>;
+    scrollContentRef: React.RefObject<HTMLDivElement>;
+    isScrollable: boolean;
+    columns: VirtualTableColumn<RowType>[];
+}
+
+export const useLayout = function <RowType extends object>({headersRef, scrollContentRef, isScrollable, columns}: Props<RowType>) {
+    const {calculateColWidths, columnWidths} = useColumnWidths(headersRef);
+    const {calculateScrollBarSize, scrollBarSize} = useScrollBarSize(scrollContentRef, isScrollable);
+    const {isScrollToEdge, isScrollToLeft, isScrollToRight} = useScrollToEdge(scrollContentRef);
+    const stickyPosition = useStickyPosition(columns, columnWidths);
+
+    const debouncedCalculateColWidths = useDebounce(calculateColWidths);
+    const debouncedCalculateScrollBarSize = useDebounce(calculateScrollBarSize);
+    const debouncedIsScrollToEdge = useDebounce(isScrollToEdge);
+
+    const handler = React.useCallback(
+        (event: TransitionEvent | AnimationEvent) => {
+            if (event.currentTarget && "querySelector" in event.currentTarget && headersRef.current) {
+                const element = event.currentTarget as HTMLElement;
+                const result = element.querySelector(".g-virtual-table");
+                if (result) {
+                    debouncedCalculateColWidths();
+                    debouncedCalculateScrollBarSize();
+                    debouncedIsScrollToEdge();
+                }
+            }
+        },
+        [debouncedCalculateColWidths, debouncedCalculateScrollBarSize, headersRef, debouncedIsScrollToEdge]
+    );
+
+    React.useEffect(() => {
+        document.body.addEventListener("transitionend", handler);
+        document.body.addEventListener("animationend", handler);
+        return () => {
+            document.body.removeEventListener("transitionend", handler);
+            document.body.removeEventListener("animationend", handler);
+        };
+    }, [handler]);
+
+    return {
+        columnWidths,
+        scrollBarSize,
+        stickyPosition,
+        isScrollToEdge,
+        isScrollToLeft,
+        isScrollToRight,
+    };
+};

package/src/core/VirtualTable/hooks/useRowExpand.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import type {VirtualTableRowExpand, VirtualTableColumn} from "../type";
+
+interface Props<RowType extends object> {
+    columns: VirtualTableColumn<RowType>[];
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const useRowExpand = function <RowType extends object>({columns, rowExpand}: Props<RowType>) {
+    const transformedColumns = React.useMemo(() => {
+        const resultColumns = columns;
+        if (rowExpand) {
+            const {width, fixed, title} = rowExpand;
+
+            const rowExpandColumn: VirtualTableColumn<RowType> = {
+                width,
+                title: title || "",
+                fixed: fixed ? "right" : undefined,
+                renderData: () => null,
+            };
+            resultColumns.push(rowExpandColumn);
+        }
+        return resultColumns;
+    }, [columns, rowExpand]);
+
+    return transformedColumns;
+};

package/src/core/VirtualTable/hooks/useRowSelection.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {Checkbox} from "../../Checkbox";
+import {ArrayUtil} from "../../../internal/ArrayUtil";
+import type {VirtualTableColumn, VirtualTableRowSelection} from "../type";
+
+interface Props<RowType extends object> {
+    columns: VirtualTableColumn<RowType>[];
+    dataSource: RowType[];
+    rowSelection?: VirtualTableRowSelection<RowType>;
+    rowKey: "index" | React.Key;
+}
+
+export const useRowSelection = function <RowType extends object>({columns, dataSource, rowSelection, rowKey}: Props<RowType>) {
+    const transformedColumns = React.useMemo(() => {
+        if (!rowSelection) {
+            return [...columns];
+        }
+
+        const {width, onChange, selectedRowKeys, fixed, isDisabled, isSelectAllDisabled, title} = rowSelection;
+
+        const allSelectionRowKeys: React.Key[] = [];
+        const allSelectionRows: RowType[] = [];
+        const unAllSelectionRowKeys: React.Key[] = [];
+        const unAllSelectionRows: RowType[] = [];
+        const enabledRowKeys: React.Key[] = [];
+        const enabledCheckedRowKeys: React.Key[] = [];
+
+        dataSource.forEach((data, rowIndex) => {
+            const key = rowKey === "index" ? rowIndex : data[rowKey];
+            const isSelected = selectedRowKeys.findIndex(_ => _ === key) !== -1;
+            const isDisabledRow = isDisabled?.(data, rowIndex) || false;
+            if (isDisabledRow) {
+                if (isSelected) {
+                    allSelectionRowKeys.push(key);
+                    allSelectionRows.push(data[rowIndex]);
+                    unAllSelectionRowKeys.push(key);
+                    unAllSelectionRows.push(data[rowIndex]);
+                }
+            } else {
+                enabledRowKeys.push(key);
+                isSelected && enabledCheckedRowKeys.push(key);
+                allSelectionRowKeys.push(key);
+                allSelectionRows.push(data[rowIndex]);
+            }
+        });
+
+        const onSelectAll = (val: boolean) => {
+            return val ? onChange(allSelectionRowKeys, allSelectionRows) : onChange(unAllSelectionRowKeys, unAllSelectionRows);
+        };
+
+        const isAllSelectionDisabled = isSelectAllDisabled || enabledRowKeys.length === 0;
+        const isAllSelected = enabledCheckedRowKeys.length > 0 && enabledRowKeys.length === enabledCheckedRowKeys.length;
+        const isIndeterminate = enabledCheckedRowKeys.length > 0 && !isAllSelected;
+
+        const rowSelectionColumn: VirtualTableColumn<RowType> = {
+            width,
+            fixed: fixed ? "left" : undefined,
+            title: title || <Checkbox disabled={isAllSelectionDisabled} indeterminate={isIndeterminate} onChange={onSelectAll} value={isAllSelected} />,
+            renderData: (data, rowIndex) => {
+                const key = rowKey === "index" ? rowIndex : data[rowKey];
+                const toggledSelectedRowKeys = ArrayUtil.toggleElement(selectedRowKeys, key);
+                const toggledSelectedRow = ArrayUtil.toggleElement(dataSource, data);
+                const isChecked = selectedRowKeys.findIndex(_ => _ === key) !== -1;
+                return <Checkbox disabled={isDisabled?.(data, rowIndex)} value={isChecked} onChange={() => onChange(toggledSelectedRowKeys, toggledSelectedRow)} />;
+            },
+        };
+
+        return [rowSelectionColumn, ...columns];
+    }, [columns, dataSource, rowKey, rowSelection]);
+
+    return transformedColumns;
+};

package/src/core/VirtualTable/hooks/useScrollBarSize.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+export const useScrollBarSize = (scrollContentRef: React.RefObject<HTMLDivElement>, isScrollable: boolean) => {
+    const [scrollBarSize, setScrollBarSize] = React.useState<number>(0);
+
+    const calculateScrollBarSize = React.useCallback(() => {
+        if (scrollContentRef.current) {
+            const {clientWidth, offsetWidth} = scrollContentRef.current;
+            setScrollBarSize(offsetWidth - clientWidth);
+        }
+    }, [scrollContentRef, setScrollBarSize]);
+
+    React.useEffect(() => {
+        if (isScrollable && !scrollBarSize) {
+            calculateScrollBarSize();
+        }
+    }, [calculateScrollBarSize, isScrollable, scrollBarSize]);
+
+    return {
+        calculateScrollBarSize,
+        scrollBarSize,
+    };
+};

package/src/core/VirtualTable/hooks/useScrollToEdge.ts

@@ -0,0 +1,36 @@
+import React, {useEffect} from "react";
+
+export const useScrollToEdge = (scrollContentRef: React.RefObject<HTMLElement>) => {
+    const [isScrollToLeft, setIsScrollToLeft] = React.useState(false);
+    const [isScrollToRight, setIsScrollToRight] = React.useState(false);
+    const [isScrollToTop, setIsScrollToTop] = React.useState(false);
+    const [isScrollToBottom, setIsScrollToBottom] = React.useState(false);
+
+    const isScrollToEdge = React.useCallback(() => {
+        if (scrollContentRef.current) {
+            const {scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight} = scrollContentRef.current;
+            const isScrollLeft = scrollLeft <= 1;
+            const isScrollRight = scrollLeft >= scrollWidth - clientWidth;
+
+            const isScrollTop = scrollTop <= 1;
+            const isScrollBottom = scrollTop >= scrollHeight - clientHeight;
+            setIsScrollToLeft(isScrollLeft);
+            setIsScrollToRight(isScrollRight);
+            setIsScrollToTop(isScrollTop);
+            setIsScrollToBottom(isScrollBottom);
+        }
+    }, [scrollContentRef]);
+
+    // initialize
+    useEffect(() => {
+        isScrollToEdge();
+    }, [isScrollToEdge]);
+
+    return {
+        isScrollToEdge,
+        isScrollToLeft,
+        isScrollToRight,
+        isScrollToTop,
+        isScrollToBottom,
+    };
+};

package/src/core/VirtualTable/hooks/useStickyPosition.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import {ArrayUtil} from "../../../internal/ArrayUtil";
+import type {VirtualTableColumn, StickyPosition} from "../type";
+
+export const useStickyPosition = <RowType extends object>(columns: VirtualTableColumn<RowType>[], columnWidths: number[]): Record<number, StickyPosition> => {
+    return React.useMemo(() => {
+        const result: Record<number, StickyPosition> = {};
+        const left: number[] = [];
+        const right: number[] = [];
+
+        const leftFixedCols = ArrayUtil.compactMap(columns, (_, columnIndex) => (_.fixed === "left" ? {columnIndex, width: columnWidths[columnIndex]} : null));
+        // the right sticky value stack in reverse direction
+        const rightFixedCols = ArrayUtil.compactMap(columns, (_, columnIndex) => (_.fixed === "right" ? {columnIndex, width: columnWidths[columnIndex]} : null)).reverse();
+
+        leftFixedCols.forEach((column, idx) => {
+            const stackedPositionValue = left.reduce((acc, prev) => acc + prev, 0);
+            left.push(column.width);
+            result[column.columnIndex] = {value: stackedPositionValue, isLast: idx === leftFixedCols.length - 1};
+        });
+
+        rightFixedCols.forEach((column, idx) => {
+            const stackedPositionValue = right.reduce((acc, prev) => acc + prev, 0);
+            right.unshift(column.width);
+            result[column.columnIndex] = {value: stackedPositionValue, isLast: idx === rightFixedCols.length - 1};
+        });
+        return result;
+    }, [columnWidths, columns]);
+};

package/src/core/VirtualTable/hooks/useTransformColumn.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import {useRowExpand} from "./useRowExpand";
+import {useRowSelection} from "./useRowSelection";
+import type {VirtualTableColumn, VirtualTableRowExpand, VirtualTableRowSelection} from "../type";
+
+interface Props<RowType extends object> {
+    columns: VirtualTableColumn<RowType>[];
+    dataSource: RowType[];
+    rowKey: "index" | React.Key;
+    rowSelection?: VirtualTableRowSelection<RowType>;
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const useTransformColumn = function <RowType extends object>({columns, dataSource, rowKey, rowExpand, rowSelection}: Props<RowType>) {
+    const columnsWithRowSelection = useRowSelection({columns, dataSource, rowSelection, rowKey});
+    const transformedColumns = useRowExpand({columns: columnsWithRowSelection, rowExpand});
+
+    return transformedColumns;
+};

package/src/core/VirtualTable/index.less

@@ -0,0 +1,162 @@
+.fixed-column-shadow(@position) {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 100%;
+    pointer-events: none;
+    background-color: transparent;
+    top: 0;
+    bottom: -1px;
+    transition: box-shadow 0.3s;
+
+    & when (@position = "right") {
+        left: 0;
+        transform: translate(-100%);
+        box-shadow: inset -10px 0 8px -8px #00000026;
+    }
+
+    & when (@position = "left") {
+        right: 0;
+        transform: translate(100%);
+        box-shadow: inset 10px 0 8px -8px #00000026;
+    }
+}
+
+.g-virtual-table {
+    position: relative;
+    transform: translateX(0);
+
+    .mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgb(255 255 255 / 70%);
+        z-index: 15;
+    }
+
+    .scroll-content {
+        position: relative;
+        overflow: auto;
+
+        .table {
+            min-height: 100%;
+
+            .table-headers {
+                display: flex;
+                flex-wrap: nowrap;
+                position: fixed;
+                top: 0;
+                z-index: 10;
+                min-width: 100%;
+                overflow-x: hidden;
+
+                .table-header {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background-color: #f2f2f2;
+                    height: 100%;
+                    position: relative;
+
+                    &:not(:last-of-type)::before {
+                        background-color: rgb(0 0 0 / 6%);
+                        content: "";
+                        height: 60%;
+                        position: absolute;
+                        right: 0;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        transition: background-color 0.3s;
+                        width: 1px;
+                    }
+
+                    &.fixed {
+                        position: sticky;
+                        z-index: 5;
+
+                        &.last {
+                            &.left {
+                                &::after {
+                                    .fixed-column-shadow("left");
+                                }
+                            }
+
+                            &.right {
+                                &::after {
+                                    .fixed-column-shadow("right");
+                                }
+                            }
+
+                            &.hide-shadow::after {
+                                box-shadow: none;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .table-body {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                height: 100%;
+
+                .table-row {
+                    width: max-content;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    transition: transform 0.3s;
+
+                    .table-cell {
+                        display: inline-flex;
+                        justify-content: center;
+                        align-items: center;
+                        background-color: #fff;
+                        word-break: break-word;
+                        vertical-align: bottom;
+
+                        &.fixed {
+                            position: sticky;
+                            z-index: 5;
+
+                            &.last {
+                                &.left {
+                                    &::after {
+                                        .fixed-column-shadow("left");
+                                    }
+                                }
+
+                                &.right {
+                                    &::after {
+                                        .fixed-column-shadow("right");
+                                    }
+                                }
+
+                                &.hide-shadow::after {
+                                    box-shadow: none;
+                                }
+                            }
+                        }
+                    }
+
+                    .expand-row {
+                        display: block;
+                        width: 100%;
+                        max-height: 0;
+
+                        &.expanded {
+                            max-height: 400px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/core/VirtualTable/index.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import {useVirtual} from "react-virtual";
+import {classNames} from "../../util/ClassNames";
+import {Spin} from "../Spin";
+import {useLayout} from "./hooks/useLayout";
+import {useTransformColumn} from "./hooks/useTransformColumn";
+import {TableRow} from "./TableRow";
+import {TableHeader} from "./TableHeader";
+import type {SafeReactChild, StringKey} from "../../internal/type";
+import type {ColumnFixedPosition, VirtualTableColumn, VirtualTableRowExpand, VirtualTableRowSelection} from "./type";
+import "./index.less";
+
+export interface VirtualTableProps<RowType extends object> {
+    dataSource: RowType[];
+    columns: VirtualTableColumn<RowType>[];
+    scrollY: number;
+    rowHeight: number;
+    className?: string;
+    rowClassName?: string;
+    /**
+     * if scrollX is not provided, width: 100% will be used
+     * if width: 100% is used, please wrap the table with a container
+     */
+    scrollX?: number;
+    loading?: boolean;
+    emptyPlaceholder?: SafeReactChild;
+    rowSelection?: VirtualTableRowSelection<RowType>;
+    onRowClick?: (record: RowType, rowIndex: number) => void;
+    /**
+     * Default: index
+     */
+    rowKey?: StringKey<RowType> | "index";
+    headerHeight?: number;
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const VirtualTable = Object.assign(
+    function <RowType extends object>({
+        columns,
+        rowHeight,
+        scrollY,
+        dataSource,
+        className,
+        rowClassName,
+        loading,
+        emptyPlaceholder,
+        rowSelection,
+        onRowClick,
+        scrollX,
+        rowExpand,
+        rowKey = "index",
+        headerHeight = 50,
+    }: VirtualTableProps<RowType>) {
+        const size = dataSource.length;
+        const scrollContentRef = React.useRef<HTMLDivElement>(null);
+        const headersRef = React.useRef<HTMLDivElement>(null);
+        const estimateSize = React.useCallback(() => rowHeight, [rowHeight]);
+        const overscan = rowExpand ? Math.floor(scrollY / rowHeight) : 1;
+
+        const {virtualItems, totalSize} = useVirtual({
+            size,
+            parentRef: scrollContentRef,
+            estimateSize,
+            overscan,
+        });
+        const transformedColumns = useTransformColumn({columns, dataSource, rowSelection, rowKey, rowExpand});
+
+        const isScrollable = totalSize > scrollY;
+        const tableHeight = scrollY + headerHeight;
+        const tableBodyHeight = scrollY;
+        const emptyElement = emptyPlaceholder || "暂无数据";
+        const {scrollBarSize, stickyPosition, columnWidths, isScrollToEdge, isScrollToLeft, isScrollToRight} = useLayout({headersRef, scrollContentRef, isScrollable, columns: transformedColumns});
+
+        const lastShownColumnIndex: number = React.useMemo(() => transformedColumns.length - 1 - [...transformedColumns].reverse().findIndex(_ => _.display !== "hidden"), [transformedColumns]);
+
+        // handle the edge position & shadow of the fixed columns
+        const getFixedColumnClassNames = React.useCallback(
+            (fixed: ColumnFixedPosition | undefined, columnIndex: number): (string | undefined)[] => {
+                const isFixedClassName = fixed ? "fixed" : "";
+                const isLastFixedClassName = fixed && stickyPosition[columnIndex]?.isLast ? "last" : "";
+                const fixedPositionClassName = fixed;
+                const hideShadowClassName = (fixed === "left" && isScrollToLeft) || (fixed === "right" && isScrollToRight) ? "hide-shadow" : "";
+                return [isFixedClassName, isLastFixedClassName, fixedPositionClassName, hideShadowClassName];
+            },
+            [isScrollToLeft, isScrollToRight, stickyPosition]
+        );
+
+        const onScroll = React.useCallback(() => {
+            requestAnimationFrame(() => {
+                // only trigger in horizontal direction
+                if (!scrollContentRef.current || !headersRef.current || scrollContentRef.current.scrollLeft === headersRef.current.scrollLeft) return;
+
+                isScrollToEdge();
+                // sync scrolling in header
+                headersRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
+            });
+        }, [isScrollToEdge]);
+
+        return (
+            <div className={classNames("g-virtual-table", className)} style={{width: scrollX || "100%", height: tableHeight}}>
+                {loading && (
+                    <div className="mask">
+                        <Spin spinning={loading} />
+                    </div>
+                )}
+                <div className="scroll-content" ref={scrollContentRef} style={{height: tableBodyHeight, top: headerHeight}} onScroll={onScroll}>
+                    <div className="table" style={{height: totalSize}}>
+                        <TableHeader
+                            headersRef={headersRef}
+                            headerHeight={headerHeight}
+                            columns={transformedColumns}
+                            stickyPosition={stickyPosition}
+                            getFixedColumnClassNames={getFixedColumnClassNames}
+                        />
+                        <div className="table-body">
+                            {dataSource.length === 0
+                                ? emptyElement
+                                : columnWidths.length > 0 &&
+                                  virtualItems.map(virtualItem => (
+                                      <TableRow
+                                          key={virtualItem.index}
+                                          rowHeight={rowHeight}
+                                          onRowClick={onRowClick}
+                                          virtualItem={virtualItem}
+                                          data={dataSource[virtualItem.index]}
+                                          columns={transformedColumns}
+                                          columnWidths={columnWidths}
+                                          scrollBarSize={scrollBarSize}
+                                          stickyPosition={stickyPosition}
+                                          lastShownColumnIndex={lastShownColumnIndex}
+                                          rowClassName={rowClassName}
+                                          getFixedColumnClassNames={getFixedColumnClassNames}
+                                          rowExpand={rowExpand}
+                                      />
+                                  ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+    {displayName: "VirtualTable"}
+);

package/src/core/VirtualTable/type.ts

@@ -0,0 +1,59 @@
+import type {SafeReactChild, SafeReactChildren} from "../../internal/type";
+
+export type ColumnFixedPosition = "left" | "right";
+
+export interface StickyPosition {
+    value: number;
+    isLast: boolean;
+}
+
+/**
+ * Similar usage of Antd Table but only support partial features: fixed columns, row selection, on row click
+ */
+export type VirtualTableRowSelection<RowType extends object> = {
+    width: number;
+    selectedRowKeys: React.Key[];
+    onChange: (selectedRowKeys: React.Key[], selectedRows: RowType[]) => void;
+    /**
+     * Can only sticky in left
+     */
+    fixed?: boolean;
+    isDisabled?: (data: RowType, rowIndex: number) => boolean;
+    isSelectAllDisabled?: boolean;
+    /**
+     * Attention:
+     * If title is provided, the select all checkbox wil be overridden
+     */
+    title?: SafeReactChild;
+};
+
+export type VirtualTableRowExpand<RowType extends object> = {
+    width: number;
+    renderExpandRow: (record: RowType, rowIndex: number) => SafeReactChild;
+    ExpandButton: React.ComponentType<{onClick: () => void}>;
+    title?: SafeReactChild;
+    /**
+     * Can only sticky in right
+     */
+    fixed?: boolean;
+    isDefaultExpanded?: boolean;
+};
+
+export type VirtualTableColumn<RowType extends object> = {
+    title: SafeReactChild;
+    width: number;
+    /**
+     * Attention:
+     * If renderData return null, the corresponding table cell will not render
+     */
+    renderData: (record: RowType, rowIndex: number) => SafeReactChildren | undefined;
+    align?: "left" | "right" | "center";
+    display?: "default" | "hidden";
+    fixed?: "left" | "right";
+    /**
+     * Attention:
+     * The overridden cell should return null in renderData props:
+     * e.g. [{colSpan: 3, renderData: () => <div />}, {renderData: () => null}], {renderData: () => null}
+     */
+    colSpan?: (record: RowType, rowIndex: number, colIndex: number) => number;
+};

package/src/core/WithExplanation/index.less

@@ -0,0 +1,30 @@
+.g-with-explanation {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    &.with-icon-left {
+        flex-flow: row-reverse nowrap;
+
+        .icon-container {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .icon-container {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        font-size: 10px;
+        margin-left: 5px;
+        cursor: help;
+    }
+}
+
+.g-with-explanation-tooltip {
+    max-width: 500px;
+}