@are-visual/virtual-table 0.10.2 → 0.11.0

package/README.md

@@ -86,8 +86,8 @@ function App() {
 | colSpan      | **表头**列合并，设置为 0 时，不渲染                          | number |        |      |
 | title        | 表头内容                                                     | ReactNode |        |      |
 | align        | 单元格对齐方式                                               | `left` \|`right` \|`center` |        |      |
-| minWidth     | 列最小宽度                                                   | number                                    |        |      |
-| width        | 列宽度                                                       | number \| string                          |        |      |
+| ~~minWidth~~ | ~~列最小宽度~~                                               | ~~number~~                                |        | `v0.11`废弃 |
+| width        | 列宽度                                                       | number \| ~~string~~                      |        | `v0.11`废弃 `string`类型 |
 | fixed        | 固定列                                                       | `left` \| `right` |                           |        |
 | render       | 自定义单元格渲染内容                                         | (*value*, *record*, *index*) => ReactNode |        |      |
 | onHeaderCell | 设置表头单元格属性 | (column,  index) => TdHTMLAttributes                          |        |      |
@@ -681,8 +681,6 @@ const {
 
 当你自定义的插件需要同步水平滚动时，可以使用这个 hook。使用 `listen` 进行滚动同步。
 
-可参考 [horizontalScrollBar 水平滚动条](./packages/virtual-table/src/middleware/horizontal-scroll-bar)的实现。
-
 ```tsx
 import { useHorizontalScrollContext } from '@are-visual/virtual-table'
 
@@ -700,12 +698,29 @@ useEffect(() => {
   })
 }, [listen])
 
+<div
+  ref={element}
+  onScroll={() => {
+    // element 滚动时，调用 notify 函数，同步其他容器
+    notify('union-key', {
+      scrollLeft: () => element.current.scrollLeft,
+      node
+    })
+  }}
+/>
+```
 
-// element 滚动时，调用 notify 函数，同步其他容器
-notify('union-key', {
-  scrollLeft: () => element.scrollLeft,
-  node
-})
+
+##### useScrollSynchronize
+
+基于 `useHorizontalScrollContext` 的封装。
+
+```tsx
+import { useScrollSynchronize } from '@are-visual/virtual-table'
+
+const nodeRef = useScrollSynchronize<HTMLDivElement>('union-key')
+
+<div ref={nodeRef}></div>
 ```
 
 ##### useTableRowManager
@@ -743,7 +758,6 @@ interface TableRowManagerContextType {
 ```ts
 interface TableColumnsContextType {
   widthList: Map<Key, number>
-  setWidthList: (value: Map<Key, number>) => void
 }
 ```
 

package/index.d.ts

@@ -32,6 +32,7 @@ declare const _default$3: <T>(props: RowProps<T>) => ReactElement;
 interface TableBodyProps<T> extends Omit<NecessaryProps<T>, 'columns'>, Pick<RowProps<T>, 'onRow' | 'renderRow' | 'renderCell'> {
     className?: string;
     style?: CSSProperties;
+    defaultColumnWidth: number;
     columns: InnerColumnDescriptor<T>;
     bodyWrapperRef?: Ref<HTMLDivElement>;
     bodyRootRef?: Ref<HTMLTableElement>;
@@ -113,8 +114,8 @@ interface ColumnTypeCommon<T> extends ColumnExtra<T> {
     colSpan?: number;
     title?: ReactNode;
     align?: AlignType;
-    minWidth?: number;
-    width?: string | number;
+    /** @default 100 */
+    width?: number;
     fixed?: FixedType;
     render?: (value: any, record: T, index: number) => ReactNode;
     onHeaderCell?: (column: ColumnType<any>, index: number) => HTMLAttributes<any> & TdHTMLAttributes<any>;
@@ -142,8 +143,11 @@ interface InnerColumnDescriptor<T> {
     descriptor: ColumnDescriptor<T>[];
     columns: ColumnType<T>[];
 }
+type Prettify$1<T> = {
+    [K in keyof T]: T[K];
+} & {};
 interface TableInstanceBuildIn<T = any> {
-    getCurrentProps: () => Readonly<VirtualTableCoreProps<T>>;
+    getCurrentProps: () => Prettify$1<Readonly<Omit<VirtualTableCoreProps<T>, 'defaultColumnWidth'> & Required<Pick<VirtualTableCoreProps<T>, 'estimatedRowHeight' | 'overscanRows' | 'overscanColumns' | 'defaultColumnWidth'>>>>;
     /** 获取所有 middleware 处理过的 columns */
     getColumns: () => ColumnType<T>[];
     /** 获取所有 middleware 处理过的 dataSource */
@@ -324,13 +328,12 @@ declare const _default$1: <T>(props: CellProps<T>) => ReactElement;
 
 interface ColgroupProps {
     columns: ColumnDescriptor[];
-    onColumnSizesMeasure?: (columnSizes: Map<Key, number>) => void;
+    defaultColumnWidth: number;
 }
 declare const _default: react.NamedExoticComponent<ColgroupProps>;
 
 interface TableColumnsContextType {
     widthList: Map<Key, number>;
-    setWidthList: (value: Map<Key, number>) => void;
 }
 declare function useColumnSizes(): TableColumnsContextType;
 
@@ -351,6 +354,7 @@ interface HorizontalScrollContextState {
     }) => void;
 }
 declare function useHorizontalScrollContext(): HorizontalScrollContextState;
+declare function useScrollSynchronize<T extends HTMLElement>(key: string): react.RefObject<T>;
 
 interface TableRowManagerContextType {
     getRowHeightList: () => number[];
@@ -392,6 +396,8 @@ declare function createMiddleware<T, Args extends any[]>(hook: (ctx: MiddlewareC
 declare function getKey<T>(column: ColumnType<T>): Key;
 declare function getRowKey<T>(rowData: T, rowKey: NecessaryProps<T>['rowKey']): Key;
 
+declare function getColumnWidth<T>(column: ColumnType<T>, defaultColumnWidth: number): number;
+
 interface ResizeRect {
     width: number;
     height: number;
@@ -404,5 +410,5 @@ type PossibleRef<T> = Ref<T> | undefined;
 declare function mergeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 declare function useMergedRef<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 
-export { _default as Colgroup, NormalRowHeightKey, TablePipeline, _default$2 as VirtualTable, _default$1 as VirtualTableCell, _default$3 as VirtualTableRow, createMiddleware, findLastIndex, getKey, getRelativeOffsetTop, getRowKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTableInstance, useTablePipeline, useTableRowManager, useTableSticky };
+export { _default as Colgroup, NormalRowHeightKey, TablePipeline, _default$2 as VirtualTable, _default$1 as VirtualTableCell, _default$3 as VirtualTableRow, createMiddleware, findLastIndex, getColumnWidth, getKey, getRelativeOffsetTop, getRowKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useScrollSynchronize, useShallowMemo, useStableFn, useTableInstance, useTablePipeline, useTableRowManager, useTableSticky };
 export type { AlignType, AnyObject, ColumnDescriptor, ColumnExtra, ColumnType, ContainerSizeState, FixedType, HorizontalScrollContextState, MergedMiddlewareRender, Middleware, MiddlewareContext, MiddlewareRender, MiddlewareRenderBody, MiddlewareRenderBodyContent, MiddlewareRenderBodyRoot, MiddlewareRenderBodyWrapper, MiddlewareRenderCell, MiddlewareRenderContent, MiddlewareRenderHeader, MiddlewareRenderHeaderCell, MiddlewareRenderHeaderRoot, MiddlewareRenderHeaderRow, MiddlewareRenderHeaderWrapper, MiddlewareRenderRoot, MiddlewareRenderRow, MiddlewareRenders, MiddlewareResult, OnRowType, PipelineRender, PipelineRenderOptions, ScrollElement, StickyContextState, TableColumnsContextType, TableInstance, TableInstanceBuildIn, TableRowManagerContextType, UseTablePipelineOptions, CellProps as VirtualTableCellProps, VirtualTableCoreProps as VirtualTableProps, RowProps as VirtualTableRowProps };