@publishfx/publish-components 2.0.3

package/dist/PerformanceTable/style.js

@@ -0,0 +1,402 @@
+import { jsx } from "react/jsx-runtime";
+import { Table } from "@arco-design/web-react";
+import "react";
+import styled_components, { css } from "styled-components";
+const StyledIcon = styled_components.img`
+  vertical-align: middle;
+  margin-right: 2px;
+  width: 16px;
+  height: 16px;
+`;
+const BoldTitle = styled_components.span`
+  font-weight: bold;
+  vertical-align: middle;
+`;
+const ResizeTable = styled_components(Table)`
+  &.arco-table {
+    .arco-table-th:first-child,
+    .arco-table-th:last-child {
+      border-radius: 0;
+    }
+  }
+
+  /* 修复第一列拖拽位置 */
+  /* &.arco-table {
+    .arco-table-th:first-child {
+      .resize-handle {
+        right: -2px;
+      }
+    }
+  } */
+
+  .arco-table-no-data {
+    border-bottom: 1px solid #eaebed;
+  }
+
+  .arco-table-content-scroll {
+    overflow: unset;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    .arco-table-content-inner {
+      overflow: unset;
+
+      .arco-table-header {
+        border-radius: 0;
+        background-color: unset;
+        scrollbar-color: inherit;
+        position: sticky;
+        top: ${(props)=>props.isFullScreen ? "64px" : "131px"};
+        z-index: 99;
+
+        .arco-table-col-has-sorter .arco-table-cell-with-sorter {
+          padding: 0;
+          cursor: pointer;
+          margin: 9px 8px;
+
+          display: flex;
+          align-items: center;
+          justify-content: end;
+
+          .arco-table-th-item-title {
+            width: 100%;
+          }
+        }
+      }
+
+      .arco-table-body {
+        &::-webkit-scrollbar {
+          height: 0;
+        }
+      }
+
+      div.arco-table-tfoot {
+        background-color: unset;
+        margin-bottom: 0 !important;
+        position: sticky;
+        bottom: 0;
+        scrollbar-color: inherit;
+      }
+
+      .arco-table-col-fixed-left-last::after {
+        box-shadow: inset 6px 0 8px -3px rgb(0 0 0 / 15%);
+      }
+    }
+  }
+
+  .arco-table-header,
+  .arco-table-body,
+  div.arco-table-tfoot {
+    th {
+      border-right: 2px solid #f4f5f7;
+    }
+    td {
+      border-right: 2px solid transparent;
+    }
+  }
+
+  .arco-table-th.arco-table-col-sorted {
+    background-color: #e6e6e9 !important;
+  }
+
+  .arco-table-td.arco-table-col-sorted:not(:first-child) {
+    background-color: rgba(237, 237, 240, 0.5) !important;
+  }
+
+  .arco-table-cell {
+    cursor: pointer;
+  }
+
+  .arco-table-th {
+    position: sticky;
+    .arco-table-th-item {
+      &.arco-table-col-has-sorter,
+      &.arco-table-col-sorted {
+        position: static;
+        height: 100%;
+        .arco-table-th-item-title {
+          padding-bottom: 8px;
+        }
+        .arco-table-cell-with-sorter {
+          height: 100%;
+          margin-right: 10px !important;
+        }
+        .arco-table-sorter {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  .arco-table-body {
+    max-height: calc(100vh - 260px);
+  }
+
+  .arco-table-cell-wrap-value div {
+    padding: 9px 8px;    
+  }
+  /* 周末行加粗样式 */
+  .performance-table-weekend-row {
+    font-weight: bold;
+
+    .arco-table-cell {
+      font-weight: bold;
+    }
+  }
+
+  /* 周末行文本颜色样式（独立于加粗） */
+  .performance-table-weekend-text-color {
+    
+    .arco-table-td:first-child {
+    .arco-table-cell {
+      color: var(--weekend-text-color, inherit);
+    }
+}
+  }
+
+  .arco-table-td.arco-table-col-fixed-left:first-child {
+      /* 固定列的处理 */
+      &.arco-table-col-fixed-left {
+        .arco-table-cell-wrapper {
+          padding-left: 38px !important; /* 为图标留出空间：16px 图标 + 6px 间距 + 16px 原有 padding */
+          // 控制整体文本字体粗细
+          font-weight: bold;
+        }
+      }
+    }
+  /* 周末行图标样式 */
+  .performance-table-weekend-row-icon {
+    /* 针对日期列（第一个固定列）添加图标 */
+    .arco-table-td:first-child {
+      /* 固定列的处理 */
+      &.arco-table-col-fixed-left {
+        .arco-table-cell-wrapper {
+          position: relative;
+        //   padding-left: 38px !important; /* 为图标留出空间：16px 图标 + 6px 间距 + 16px 原有 padding */
+          &::before {
+            content: "";
+            position: absolute;
+            left: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            background-image: var(--weekend-icon-url, none);
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            pointer-events: none;
+            z-index: 1;
+          }
+        }
+      }
+
+      /* 非固定列的处理 */
+      &:not(.arco-table-col-fixed-left) {
+        .arco-table-cell {
+          position: relative;
+          padding-left: 38px !important; /* 为图标留出空间：16px 图标 + 6px 间距 + 16px 原有 padding */
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            background-image: var(--weekend-icon-url, none);
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            pointer-events: none;
+            z-index: 1;
+          }
+        }
+      }
+    }
+  }
+
+  /* 周末行背景纹理样式 */
+  .performance-table-weekend-row-pattern {
+    // background-color: #fff;
+
+    .arco-table-td.arco-table-col-fixed-left 
+       {
+
+        &:hover {
+         &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-image: repeating-linear-gradient(
+            -45deg,
+            transparent,
+            transparent 2px,
+            rgba(0, 0, 0, 0.06) 2px,  
+            rgba(0, 0, 0, 0.06) 4px
+          );
+          pointer-events: none;
+          z-index: -1;
+        }
+        }
+
+        background-color: var(--color-fill-1);
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-image: repeating-linear-gradient(
+            -45deg,
+            transparent,
+            transparent 2px,
+            rgba(0, 0, 0, 0.08) 2px,
+            rgba(0, 0, 0, 0.08) 4px
+          );
+          pointer-events: none;
+          z-index: -1;
+        }
+
+        > * {
+          position: relative;
+          z-index: 1;
+        }
+      }
+    
+
+    .arco-table-td:not(.arco-table-col-fixed-left) {
+      .arco-table-cell-wrap-value div {
+      position: relative;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: repeating-linear-gradient(
+          -45deg,
+          transparent,
+          transparent 2px,
+          rgba(0, 0, 0, 0.08) 2px,
+          rgba(0, 0, 0, 0.08) 4px
+        );
+        pointer-events: none;
+        background-color: rgba(0, 0, 0, 0.03) !important;
+        z-index: 0;
+      }
+
+      > * {
+        position: relative;
+          z-index: 1;
+        }
+      }
+    }
+      }
+
+    /* 针对固定列的特殊处理 */
+    &.arco-table-col-fixed-left {
+      .arco-table-cell-wrapper {
+        position: relative;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-image: repeating-linear-gradient(
+            -45deg,
+            transparent,
+            transparent 6px,
+            rgba(0, 0, 0, 0.12) 6px,
+            rgba(0, 0, 0, 0.12) 12px
+          );
+          pointer-events: none;
+          z-index: 0;
+        }
+
+        > * {
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
+  }
+
+  .arco-table-cell-indent + .arco-table-cell-wrap-value {
+    float: unset;
+  }
+
+  ${(props)=>props.resizingIndex && props.resizingIndex > 0 && css`
+      .arco-table-header,
+      .arco-table-body,
+      div.arco-table-tfoot {
+        cursor: col-resize;
+
+        th:nth-child(${props.resizingIndex}) {
+          .resize-handle {
+            background-color: var(--primary-color);
+          }
+          border-right: 2px solid var(--primary-color);
+        }
+        td:nth-child(${props.resizingIndex}) {
+          border-right: 2px solid var(--primary-color);
+        }
+      }
+    `}
+`;
+const StyledTd = styled_components.td`
+  .arco-table-cell {
+    // display: -webkit-box;
+    // -webkit-box-orient: vertical;
+    // -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
+  &.arco-table-col-fixed-left {
+    padding: 0;
+    border-left: none !important;
+
+    .arco-table-cell-wrapper {
+      width: 100%;
+      position: sticky;
+      left: 0;
+      box-sizing: border-box;
+      // padding: 9px 8px;
+    }
+  }
+
+  ${(props)=>props.colSpan > 1 && css`
+      &.arco-table-col-fixed-left[colSpan="${props.colSpan}"] {
+        background-color: #ffffff !important;
+
+        .arco-table-cell-wrapper {
+          padding: 5px 16px;
+        }
+
+        &::after {
+          display: none;
+        }
+      }
+    `}
+`;
+const StyledTdComp = ({ colSpan, children, ...restProps })=>/*#__PURE__*/ jsx(StyledTd, {
+        ...restProps,
+        colSpan: colSpan,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "arco-table-cell-wrapper",
+            children: children
+        })
+    });
+export { BoldTitle, ResizeTable, StyledIcon, StyledTd, StyledTdComp };

package/dist/PerformanceTable/useResizable.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { PerformanceTableColumn } from './interface';
+import { ResizableTitleProps } from './ResizableTitle';
+import { ResizeTable } from './style';
+type ResizableProps = {
+    columns: PerformanceTableColumn[];
+    th?: any;
+    compact?: boolean;
+    firstColumnAutoWidth?: boolean;
+    resizeCallback?: () => void;
+};
+declare function useResizable({ columns: originColumns, th, compact, firstColumnAutoWidth, resizeCallback, }: ResizableProps): {
+    columns: PerformanceTableColumn<any>[];
+    resizingIndex: number | undefined;
+};
+export { ResizeTable };
+export declare const components: {
+    header: {
+        th: React.FunctionComponent<ResizableTitleProps>;
+    };
+    body: {
+        td: React.FunctionComponent<{
+            [key: string]: any;
+            colSpan: number;
+            children?: React.ReactNode;
+        }>;
+    };
+};
+export default useResizable;

package/dist/PerformanceTable/useResizable.js

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import ResizableTitle from "./ResizableTitle.js";
+import { ResizeTable, StyledTdComp } from "./style.js";
+function useResizable({ columns: originColumns, th, compact = false, firstColumnAutoWidth = false, resizeCallback = ()=>{} }) {
+    const [columns, setColumns] = useState(originColumns || []);
+    const [resizingIndex, setResizingIndex] = useState();
+    const resizeCallbackRef = useRef(resizeCallback);
+    useEffect(()=>{
+        resizeCallbackRef.current = resizeCallback;
+    }, [
+        resizeCallback
+    ]);
+    const prevOriginColumnsRef = useRef(originColumns);
+    const handleResize = useCallback((index)=>(e, { size })=>{
+            if (0 === index) resizeCallbackRef.current?.();
+            setColumns((prevColumns)=>{
+                const nextColumns = [
+                    ...prevColumns
+                ];
+                nextColumns[index] = {
+                    ...nextColumns[index],
+                    width: size.width,
+                    adjusted: true
+                };
+                return nextColumns;
+            });
+        }, []);
+    useEffect(()=>{
+        if (!originColumns || 0 === originColumns.length) return;
+        if (prevOriginColumnsRef.current === originColumns) return;
+        const prevColumns = prevOriginColumnsRef.current;
+        if (prevColumns.length === originColumns.length) {
+            const hasChanged = originColumns.some((column, index)=>{
+                const prevCol = prevColumns[index];
+                if (!prevCol) return true;
+                if (column.key !== prevCol.key) return true;
+                const colDataIndex = 'string' == typeof column.dataIndex ? column.dataIndex : Array.isArray(column.dataIndex) ? column.dataIndex[0] : '';
+                const prevDataIndex = 'string' == typeof prevCol.dataIndex ? prevCol.dataIndex : Array.isArray(prevCol.dataIndex) ? prevCol.dataIndex[0] : '';
+                if (colDataIndex !== prevDataIndex) return true;
+                return false;
+            });
+            if (!hasChanged) {
+                prevOriginColumnsRef.current = originColumns;
+                return;
+            }
+        }
+        prevOriginColumnsRef.current = originColumns;
+        const lastIndex = originColumns.length - 1;
+        setColumns((prevColumns)=>originColumns.map((column, index)=>{
+                const isLast = lastIndex === index;
+                const { minWidth, maxWidth, ...restColumnProps } = column;
+                let width = 160;
+                let isAdjust = false;
+                const existingColumn = prevColumns.find((c)=>{
+                    if (c.key && column.key && c.key === column.key) return true;
+                    const cDataIndex = 'string' == typeof c.dataIndex ? c.dataIndex : Array.isArray(c.dataIndex) ? c.dataIndex[0] : '';
+                    const colDataIndex = 'string' == typeof column.dataIndex ? column.dataIndex : Array.isArray(column.dataIndex) ? column.dataIndex[0] : '';
+                    return cDataIndex === colDataIndex && '' !== cDataIndex;
+                });
+                if (existingColumn) {
+                    width = existingColumn.width || 160;
+                    isAdjust = existingColumn.adjusted || false;
+                }
+                const titleWidth = column.rawTitle ? 14 * column.rawTitle.length + 32 + 16 : 0;
+                if (isAdjust) {
+                    if (firstColumnAutoWidth && 0 === index) width = 'number' == typeof column.width ? column.width : 'string' == typeof column.width ? parseInt(String(column.width), 10) : width;
+                } else if (false === compact) {
+                    const colWidth = 'number' == typeof column.width ? column.width : 'string' == typeof column.width ? parseInt(String(column.width), 10) : 160;
+                    width = colWidth && (colWidth > titleWidth ? colWidth : titleWidth) || width;
+                } else width = 'number' == typeof column.width ? column.width : 'string' == typeof column.width ? parseInt(String(column.width), 10) : width;
+                return {
+                    ...restColumnProps,
+                    width: 'number' == typeof width ? width : 'string' == typeof width ? parseInt(width, 10) : 160,
+                    adjusted: isAdjust,
+                    onHeaderCell: (col)=>({
+                            disableResize: isLast || col.disableResize,
+                            width: 'number' == typeof col.width ? col.width : 'string' == typeof col.width ? parseInt(String(col.width), 10) : width,
+                            onResize: handleResize(index),
+                            minWidth: col.minWidth || minWidth || 100,
+                            maxWidth: col.maxWidth || maxWidth || 800,
+                            currentIndex: index,
+                            setResizingIndex,
+                            th: th || 'th'
+                        })
+                };
+            }));
+    }, [
+        handleResize,
+        originColumns,
+        th,
+        compact,
+        firstColumnAutoWidth
+    ]);
+    return {
+        columns,
+        resizingIndex
+    };
+}
+const components = {
+    header: {
+        th: ResizableTitle
+    },
+    body: {
+        td: StyledTdComp
+    }
+};
+const PerformanceTable_useResizable = useResizable;
+export { ResizeTable, components, PerformanceTable_useResizable as default };

package/dist/ReactSticky/Container.d.ts

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from "react";
+interface Subscriber {
+    (params: {
+        distanceFromTop: number;
+        distanceFromBottom: number;
+        eventSource: HTMLElement | Window | Document;
+    }): void;
+}
+interface StickyContextType {
+    subscribe: (handler: Subscriber) => void;
+    unsubscribe: (handler: Subscriber) => void;
+    getParent: () => HTMLDivElement | null;
+}
+export declare const StickyContext: React.Context<StickyContextType | null>;
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    scrollroot?: HTMLElement | Window;
+}
+declare const Container: React.FC<PropsWithChildren<ContainerProps>>;
+export default Container;

package/dist/ReactSticky/Container.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useEffect, useRef } from "react";
+const StickyContext = /*#__PURE__*/ createContext(null);
+const Container = ({ scrollroot, ...props })=>{
+    const subscribersRef = useRef([]);
+    const rafHandleRef = useRef(null);
+    const framePendingRef = useRef(false);
+    const nodeRef = useRef(null);
+    const scrollRootRef = useRef(scrollroot || window);
+    const subscribe = useCallback((handler)=>{
+        subscribersRef.current = [
+            ...subscribersRef.current,
+            handler
+        ];
+    }, []);
+    const unsubscribe = useCallback((handler)=>{
+        subscribersRef.current = subscribersRef.current.filter((current)=>current !== handler);
+    }, []);
+    const getParent = useCallback(()=>nodeRef.current, []);
+    const notifySubscribers = useCallback((evt)=>{
+        if (!framePendingRef.current && nodeRef.current) {
+            const currentTarget = 'currentTarget' in evt ? evt.currentTarget : scrollRootRef.current;
+            rafHandleRef.current = requestAnimationFrame(()=>{
+                framePendingRef.current = false;
+                if (!nodeRef.current) return;
+                const { top, bottom } = nodeRef.current.getBoundingClientRect();
+                subscribersRef.current.forEach((handler)=>handler({
+                        distanceFromTop: top,
+                        distanceFromBottom: bottom,
+                        eventSource: currentTarget === scrollRootRef.current ? scrollRootRef.current === window ? document.body : scrollRootRef.current : nodeRef.current
+                    }));
+            });
+            framePendingRef.current = true;
+        }
+    }, []);
+    const handleTouchStart = useCallback((evt)=>{
+        notifySubscribers(evt);
+    }, [
+        notifySubscribers
+    ]);
+    const handleTouchMove = useCallback((evt)=>{
+        notifySubscribers(evt);
+    }, [
+        notifySubscribers
+    ]);
+    const handleTouchEnd = useCallback((evt)=>{
+        notifySubscribers(evt);
+    }, [
+        notifySubscribers
+    ]);
+    useEffect(()=>{
+        const events = [
+            "resize",
+            "scroll",
+            "touchstart",
+            "touchmove",
+            "touchend",
+            "pageshow",
+            "load"
+        ];
+        const handleGlobalEvent = (evt)=>{
+            notifySubscribers(evt);
+        };
+        events.forEach((event)=>scrollRootRef.current.addEventListener(event, handleGlobalEvent));
+        return ()=>{
+            if (rafHandleRef.current) {
+                cancelAnimationFrame(rafHandleRef.current);
+                rafHandleRef.current = null;
+            }
+            events.forEach((event)=>scrollRootRef.current.removeEventListener(event, handleGlobalEvent));
+        };
+    }, [
+        notifySubscribers
+    ]);
+    const contextValue = {
+        subscribe,
+        unsubscribe,
+        getParent
+    };
+    return /*#__PURE__*/ jsx(StickyContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: nodeRef,
+            onScroll: notifySubscribers,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd
+        })
+    });
+};
+const ReactSticky_Container = Container;
+export { StickyContext, ReactSticky_Container as default };

package/dist/ReactSticky/Sticky.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface StickyChildArgs {
+    style: React.CSSProperties;
+    isSticky: boolean;
+    wasSticky: boolean;
+    distanceFromTop: number;
+    distanceFromBottom: number;
+    calculatedHeight: number;
+}
+interface StickyProps {
+    children: (args: StickyChildArgs) => React.ReactElement;
+    relative?: boolean;
+    isActive?: boolean;
+    className?: string;
+    style?: any;
+    stickyClassName?: string;
+    stickyStyle?: any;
+    topOffset?: number;
+    bottomOffset?: number;
+    onStickyStateChange?: (isSticky: boolean) => void;
+    disableCompensation?: boolean;
+    disableHardwareAcceleration?: boolean;
+    isSider?: boolean;
+    getCalculatedHeight?: (height: number) => void;
+}
+declare const Sticky: React.FC<StickyProps>;
+export default Sticky;