@are-visual/virtual-table 0.0.1

package/middleware/empty/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../packages/virtual-table/src/middleware/empty/empty-row.tsx","../../../../packages/virtual-table/src/middleware/empty/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react'\nimport { useContainerSize } from '@are-visual/virtual-table'\n\nexport interface EmptyRowProps {\n  colSpan: number\n  children: ReactNode\n}\n\nconst EmptyRow: FC<EmptyRowProps> = (props) => {\n  const { colSpan, children } = props\n  const { tableWidth } = useContainerSize()\n\n  return (\n    <tr>\n      <td colSpan={colSpan}>\n        <div\n          style={{\n            boxSizing: 'border-box',\n            position: 'sticky',\n            left: 0,\n            top: 0,\n            padding: 16,\n            width: tableWidth <= 0 ? undefined : tableWidth,\n          }}\n        >\n          {children}\n        </div>\n      </td>\n    </tr>\n  )\n}\n\nexport default EmptyRow\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { MiddlewareContext, MiddlewareRenderBody, MiddlewareResult } from '@are-visual/virtual-table'\nimport type { ComponentType, ReactNode } from 'react'\nimport { createMiddleware } from '@are-visual/virtual-table'\nimport { cloneElement, createElement, isValidElement, useCallback, useMemo } from 'react'\nimport EmptyRow from './empty-row'\n\nexport interface EmptyOptions {\n  children: ReactNode | ComponentType\n  visible?: boolean\n}\n\nfunction useTableEmpty<T = any>(ctx: MiddlewareContext<T>, args: EmptyOptions): MiddlewareResult<T> {\n  const { children: component, visible = true } = args\n  const { dataSource } = ctx\n\n  const isNoData = !Array.isArray(dataSource) ? true : dataSource.length === 0\n  const showEmpty = isNoData && visible\n\n  const node = useMemo(() => {\n    if (typeof component === 'function') {\n      return createElement(component)\n    }\n    return component\n  }, [component])\n\n  const renderBody: MiddlewareRenderBody = useCallback((children, options) => {\n    const { columns } = options\n\n    if (isValidElement(children)) {\n      const childrenProps = children.props as Record<string, unknown>\n      return cloneElement(children, childrenProps, [\n        ...(Array.isArray(childrenProps.children) ? childrenProps.children : []),\n        <EmptyRow key=\"virtual-table-placeholder$\" colSpan={columns.length}>{node}</EmptyRow>,\n      ])\n    }\n\n    return (\n      <>\n        {children}\n        {node}\n      </>\n    )\n  }, [node])\n\n  if (!showEmpty) {\n    return ctx\n  }\n\n  return {\n    ...ctx,\n    renderBody,\n  }\n}\n\nexport const tableEmpty = createMiddleware(useTableEmpty)\n"],"names":["EmptyRow","props","colSpan","children","tableWidth","useContainerSize","_jsx","style","boxSizing","position","left","top","padding","width","undefined","useTableEmpty","ctx","args","component","visible","dataSource","isNoData","Array","isArray","length","showEmpty","node","useMemo","createElement","renderBody","useCallback","options","columns","isValidElement","childrenProps","cloneElement","_jsxs","_Fragment","tableEmpty","createMiddleware"],"mappings":";;;;AAQA,MAAMA,QAAQ,GAAuBC,KAAK,IAAI;EAC5C,MAAM;IAAEC,OAAO;AAAEC,IAAAA;AAAU,GAAA,GAAGF,KAAK;EACnC,MAAM;AAAEG,IAAAA;GAAY,GAAGC,gBAAgB,EAAE;EAEzC,OACEC;cACEA,GAAI,CAAA,IAAA,EAAA;AAAAJ,MAAAA,OAAO,EAAEA,OAAO;AAAAC,MAAAA,QAAA,EAClBG,GACE,CAAA,KAAA,EAAA;AAAAC,QAAAA,KAAK,EAAE;AACLC,UAAAA,SAAS,EAAE,YAAY;AACvBC,UAAAA,QAAQ,EAAE,QAAQ;AAClBC,UAAAA,IAAI,EAAE,CAAC;AACPC,UAAAA,GAAG,EAAE,CAAC;AACNC,UAAAA,OAAO,EAAE,EAAE;AACXC,UAAAA,KAAK,EAAET,UAAU,IAAI,CAAC,GAAGU,SAAS,GAAGV;SACtC;AAAAD,QAAAA,QAAA,EAEAA;OAAQ;KAER;AAAA,GAAA,CACF;AAET,CAAC;;AClBD,SAASY,aAAaA,CAAUC,GAAyB,EAAEC,IAAkB,EAAA;EAC3E,MAAM;AAAEd,IAAAA,QAAQ,EAAEe,SAAS;AAAEC,IAAAA,OAAO,GAAG;AAAI,GAAE,GAAGF,IAAI;EACpD,MAAM;AAAEG,IAAAA;AAAY,GAAA,GAAGJ,GAAG;AAE1B,EAAA,MAAMK,QAAQ,GAAG,CAACC,KAAK,CAACC,OAAO,CAACH,UAAU,CAAC,GAAG,IAAI,GAAGA,UAAU,CAACI,MAAM,KAAK,CAAC;AAC5E,EAAA,MAAMC,SAAS,GAAGJ,QAAQ,IAAIF,OAAO;AAErC,EAAA,MAAMO,IAAI,GAAGC,OAAO,CAAC,MAAK;AACxB,IAAA,IAAI,OAAOT,SAAS,KAAK,UAAU,EAAE;MACnC,oBAAOU,aAAa,CAACV,SAAS,CAAC;AACjC;AACA,IAAA,OAAOA,SAAS;AAClB,GAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAMW,UAAU,GAAyBC,WAAW,CAAC,CAAC3B,QAAQ,EAAE4B,OAAO,KAAI;IACzE,MAAM;AAAEC,MAAAA;AAAS,KAAA,GAAGD,OAAO;AAE3B,IAAA,iBAAIE,cAAc,CAAC9B,QAAQ,CAAC,EAAE;AAC5B,MAAA,MAAM+B,aAAa,GAAG/B,QAAQ,CAACF,KAAgC;MAC/D,oBAAOkC,YAAY,CAAChC,QAAQ,EAAE+B,aAAa,EAAE,CAC3C,IAAIZ,KAAK,CAACC,OAAO,CAACW,aAAa,CAAC/B,QAAQ,CAAC,GAAG+B,aAAa,CAAC/B,QAAQ,GAAG,EAAE,CAAC,EACxEG,GAAC,CAAAN,QAAQ,EAAkC;QAAAE,OAAO,EAAE8B,OAAO,CAACR,MAAM;AAAGrB,QAAAA,QAAA,EAAAuB;AAAvD,OAAA,EAAA,4BAA4B,CAA2C,CACtF,CAAC;AACJ;IAEA,OACEU,IACG,CAAAC,QAAA,EAAA;AAAAlC,MAAAA,QAAA,EAAA,CAAAA,QAAQ,EACRuB,IAAI;AAAA,KAAA,CACJ;AAEP,GAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAI,CAACD,SAAS,EAAE;AACd,IAAA,OAAOT,GAAG;AACZ;EAEA,OAAO;AACL,IAAA,GAAGA,GAAG;AACNa,IAAAA;GACD;AACH;MAEaS,UAAU,GAAGC,gBAAgB,CAACxB,aAAa;;;;"}

package/middleware/expandable/index.d.ts

@@ -0,0 +1,37 @@
+import * as _are_visual_virtual_table from '@are-visual/virtual-table';
+import { FixedType, ColumnExtra, ColumnType } from '@are-visual/virtual-table';
+import { ReactNode, Key, MouseEvent } from 'react';
+
+type TriggerEventHandler<T> = (record: T, event: MouseEvent<HTMLElement>) => void;
+interface RenderExpandIconProps<T> {
+    prefixCls: string;
+    expanded: boolean;
+    record: T;
+    expandable: boolean;
+    onExpand: TriggerEventHandler<T>;
+}
+type RowClassName<T> = (record: T, index: number, indent: number) => string;
+type RenderExpandIcon<T> = (props: RenderExpandIconProps<T>) => ReactNode;
+type ExpandedRowRender<T> = (record: T, index: number, indent: number, expanded: boolean) => ReactNode;
+interface ExpandableConfig<T> {
+    expandedRowKeys?: readonly Key[];
+    defaultExpandedRowKeys?: readonly Key[];
+    expandedRowRender?: ExpandedRowRender<T>;
+    columnTitle?: ReactNode;
+    expandRowByClick?: boolean;
+    expandIcon?: RenderExpandIcon<T>;
+    onExpand?: (expanded: boolean, record: T) => void;
+    onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
+    defaultExpandAllRows?: boolean;
+    showExpandColumn?: boolean;
+    expandedRowClassName?: string | RowClassName<T>;
+    rowExpandable?: (record: T) => boolean;
+    columnWidth?: number | string;
+    fixed?: FixedType;
+    extraColumnProps?: ColumnExtra;
+}
+declare const EXPANSION_COLUMN_KEY = "VirtualTable.EXPANSION_COLUMN";
+declare function isExpansionColumn<T = any>(column: ColumnType<T>): boolean;
+declare const tableExpandable: <T = any>(options?: ExpandableConfig<T> | undefined) => _are_visual_virtual_table.Middleware<T>;
+
+export { EXPANSION_COLUMN_KEY, type ExpandableConfig, type ExpandedRowRender, type RenderExpandIcon, type RenderExpandIconProps, type RowClassName, isExpansionColumn, tableExpandable };

package/middleware/expandable/index.js

@@ -0,0 +1,239 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTableRowManager, useContainerSize, createMiddleware, useShallowMemo, useStableFn, isValidFixed } from '@are-visual/virtual-table';
+import { useControllableValue } from '@are-visual/virtual-table/middleware/utils/useControllableValue';
+import clsx from 'clsx';
+import { useRef, useMemo, useCallback } from 'react';
+
+const ExpandRow = props => {
+  const {
+    className,
+    style,
+    rowIndex,
+    isExpanded,
+    colSpan,
+    children,
+    fixed
+  } = props;
+  const {
+    getRowHeightList,
+    updateRowHeight
+  } = useTableRowManager();
+  const {
+    tableWidth
+  } = useContainerSize();
+  const currentNodeHeight = useRef(0);
+  return jsx("tr", {
+    className: clsx('virtual-table-expanded-row', className),
+    style: {
+      ...style,
+      display: isExpanded ? undefined : 'none'
+    },
+    ref: node => {
+      if (node == null) return;
+      const originHeight = getRowHeightList()[rowIndex] ?? 0;
+      if (isExpanded) {
+        currentNodeHeight.current = node.offsetHeight;
+        updateRowHeight(rowIndex, originHeight + currentNodeHeight.current);
+      }
+    },
+    children: jsx("td", {
+      colSpan: colSpan,
+      children: jsx("div", {
+        className: clsx('virtual-table-cell', fixed && 'virtual-table-expanded-row-fixed'),
+        style: {
+          width: tableWidth <= 0 ? undefined : tableWidth
+        },
+        children: children
+      })
+    })
+  });
+};
+
+const EXPANSION_COLUMN_KEY = 'VirtualTable.EXPANSION_COLUMN';
+function isExpansionColumn(column) {
+  return column.key === EXPANSION_COLUMN_KEY;
+}
+function getRowKey(rowData, rowKey) {
+  return rowData[rowKey];
+}
+function useTableExpandable(ctx, options) {
+  const disablePlugin = options == null;
+  const {
+    rowKey,
+    columns: rawColumns,
+    dataSource
+  } = ctx;
+  const {
+    // expandedRowKeys,
+    // onExpandedRowsChange,
+    defaultExpandedRowKeys,
+    expandedRowRender,
+    columnTitle,
+    expandRowByClick = false,
+    expandIcon,
+    onExpand,
+    defaultExpandAllRows = false,
+    // TODO: 未实现
+    // indentSize: _indentSize,
+    showExpandColumn = true,
+    expandedRowClassName,
+    rowExpandable,
+    columnWidth = 50,
+    fixed,
+    extraColumnProps
+  } = options ?? {};
+  const _rowExpandableValue = useMemo(() => {
+    return dataSource.map(row => {
+      if (!rowExpandable) return false;
+      return rowExpandable(row);
+    });
+  }, [dataSource, rowExpandable]);
+  // useShallowMemo 每一次渲染时候都会重新求值，这对于某些开销较大的计算不太友好，
+  // 所以使用 useMemo 求值再通过 useShallowMemo 浅比较
+  // useMemo 标记 deps 后，若 deps 不变也就不需要重新求值
+  // 使用 useShallowMemo 主要是为了防止重新求值后结果不变但地址指针变化，导致不必要的渲染
+  const rowExpandableRecord = useShallowMemo(() => _rowExpandableValue);
+  // 即使 defaultExpandAllRows 变更之后，此插件也不要响应变化，只使用初始值，所以存储一下
+  const defaultExpandAll = useRef(
+  // options 中有 expandedRowKeys 则表示受控模式，那么 defaultExpandAllRows 不生效
+  'expandedRowKeys' in (options ?? {}) || 'defaultExpandedRowKeys' in (options ?? {}) ? false : defaultExpandAllRows);
+  const defaultExpandKey = useShallowMemo(() => {
+    if (defaultExpandAll.current) {
+      const expandKeys = dataSource.map((record, index) => {
+        if (rowExpandableRecord[index]) {
+          const key = record[rowKey];
+          return key;
+        }
+        return null;
+      });
+      return expandKeys.filter(x => x != null);
+    }
+    return [];
+  });
+  const expansionKeys = useRef(new Set(defaultExpandedRowKeys ?? defaultExpandKey));
+  const [expansion, setExpansion] = useControllableValue(options ?? {}, {
+    trigger: 'onExpandedRowsChange',
+    valuePropName: 'expandedRowKeys',
+    defaultValue: defaultExpandedRowKeys ?? defaultExpandKey
+  });
+  const onUpdateExpansion = useStableFn((rowData, shouldExpand) => {
+    const key = getRowKey(rowData, rowKey);
+    expansionKeys.current.add(key);
+    if (shouldExpand == null) {
+      if (expansion.includes(key)) {
+        setExpansion(expansion.filter(x => x !== key));
+        onExpand?.(false, rowData);
+      } else {
+        setExpansion([...expansion, key]);
+        onExpand?.(true, rowData);
+      }
+    } else if (shouldExpand) {
+      setExpansion([...expansion, key]);
+      onExpand?.(true, rowData);
+    } else {
+      setExpansion(expansion.filter(x => x !== key));
+      onExpand?.(false, rowData);
+    }
+  });
+  const isFixed = isValidFixed(fixed);
+  const renderRow = useCallback((children, args) => {
+    const {
+      rowData,
+      rowIndex,
+      columnDescriptor
+    } = args;
+    const isExpandable = rowExpandableRecord[rowIndex];
+    if (isExpandable) {
+      const key = getRowKey(rowData, rowKey);
+      const isExpanded = expansion.includes(key);
+      const isRendered = expansionKeys.current.has(key);
+      let className = '';
+      if (typeof expandedRowClassName === 'string') {
+        className = expandedRowClassName;
+      } else if (typeof expandedRowClassName === 'function') {
+        className = expandedRowClassName(rowData, rowIndex, 0);
+      }
+      return jsxs(Fragment, {
+        children: [children, isRendered && jsx(ExpandRow, {
+          className: className,
+          rowIndex: rowIndex,
+          isExpanded: isExpanded,
+          colSpan: columnDescriptor.length,
+          fixed: isFixed,
+          children: expandedRowRender?.(rowData, rowIndex, 0, isExpanded)
+        })]
+      });
+    }
+    return children;
+  }, [isFixed, rowExpandableRecord, rowKey, expansion, expandedRowClassName, expandedRowRender]);
+  const columns = useMemo(() => {
+    if (!showExpandColumn) {
+      return rawColumns;
+    }
+    return [{
+      ...extraColumnProps,
+      key: EXPANSION_COLUMN_KEY,
+      title: columnTitle,
+      width: columnWidth,
+      fixed,
+      render(_value, record, index) {
+        const key = record[rowKey];
+        const expandable = rowExpandableRecord[index] ?? false;
+        const expanded = expansion.includes(key);
+        if (typeof expandIcon === 'function') {
+          return expandIcon({
+            expandable,
+            expanded,
+            record,
+            prefixCls: 'virtual-table',
+            onExpand: (rowData, _e) => {
+              onUpdateExpansion(rowData);
+            }
+          });
+        }
+        if (!expandable) {
+          return null;
+        }
+        return jsx("button", {
+          className: clsx('virtual-table-row-expand-icon', expanded ? 'virtual-table-row-expand-icon-expanded' : 'virtual-table-row-expand-icon-collapsed'),
+          type: "button",
+          "aria-label": expanded ? '关闭行' : '展开行',
+          "aria-expanded": expanded,
+          onClick: () => {
+            onUpdateExpansion(record, !expanded);
+          }
+        });
+      },
+      onHeaderCell() {
+        return {
+          className: 'virtual-table-expand-column'
+        };
+      }
+    }, ...rawColumns];
+  }, [showExpandColumn, columnTitle, columnWidth, fixed, rawColumns, rowKey, rowExpandableRecord, expansion, expandIcon, onUpdateExpansion, extraColumnProps]);
+  const onRow = useCallback((record, index) => {
+    if (rowExpandableRecord[index]) {
+      return {
+        onClick: e => {
+          e.stopPropagation();
+          onUpdateExpansion(record);
+        }
+      };
+    }
+    return {};
+  }, [rowExpandableRecord, onUpdateExpansion]);
+  if (disablePlugin) {
+    return ctx;
+  }
+  return {
+    ...ctx,
+    columns,
+    renderRow,
+    onRow: !expandRowByClick ? undefined : onRow
+  };
+}
+/* eslint max-len: ["error", { "code": 120 }] */
+const tableExpandable = createMiddleware(useTableExpandable);
+
+export { EXPANSION_COLUMN_KEY, isExpansionColumn, tableExpandable };
+//# sourceMappingURL=index.js.map

package/middleware/expandable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../packages/virtual-table/src/middleware/expandable/expand-row.tsx","../../../../packages/virtual-table/src/middleware/expandable/index.tsx"],"sourcesContent":["import type { CSSProperties, FC, ReactNode } from 'react'\nimport { useContainerSize, useTableRowManager } from '@are-visual/virtual-table'\nimport clsx from 'clsx'\nimport { useRef } from 'react'\n\nexport interface ExpandRowProps {\n  className?: string\n  style?: CSSProperties\n  rowIndex: number\n  isExpanded?: boolean\n  colSpan?: number\n  children?: ReactNode\n  fixed?: boolean\n}\n\nconst ExpandRow: FC<ExpandRowProps> = (props) => {\n  const {\n    className,\n    style,\n    rowIndex,\n    isExpanded,\n    colSpan,\n    children,\n    fixed,\n  } = props\n\n  const { getRowHeightList, updateRowHeight } = useTableRowManager()\n  const { tableWidth } = useContainerSize()\n\n  const currentNodeHeight = useRef(0)\n\n  return (\n    <tr\n      className={clsx('virtual-table-expanded-row', className)}\n      style={{ ...style, display: isExpanded ? undefined : 'none' }}\n      ref={(node) => {\n        if (node == null) return\n\n        const originHeight = getRowHeightList()[rowIndex] ?? 0\n        if (isExpanded) {\n          currentNodeHeight.current = node.offsetHeight\n          updateRowHeight(rowIndex, originHeight + currentNodeHeight.current)\n        } else {\n          // 关闭后，不需要再次更新 RowHeight，否则计算会出错\n        }\n      }}\n    >\n      <td colSpan={colSpan}>\n        <div\n          className={clsx(\n            'virtual-table-cell',\n            fixed && 'virtual-table-expanded-row-fixed',\n          )}\n          style={{ width: tableWidth <= 0 ? undefined : tableWidth }}\n        >\n          {children}\n        </div>\n      </td>\n    </tr>\n  )\n}\n\nexport default ExpandRow\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  AnyObject,\n  ColumnExtra,\n  ColumnType,\n  FixedType,\n  MiddlewareContext,\n  MiddlewareRenderRow,\n  MiddlewareResult,\n  OnRowType,\n} from '@are-visual/virtual-table'\nimport type { Key, MouseEvent, ReactNode } from 'react'\nimport { createMiddleware, isValidFixed, useShallowMemo, useStableFn } from '@are-visual/virtual-table'\nimport { useControllableValue } from '@are-visual/virtual-table/middleware/utils/useControllableValue'\nimport clsx from 'clsx'\nimport { useCallback, useMemo, useRef } from 'react'\nimport ExpandRow from './expand-row'\n\ntype TriggerEventHandler<T> = (record: T, event: MouseEvent<HTMLElement>) => void\nexport interface RenderExpandIconProps<T> {\n  prefixCls: string\n  expanded: boolean\n  record: T\n  expandable: boolean\n  onExpand: TriggerEventHandler<T>\n}\nexport type RowClassName<T> = (record: T, index: number, indent: number) => string\nexport type RenderExpandIcon<T> = (props: RenderExpandIconProps<T>) => ReactNode\nexport type ExpandedRowRender<T> = (record: T, index: number, indent: number, expanded: boolean) => ReactNode\n\nexport interface ExpandableConfig<T> {\n  expandedRowKeys?: readonly Key[]\n  defaultExpandedRowKeys?: readonly Key[]\n  expandedRowRender?: ExpandedRowRender<T>\n  columnTitle?: ReactNode\n  expandRowByClick?: boolean\n  expandIcon?: RenderExpandIcon<T>\n  onExpand?: (expanded: boolean, record: T) => void\n  onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void\n  defaultExpandAllRows?: boolean\n  showExpandColumn?: boolean\n  expandedRowClassName?: string | RowClassName<T>\n  rowExpandable?: (record: T) => boolean\n  columnWidth?: number | string\n  fixed?: FixedType\n  extraColumnProps?: ColumnExtra\n}\n\nexport const EXPANSION_COLUMN_KEY = 'VirtualTable.EXPANSION_COLUMN'\n\nexport function isExpansionColumn<T = any>(column: ColumnType<T>) {\n  return column.key === EXPANSION_COLUMN_KEY\n}\n\nfunction getRowKey<T>(rowData: T, rowKey: (string & {}) | keyof T) {\n  return (rowData as AnyObject)[rowKey as string] as Key\n}\n\nfunction useTableExpandable<T = any>(\n  ctx: MiddlewareContext<T>,\n  options?: ExpandableConfig<T>,\n): MiddlewareResult<T> {\n  const disablePlugin = options == null\n\n  const { rowKey, columns: rawColumns, dataSource } = ctx\n  const {\n    // expandedRowKeys,\n    // onExpandedRowsChange,\n    defaultExpandedRowKeys,\n    expandedRowRender,\n    columnTitle,\n    expandRowByClick = false,\n    expandIcon,\n    onExpand,\n\n    defaultExpandAllRows = false,\n\n    // TODO: 未实现\n    // indentSize: _indentSize,\n\n    showExpandColumn = true,\n    expandedRowClassName,\n\n    rowExpandable,\n    columnWidth = 50,\n    fixed,\n    extraColumnProps,\n  } = options ?? {}\n\n  const _rowExpandableValue = useMemo(() => {\n    return dataSource.map((row) => {\n      if (!rowExpandable) return false\n      return rowExpandable(row)\n    })\n  }, [dataSource, rowExpandable])\n\n  // useShallowMemo 每一次渲染时候都会重新求值，这对于某些开销较大的计算不太友好，\n  // 所以使用 useMemo 求值再通过 useShallowMemo 浅比较\n  // useMemo 标记 deps 后，若 deps 不变也就不需要重新求值\n  // 使用 useShallowMemo 主要是为了防止重新求值后结果不变但地址指针变化，导致不必要的渲染\n  const rowExpandableRecord = useShallowMemo(() => _rowExpandableValue)\n\n  // 即使 defaultExpandAllRows 变更之后，此插件也不要响应变化，只使用初始值，所以存储一下\n  const defaultExpandAll = useRef(\n    // options 中有 expandedRowKeys 则表示受控模式，那么 defaultExpandAllRows 不生效\n    'expandedRowKeys' in (options ?? {}) || 'defaultExpandedRowKeys' in (options ?? {})\n      ? false\n      : defaultExpandAllRows,\n  )\n  const defaultExpandKey = useShallowMemo((): readonly Key[] => {\n    if (defaultExpandAll.current) {\n      const expandKeys = dataSource.map((record, index): Key | null => {\n        if (rowExpandableRecord[index]) {\n          const key = (record as AnyObject)[rowKey as string] as string | number\n          return key\n        }\n        return null\n      })\n      return expandKeys.filter((x) => x != null)\n    }\n    return []\n  })\n\n  const expansionKeys = useRef(new Set<Key>(defaultExpandedRowKeys ?? defaultExpandKey))\n  const [expansion, setExpansion] = useControllableValue<readonly Key[]>(\n    options ?? {},\n    {\n      trigger: 'onExpandedRowsChange',\n      valuePropName: 'expandedRowKeys',\n      defaultValue: defaultExpandedRowKeys ?? defaultExpandKey,\n    },\n  )\n\n  const onUpdateExpansion = useStableFn((rowData: T, shouldExpand?: boolean) => {\n    const key = getRowKey(rowData, rowKey)\n    expansionKeys.current.add(key)\n    if (shouldExpand == null) {\n      if (expansion.includes(key)) {\n        setExpansion(expansion.filter((x) => x !== key))\n        onExpand?.(false, rowData)\n      } else {\n        setExpansion([...expansion, key])\n        onExpand?.(true, rowData)\n      }\n    } else if (shouldExpand) {\n      setExpansion([...expansion, key])\n      onExpand?.(true, rowData)\n    } else {\n      setExpansion(expansion.filter((x) => x !== key))\n      onExpand?.(false, rowData)\n    }\n  })\n\n  const isFixed = isValidFixed(fixed)\n\n  const renderRow: MiddlewareRenderRow = useCallback((children, args) => {\n    const { rowData, rowIndex, columnDescriptor } = args\n\n    const isExpandable = rowExpandableRecord[rowIndex]\n    if (isExpandable) {\n      const key = getRowKey(rowData as T, rowKey)\n      const isExpanded: boolean | undefined = expansion.includes(key)\n      const isRendered = expansionKeys.current.has(key)\n\n      let className = ''\n      if (typeof expandedRowClassName === 'string') {\n        className = expandedRowClassName\n      } else if (typeof expandedRowClassName === 'function') {\n        className = expandedRowClassName(rowData as T, rowIndex, 0)\n      }\n\n      return (\n        <>\n          {children}\n          {isRendered && (\n            <ExpandRow\n              className={className}\n              rowIndex={rowIndex}\n              isExpanded={isExpanded}\n              colSpan={columnDescriptor.length}\n              fixed={isFixed}\n            >\n              {expandedRowRender?.(rowData as T, rowIndex, 0, isExpanded)}\n            </ExpandRow>\n          )}\n        </>\n      )\n    }\n    return children\n  }, [\n    isFixed,\n    rowExpandableRecord,\n    rowKey,\n    expansion,\n    expandedRowClassName,\n    expandedRowRender,\n  ])\n\n  const columns = useMemo((): ColumnType<T>[] => {\n    if (!showExpandColumn) {\n      return rawColumns\n    }\n\n    return [\n      {\n        ...extraColumnProps,\n        key: EXPANSION_COLUMN_KEY,\n        title: columnTitle,\n        width: columnWidth,\n        fixed,\n        render(_value, record, index) {\n          const key = (record as AnyObject)[rowKey as string] as string | number\n\n          const expandable = rowExpandableRecord[index] ?? false\n          const expanded = expansion.includes(key)\n\n          if (typeof expandIcon === 'function') {\n            return expandIcon({\n              expandable,\n              expanded,\n              record,\n              prefixCls: 'virtual-table',\n              onExpand: (rowData: T, _e) => {\n                onUpdateExpansion(rowData)\n              },\n            })\n          }\n\n          if (!expandable) {\n            return null\n          }\n\n          return (\n            <button\n              className={clsx(\n                'virtual-table-row-expand-icon',\n                expanded\n                  ? 'virtual-table-row-expand-icon-expanded'\n                  : 'virtual-table-row-expand-icon-collapsed',\n              )}\n              type=\"button\"\n              aria-label={expanded ? '关闭行' : '展开行'}\n              aria-expanded={expanded}\n              onClick={() => {\n                onUpdateExpansion(record, !expanded)\n              }}\n            />\n          )\n        },\n        onHeaderCell() {\n          return { className: 'virtual-table-expand-column' }\n        },\n      },\n      ...rawColumns,\n    ]\n  }, [\n    showExpandColumn,\n    columnTitle,\n    columnWidth,\n    fixed,\n    rawColumns,\n    rowKey,\n    rowExpandableRecord,\n    expansion,\n    expandIcon,\n    onUpdateExpansion,\n    extraColumnProps,\n  ])\n\n  const onRow: OnRowType<T> = useCallback((record, index) => {\n    if (rowExpandableRecord[index]) {\n      return {\n        onClick: (e) => {\n          e.stopPropagation()\n          onUpdateExpansion(record)\n        },\n      }\n    }\n    return {}\n  }, [rowExpandableRecord, onUpdateExpansion])\n\n  if (disablePlugin) {\n    return ctx\n  }\n\n  return {\n    ...ctx,\n    columns,\n    renderRow,\n    onRow: !expandRowByClick ? undefined : onRow,\n  }\n}\n\n/* eslint max-len: [\"error\", { \"code\": 120 }] */\nexport const tableExpandable = createMiddleware(useTableExpandable)\n"],"names":["ExpandRow","props","className","style","rowIndex","isExpanded","colSpan","children","fixed","getRowHeightList","updateRowHeight","useTableRowManager","tableWidth","useContainerSize","currentNodeHeight","useRef","_jsx","clsx","display","undefined","ref","node","originHeight","current","offsetHeight","width","EXPANSION_COLUMN_KEY","isExpansionColumn","column","key","getRowKey","rowData","rowKey","useTableExpandable","ctx","options","disablePlugin","columns","rawColumns","dataSource","defaultExpandedRowKeys","expandedRowRender","columnTitle","expandRowByClick","expandIcon","onExpand","defaultExpandAllRows","showExpandColumn","expandedRowClassName","rowExpandable","columnWidth","extraColumnProps","_rowExpandableValue","useMemo","map","row","rowExpandableRecord","useShallowMemo","defaultExpandAll","defaultExpandKey","expandKeys","record","index","filter","x","expansionKeys","Set","expansion","setExpansion","useControllableValue","trigger","valuePropName","defaultValue","onUpdateExpansion","useStableFn","shouldExpand","add","includes","isFixed","isValidFixed","renderRow","useCallback","args","columnDescriptor","isExpandable","isRendered","has","_jsxs","length","title","render","_value","expandable","expanded","prefixCls","_e","type","onClick","onHeaderCell","onRow","e","stopPropagation","tableExpandable","createMiddleware"],"mappings":"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"}

package/middleware/expandable/styles.css

@@ -0,0 +1,49 @@
+.virtual-table-expanded-row .virtual-table-cell {
+  background-color: var(--virtual-table-expanded-row-background, rgba(0, 0, 0, 0.02));
+}
+.virtual-table-expanded-row > td {
+  padding: 0;
+}
+.virtual-table-expanded-row-fixed {
+  position: sticky;
+  left: 0;
+  overflow: hidden;
+}
+
+.virtual-table-row-expand-icon {
+  position: relative;
+  display: inline-flex;
+  vertical-align: sub;
+  border: 1px solid var(--virtual-table-expanded-icon-border-color, #f0f0f0);
+  width: var(--virtual-table-expanded-icon-width, 17px);
+  height: var(--virtual-table-expanded-icon-height, 17px);
+  background-color: var(--virtual-table-expanded-icon-background, #fff);
+  border-radius: var(--virtual-table-expanded-icon-radius, 6px);
+  cursor: pointer;
+  color: var(--virtual-table-expanded-icon-color, rgba(0, 0, 0, 0.88));
+  transition: all 0.3s;
+}
+.virtual-table-row-expand-icon::before, .virtual-table-row-expand-icon::after {
+  content: "";
+  position: absolute;
+  background-color: currentColor;
+}
+.virtual-table-row-expand-icon::before {
+  top: 7px;
+  left: 3px;
+  width: 9px;
+  height: 1px;
+}
+.virtual-table-row-expand-icon::after {
+  top: 3px;
+  left: 7px;
+  height: 9px;
+  width: 1px;
+}
+.virtual-table-row-expand-icon:hover {
+  color: var(--virtual-table-expanded-icon-hover-color, #69b1ff);
+  border-color: var(--virtual-table-expanded-icon-hover-border-color, currentColor);
+}
+.virtual-table-row-expand-icon-expanded::after {
+  background-color: transparent;
+}

package/middleware/expandable/styles.scss

@@ -0,0 +1,73 @@
+$virtual-table-expanded-row-background: var(--virtual-table-expanded-row-background, rgba(0, 0, 0, 0.02));
+$virtual-table-expanded-icon-width: var(--virtual-table-expanded-icon-width, 17px);
+$virtual-table-expanded-icon-height: var(--virtual-table-expanded-icon-height, 17px);
+$virtual-table-expanded-icon-background: var(--virtual-table-expanded-icon-background, #fff);
+$virtual-table-expanded-icon-border-color: var(--virtual-table-expanded-icon-border-color, #f0f0f0);
+$virtual-table-expanded-icon-hover-border-color: var(--virtual-table-expanded-icon-hover-border-color, currentColor);
+$virtual-table-expanded-icon-color: var(--virtual-table-expanded-icon-color, rgba(0, 0, 0, 0.88));
+$virtual-table-expanded-icon-hover-color: var(--virtual-table-expanded-icon-hover-color, #69b1ff);
+$virtual-table-expanded-icon-radius: var(--virtual-table-expanded-icon-radius, 6px);
+
+.virtual-table-expanded-row {
+  .virtual-table-cell {
+    background-color: $virtual-table-expanded-row-background;
+  }
+
+  &>td {
+    padding: 0;
+  }
+
+  &-fixed {
+    position: sticky;
+    left: 0;
+    overflow: hidden;
+  }
+}
+
+.virtual-table-row-expand-icon {
+  position: relative;
+  display: inline-flex;
+  vertical-align: sub;
+  border: 1px solid $virtual-table-expanded-icon-border-color;
+  width: $virtual-table-expanded-icon-width;
+  height: $virtual-table-expanded-icon-height;
+  background-color: $virtual-table-expanded-icon-background;
+  border-radius: $virtual-table-expanded-icon-radius;
+  cursor: pointer;
+  color: $virtual-table-expanded-icon-color;
+  transition: all 0.3s;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: currentColor;
+  }
+
+  &::before {
+    top: 7px;
+    left: 3px;
+    width: 9px;
+    height: 1px;
+  }
+
+  &::after {
+    top: 3px;
+    left: 7px;
+    height: 9px;
+    width: 1px;
+  }
+
+  &:hover {
+    color: $virtual-table-expanded-icon-hover-color;
+    border-color: $virtual-table-expanded-icon-hover-border-color;
+  }
+
+  &-expanded {
+    &::after {
+      background-color: transparent;
+    }
+  }
+
+  &-collapsed {}
+}

package/middleware/horizontal-scroll-bar/index.d.ts

@@ -0,0 +1,15 @@
+import * as _are_visual_virtual_table from '@are-visual/virtual-table';
+import { CSSProperties, RefObject } from 'react';
+
+interface ScrollBarProps {
+    className?: string;
+    style?: CSSProperties;
+    bottom?: number | string;
+    zIndex?: number;
+    bodyRef: RefObject<HTMLTableElement>;
+}
+
+type HorizontalScrollBarOptions = ScrollBarProps;
+declare const horizontalScrollBar: <T = any>(options?: ScrollBarProps | undefined) => _are_visual_virtual_table.Middleware<T>;
+
+export { type HorizontalScrollBarOptions, horizontalScrollBar };

package/middleware/horizontal-scroll-bar/index.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useHorizontalScrollContext, onResize, createMiddleware } from '@are-visual/virtual-table';
+import { getScrollbarSize } from '@are-visual/virtual-table/middleware/utils/getScrollbarSize';
+import clsx from 'clsx';
+import { useRef, useEffect, useState } from 'react';
+
+const ScrollBar = props => {
+  const {
+    className,
+    style,
+    bottom,
+    zIndex,
+    bodyRef
+  } = props;
+  const {
+    listen,
+    notify
+  } = useHorizontalScrollContext();
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    const node = wrapperRef.current;
+    if (node == null) return;
+    const key = 'virtual-table-sticky-bottom-scroll';
+    const onScroll = () => {
+      const nextScrollLeft = node.scrollLeft;
+      notify(key, nextScrollLeft, node);
+    };
+    const dispose = listen(key, scrollLeft => {
+      node.scrollLeft = scrollLeft;
+    });
+    node.addEventListener('scroll', onScroll);
+    return () => {
+      node.removeEventListener('scroll', onScroll);
+      dispose();
+    };
+  }, [listen, notify]);
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const body = bodyRef.current;
+    if (body == null) return;
+    return onResize(body, _ref => {
+      let {
+        width
+      } = _ref;
+      if (width === 0) return;
+      setWidth(width);
+    });
+  }, [bodyRef]);
+  const [size] = useState(getScrollbarSize);
+  return jsx("div", {
+    className: clsx('virtual-table-sticky-scroll', className),
+    style: {
+      ...style,
+      paddingTop: size.height > 0 ? 0 : 12,
+      marginTop: size.height > 0 ? 0 : size.height * -1,
+      height: size.height,
+      bottom,
+      zIndex
+    },
+    ref: wrapperRef,
+    children: jsx("div", {
+      className: "virtual-table-sticky-scroll-bar",
+      style: {
+        width
+      }
+    })
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useHorizontalScrollBar(ctx, options) {
+  const {
+    bodyRootRef
+  } = ctx;
+  return {
+    ...ctx,
+    renderContent(children) {
+      return jsxs(Fragment, {
+        children: [children, jsx(ScrollBar, {
+          bodyRef: bodyRootRef,
+          ...options
+        })]
+      });
+    }
+  };
+}
+const horizontalScrollBar = createMiddleware(useHorizontalScrollBar);
+
+export { horizontalScrollBar };
+//# sourceMappingURL=index.js.map

package/middleware/horizontal-scroll-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../packages/virtual-table/src/middleware/horizontal-scroll-bar/scroll-bar.tsx","../../../../packages/virtual-table/src/middleware/horizontal-scroll-bar/index.tsx"],"sourcesContent":["import type { CSSProperties, FC, RefObject } from 'react'\nimport { onResize, useHorizontalScrollContext } from '@are-visual/virtual-table'\nimport { getScrollbarSize } from '@are-visual/virtual-table/middleware/utils/getScrollbarSize'\nimport clsx from 'clsx'\nimport { useEffect, useRef, useState } from 'react'\n\nexport interface ScrollBarProps {\n  className?: string\n  style?: CSSProperties\n  bottom?: number | string\n  zIndex?: number\n  bodyRef: RefObject<HTMLTableElement>\n}\n\nconst ScrollBar: FC<ScrollBarProps> = (props) => {\n  const { className, style, bottom, zIndex, bodyRef } = props\n  const { listen, notify } = useHorizontalScrollContext()\n\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    const node = wrapperRef.current\n    if (node == null) return\n    const key = 'virtual-table-sticky-bottom-scroll'\n    const onScroll = () => {\n      const nextScrollLeft = node.scrollLeft\n      notify(key, nextScrollLeft, node)\n    }\n    const dispose = listen(key, (scrollLeft) => {\n      node.scrollLeft = scrollLeft\n    })\n    node.addEventListener('scroll', onScroll)\n    return () => {\n      node.removeEventListener('scroll', onScroll)\n      dispose()\n    }\n  }, [listen, notify])\n\n  const [width, setWidth] = useState(0)\n  useEffect(() => {\n    const body = bodyRef.current\n    if (body == null) return\n    return onResize(body, ({ width }) => {\n      if (width === 0) return\n      setWidth(width)\n    })\n  }, [bodyRef])\n\n  const [size] = useState(getScrollbarSize)\n\n  return (\n    <div\n      className={clsx('virtual-table-sticky-scroll', className)}\n      style={{\n        ...style,\n        paddingTop: size.height > 0 ? 0 : 12,\n        marginTop: size.height > 0 ? 0 : size.height * -1,\n        height: size.height,\n        bottom,\n        zIndex,\n      }}\n      ref={wrapperRef}\n    >\n      <div className=\"virtual-table-sticky-scroll-bar\" style={{ width }}></div>\n    </div>\n  )\n}\n\nexport default ScrollBar\n","import type { MiddlewareContext, MiddlewareResult } from '@are-visual/virtual-table'\nimport type { ScrollBarProps } from './scroll-bar'\nimport { createMiddleware } from '@are-visual/virtual-table'\nimport ScrollBar from './scroll-bar'\n\nexport type HorizontalScrollBarOptions = ScrollBarProps\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction useHorizontalScrollBar<T = any>(\n  ctx: MiddlewareContext<T>,\n  options?: HorizontalScrollBarOptions,\n): MiddlewareResult<T> {\n  const { bodyRootRef } = ctx\n\n  return {\n    ...ctx,\n    renderContent(children) {\n      return (\n        <>\n          {children}\n          <ScrollBar\n            bodyRef={bodyRootRef}\n            {...options}\n          />\n        </>\n      )\n    },\n  }\n}\n\nexport const horizontalScrollBar = createMiddleware(useHorizontalScrollBar)\n"],"names":["ScrollBar","props","className","style","bottom","zIndex","bodyRef","listen","notify","useHorizontalScrollContext","wrapperRef","useRef","useEffect","node","current","key","onScroll","nextScrollLeft","scrollLeft","dispose","addEventListener","removeEventListener","width","setWidth","useState","body","onResize","_ref","size","getScrollbarSize","_jsx","clsx","paddingTop","height","marginTop","ref","children","useHorizontalScrollBar","ctx","options","bodyRootRef","renderContent","_jsxs","_Fragment","horizontalScrollBar","createMiddleware"],"mappings":"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"}

package/middleware/horizontal-scroll-bar/styles.css

@@ -0,0 +1,11 @@
+.virtual-table-sticky-scroll {
+  overflow: auto;
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  box-sizing: border-box;
+}
+.virtual-table-sticky-scroll-bar {
+  height: 1px;
+  visibility: hidden;
+}

package/middleware/horizontal-scroll-bar/styles.scss

@@ -0,0 +1,13 @@
+.virtual-table-sticky-scroll {
+  overflow: auto;
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  box-sizing: border-box;
+
+  &-bar {
+    // 必须有高度才能出现滚动条
+    height: 1px;
+    visibility: hidden;
+  }
+}

package/middleware/loading/index.d.ts

@@ -0,0 +1,7 @@
+import * as _are_visual_virtual_table from '@are-visual/virtual-table';
+
+declare const tableLoading: <T = any>(options?: {
+    loading?: boolean;
+} | undefined) => _are_visual_virtual_table.Middleware<T>;
+
+export { tableLoading };