@pinnacle0/web-ui 0.3.36 → 0.3.39

package/src/core/Uploader.tsx

@@ -1,118 +0,0 @@
-import React from "react";
-import type {UploadChangeParam} from "antd/lib/upload";
-import type {HttpRequestHeader} from "antd/lib/upload/interface";
-import AntUpload from "antd/lib/upload";
-import type {SafeReactChildren} from "../internal/type";
-import type {UploaderProps, UploadLogInfo} from "../util/UploadUtil/type";
-import {Spin} from "./Spin";
-import "antd/lib/upload/style";
-
-export interface Props<SuccessResponseType, ErrorResponseType> extends UploaderProps<SuccessResponseType, ErrorResponseType> {
-    children: SafeReactChildren;
-    /**
-     * Please follow W3C standard for HTML accept string.
-     * Ref:
-     * https://www.w3schools.com/tags/att_input_accept.asp
-     */
-    accept: string;
-    beforeUpload?: (file: File) => boolean | Promise<void | Blob | File>;
-    className?: string;
-    style?: React.CSSProperties;
-    disabled?: boolean;
-}
-
-interface State {
-    uploading: boolean;
-}
-
-export class Uploader<SuccessResponseType, ErrorResponseType> extends React.PureComponent<Props<SuccessResponseType, ErrorResponseType>, State> {
-    static displayName = "Uploader";
-
-    private readonly defaultStyle: React.CSSProperties = {minWidth: 250};
-    private readonly uploadHeader: HttpRequestHeader = {Accept: "application/json"};
-    private uploadStartTime: number | undefined;
-
-    constructor(props: Props<SuccessResponseType, ErrorResponseType>) {
-        super(props);
-        this.state = {uploading: false};
-    }
-
-    componentDidMount() {
-        document.addEventListener("dragover", this.preventDefaultDragDrop);
-        document.addEventListener("drop", this.preventDefaultDragDrop);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("dragover", this.preventDefaultDragDrop);
-        document.removeEventListener("drop", this.preventDefaultDragDrop);
-    }
-
-    preventDefaultDragDrop = (e: DragEvent) => e.preventDefault();
-
-    onUpload = ({file}: UploadChangeParam) => {
-        if (file.status === "uploading") {
-            this.setState({uploading: true});
-            this.uploadStartTime = Date.now();
-        } else if (file.status === "done" || file.status === "error") {
-            const {onUploadSuccess, onUploadFailure} = this.props;
-
-            try {
-                const info: UploadLogInfo = {
-                    file_name: file.fileName || file.name,
-                    file_size: file.size?.toString() || "-",
-                    file_type: file.type || "-",
-                    api_response: JSON.stringify(file.response),
-                };
-                const elapsedTime = this.uploadStartTime ? Date.now() - this.uploadStartTime : 0;
-
-                if (file.status === "error") {
-                    onUploadFailure?.(
-                        {
-                            info,
-                            elapsedTime,
-                            errorCode: "UPLOADER_FAILURE",
-                            errorMessage: file.error?.toString() || "[No Message]",
-                            statusCode: Number(file.error?.status), // Un-official API, by trial
-                        },
-                        file.response
-                    );
-                } else {
-                    onUploadSuccess?.(
-                        {
-                            info,
-                            elapsedTime,
-                        },
-                        file.response
-                    );
-                }
-            } finally {
-                this.setState({uploading: false});
-            }
-        }
-    };
-
-    render() {
-        const {children, accept, beforeUpload, className, style, uploadURL, formField, disabled} = this.props;
-        const {uploading} = this.state;
-        return (
-            <AntUpload.Dragger
-                name={formField}
-                showUploadList={false}
-                multiple={false}
-                accept={accept}
-                className={className}
-                style={{...this.defaultStyle, ...style}}
-                action={uploadURL}
-                onChange={this.onUpload}
-                disabled={this.state.uploading || disabled}
-                height={Number(style?.height)}
-                beforeUpload={beforeUpload}
-                headers={this.uploadHeader}
-            >
-                <Spin spinning={uploading} size="small">
-                    {children}
-                </Spin>
-            </AntUpload.Dragger>
-        );
-    }
-}

package/src/core/VerticalMarquee/index.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import type {SafeReactChildren} from "../../internal/type";
-import "./index.less";
-
-export interface Props {
-    height: number;
-    children: SafeReactChildren;
-    className?: string;
-    styles?: React.CSSProperties;
-    speed?: number; // number of pixels scrolled per second
-}
-
-export interface State {
-    hasShadowChildren: boolean;
-    paused: boolean;
-}
-
-export const VerticalMarquee = Object.assign(
-    React.memo(({className: extraClassName, speed, height, styles, children}: Props) => {
-        const className = ["g-marquee", extraClassName].filter(Boolean).join(" ");
-        const [contentHeight, setContentHeight] = React.useState(0);
-        const animationSpeed = contentHeight / (speed || 30);
-
-        const marqueeInnerRef = React.useCallback((node: HTMLDivElement | null) => {
-            if (!node) {
-                return;
-            }
-            setContentHeight(node?.clientHeight);
-        }, []);
-
-        const marqueeInnerAnimationStyle: React.CSSProperties = React.useMemo(
-            () => ({
-                animation: `marquee ${animationSpeed}s linear infinite`,
-                transform: `translate(0, calc(-100% + ${contentHeight / 2}px))`,
-            }),
-            [animationSpeed, contentHeight]
-        );
-
-        const pageSize = contentHeight / height;
-
-        return (
-            <div className={className} style={{...styles, height}}>
-                <div ref={marqueeInnerRef} className="inner" style={pageSize > 1 ? marqueeInnerAnimationStyle : undefined}>
-                    {children}
-                    {children}
-                </div>
-            </div>
-        );
-    }),
-    {displayName: "VerticalMarquee"}
-);

package/src/core/VirtualTable/TableHeader.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import type {ColumnFixedPosition, VirtualTableColumn, StickyPosition} from "./type";
-
-interface Props<RowType extends object> {
-    headersRef: React.RefObject<HTMLDivElement>;
-    headerHeight: number;
-    columns: VirtualTableColumn<RowType>[];
-    stickyPosition: Record<number, StickyPosition>;
-    getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
-}
-
-export const TableHeader = Object.assign(
-    function <RowType extends object>({headersRef, headerHeight, columns, stickyPosition, getFixedColumnClassNames}: Props<RowType>) {
-        return (
-            <div className="table-headers" ref={headersRef} style={{height: headerHeight, width: scrollX || "100%"}}>
-                {columns.map(({title, width, align, fixed, display}, columnIndex) => {
-                    const stickyPositionValue = stickyPosition[columnIndex]?.value || 0;
-                    return (
-                        <div
-                            className={classNames("table-header", ...getFixedColumnClassNames(fixed, columnIndex))}
-                            key={columnIndex}
-                            style={{
-                                display: display !== "hidden" ? "flex" : "none",
-                                flex: `1 0 ${width}px`,
-                                textAlign: align,
-                                left: fixed === "left" ? stickyPositionValue : undefined,
-                                right: fixed === "right" ? stickyPositionValue : undefined,
-                            }}
-                        >
-                            {title}
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    },
-    {
-        displayName: "TableHeader",
-    }
-);

package/src/core/VirtualTable/TableRow.tsx

@@ -1,90 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import type {VirtualItem} from "react-virtual";
-import type {ColumnFixedPosition, VirtualTableColumn, VirtualTableRowExpand, StickyPosition} from "./type";
-
-interface Props<RowType extends object> {
-    data: RowType;
-    columns: VirtualTableColumn<RowType>[];
-    virtualItem: VirtualItem;
-    columnWidths: number[];
-    rowHeight: number;
-    lastShownColumnIndex: number;
-    scrollBarSize: number;
-    stickyPosition: Record<number, StickyPosition>;
-    getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
-    rowClassName?: string;
-    onRowClick?: (record: RowType, rowIndex: number) => void;
-    rowExpand?: VirtualTableRowExpand<RowType>;
-}
-
-export const TableRow = Object.assign(
-    function <RowType extends object>({
-        virtualItem,
-        getFixedColumnClassNames,
-        data,
-        columns,
-        columnWidths,
-        rowHeight,
-        scrollBarSize,
-        stickyPosition,
-        lastShownColumnIndex,
-        rowClassName,
-        onRowClick,
-        rowExpand,
-    }: Props<RowType>) {
-        const rowRef = React.useRef<HTMLDivElement>(null);
-        const [isExpanded, setIsExpanded] = React.useState(rowExpand?.isDefaultExpanded || false);
-        const rowIndex = virtualItem.index;
-
-        const toggleExpendRow = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
-
-        React.useEffect(() => {
-            if (rowRef.current) {
-                virtualItem.measureRef(rowRef.current);
-            }
-        }, [isExpanded, virtualItem]);
-
-        return (
-            <div
-                ref={rowRef}
-                key={rowIndex}
-                className={classNames("table-row", rowClassName, rowIndex % 2 ? "odd" : "even")}
-                style={{transform: `translateY(${virtualItem.start}px)`}}
-                onClick={() => onRowClick?.(data, rowIndex)}
-            >
-                {columns.map((column, columnIndex) => {
-                    const colSpan = column.colSpan ? column.colSpan(data, rowIndex, columnIndex) : 1;
-                    // handle colspan > 1
-                    const cellWidth = colSpan > 1 ? columnWidths.slice(columnIndex, columnIndex + colSpan).reduce((acc, curr) => acc + curr, 0) : columnWidths[columnIndex] || column.width;
-
-                    const renderData =
-                        column.display !== "hidden" && (rowExpand && columnIndex === columns.length - 1 ? <rowExpand.ExpandButton onClick={toggleExpendRow} /> : column.renderData(data, rowIndex));
-                    // minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
-                    const isLastShownColumn = lastShownColumnIndex === columnIndex;
-                    const stickyPositionValue = stickyPosition[columnIndex]?.value || 0;
-
-                    return (
-                        renderData && (
-                            <div
-                                className={classNames("table-cell", ...getFixedColumnClassNames(column.fixed, columnIndex))}
-                                key={columnIndex}
-                                style={{
-                                    height: rowHeight,
-                                    width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
-                                    textAlign: column.align,
-                                    left: column.fixed === "left" ? stickyPositionValue : undefined,
-                                    right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
-                                }}
-                            >
-                                {renderData}
-                            </div>
-                        )
-                    );
-                })}
-                {rowExpand && <div className={classNames("expand-row", {expanded: isExpanded})}>{rowExpand.renderExpandRow(data, rowIndex)}</div>}
-            </div>
-        );
-    },
-    {displayName: "TableRow"}
-);

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

@@ -1,24 +0,0 @@
-import React from "react";
-
-/**
- *
- * If the Virtual Table is render inside a container with open animation e.g. <Modal />,
- * the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
- * useLayoutEffect will be trigged in the transition process and get the final correct column widths
- */
-
-export const useColumnWidths = (headersRef: React.RefObject<HTMLDivElement>) => {
-    const [colWidths, setColWidths] = React.useState<number[]>([]);
-
-    const calculateColWidths = React.useCallback(() => {
-        if (!headersRef.current) return;
-        const headers = headersRef.current.querySelectorAll(".table-header");
-        const widths: number[] = Array.prototype.slice.call(headers).map(header => {
-            const {width} = header.getBoundingClientRect();
-            return width;
-        });
-        setColWidths(widths);
-    }, [headersRef]);
-
-    return {columnWidths: colWidths, calculateColWidths};
-};

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

@@ -1,18 +0,0 @@
-import React from "react";
-
-export const useDebounce = function <Param extends any[]>(callback: (...args: Param) => void) {
-    const idRef = React.useRef<number>();
-
-    const debounce = () => {
-        return function (...args: Param) {
-            clearTimeout(idRef.current);
-            idRef.current = window.setTimeout(() => {
-                callback(...args);
-            }, 100);
-        };
-    };
-
-    React.useEffect(() => () => clearTimeout(idRef.current), []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- callback is not allow to changed
-    return React.useMemo(() => debounce(), []);
-};

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;
-};