@react-spectrum/table 3.12.11-nightly.4684 → 3.12.11-nightly.4691
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/dist/TableViewBase.main.js +3 -5
- package/dist/TableViewBase.main.js.map +1 -1
- package/dist/TableViewBase.mjs +3 -5
- package/dist/TableViewBase.module.js +3 -5
- package/dist/TableViewBase.module.js.map +1 -1
- package/dist/TableViewLayout.main.js +75 -0
- package/dist/TableViewLayout.main.js.map +1 -0
- package/dist/TableViewLayout.mjs +70 -0
- package/dist/TableViewLayout.module.js +70 -0
- package/dist/TableViewLayout.module.js.map +1 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +30 -30
- package/src/TableViewBase.tsx +5 -7
- package/src/TableViewLayout.ts +69 -0
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import {Rect as $5yFQM$Rect, LayoutInfo as $5yFQM$LayoutInfo} from "@react-stately/virtualizer";
|
|
2
|
+
import {TableLayout as $5yFQM$TableLayout} from "@react-stately/layout";
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
class $5fb43af69b290859$export$725d101278f5a47b extends (0, $5yFQM$TableLayout) {
|
|
7
|
+
buildCollection() {
|
|
8
|
+
let loadingState = this.collection.body.props.loadingState;
|
|
9
|
+
this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
10
|
+
return super.buildCollection();
|
|
11
|
+
}
|
|
12
|
+
buildColumn(node, x, y) {
|
|
13
|
+
let res = super.buildColumn(node, x, y);
|
|
14
|
+
res.layoutInfo.allowOverflow = true; // for resizer nubbin
|
|
15
|
+
return res;
|
|
16
|
+
}
|
|
17
|
+
buildBody() {
|
|
18
|
+
let node = super.buildBody(0);
|
|
19
|
+
let { children: children, layoutInfo: layoutInfo } = node;
|
|
20
|
+
let width = node.layoutInfo.rect.width;
|
|
21
|
+
if (this.isLoading) {
|
|
22
|
+
// Add some margin around the loader to ensure that scrollbars don't flicker in and out.
|
|
23
|
+
let rect = new (0, $5yFQM$Rect)(40, 40, (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
|
|
24
|
+
let loader = new (0, $5yFQM$LayoutInfo)('loader', 'loader', rect);
|
|
25
|
+
loader.parentKey = layoutInfo.key;
|
|
26
|
+
loader.isSticky = children.length === 0;
|
|
27
|
+
let node = {
|
|
28
|
+
layoutInfo: loader,
|
|
29
|
+
validRect: loader.rect
|
|
30
|
+
};
|
|
31
|
+
children.push(node);
|
|
32
|
+
this.layoutNodes.set(loader.key, node);
|
|
33
|
+
layoutInfo.rect.height = loader.rect.maxY;
|
|
34
|
+
width = Math.max(width, rect.width);
|
|
35
|
+
} else if (children.length === 0) {
|
|
36
|
+
let rect = new (0, $5yFQM$Rect)(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
|
|
37
|
+
let empty = new (0, $5yFQM$LayoutInfo)('empty', 'empty', rect);
|
|
38
|
+
empty.parentKey = layoutInfo.key;
|
|
39
|
+
empty.isSticky = true;
|
|
40
|
+
let node = {
|
|
41
|
+
layoutInfo: empty,
|
|
42
|
+
validRect: empty.rect
|
|
43
|
+
};
|
|
44
|
+
children.push(node);
|
|
45
|
+
layoutInfo.rect.height = empty.rect.maxY;
|
|
46
|
+
width = Math.max(width, rect.width);
|
|
47
|
+
}
|
|
48
|
+
return node;
|
|
49
|
+
}
|
|
50
|
+
buildRow(node, x, y) {
|
|
51
|
+
let res = super.buildRow(node, x, y);
|
|
52
|
+
res.layoutInfo.rect.height += 1; // for bottom border
|
|
53
|
+
return res;
|
|
54
|
+
}
|
|
55
|
+
getEstimatedRowHeight() {
|
|
56
|
+
return super.getEstimatedRowHeight() + 1; // for bottom border
|
|
57
|
+
}
|
|
58
|
+
isStickyColumn(node) {
|
|
59
|
+
var _node_props, _node_props1;
|
|
60
|
+
return ((_node_props = node.props) === null || _node_props === void 0 ? void 0 : _node_props.isDragButtonCell) || ((_node_props1 = node.props) === null || _node_props1 === void 0 ? void 0 : _node_props1.isSelectionCell);
|
|
61
|
+
}
|
|
62
|
+
constructor(...args){
|
|
63
|
+
super(...args);
|
|
64
|
+
this.isLoading = false;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
export {$5fb43af69b290859$export$725d101278f5a47b as TableViewLayout};
|
|
70
|
+
//# sourceMappingURL=TableViewLayout.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;AAIO,MAAM,kDAA2B,CAAA,GAAA,kBAAU;IAGtC,kBAAgC;QACxC,IAAI,eAAe,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;QAC1D,IAAI,CAAC,SAAS,GAAG,iBAAiB,aAAa,iBAAiB;QAChE,OAAO,KAAK,CAAC;IACf;IAEU,YAAY,IAAiB,EAAE,CAAS,EAAE,CAAS,EAAc;QACzE,IAAI,MAAM,KAAK,CAAC,YAAY,MAAM,GAAG;QACrC,IAAI,UAAU,CAAC,aAAa,GAAG,MAAM,qBAAqB;QAC1D,OAAO;IACT;IAEU,YAAwB;QAChC,IAAI,OAAO,KAAK,CAAC,UAAU;QAC3B,IAAI,YAAC,QAAQ,cAAE,UAAU,EAAC,GAAG;QAC7B,IAAI,QAAQ,KAAK,UAAU,CAAC,IAAI,CAAC,KAAK;QAEtC,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,wFAAwF;YACxF,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,IAAI,IAAI,AAAC,CAAA,SAAS,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,AAAD,IAAK,IAAI,SAAS,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,KAAK;YACnJ,IAAI,SAAS,IAAI,CAAA,GAAA,iBAAS,EAAE,UAAU,UAAU;YAChD,OAAO,SAAS,GAAG,WAAW,GAAG;YACjC,OAAO,QAAQ,GAAG,SAAS,MAAM,KAAK;YACtC,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,SAAS,IAAI,CAAC;YACd,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,WAAW,IAAI,CAAC,MAAM,GAAG,OAAO,IAAI,CAAC,IAAI;YACzC,QAAQ,KAAK,GAAG,CAAC,OAAO,KAAK,KAAK;QACpC,OAAO,IAAI,SAAS,MAAM,KAAK,GAAG;YAChC,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG;YAC3G,IAAI,QAAQ,IAAI,CAAA,GAAA,iBAAS,EAAE,SAAS,SAAS;YAC7C,MAAM,SAAS,GAAG,WAAW,GAAG;YAChC,MAAM,QAAQ,GAAG;YACjB,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,MAAM,IAAI;YACvB;YACA,SAAS,IAAI,CAAC;YACd,WAAW,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI;YACxC,QAAQ,KAAK,GAAG,CAAC,OAAO,KAAK,KAAK;QACpC;QAEA,OAAO;IACT;IAEU,SAAS,IAAiB,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,IAAI,MAAM,KAAK,CAAC,SAAS,MAAM,GAAG;QAClC,IAAI,UAAU,CAAC,IAAI,CAAC,MAAM,IAAI,GAAG,oBAAoB;QACrD,OAAO;IACT;IAEU,wBAAgC;QACxC,OAAO,KAAK,CAAC,0BAA0B,GAAG,oBAAoB;IAChE;IAEU,eAAe,IAAiB,EAAE;YACnC,aAAgC;QAAvC,OAAO,EAAA,cAAA,KAAK,KAAK,cAAV,kCAAA,YAAY,gBAAgB,OAAI,eAAA,KAAK,KAAK,cAAV,mCAAA,aAAY,eAAe;IACpE;;;aA9DQ,YAAqB;;AA+D/B","sources":["packages/@react-spectrum/table/src/TableViewLayout.ts"],"sourcesContent":["import {GridNode} from '@react-types/grid';\nimport {LayoutInfo, Rect} from '@react-stately/virtualizer';\nimport {LayoutNode, TableLayout} from '@react-stately/layout';\n\nexport class TableViewLayout<T> extends TableLayout<T> {\n private isLoading: boolean = false;\n\n protected buildCollection(): LayoutNode[] {\n let loadingState = this.collection.body.props.loadingState;\n this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n return super.buildCollection();\n }\n\n protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {\n let res = super.buildColumn(node, x, y);\n res.layoutInfo.allowOverflow = true; // for resizer nubbin\n return res;\n }\n\n protected buildBody(): LayoutNode {\n let node = super.buildBody(0);\n let {children, layoutInfo} = node;\n let width = node.layoutInfo.rect.width;\n\n if (this.isLoading) {\n // Add some margin around the loader to ensure that scrollbars don't flicker in and out.\n let rect = new Rect(40, 40, (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);\n let loader = new LayoutInfo('loader', 'loader', rect);\n loader.parentKey = layoutInfo.key;\n loader.isSticky = children.length === 0;\n let node = {\n layoutInfo: loader,\n validRect: loader.rect\n };\n children.push(node);\n this.layoutNodes.set(loader.key, node);\n layoutInfo.rect.height = loader.rect.maxY;\n width = Math.max(width, rect.width);\n } else if (children.length === 0) {\n let rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);\n let empty = new LayoutInfo('empty', 'empty', rect);\n empty.parentKey = layoutInfo.key;\n empty.isSticky = true;\n let node = {\n layoutInfo: empty,\n validRect: empty.rect\n };\n children.push(node);\n layoutInfo.rect.height = empty.rect.maxY;\n width = Math.max(width, rect.width);\n }\n\n return node;\n }\n\n protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {\n let res = super.buildRow(node, x, y);\n res.layoutInfo.rect.height += 1; // for bottom border\n return res;\n }\n\n protected getEstimatedRowHeight(): number {\n return super.getEstimatedRowHeight() + 1; // for bottom border\n }\n\n protected isStickyColumn(node: GridNode<T>) {\n return node.props?.isDragButtonCell || node.props?.isSelectionCell;\n }\n}\n"],"names":[],"version":3,"file":"TableViewLayout.module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;
|
|
1
|
+
{"mappings":";;;;ASoBA,oCAAoC,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC,EAAE,sBAAsB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAC3H;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACxD;;;;OAIG;IACH,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,4BAA4B,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACrD;;;;;OAKG;IACH,yBAAyB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAA;CACpD;AAWD;;GAEG;AACH,OAAA,MAAM,WAA0D,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC9EnJ,OAAA,MAAM,QAA2B,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC;AAGnF,OAAO,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,GAAG,EACH,IAAI,EACL,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAC,mBAAmB,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/InsertionIndicator.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/Nubbin.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/Resizer.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/RootDropIndicator.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/DragPreview.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/TableViewLayout.ts","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/TableViewBase.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/TableView.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/TreeGridTableView.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/TableViewWrapper.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/index.ts","packages/@react-spectrum/table/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TableView} from './TableViewWrapper';\nimport {Column} from '@react-stately/table';\nimport {JSX} from 'react';\nimport {SpectrumColumnProps} from '@react-types/table';\n\n// Override TS for Column to support spectrum specific props.\nconst SpectrumColumn = Column as <T>(props: SpectrumColumnProps<T>) => JSX.Element;\nexport {SpectrumColumn as Column};\n\nexport {\n TableHeader,\n TableBody,\n Section,\n Row,\n Cell\n} from '@react-stately/table';\n\nexport type {SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-types/table';\nexport type {SpectrumTableProps} from './TableViewWrapper';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/table",
|
|
3
|
-
"version": "3.12.11-nightly.
|
|
3
|
+
"version": "3.12.11-nightly.4691+fabca84b9",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,37 +36,37 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/button": "3.0.0-nightly.
|
|
40
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
41
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
42
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
43
|
-
"@react-aria/overlays": "3.0.0-nightly.
|
|
44
|
-
"@react-aria/selection": "3.0.0-nightly.
|
|
45
|
-
"@react-aria/table": "3.14.2-nightly.
|
|
46
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
47
|
-
"@react-aria/virtualizer": "3.10.2-nightly.
|
|
48
|
-
"@react-aria/visually-hidden": "3.0.0-nightly.
|
|
49
|
-
"@react-spectrum/checkbox": "3.0.0-nightly.
|
|
50
|
-
"@react-spectrum/dnd": "3.3.11-nightly.
|
|
51
|
-
"@react-spectrum/layout": "3.6.6-nightly.
|
|
52
|
-
"@react-spectrum/menu": "3.19.2-nightly.
|
|
53
|
-
"@react-spectrum/progress": "3.0.0-nightly.
|
|
54
|
-
"@react-spectrum/tooltip": "3.0.0-nightly.
|
|
55
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
56
|
-
"@react-stately/flags": "3.0.4-nightly.
|
|
57
|
-
"@react-stately/layout": "3.13.10-nightly.
|
|
58
|
-
"@react-stately/table": "3.11.9-nightly.
|
|
59
|
-
"@react-stately/virtualizer": "3.7.2-nightly.
|
|
60
|
-
"@react-types/grid": "3.2.7-nightly.
|
|
61
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
62
|
-
"@react-types/table": "3.9.6-nightly.
|
|
63
|
-
"@spectrum-icons/ui": "3.0.0-nightly.
|
|
39
|
+
"@react-aria/button": "3.0.0-nightly.2979+fabca84b9",
|
|
40
|
+
"@react-aria/focus": "3.0.0-nightly.2979+fabca84b9",
|
|
41
|
+
"@react-aria/i18n": "3.0.0-nightly.2979+fabca84b9",
|
|
42
|
+
"@react-aria/interactions": "3.0.0-nightly.2979+fabca84b9",
|
|
43
|
+
"@react-aria/overlays": "3.0.0-nightly.2979+fabca84b9",
|
|
44
|
+
"@react-aria/selection": "3.0.0-nightly.2979+fabca84b9",
|
|
45
|
+
"@react-aria/table": "3.14.2-nightly.4691+fabca84b9",
|
|
46
|
+
"@react-aria/utils": "3.0.0-nightly.2979+fabca84b9",
|
|
47
|
+
"@react-aria/virtualizer": "3.10.2-nightly.4691+fabca84b9",
|
|
48
|
+
"@react-aria/visually-hidden": "3.0.0-nightly.2979+fabca84b9",
|
|
49
|
+
"@react-spectrum/checkbox": "3.0.0-nightly.2979+fabca84b9",
|
|
50
|
+
"@react-spectrum/dnd": "3.3.11-nightly.4691+fabca84b9",
|
|
51
|
+
"@react-spectrum/layout": "3.6.6-nightly.4691+fabca84b9",
|
|
52
|
+
"@react-spectrum/menu": "3.19.2-nightly.4691+fabca84b9",
|
|
53
|
+
"@react-spectrum/progress": "3.0.0-nightly.2979+fabca84b9",
|
|
54
|
+
"@react-spectrum/tooltip": "3.0.0-nightly.2979+fabca84b9",
|
|
55
|
+
"@react-spectrum/utils": "3.0.0-nightly.2979+fabca84b9",
|
|
56
|
+
"@react-stately/flags": "3.0.4-nightly.4691+fabca84b9",
|
|
57
|
+
"@react-stately/layout": "3.13.10-nightly.4691+fabca84b9",
|
|
58
|
+
"@react-stately/table": "3.11.9-nightly.4691+fabca84b9",
|
|
59
|
+
"@react-stately/virtualizer": "3.7.2-nightly.4691+fabca84b9",
|
|
60
|
+
"@react-types/grid": "3.2.7-nightly.4691+fabca84b9",
|
|
61
|
+
"@react-types/shared": "3.0.0-nightly.2979+fabca84b9",
|
|
62
|
+
"@react-types/table": "3.9.6-nightly.4691+fabca84b9",
|
|
63
|
+
"@spectrum-icons/ui": "3.0.0-nightly.2979+fabca84b9",
|
|
64
64
|
"@swc/helpers": "^0.5.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
68
|
-
"@react-aria/dnd": "3.6.2-nightly.
|
|
69
|
-
"@react-stately/dnd": "3.3.2-nightly.
|
|
67
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2979+fabca84b9",
|
|
68
|
+
"@react-aria/dnd": "3.6.2-nightly.4691+fabca84b9",
|
|
69
|
+
"@react-stately/dnd": "3.3.2-nightly.4691+fabca84b9"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "fabca84b95c9c61f9062d5f1e66ebe2c920a2a5d"
|
|
80
80
|
}
|
package/src/TableViewBase.tsx
CHANGED
|
@@ -48,8 +48,8 @@ import {DragPreview as SpectrumDragPreview} from './DragPreview';
|
|
|
48
48
|
import {SpectrumTableProps} from './TableViewWrapper';
|
|
49
49
|
import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
|
|
50
50
|
import stylesOverrides from './table.css';
|
|
51
|
-
import {TableLayout} from '@react-stately/layout';
|
|
52
51
|
import {TableState, TreeGridState, useTableColumnResizeState} from '@react-stately/table';
|
|
52
|
+
import {TableViewLayout} from './TableViewLayout';
|
|
53
53
|
import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
|
|
54
54
|
import {useButton} from '@react-aria/button';
|
|
55
55
|
import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
|
|
@@ -113,7 +113,7 @@ export interface TableContextValue<T> {
|
|
|
113
113
|
dragAndDropHooks: DragAndDropHooks['dragAndDropHooks'],
|
|
114
114
|
isTableDraggable: boolean,
|
|
115
115
|
isTableDroppable: boolean,
|
|
116
|
-
layout:
|
|
116
|
+
layout: TableViewLayout<T>,
|
|
117
117
|
headerRowHovered: boolean,
|
|
118
118
|
isInResizeMode: boolean,
|
|
119
119
|
setIsInResizeMode: (val: boolean) => void,
|
|
@@ -185,7 +185,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
|
|
|
185
185
|
let bodyRef = useRef<HTMLDivElement>(undefined);
|
|
186
186
|
|
|
187
187
|
let density = props.density || 'regular';
|
|
188
|
-
let layout = useMemo(() => new
|
|
188
|
+
let layout = useMemo(() => new TableViewLayout({
|
|
189
189
|
// If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights.
|
|
190
190
|
rowHeight: props.overflowMode === 'wrap'
|
|
191
191
|
? null
|
|
@@ -198,9 +198,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
|
|
|
198
198
|
: DEFAULT_HEADER_HEIGHT[scale],
|
|
199
199
|
estimatedHeadingHeight: props.overflowMode === 'wrap'
|
|
200
200
|
? DEFAULT_HEADER_HEIGHT[scale]
|
|
201
|
-
: null
|
|
202
|
-
scrollContainer: 'body',
|
|
203
|
-
enableEmptyState: true
|
|
201
|
+
: null
|
|
204
202
|
}),
|
|
205
203
|
// don't recompute when state.collection changes, only used for initial value
|
|
206
204
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -494,7 +492,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
|
|
|
494
492
|
|
|
495
493
|
interface TableVirtualizerProps<T> extends HTMLAttributes<HTMLElement> {
|
|
496
494
|
tableState: TableState<T>,
|
|
497
|
-
layout:
|
|
495
|
+
layout: TableViewLayout<T>,
|
|
498
496
|
collection: TableCollection<T>,
|
|
499
497
|
focusedKey: Key | null,
|
|
500
498
|
renderView: (type: string, content: GridNode<T>) => ReactElement,
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import {GridNode} from '@react-types/grid';
|
|
2
|
+
import {LayoutInfo, Rect} from '@react-stately/virtualizer';
|
|
3
|
+
import {LayoutNode, TableLayout} from '@react-stately/layout';
|
|
4
|
+
|
|
5
|
+
export class TableViewLayout<T> extends TableLayout<T> {
|
|
6
|
+
private isLoading: boolean = false;
|
|
7
|
+
|
|
8
|
+
protected buildCollection(): LayoutNode[] {
|
|
9
|
+
let loadingState = this.collection.body.props.loadingState;
|
|
10
|
+
this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
11
|
+
return super.buildCollection();
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {
|
|
15
|
+
let res = super.buildColumn(node, x, y);
|
|
16
|
+
res.layoutInfo.allowOverflow = true; // for resizer nubbin
|
|
17
|
+
return res;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
protected buildBody(): LayoutNode {
|
|
21
|
+
let node = super.buildBody(0);
|
|
22
|
+
let {children, layoutInfo} = node;
|
|
23
|
+
let width = node.layoutInfo.rect.width;
|
|
24
|
+
|
|
25
|
+
if (this.isLoading) {
|
|
26
|
+
// Add some margin around the loader to ensure that scrollbars don't flicker in and out.
|
|
27
|
+
let rect = new Rect(40, 40, (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
|
|
28
|
+
let loader = new LayoutInfo('loader', 'loader', rect);
|
|
29
|
+
loader.parentKey = layoutInfo.key;
|
|
30
|
+
loader.isSticky = children.length === 0;
|
|
31
|
+
let node = {
|
|
32
|
+
layoutInfo: loader,
|
|
33
|
+
validRect: loader.rect
|
|
34
|
+
};
|
|
35
|
+
children.push(node);
|
|
36
|
+
this.layoutNodes.set(loader.key, node);
|
|
37
|
+
layoutInfo.rect.height = loader.rect.maxY;
|
|
38
|
+
width = Math.max(width, rect.width);
|
|
39
|
+
} else if (children.length === 0) {
|
|
40
|
+
let rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
|
|
41
|
+
let empty = new LayoutInfo('empty', 'empty', rect);
|
|
42
|
+
empty.parentKey = layoutInfo.key;
|
|
43
|
+
empty.isSticky = true;
|
|
44
|
+
let node = {
|
|
45
|
+
layoutInfo: empty,
|
|
46
|
+
validRect: empty.rect
|
|
47
|
+
};
|
|
48
|
+
children.push(node);
|
|
49
|
+
layoutInfo.rect.height = empty.rect.maxY;
|
|
50
|
+
width = Math.max(width, rect.width);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return node;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
|
|
57
|
+
let res = super.buildRow(node, x, y);
|
|
58
|
+
res.layoutInfo.rect.height += 1; // for bottom border
|
|
59
|
+
return res;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
protected getEstimatedRowHeight(): number {
|
|
63
|
+
return super.getEstimatedRowHeight() + 1; // for bottom border
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
protected isStickyColumn(node: GridNode<T>) {
|
|
67
|
+
return node.props?.isDragButtonCell || node.props?.isSelectionCell;
|
|
68
|
+
}
|
|
69
|
+
}
|