@are-visual/virtual-table 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -5
- package/middleware/horizontal-scroll-bar/index.d.ts +2 -2
- package/middleware/horizontal-scroll-bar/index.js +5 -4
- package/middleware/horizontal-scroll-bar/index.js.map +1 -1
- package/middleware/horizontal-scroll-bar/styles.css +1 -1
- package/middleware/horizontal-scroll-bar/styles.scss +3 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -303,8 +303,9 @@ Context
|
|
|
303
303
|
├── colgroup
|
|
304
304
|
│
|
|
305
305
|
└── renderBody(<tbody />)
|
|
306
|
-
└──
|
|
307
|
-
└──
|
|
306
|
+
└── renderBodyContent(Row[])
|
|
307
|
+
└── renderRow(<tr />)
|
|
308
|
+
└── renderCell(<td />)
|
|
308
309
|
```
|
|
309
310
|
|
|
310
311
|
##### Render 类型签名
|
|
@@ -316,6 +317,7 @@ interface RenderOptions<T = any> {
|
|
|
316
317
|
rowIndex: number
|
|
317
318
|
columns: ColumnType<T>[]
|
|
318
319
|
rowData: T
|
|
320
|
+
startRowIndex: number
|
|
319
321
|
columnDescriptor: ColumnDescriptor<T>[]
|
|
320
322
|
}
|
|
321
323
|
|
|
@@ -361,17 +363,22 @@ type MiddlewareRenderHeaderCell<T = any> = (
|
|
|
361
363
|
|
|
362
364
|
type MiddlewareRenderBodyWrapper<T = any> = (
|
|
363
365
|
children: ReactNode,
|
|
364
|
-
options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
|
|
366
|
+
options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
|
|
365
367
|
) => ReactNode
|
|
366
368
|
|
|
367
369
|
type MiddlewareRenderBodyRoot<T = any> = (
|
|
368
370
|
children: ReactNode,
|
|
369
|
-
options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
|
|
371
|
+
options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
|
|
370
372
|
) => ReactNode
|
|
371
373
|
|
|
372
374
|
type MiddlewareRenderBody<T = any> = (
|
|
373
375
|
children: ReactNode,
|
|
374
|
-
options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
|
|
376
|
+
options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
|
|
377
|
+
) => ReactNode
|
|
378
|
+
|
|
379
|
+
type MiddlewareRenderBodyContent<T = any> = (
|
|
380
|
+
children: ReactNode,
|
|
381
|
+
options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
|
|
375
382
|
) => ReactNode
|
|
376
383
|
|
|
377
384
|
type MiddlewareRenderRow<T = any> = (
|
|
@@ -9,7 +9,7 @@ interface ScrollBarProps {
|
|
|
9
9
|
bodyRef: RefObject<HTMLTableElement>;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
type HorizontalScrollBarOptions = ScrollBarProps
|
|
13
|
-
declare const horizontalScrollBar: <T = any>(options?:
|
|
12
|
+
type HorizontalScrollBarOptions = Omit<ScrollBarProps, 'bodyRef'>;
|
|
13
|
+
declare const horizontalScrollBar: <T = any>(options?: HorizontalScrollBarOptions | undefined) => _are_visual_virtual_table.Middleware<T>;
|
|
14
14
|
|
|
15
15
|
export { type HorizontalScrollBarOptions, horizontalScrollBar };
|
|
@@ -53,10 +53,11 @@ const ScrollBar = props => {
|
|
|
53
53
|
className: clsx('virtual-table-sticky-scroll', className),
|
|
54
54
|
style: {
|
|
55
55
|
...style,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
56
|
+
// @ts-expect-error 使用 css 变量覆盖 bottom，而不是 bottom，这样需要高优先级的时候，就可以使用 style 代替
|
|
57
|
+
'--virtual-table-sticky-scroll-bottom': Number.isFinite(bottom) ? `${bottom}px` : bottom,
|
|
58
|
+
'paddingTop': size.height > 0 ? 0 : 12,
|
|
59
|
+
'marginTop': size.height > 0 ? 0 : size.height * -1,
|
|
60
|
+
'height': size.height,
|
|
60
61
|
zIndex
|
|
61
62
|
},
|
|
62
63
|
ref: wrapperRef,
|
|
@@ -1 +1 @@
|
|
|
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 notify(key, { scrollLeft: () => node.scrollLeft, 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
|
|
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 notify(key, { scrollLeft: () => node.scrollLeft, 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 // @ts-expect-error 使用 css 变量覆盖 bottom，而不是 bottom，这样需要高优先级的时候，就可以使用 style 代替\n '--virtual-table-sticky-scroll-bottom': Number.isFinite(bottom) ? `${bottom}px` : bottom,\n 'paddingTop': size.height > 0 ? 0 : 12,\n 'marginTop': size.height > 0 ? 0 : size.height * -1,\n 'height': size.height,\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 = Omit<ScrollBarProps, 'bodyRef'>\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","scrollLeft","dispose","addEventListener","removeEventListener","width","setWidth","useState","body","onResize","_ref","size","getScrollbarSize","_jsx","clsx","Number","isFinite","height","ref","children","useHorizontalScrollBar","ctx","options","bodyRootRef","renderContent","_jsxs","_Fragment","horizontalScrollBar","createMiddleware"],"mappings":"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"}
|