@pinnacle0/web-ui 0.3.23 → 0.3.26

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

@@ -1,58 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,162 +0,0 @@
-.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

@@ -1,143 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,30 +0,0 @@
-.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;
-}