@publishfx/publish-components 2.0.3

package/dist/PerformanceTable/index.js

@@ -0,0 +1,417 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react";
+import { merge } from "lodash";
+import IconOpen_down from "../assets/icons/IconOpen_down.js";
+import IconOpen_right from "../assets/icons/IconOpen_right.js";
+import useResizable, { ResizeTable, components } from "./useResizable.js";
+import { BoldTitle } from "./style.js";
+const { Summary } = ResizeTable;
+const PerformanceTable = ({ columns, dataSource = [], showPagination = true, pagination, loading = false, emptyDescription = '暂无数据', size = 'default', border = false, stripe = true, rowSelection, onSort, rowKey = 'id', isFullScreen = false, onExpandClick, customExpandIcon, colorThemes = [
+    '#d0324b',
+    '#db6679',
+    '#e694a2',
+    '#eebbc1',
+    '#f7e0e3',
+    '#c9ece0',
+    '#a4dfca',
+    '#75ceaf',
+    '#4bbf97',
+    '#05a76f'
+], colorScaledColumns = [], summaryData, summaryTitle = '统计', highlightSetting, ...restProps }, ref)=>{
+    const [expandedRowKeys, setExpandedRowKeys] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(pagination && 'boolean' != typeof pagination ? pagination.pageSize || 10 : 10);
+    const [sorter, setSorter] = useState(null);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const isWeekend = useCallback((dateValue, dateField, weekends)=>{
+        if (!dateValue || !dateField || !weekends) return false;
+        let date;
+        if ('string' == typeof dateValue) {
+            const dateStr = dateValue.split(' - ')[0];
+            date = new Date(dateStr);
+        } else {
+            if (!(dateValue instanceof Date)) return false;
+            date = dateValue;
+        }
+        if (isNaN(date.getTime())) return false;
+        const dayOfWeek = date.getDay();
+        return weekends.includes(dayOfWeek);
+    }, []);
+    const formattedColumns = useMemo(()=>columns.map((col, index)=>{
+            const { showPercent, showCurrency, showNumber, formatter, render, enableColorScale, dataIndex, ...restCol } = col;
+            const colDataIndex = 'string' == typeof dataIndex ? dataIndex : Array.isArray(dataIndex) ? dataIndex[0] : '';
+            const shouldShowColorScale = enableColorScale && colDataIndex && colorScaledColumns.includes(colDataIndex);
+            let finalRender = render;
+            const wrapWithColorScale = (renderFn)=>(value, record, index)=>{
+                    const content = renderFn ? renderFn(value, record, index) : value;
+                    if (shouldShowColorScale && record?.level && colDataIndex) {
+                        const colorLevel = record.level[colDataIndex];
+                        if ('number' == typeof colorLevel && colorLevel >= 0 && colorLevel < colorThemes.length) {
+                            const backgroundColor = colorThemes[colorLevel];
+                            const textColor = 0 === colorLevel || 9 === colorLevel ? '#fff' : '';
+                            return /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    backgroundColor,
+                                    color: textColor,
+                                    padding: '9px 16px',
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                    wordBreak: 'break-all',
+                                    textOverflow: 'ellipsis',
+                                    cursor: 'pointer'
+                                },
+                                title: String(content),
+                                children: content
+                            });
+                        }
+                    }
+                    if (null != content && '' !== content) return /*#__PURE__*/ jsx("div", {
+                        style: {
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            wordBreak: 'break-all',
+                            textOverflow: 'ellipsis'
+                        },
+                        title: String(content),
+                        children: content
+                    });
+                    return content;
+                };
+            if (formatter) finalRender = wrapWithColorScale((value, record, index)=>formatter(value, record, index));
+            else if (showPercent || showCurrency || showNumber) finalRender = wrapWithColorScale((value)=>{
+                if (null == value || '' === value) return '-';
+                let formattedValue = value;
+                if (showPercent) formattedValue = `${(100 * Number(value)).toFixed(2)}%`;
+                else if (showCurrency) formattedValue = `¥${Number(value).toLocaleString('zh-CN', {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                })}`;
+                else if (showNumber) formattedValue = Number(value).toLocaleString('zh-CN');
+                return formattedValue;
+            });
+            else if (shouldShowColorScale) finalRender = wrapWithColorScale((value)=>value);
+            else if (finalRender) {
+                const originalRender = finalRender;
+                finalRender = (value, record, index)=>{
+                    const content = originalRender(value, record, index);
+                    if (null != content && '' !== content) return /*#__PURE__*/ jsx("div", {
+                        style: {
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            wordBreak: 'break-all',
+                            textOverflow: 'ellipsis'
+                        },
+                        title: String(content),
+                        children: content
+                    });
+                    return content;
+                };
+            } else finalRender = wrapWithColorScale((value)=>value);
+            return {
+                ...restCol,
+                dataIndex,
+                render: finalRender,
+                sorter: false !== restCol.sorter ? void 0 !== restCol.sorter ? restCol.sorter : true : false,
+                fixed: 0 === index && void 0 === restCol.fixed ? 'left' : restCol.fixed,
+                bodyCellStyle: {
+                    padding: 0
+                }
+            };
+        }), [
+        columns,
+        colorScaledColumns,
+        colorThemes,
+        highlightSetting,
+        isWeekend
+    ]);
+    const resizeCallback = useCallback(()=>{}, []);
+    const { columns: resizableColumns, resizingIndex } = useResizable({
+        columns: formattedColumns,
+        resizeCallback
+    });
+    const mergedComponents = useMemo(()=>merge({}, components, {
+            header: {}
+        }), []);
+    const handleSort = useCallback((_pagination, sorterResult)=>{
+        const sortResult = Array.isArray(sorterResult) ? sorterResult[0] : sorterResult;
+        if (sortResult) {
+            setSorter(sortResult);
+            if (onSort && sortResult.field) onSort(String(sortResult.field), sortResult.direction || null);
+        }
+    }, [
+        onSort
+    ]);
+    const handlePaginationChange = useCallback((page, size)=>{
+        setCurrentPage(page);
+        setPageSize(size);
+        if (pagination && 'object' == typeof pagination && pagination.onChange) pagination.onChange(page, size);
+    }, [
+        pagination
+    ]);
+    const handleExpand = useCallback((record, expanded)=>{
+        const keyValue = 'function' == typeof rowKey ? rowKey(record) : record[rowKey];
+        const key = String(keyValue);
+        expanded ? setExpandedRowKeys((prev)=>[
+                ...prev,
+                key
+            ]) : setExpandedRowKeys((prev)=>prev.filter((k)=>k !== key));
+        if (onExpandClick) onExpandClick(expanded, record);
+    }, [
+        rowKey,
+        onExpandClick
+    ]);
+    const expandProps = useMemo(()=>{
+        if (customExpandIcon) return {
+            icon: ({ expanded, record })=>customExpandIcon(expanded, record)
+        };
+        return {
+            icon: ({ expanded, record })=>{
+                const Icon = expanded ? IconOpen_down : IconOpen_right;
+                return /*#__PURE__*/ jsx(Icon, {
+                    style: {
+                        marginRight: '12px',
+                        cursor: 'pointer',
+                        marginTop: '3px'
+                    },
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        handleExpand(!expanded, record);
+                    }
+                });
+            }
+        };
+    }, [
+        customExpandIcon,
+        handleExpand
+    ]);
+    const handleRowSelection = useMemo(()=>{
+        if (!rowSelection) return;
+        return {
+            ...rowSelection,
+            selectedRowKeys,
+            onChange: (selectedKeys, selectedRows)=>{
+                setSelectedRowKeys(selectedKeys);
+                if (rowSelection.onChange) rowSelection.onChange(selectedKeys, selectedRows || []);
+            },
+            onSelect: (selected, record, selectedRows)=>{
+                if (rowSelection.onSelect) rowSelection.onSelect(selected, record, selectedRows);
+            },
+            onSelectAll: (selected, selectedRows)=>{
+                if (rowSelection.onSelectAll) rowSelection.onSelectAll(selected, selectedRows);
+            }
+        };
+    }, [
+        rowSelection,
+        selectedRowKeys
+    ]);
+    const getTableData = useCallback(()=>{
+        const headers = columns.map((col)=>{
+            const title = 'string' == typeof col.title ? col.title : col.title?.toString() || '';
+            return `"${title}"`;
+        }).join(',') + '\n';
+        const getValue = (record, dataIndex)=>{
+            if ('string' == typeof dataIndex) return record[dataIndex];
+            if (Array.isArray(dataIndex)) return dataIndex.reduce((obj, key)=>obj?.[key], record);
+            return '';
+        };
+        const rows = dataSource.map((record)=>columns.map((col)=>{
+                const dataIndex = col.dataIndex;
+                if (!dataIndex) return '';
+                const value = getValue(record, dataIndex);
+                return `"${value || ''}"`;
+            }).join(',')).join('\n');
+        return headers + rows;
+    }, [
+        columns,
+        dataSource
+    ]);
+    const getSelectedRows = useCallback(()=>dataSource.filter((record)=>{
+            const keyValue = 'function' == typeof rowKey ? rowKey(record) : record[rowKey];
+            const key = String(keyValue);
+            return selectedRowKeys.some((selectedKey)=>String(selectedKey) === key);
+        }), [
+        dataSource,
+        rowKey,
+        selectedRowKeys
+    ]);
+    useImperativeHandle(ref, ()=>({
+            getTableData,
+            getSelectedRows
+        }), [
+        getTableData,
+        getSelectedRows
+    ]);
+    const paginationConfig = useMemo(()=>{
+        if (!showPagination || false === pagination) return false;
+        const defaultPagination = {
+            current: currentPage,
+            pageSize,
+            total: dataSource.length,
+            showTotal: true,
+            sizeCanChange: true,
+            sizeOptions: [
+                10,
+                20,
+                50,
+                100
+            ],
+            onChange: handlePaginationChange,
+            onPageSizeChange: handlePaginationChange
+        };
+        if ('object' == typeof pagination) return {
+            ...defaultPagination,
+            ...pagination,
+            current: pagination.current ?? currentPage,
+            pageSize: pagination.pageSize ?? pageSize
+        };
+        return defaultPagination;
+    }, [
+        showPagination,
+        pagination,
+        currentPage,
+        pageSize,
+        dataSource.length,
+        handlePaginationChange
+    ]);
+    const paginatedData = useMemo(()=>{
+        if (!showPagination || false === pagination) return dataSource;
+        const start = (currentPage - 1) * pageSize;
+        const end = start + pageSize;
+        return dataSource.slice(start, end);
+    }, [
+        dataSource,
+        currentPage,
+        pageSize,
+        showPagination,
+        pagination
+    ]);
+    const summaryConfig = useMemo(()=>{
+        if (!summaryData) return;
+        return ()=>/*#__PURE__*/ jsx(Summary, {
+                fixed: "bottom",
+                children: /*#__PURE__*/ jsx(Summary.Row, {
+                    children: columns.map((col, index)=>{
+                        const colDataIndex = 'string' == typeof col.dataIndex ? col.dataIndex : Array.isArray(col.dataIndex) ? col.dataIndex[0] : '';
+                        if (0 === index) return /*#__PURE__*/ jsx(Summary.Cell, {
+                            children: /*#__PURE__*/ jsx(BoldTitle, {
+                                children: summaryTitle
+                            })
+                        }, index);
+                        const summaryValue = colDataIndex ? summaryData[colDataIndex] : void 0;
+                        let displayValue = null != summaryValue ? summaryValue : '-';
+                        if (col.showPercent && 'number' == typeof displayValue) displayValue = `${(100 * displayValue).toFixed(2)}%`;
+                        else if (col.showCurrency && 'number' == typeof displayValue) displayValue = `¥${displayValue.toLocaleString('zh-CN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2
+                        })}`;
+                        else if (col.showNumber && 'number' == typeof displayValue) displayValue = displayValue.toLocaleString('zh-CN');
+                        let renderedValue = displayValue;
+                        if (col.render && void 0 !== summaryValue) renderedValue = col.render(summaryValue, {}, index);
+                        return /*#__PURE__*/ jsx(Summary.Cell, {
+                            style: {
+                                textAlign: col.align || 'left',
+                                padding: '9px 0',
+                                fontWeight: 'bold'
+                            },
+                            children: /*#__PURE__*/ jsx("span", {
+                                style: {
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                    textOverflow: 'ellipsis',
+                                    width: '100%',
+                                    display: 'inline-block',
+                                    fontWeight: 'bold',
+                                    fontSize: '14px'
+                                },
+                                title: String(displayValue),
+                                children: renderedValue
+                            })
+                        }, index);
+                    })
+                })
+            });
+    }, [
+        summaryData,
+        columns,
+        summaryTitle
+    ]);
+    const getRowClassName = useCallback((record, index)=>{
+        if (!highlightSetting?.weekends || !highlightSetting?.dateField) return '';
+        const dateValue = record[highlightSetting.dateField];
+        if (!dateValue) return '';
+        let date;
+        if ('string' == typeof dateValue) {
+            const dateStr = dateValue.split(' - ')[0];
+            date = new Date(dateStr);
+        } else {
+            if (!(dateValue instanceof Date)) return '';
+            date = dateValue;
+        }
+        if (isNaN(date.getTime())) return '';
+        const dayOfWeek = date.getDay();
+        if (highlightSetting.weekends.includes(dayOfWeek)) {
+            const classNames = [];
+            if (highlightSetting.showBold) classNames.push('performance-table-weekend-row');
+            if (highlightSetting.showBackgroundPattern) classNames.push('performance-table-weekend-row-pattern');
+            if (highlightSetting.showIcon) classNames.push('performance-table-weekend-row-icon');
+            if (highlightSetting.highlightTextColor) classNames.push('performance-table-weekend-text-color');
+            return classNames.join(' ');
+        }
+        return '';
+    }, [
+        highlightSetting
+    ]);
+    const tableStyle = useMemo(()=>{
+        const style = {};
+        if (highlightSetting?.showIcon && highlightSetting?.iconPath) style['--weekend-icon-url'] = `url(${highlightSetting.iconPath})`;
+        if (highlightSetting?.highlightTextColor) style['--weekend-text-color'] = highlightSetting.highlightTextColor;
+        return Object.keys(style).length > 0 ? style : void 0;
+    }, [
+        highlightSetting?.showIcon,
+        highlightSetting?.iconPath,
+        highlightSetting?.highlightTextColor
+    ]);
+    return /*#__PURE__*/ jsx(ResizeTable, {
+        ...restProps,
+        columns: resizableColumns,
+        data: paginatedData,
+        loading: loading,
+        size: size,
+        border: border,
+        stripe: stripe,
+        rowKey: rowKey,
+        rowSelection: handleRowSelection,
+        pagination: paginationConfig,
+        expandedRowKeys: expandedRowKeys,
+        onExpand: handleExpand,
+        expandProps: expandProps,
+        onChange: handleSort,
+        showSorterTooltip: false,
+        summary: summaryConfig,
+        components: mergedComponents,
+        scroll: {
+            x: true,
+            y: true
+        },
+        resizingIndex: resizingIndex,
+        isFullScreen: isFullScreen,
+        rowClassName: getRowClassName,
+        style: tableStyle,
+        noDataElement: /*#__PURE__*/ jsx("div", {
+            style: {
+                width: '100%',
+                padding: '40px 0',
+                textAlign: 'center'
+            },
+            children: /*#__PURE__*/ jsx("div", {
+                style: {
+                    color: 'var(--color-text-3)',
+                    fontSize: '14px'
+                },
+                children: emptyDescription
+            })
+        })
+    });
+};
+const src_PerformanceTable = /*#__PURE__*/ forwardRef(PerformanceTable);
+export { src_PerformanceTable as default };

package/dist/PerformanceTable/interface.d.ts

@@ -0,0 +1,47 @@
+import { TableProps, TableColumnProps } from "@arco-design/web-react";
+import React from "react";
+export interface PerformanceTableColumn<T = any> extends TableColumnProps<T> {
+    showPercent?: boolean;
+    showCurrency?: boolean;
+    showNumber?: boolean;
+    formatter?: (value: any, record: T, index: number) => React.ReactNode;
+    enableColorScale?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    disableResize?: boolean;
+    rawTitle?: string;
+    adjusted?: boolean;
+}
+export interface PerformanceTableProps<T = any> extends Omit<TableProps<T>, 'columns' | 'size' | 'expandProps'> {
+    columns: PerformanceTableColumn<T>[];
+    dataSource?: T[];
+    showPagination?: boolean;
+    pagination?: TableProps<T>['pagination'] | false;
+    loading?: boolean;
+    emptyDescription?: string;
+    size?: 'mini' | 'small' | 'default' | 'middle';
+    border?: boolean;
+    stripe?: boolean;
+    rowSelection?: TableProps<T>['rowSelection'];
+    onSort?: (dataIndex: string, direction: 'ascend' | 'descend' | null) => void;
+    isFullScreen?: boolean;
+    onExpandClick?: (expanded: boolean, record: T) => void;
+    customExpandIcon?: (expanded: boolean, record: T) => React.ReactNode;
+    colorThemes?: string[];
+    colorScaledColumns?: string[];
+    summaryData?: Record<string, any>;
+    summaryTitle?: string;
+    highlightSetting?: {
+        weekends?: number[];
+        dateField?: string;
+        showBold?: boolean;
+        showBackgroundPattern?: boolean;
+        showIcon?: boolean;
+        iconPath?: string;
+        highlightTextColor?: string;
+    };
+}
+export type PerformanceTableRef = {
+    getTableData: () => string;
+    getSelectedRows: () => any[];
+};

package/dist/PerformanceTable/style.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare const StyledIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const BoldTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ResizeTable: import("styled-components").StyledComponent<(<T>(props: import("@arco-design/web-react").TableProps<T> & {
+    ref?: import("react").Ref<import("@arco-design/web-react").TableInstance>;
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    Summary: typeof import("@arco-design/web-react/es/Table/summary").default;
+}, any, {
+    resizingIndex?: number;
+    isFullScreen?: boolean;
+}, never>;
+export declare const StyledTd: import("styled-components").StyledComponent<"td", any, {
+    colSpan: number;
+}, never>;
+export declare const StyledTdComp: React.FunctionComponent<{
+    colSpan: number;
+    children?: React.ReactNode;
+    [key: string]: any;
+}>;