@are-visual/virtual-table 0.3.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/index.d.ts +12 -5
- package/index.esm.js +29 -16
- package/index.esm.js.map +1 -1
- package/middleware/empty/index.js +11 -12
- package/middleware/empty/index.js.map +1 -1
- 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/middleware/loading/index.d.ts +1 -2
- package/middleware/loading/index.js +95 -33
- package/middleware/loading/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useContainerSize, createMiddleware } from '@are-visual/virtual-table';
|
|
3
|
-
import { useMemo, createElement, useCallback
|
|
3
|
+
import { useMemo, createElement, useCallback } from 'react';
|
|
4
4
|
|
|
5
5
|
const EmptyRow = props => {
|
|
6
6
|
const {
|
|
@@ -13,6 +13,9 @@ const EmptyRow = props => {
|
|
|
13
13
|
return jsx("tr", {
|
|
14
14
|
children: jsx("td", {
|
|
15
15
|
colSpan: colSpan,
|
|
16
|
+
style: {
|
|
17
|
+
padding: 0
|
|
18
|
+
},
|
|
16
19
|
children: jsx("div", {
|
|
17
20
|
style: {
|
|
18
21
|
boxSizing: 'border-box',
|
|
@@ -44,19 +47,15 @@ function useTableEmpty(ctx, args) {
|
|
|
44
47
|
}
|
|
45
48
|
return component;
|
|
46
49
|
}, [component]);
|
|
47
|
-
const
|
|
50
|
+
const renderBodyContent = useCallback((children, options) => {
|
|
48
51
|
const {
|
|
49
|
-
|
|
52
|
+
columnDescriptor
|
|
50
53
|
} = options;
|
|
51
|
-
if (/*#__PURE__*/isValidElement(children)) {
|
|
52
|
-
const childrenProps = children.props;
|
|
53
|
-
return /*#__PURE__*/cloneElement(children, childrenProps, [...(Array.isArray(childrenProps.children) ? childrenProps.children : []), jsx(EmptyRow, {
|
|
54
|
-
colSpan: columns.length,
|
|
55
|
-
children: node
|
|
56
|
-
}, "virtual-table-placeholder$")]);
|
|
57
|
-
}
|
|
58
54
|
return jsxs(Fragment, {
|
|
59
|
-
children: [children,
|
|
55
|
+
children: [children, jsx(EmptyRow, {
|
|
56
|
+
colSpan: columnDescriptor.length,
|
|
57
|
+
children: node
|
|
58
|
+
}, "virtual-table-placeholder$")]
|
|
60
59
|
});
|
|
61
60
|
}, [node]);
|
|
62
61
|
if (!showEmpty) {
|
|
@@ -64,7 +63,7 @@ function useTableEmpty(ctx, args) {
|
|
|
64
63
|
}
|
|
65
64
|
return {
|
|
66
65
|
...ctx,
|
|
67
|
-
|
|
66
|
+
renderBodyContent
|
|
68
67
|
};
|
|
69
68
|
}
|
|
70
69
|
const tableEmpty = createMiddleware(useTableEmpty);
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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} style={{ padding: 0 }}>\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, MiddlewareRenderBodyContent, MiddlewareResult } from '@are-visual/virtual-table'\nimport type { ComponentType, ReactNode } from 'react'\nimport { createMiddleware } from '@are-visual/virtual-table'\nimport { createElement, 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 renderBodyContent: MiddlewareRenderBodyContent = useCallback((children, options) => {\n const { columnDescriptor } = options\n\n return (\n <>\n {children}\n <EmptyRow key=\"virtual-table-placeholder$\" colSpan={columnDescriptor.length}>{node}</EmptyRow>\n </>\n )\n }, [node])\n\n if (!showEmpty) {\n return ctx\n }\n\n return {\n ...ctx,\n renderBodyContent,\n }\n}\n\nexport const tableEmpty = createMiddleware(useTableEmpty)\n"],"names":["EmptyRow","props","colSpan","children","tableWidth","useContainerSize","_jsx","style","padding","boxSizing","position","left","top","width","undefined","useTableEmpty","ctx","args","component","visible","dataSource","isNoData","Array","isArray","length","showEmpty","node","useMemo","createElement","renderBodyContent","useCallback","options","columnDescriptor","_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,GACE,CAAA,IAAA,EAAA;AAAAH,IAAAA,QAAA,EAAAG,GAAA,CAAA,IAAA,EAAA;AAAIJ,MAAAA,OAAO,EAAEA,OAAO;AAAEK,MAAAA,KAAK,EAAE;AAAEC,QAAAA,OAAO,EAAE;OAAG;AACzCL,MAAAA,QAAA,EAAAG,GAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,KAAK,EAAE;AACLE,UAAAA,SAAS,EAAE,YAAY;AACvBC,UAAAA,QAAQ,EAAE,QAAQ;AAClBC,UAAAA,IAAI,EAAE,CAAC;AACPC,UAAAA,GAAG,EAAE,CAAC;AACNJ,UAAAA,OAAO,EAAE,EAAE;AACXK,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,iBAAiB,GAAgCC,WAAW,CAAC,CAAC3B,QAAQ,EAAE4B,OAAO,KAAI;IACvF,MAAM;AAAEC,MAAAA;AAAkB,KAAA,GAAGD,OAAO;IAEpC,OACEE,IACG,CAAAC,QAAA,EAAA;AAAA/B,MAAAA,QAAA,EAAA,CAAAA,QAAQ,EACTG,GAAC,CAAAN,QAAQ;QAAkCE,OAAO,EAAE8B,gBAAgB,CAACR,MAAM;kBAAGE;OAAI,EAApE,4BAA4B,CAAoD;AAAA,KAAA,CAC7F;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;MAEaM,UAAU,GAAGC,gBAAgB,CAACrB,aAAa;;;;"}
|
|
@@ -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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"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as _are_visual_virtual_table from '@are-visual/virtual-table';
|
|
2
2
|
|
|
3
|
-
declare const loadingKey: unique symbol;
|
|
4
3
|
declare const tableLoading: <T = any>(options?: {
|
|
5
4
|
loading?: boolean;
|
|
6
5
|
} | undefined) => _are_visual_virtual_table.Middleware<T>;
|
|
7
6
|
|
|
8
|
-
export {
|
|
7
|
+
export { tableLoading };
|
|
@@ -1,14 +1,87 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createMiddleware, onResize } from '@are-visual/virtual-table';
|
|
3
|
-
import { useState, useEffect, useMemo } from 'react';
|
|
2
|
+
import { getKey, useTableSticky, isValidFixed, isValidFixedLeft, isValidFixedRight, useTableRowManager, findLastIndex, createMiddleware, onResize } from '@are-visual/virtual-table';
|
|
3
|
+
import { memo, useState, useEffect, useMemo } from 'react';
|
|
4
|
+
import clsx from 'clsx';
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
function LoadingCell(props) {
|
|
7
|
+
const {
|
|
8
|
+
column,
|
|
9
|
+
className
|
|
10
|
+
} = props;
|
|
11
|
+
const {
|
|
12
|
+
align,
|
|
13
|
+
fixed
|
|
14
|
+
} = column;
|
|
15
|
+
const key = getKey(column);
|
|
16
|
+
const {
|
|
17
|
+
size: stickySizes
|
|
18
|
+
} = useTableSticky();
|
|
19
|
+
return jsx("td", {
|
|
20
|
+
className: clsx('virtual-table-cell', className, align != null && `virtual-table-align-${align}`, isValidFixed(fixed) && 'virtual-table-sticky-cell'),
|
|
21
|
+
style: {
|
|
22
|
+
left: isValidFixedLeft(fixed) ? stickySizes.get(key) : undefined,
|
|
23
|
+
right: isValidFixedRight(fixed) ? stickySizes.get(key) : undefined
|
|
24
|
+
},
|
|
25
|
+
children: jsx("div", {
|
|
26
|
+
className: "virtual-table-loading-skeleton"
|
|
27
|
+
})
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
var LoadingCell$1 = /*#__PURE__*/memo(LoadingCell);
|
|
31
|
+
|
|
32
|
+
function LoadingRow(props) {
|
|
33
|
+
const {
|
|
34
|
+
descriptor,
|
|
35
|
+
style,
|
|
36
|
+
rowIndex
|
|
37
|
+
} = props;
|
|
38
|
+
const {
|
|
39
|
+
updateRowHeight
|
|
40
|
+
} = useTableRowManager();
|
|
41
|
+
const lastFixedLeftColumnIndex = findLastIndex(descriptor, x => {
|
|
42
|
+
if (x.type === 'blank') {
|
|
43
|
+
return false;
|
|
44
|
+
}
|
|
45
|
+
return isValidFixedLeft(x.column.fixed);
|
|
46
|
+
});
|
|
47
|
+
const firstFixedRightColumnIndex = descriptor.findIndex(x => {
|
|
48
|
+
if (x.type === 'blank') {
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
return isValidFixedRight(x.column.fixed);
|
|
52
|
+
});
|
|
53
|
+
return jsx("tr", {
|
|
54
|
+
className: "virtual-table-row virtual-table-loading-cell",
|
|
55
|
+
style: style,
|
|
56
|
+
ref: node => {
|
|
57
|
+
if (node == null) return;
|
|
58
|
+
updateRowHeight(rowIndex, rowIndex, node.offsetHeight);
|
|
59
|
+
},
|
|
60
|
+
children: descriptor.map((item, index) => {
|
|
61
|
+
const {
|
|
62
|
+
key
|
|
63
|
+
} = item;
|
|
64
|
+
if (item.type === 'blank') {
|
|
65
|
+
return jsx("td", {}, key);
|
|
66
|
+
}
|
|
67
|
+
const {
|
|
68
|
+
column
|
|
69
|
+
} = item;
|
|
70
|
+
return jsx(LoadingCell$1, {
|
|
71
|
+
className: clsx(lastFixedLeftColumnIndex === index && 'virtual-table-cell-fix-left-last', firstFixedRightColumnIndex === index && 'virtual-table-cell-fix-right-first'),
|
|
72
|
+
column: column
|
|
73
|
+
}, key);
|
|
74
|
+
})
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
var LoadingRow$1 = /*#__PURE__*/memo(LoadingRow);
|
|
78
|
+
|
|
79
|
+
const EMPTY_ARR = [];
|
|
6
80
|
function useTableLoading(ctx, options) {
|
|
7
81
|
const {
|
|
8
82
|
loading = false
|
|
9
83
|
} = options ?? {};
|
|
10
84
|
const {
|
|
11
|
-
columns: rawColumns,
|
|
12
85
|
estimatedRowHeight,
|
|
13
86
|
headerWrapperRef,
|
|
14
87
|
getScroller
|
|
@@ -31,45 +104,34 @@ function useTableLoading(ctx, options) {
|
|
|
31
104
|
length: count
|
|
32
105
|
}, (_, index) => {
|
|
33
106
|
return {
|
|
34
|
-
key: index
|
|
35
|
-
[loadingKey]: true
|
|
107
|
+
key: index
|
|
36
108
|
};
|
|
37
109
|
});
|
|
38
110
|
}, [count]);
|
|
39
|
-
const columns = useMemo(() => {
|
|
40
|
-
if (!loading) {
|
|
41
|
-
return rawColumns;
|
|
42
|
-
}
|
|
43
|
-
return rawColumns.map(column => {
|
|
44
|
-
return {
|
|
45
|
-
...column,
|
|
46
|
-
onCell() {
|
|
47
|
-
return {
|
|
48
|
-
className: 'virtual-table-loading-cell',
|
|
49
|
-
style: {
|
|
50
|
-
height: estimatedRowHeight
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
},
|
|
54
|
-
render() {
|
|
55
|
-
return jsx("div", {
|
|
56
|
-
className: "virtual-table-loading-skeleton"
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
});
|
|
61
|
-
}, [loading, rawColumns, estimatedRowHeight]);
|
|
62
111
|
if (!loading) {
|
|
63
112
|
return ctx;
|
|
64
113
|
}
|
|
65
114
|
return {
|
|
66
115
|
...ctx,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
116
|
+
dataSource: EMPTY_ARR,
|
|
117
|
+
renderBodyContent: (_ignore, _ref2) => {
|
|
118
|
+
let {
|
|
119
|
+
columnDescriptor,
|
|
120
|
+
startRowIndex
|
|
121
|
+
} = _ref2;
|
|
122
|
+
return fakeDataSource.map((item, index) => {
|
|
123
|
+
return jsx(LoadingRow$1, {
|
|
124
|
+
style: {
|
|
125
|
+
height: estimatedRowHeight
|
|
126
|
+
},
|
|
127
|
+
descriptor: columnDescriptor,
|
|
128
|
+
rowIndex: index + startRowIndex
|
|
129
|
+
}, item.key);
|
|
130
|
+
});
|
|
131
|
+
}
|
|
70
132
|
};
|
|
71
133
|
}
|
|
72
134
|
const tableLoading = createMiddleware(useTableLoading);
|
|
73
135
|
|
|
74
|
-
export {
|
|
136
|
+
export { tableLoading };
|
|
75
137
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../packages/virtual-table/src/middleware/loading/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../packages/virtual-table/src/middleware/loading/cell.tsx","../../../../packages/virtual-table/src/middleware/loading/row.tsx","../../../../packages/virtual-table/src/middleware/loading/index.tsx"],"sourcesContent":["import type { ColumnType } from '@are-visual/virtual-table'\nimport type { ReactElement } from 'react'\nimport { getKey, isValidFixed, isValidFixedLeft, isValidFixedRight, useTableSticky } from '@are-visual/virtual-table'\nimport clsx from 'clsx'\nimport { memo } from 'react'\n\nexport interface CellProps<T> {\n className?: string\n column: ColumnType<T>\n}\n\nfunction LoadingCell<T>(props: CellProps<T>) {\n const { column, className } = props\n\n const { align, fixed } = column\n const key = getKey(column)\n const { size: stickySizes } = useTableSticky()\n\n return (\n <td\n className={clsx(\n 'virtual-table-cell',\n className,\n align != null && `virtual-table-align-${align}`,\n isValidFixed(fixed) && 'virtual-table-sticky-cell',\n )}\n style={{\n left: isValidFixedLeft(fixed) ? stickySizes.get(key) : undefined,\n right: isValidFixedRight(fixed) ? stickySizes.get(key) : undefined,\n }}\n >\n <div className=\"virtual-table-loading-skeleton\" />\n </td>\n )\n}\n\nexport default memo(LoadingCell) as <T>(props: CellProps<T>) => ReactElement\n","import type { ColumnDescriptor } from '@are-visual/virtual-table'\nimport type { CSSProperties, ReactElement } from 'react'\nimport { findLastIndex, isValidFixedLeft, isValidFixedRight, useTableRowManager } from '@are-visual/virtual-table'\nimport clsx from 'clsx'\nimport { memo } from 'react'\nimport LoadingCell from './cell'\n\nexport interface RowProps<T> {\n style?: CSSProperties\n descriptor: ColumnDescriptor<T>[]\n rowIndex: number\n}\n\nfunction LoadingRow<T>(props: RowProps<T>) {\n const { descriptor, style, rowIndex } = props\n\n const { updateRowHeight } = useTableRowManager()\n\n const lastFixedLeftColumnIndex = findLastIndex(descriptor, (x) => {\n if (x.type === 'blank') {\n return false\n }\n return isValidFixedLeft(x.column.fixed)\n })\n const firstFixedRightColumnIndex = descriptor.findIndex((x) => {\n if (x.type === 'blank') {\n return false\n }\n return isValidFixedRight(x.column.fixed)\n })\n\n return (\n <tr\n className=\"virtual-table-row virtual-table-loading-cell\"\n style={style}\n ref={(node) => {\n if (node == null) return\n updateRowHeight(rowIndex, rowIndex, node.offsetHeight)\n }}\n >\n {descriptor.map((item, index) => {\n const { key } = item\n if (item.type === 'blank') {\n return <td key={key} />\n }\n const { column } = item\n return (\n <LoadingCell\n key={key}\n className={clsx(\n lastFixedLeftColumnIndex === index && 'virtual-table-cell-fix-left-last',\n firstFixedRightColumnIndex === index\n && 'virtual-table-cell-fix-right-first',\n )}\n column={column}\n />\n )\n })}\n </tr>\n )\n}\n\nexport default memo(LoadingRow) as <T>(props: RowProps<T>) => ReactElement\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { MiddlewareContext, MiddlewareResult } from '@are-visual/virtual-table'\nimport { createMiddleware, onResize } from '@are-visual/virtual-table'\nimport { useEffect, useMemo, useState } from 'react'\nimport LoadingRow from './row'\n\nconst EMPTY_ARR: unknown[] = []\n\nfunction useTableLoading<T = any>(\n ctx: MiddlewareContext<T>,\n options?: { loading?: boolean },\n): MiddlewareResult<T> {\n const { loading = false } = options ?? {}\n const { estimatedRowHeight, headerWrapperRef, getScroller } = ctx\n\n const [count, setCount] = useState(10)\n\n useEffect(() => {\n const header = headerWrapperRef.current\n const container = getScroller()\n if (container == null) return\n return onResize(container, ({ height }) => {\n const headerHeight = header?.offsetHeight ?? 0\n setCount(Math.ceil((height - headerHeight) / estimatedRowHeight))\n })\n }, [getScroller, headerWrapperRef, estimatedRowHeight])\n\n const fakeDataSource = useMemo(() => {\n return Array.from({ length: count }, (_, index) => {\n return { key: index }\n })\n }, [count])\n\n if (!loading) {\n return ctx\n }\n\n return {\n ...ctx,\n dataSource: EMPTY_ARR as T[],\n renderBodyContent: (_ignore, { columnDescriptor, startRowIndex }) => {\n return fakeDataSource.map((item, index) => {\n return (\n <LoadingRow\n key={item.key}\n style={{ height: estimatedRowHeight }}\n descriptor={columnDescriptor}\n rowIndex={index + startRowIndex}\n />\n )\n })\n },\n }\n}\n\nexport const tableLoading = createMiddleware(useTableLoading)\n"],"names":["LoadingCell","props","column","className","align","fixed","key","getKey","size","stickySizes","useTableSticky","_jsx","clsx","isValidFixed","style","left","isValidFixedLeft","get","undefined","right","isValidFixedRight","children","memo","LoadingRow","descriptor","rowIndex","updateRowHeight","useTableRowManager","lastFixedLeftColumnIndex","findLastIndex","x","type","firstFixedRightColumnIndex","findIndex","ref","node","offsetHeight","map","item","index","EMPTY_ARR","useTableLoading","ctx","options","loading","estimatedRowHeight","headerWrapperRef","getScroller","count","setCount","useState","useEffect","header","current","container","onResize","_ref","height","headerHeight","Math","ceil","fakeDataSource","useMemo","Array","from","length","_","dataSource","renderBodyContent","_ignore","_ref2","columnDescriptor","startRowIndex","tableLoading","createMiddleware"],"mappings":"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"}
|