@react-spectrum/card 3.0.0-alpha.32 → 3.0.0-alpha.34
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/BaseLayout.main.js +21 -26
- package/dist/BaseLayout.main.js.map +1 -1
- package/dist/BaseLayout.mjs +22 -27
- package/dist/BaseLayout.module.js +21 -26
- package/dist/BaseLayout.module.js.map +1 -1
- package/dist/Card.main.js +2 -2
- package/dist/Card.mjs +3 -3
- package/dist/Card.module.js +2 -2
- package/dist/CardBase.main.js +37 -37
- package/dist/CardBase.main.js.map +1 -1
- package/dist/CardBase.mjs +38 -38
- package/dist/CardBase.module.js +37 -37
- package/dist/CardBase.module.js.map +1 -1
- package/dist/CardView.main.js +56 -48
- package/dist/CardView.main.js.map +1 -1
- package/dist/CardView.mjs +58 -50
- package/dist/CardView.module.js +57 -49
- package/dist/CardView.module.js.map +1 -1
- package/dist/CardViewContext.mjs +1 -1
- package/dist/GalleryLayout.main.js +10 -10
- package/dist/GalleryLayout.main.js.map +1 -1
- package/dist/GalleryLayout.mjs +11 -11
- package/dist/GalleryLayout.module.js +10 -10
- package/dist/GalleryLayout.module.js.map +1 -1
- package/dist/GridLayout.main.js +18 -42
- package/dist/GridLayout.main.js.map +1 -1
- package/dist/GridLayout.mjs +19 -43
- package/dist/GridLayout.module.js +18 -42
- package/dist/GridLayout.module.js.map +1 -1
- package/dist/WaterfallLayout.main.js +7 -7
- package/dist/WaterfallLayout.main.js.map +1 -1
- package/dist/WaterfallLayout.mjs +8 -8
- package/dist/WaterfallLayout.module.js +7 -7
- package/dist/WaterfallLayout.module.js.map +1 -1
- package/dist/ar-AE.mjs +1 -1
- package/dist/bg-BG.mjs +1 -1
- package/dist/card_vars_css.mjs +1 -1
- package/dist/cs-CZ.mjs +1 -1
- package/dist/da-DK.mjs +1 -1
- package/dist/de-DE.mjs +1 -1
- package/dist/el-GR.mjs +1 -1
- package/dist/en-US.mjs +1 -1
- package/dist/es-ES.mjs +1 -1
- package/dist/et-EE.mjs +1 -1
- package/dist/fi-FI.mjs +1 -1
- package/dist/fr-FR.mjs +1 -1
- package/dist/he-IL.mjs +1 -1
- package/dist/hr-HR.mjs +1 -1
- package/dist/hu-HU.mjs +1 -1
- package/dist/intlStrings.mjs +1 -1
- package/dist/it-IT.mjs +1 -1
- package/dist/ja-JP.mjs +1 -1
- package/dist/ko-KR.mjs +1 -1
- package/dist/lt-LT.mjs +1 -1
- package/dist/lv-LV.mjs +1 -1
- package/dist/nb-NO.mjs +1 -1
- package/dist/nl-NL.mjs +1 -1
- package/dist/pl-PL.mjs +1 -1
- package/dist/pt-BR.mjs +1 -1
- package/dist/pt-PT.mjs +1 -1
- package/dist/ro-RO.mjs +1 -1
- package/dist/ru-RU.mjs +1 -1
- package/dist/sk-SK.mjs +1 -1
- package/dist/sl-SI.mjs +1 -1
- package/dist/sr-SP.mjs +1 -1
- package/dist/sv-SE.mjs +1 -1
- package/dist/tr-TR.mjs +1 -1
- package/dist/types.d.ts +12 -11
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.mjs +1 -1
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.main.js +1 -1
- package/dist/zh-TW.main.js.map +1 -1
- package/dist/zh-TW.mjs +2 -2
- package/dist/zh-TW.module.js +1 -1
- package/dist/zh-TW.module.js.map +1 -1
- package/package.json +20 -20
- package/src/BaseLayout.tsx +22 -19
- package/src/CardBase.tsx +1 -1
- package/src/CardView.tsx +42 -38
- package/src/GalleryLayout.tsx +2 -2
- package/src/GridLayout.tsx +0 -35
- package/src/WaterfallLayout.tsx +2 -2
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAkBA;IACE,QAAQ,CAAC,EAAE,KAAK,QAAQ,CAAC;IAEzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,yBAAwB,CAAC,CAAE,SAAQ,OAAO,KAAK,CAAC,CAAC,CAAE,YAAW,gBAAgB;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/BaseLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GalleryLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GridLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/WaterfallLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardViewContext.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardBase.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardView.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/Card.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/index.ts","packages/@react-spectrum/card/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2021 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 type {GalleryLayoutOptions} from './GalleryLayout';\nexport type {GridLayoutOptions} from './GridLayout';\nexport type {WaterfallLayoutOptions} from './WaterfallLayout';\n\nexport {CardView} from './CardView';\nexport {GalleryLayout} from './GalleryLayout';\nexport {GridLayout} from './GridLayout';\nexport {WaterfallLayout} from './WaterfallLayout';\nexport {Card} from './Card';\nexport type {SpectrumCardViewProps} from '@react-types/card';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/dist/uk-UA.mjs
CHANGED
package/dist/zh-CN.mjs
CHANGED
package/dist/zh-TW.main.js
CHANGED
package/dist/zh-TW.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,
|
|
1
|
+
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,gCAAI,CAAC;IACnC,eAAe,CAAC,wDAAO,CAAC;AAC1B","sources":["packages/@react-spectrum/card/intl/zh-TW.json"],"sourcesContent":["{\n \"loading\": \"載入中…\",\n \"loadingMore\": \"正在載入更多…\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}
|
package/dist/zh-TW.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var $b7e2865acb74a940$exports = {};
|
|
2
2
|
$b7e2865acb74a940$exports = {
|
|
3
|
-
"loading": `\u{
|
|
3
|
+
"loading": `\u{8F09}\u{5165}\u{4E2D}\u{2026}`,
|
|
4
4
|
"loadingMore": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{66F4}\u{591A}\u{2026}`
|
|
5
5
|
};
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
export {$b7e2865acb74a940$exports as default};
|
|
9
|
-
//# sourceMappingURL=zh-TW.
|
|
9
|
+
//# sourceMappingURL=zh-TW.module.js.map
|
package/dist/zh-TW.module.js
CHANGED
package/dist/zh-TW.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,gCAAI,CAAC;IACnC,eAAe,CAAC,wDAAO,CAAC;AAC1B","sources":["packages/@react-spectrum/card/intl/zh-TW.json"],"sourcesContent":["{\n \"loading\": \"載入中…\",\n \"loadingMore\": \"正在載入更多…\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/card",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.34",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/focus": "^3.
|
|
40
|
-
"@react-aria/grid": "^3.
|
|
41
|
-
"@react-aria/i18n": "^3.
|
|
42
|
-
"@react-aria/interactions": "^3.
|
|
43
|
-
"@react-aria/utils": "^3.
|
|
44
|
-
"@react-aria/virtualizer": "^
|
|
45
|
-
"@react-spectrum/checkbox": "^3.9.
|
|
46
|
-
"@react-spectrum/progress": "^3.7.
|
|
47
|
-
"@react-spectrum/utils": "^3.11.
|
|
48
|
-
"@react-stately/collections": "^3.10.
|
|
49
|
-
"@react-stately/grid": "^3.
|
|
50
|
-
"@react-stately/list": "^3.10.
|
|
51
|
-
"@react-stately/virtualizer": "^
|
|
52
|
-
"@react-types/card": "3.0.0-alpha.
|
|
53
|
-
"@react-types/provider": "^3.8.
|
|
54
|
-
"@react-types/shared": "^3.
|
|
39
|
+
"@react-aria/focus": "^3.18.0",
|
|
40
|
+
"@react-aria/grid": "^3.10.0",
|
|
41
|
+
"@react-aria/i18n": "^3.12.0",
|
|
42
|
+
"@react-aria/interactions": "^3.22.0",
|
|
43
|
+
"@react-aria/utils": "^3.25.0",
|
|
44
|
+
"@react-aria/virtualizer": "^4.0.0",
|
|
45
|
+
"@react-spectrum/checkbox": "^3.9.7",
|
|
46
|
+
"@react-spectrum/progress": "^3.7.8",
|
|
47
|
+
"@react-spectrum/utils": "^3.11.8",
|
|
48
|
+
"@react-stately/collections": "^3.10.8",
|
|
49
|
+
"@react-stately/grid": "^3.9.0",
|
|
50
|
+
"@react-stately/list": "^3.10.6",
|
|
51
|
+
"@react-stately/virtualizer": "^4.0.0",
|
|
52
|
+
"@react-types/card": "3.0.0-alpha.27",
|
|
53
|
+
"@react-types/provider": "^3.8.2",
|
|
54
|
+
"@react-types/shared": "^3.24.0",
|
|
55
55
|
"@swc/helpers": "^0.5.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
@@ -59,11 +59,11 @@
|
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"@react-spectrum/provider": "^3.0.0",
|
|
62
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
63
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
62
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
|
|
63
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
|
64
64
|
},
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
|
|
69
69
|
}
|
package/src/BaseLayout.tsx
CHANGED
|
@@ -27,7 +27,12 @@ export interface BaseLayoutOptions {
|
|
|
27
27
|
margin?: number
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
interface CardViewLayoutOptions {
|
|
31
|
+
isLoading: boolean,
|
|
32
|
+
direction: Direction
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export class BaseLayout<T> extends Layout<Node<T>, CardViewLayoutOptions> implements KeyboardDelegate {
|
|
31
36
|
protected contentSize: Size;
|
|
32
37
|
protected layoutInfos: Map<Key, LayoutInfo>;
|
|
33
38
|
protected collator: Intl.Collator;
|
|
@@ -48,8 +53,10 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
|
|
|
48
53
|
this.margin = options.margin || 24;
|
|
49
54
|
}
|
|
50
55
|
|
|
51
|
-
|
|
56
|
+
update(invalidationContext: InvalidationContext<CardViewLayoutOptions>) {
|
|
52
57
|
this.collection = this.virtualizer.collection as GridCollection<T>;
|
|
58
|
+
this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
|
|
59
|
+
this.direction = invalidationContext.layoutOptions?.direction || 'ltr';
|
|
53
60
|
this.buildCollection(invalidationContext);
|
|
54
61
|
|
|
55
62
|
// Remove layout info that doesn't exist in new collection
|
|
@@ -73,21 +80,21 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
|
|
|
73
80
|
}
|
|
74
81
|
|
|
75
82
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
76
|
-
buildCollection(invalidationContext?: InvalidationContext
|
|
83
|
+
buildCollection(invalidationContext?: InvalidationContext) {}
|
|
77
84
|
|
|
78
85
|
getContentSize() {
|
|
79
86
|
return this.contentSize;
|
|
80
87
|
}
|
|
81
88
|
|
|
82
89
|
getLayoutInfo(key: Key) {
|
|
83
|
-
return this.layoutInfos.get(key)
|
|
90
|
+
return this.layoutInfos.get(key)!;
|
|
84
91
|
}
|
|
85
92
|
|
|
86
|
-
getVisibleLayoutInfos(rect) {
|
|
93
|
+
getVisibleLayoutInfos(rect: Rect, excludePersistedKeys = false) {
|
|
87
94
|
let res: LayoutInfo[] = [];
|
|
88
95
|
|
|
89
96
|
for (let layoutInfo of this.layoutInfos.values()) {
|
|
90
|
-
if (this.isVisible(layoutInfo, rect)) {
|
|
97
|
+
if (this.isVisible(layoutInfo, rect, excludePersistedKeys)) {
|
|
91
98
|
res.push(layoutInfo);
|
|
92
99
|
}
|
|
93
100
|
}
|
|
@@ -95,24 +102,20 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
|
|
|
95
102
|
return res;
|
|
96
103
|
}
|
|
97
104
|
|
|
98
|
-
isVisible(layoutInfo: LayoutInfo, rect: Rect) {
|
|
99
|
-
|
|
100
|
-
|
|
105
|
+
isVisible(layoutInfo: LayoutInfo, rect: Rect, excludePersistedKeys: boolean) {
|
|
106
|
+
if (layoutInfo.rect.intersects(rect)) {
|
|
107
|
+
return true;
|
|
108
|
+
}
|
|
101
109
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
return layoutInfo;
|
|
106
|
-
}
|
|
110
|
+
if (!excludePersistedKeys) {
|
|
111
|
+
return this.virtualizer.isPersistedKey(layoutInfo.key);
|
|
112
|
+
}
|
|
107
113
|
|
|
108
|
-
|
|
109
|
-
layoutInfo.opacity = 0;
|
|
110
|
-
layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
|
|
111
|
-
return layoutInfo;
|
|
114
|
+
return false;
|
|
112
115
|
}
|
|
113
116
|
|
|
114
117
|
_findClosestLayoutInfo(target: Rect, rect: Rect) {
|
|
115
|
-
let layoutInfos = this.getVisibleLayoutInfos(rect);
|
|
118
|
+
let layoutInfos = this.getVisibleLayoutInfos(rect, true);
|
|
116
119
|
let best = null;
|
|
117
120
|
let bestDistance = Infinity;
|
|
118
121
|
|
package/src/CardBase.tsx
CHANGED
|
@@ -49,7 +49,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
49
49
|
let {styleProps} = useStyleProps(props);
|
|
50
50
|
let {cardProps, titleProps, contentProps} = useCard(props);
|
|
51
51
|
let domRef = useDOMRef(ref);
|
|
52
|
-
let gridRef = useRef<HTMLDivElement>();
|
|
52
|
+
let gridRef = useRef<HTMLDivElement>(undefined);
|
|
53
53
|
let checkboxRef = useRef(null);
|
|
54
54
|
|
|
55
55
|
// cards are only interactive if there is a selection manager and it allows selection
|
package/src/CardView.tsx
CHANGED
|
@@ -47,7 +47,6 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
|
|
|
47
47
|
let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);
|
|
48
48
|
let layoutType = cardViewLayout.layoutType;
|
|
49
49
|
|
|
50
|
-
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');
|
|
51
50
|
let {direction} = useLocale();
|
|
52
51
|
let {collection} = useListState(props);
|
|
53
52
|
|
|
@@ -79,8 +78,6 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
|
|
|
79
78
|
|
|
80
79
|
cardViewLayout.collection = gridCollection;
|
|
81
80
|
cardViewLayout.disabledKeys = state.disabledKeys;
|
|
82
|
-
cardViewLayout.isLoading = isLoading;
|
|
83
|
-
cardViewLayout.direction = direction;
|
|
84
81
|
|
|
85
82
|
let {gridProps} = useGrid({
|
|
86
83
|
...props,
|
|
@@ -89,7 +86,7 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
|
|
|
89
86
|
}, state, domRef);
|
|
90
87
|
|
|
91
88
|
type View = ReusableView<Node<T>, ReactNode>;
|
|
92
|
-
let renderWrapper = (parent: View, reusableView: View) => (
|
|
89
|
+
let renderWrapper = useCallback((parent: View, reusableView: View) => (
|
|
93
90
|
<VirtualizerItem
|
|
94
91
|
key={reusableView.key}
|
|
95
92
|
layoutInfo={reusableView.layoutInfo}
|
|
@@ -97,7 +94,7 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
|
|
|
97
94
|
parent={parent?.layoutInfo}>
|
|
98
95
|
{reusableView.rendered}
|
|
99
96
|
</VirtualizerItem>
|
|
100
|
-
);
|
|
97
|
+
), []);
|
|
101
98
|
|
|
102
99
|
let focusedKey = state.selectionManager.focusedKey;
|
|
103
100
|
let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
|
|
@@ -105,64 +102,71 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
|
|
|
105
102
|
focusedKey = focusedItem.parentKey;
|
|
106
103
|
}
|
|
107
104
|
|
|
108
|
-
let
|
|
109
|
-
let virtualizer = cardViewLayout.virtualizer;
|
|
110
|
-
let scrollToItem = useCallback((key) => {
|
|
111
|
-
virtualizer && virtualizer.scrollToItem(key, {
|
|
112
|
-
duration: 0,
|
|
113
|
-
offsetY: margin
|
|
114
|
-
});
|
|
115
|
-
}, [margin, virtualizer]);
|
|
105
|
+
let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
|
|
116
106
|
|
|
117
107
|
// TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
|
|
118
108
|
return (
|
|
119
|
-
<CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation}}>
|
|
109
|
+
<CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>
|
|
120
110
|
<Virtualizer
|
|
121
111
|
{...gridProps}
|
|
122
112
|
{...styleProps}
|
|
123
113
|
className={classNames(styles, 'spectrum-CardView')}
|
|
124
114
|
ref={domRef}
|
|
125
|
-
|
|
115
|
+
persistedKeys={persistedKeys}
|
|
126
116
|
scrollDirection="vertical"
|
|
127
117
|
layout={cardViewLayout}
|
|
128
118
|
collection={gridCollection}
|
|
129
119
|
isLoading={isLoading}
|
|
130
120
|
onLoadMore={onLoadMore}
|
|
121
|
+
layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}
|
|
131
122
|
renderWrapper={renderWrapper}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
123
|
+
style={{
|
|
124
|
+
...styleProps.style,
|
|
125
|
+
scrollPaddingTop: cardViewLayout.margin || 0
|
|
126
|
+
}}>
|
|
127
|
+
{useCallback((type, item) => {
|
|
135
128
|
if (type === 'item') {
|
|
136
129
|
return (
|
|
137
130
|
<InternalCard item={item} />
|
|
138
131
|
);
|
|
139
132
|
} else if (type === 'loader') {
|
|
140
|
-
return
|
|
141
|
-
<CenteredWrapper>
|
|
142
|
-
<ProgressCircle
|
|
143
|
-
isIndeterminate
|
|
144
|
-
aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
|
|
145
|
-
</CenteredWrapper>
|
|
146
|
-
);
|
|
133
|
+
return <LoadingState />;
|
|
147
134
|
} else if (type === 'placeholder') {
|
|
148
|
-
|
|
149
|
-
if (emptyState == null) {
|
|
150
|
-
return null;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
return (
|
|
154
|
-
<CenteredWrapper>
|
|
155
|
-
{emptyState}
|
|
156
|
-
</CenteredWrapper>
|
|
157
|
-
);
|
|
135
|
+
return <EmptyState />;
|
|
158
136
|
}
|
|
159
|
-
}}
|
|
137
|
+
}, [])}
|
|
160
138
|
</Virtualizer>
|
|
161
139
|
</CardViewContext.Provider>
|
|
162
140
|
|
|
163
141
|
);
|
|
164
142
|
}
|
|
165
143
|
|
|
144
|
+
function LoadingState() {
|
|
145
|
+
let {state} = useCardViewContext();
|
|
146
|
+
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');
|
|
147
|
+
return (
|
|
148
|
+
<CenteredWrapper>
|
|
149
|
+
<ProgressCircle
|
|
150
|
+
isIndeterminate
|
|
151
|
+
aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
|
|
152
|
+
</CenteredWrapper>
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
function EmptyState() {
|
|
157
|
+
let {renderEmptyState} = useCardViewContext();
|
|
158
|
+
let emptyState = renderEmptyState ? renderEmptyState() : null;
|
|
159
|
+
if (emptyState == null) {
|
|
160
|
+
return null;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
return (
|
|
164
|
+
<CenteredWrapper>
|
|
165
|
+
{emptyState}
|
|
166
|
+
</CenteredWrapper>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
|
|
166
170
|
function CenteredWrapper({children}) {
|
|
167
171
|
let {state} = useCardViewContext();
|
|
168
172
|
return (
|
|
@@ -185,8 +189,8 @@ function InternalCard(props) {
|
|
|
185
189
|
let {state, cardOrientation, isQuiet, layout} = useCardViewContext();
|
|
186
190
|
|
|
187
191
|
let layoutType = layout.layoutType;
|
|
188
|
-
let rowRef = useRef();
|
|
189
|
-
let cellRef = useRef<DOMRefValue<HTMLDivElement>>();
|
|
192
|
+
let rowRef = useRef(undefined);
|
|
193
|
+
let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);
|
|
190
194
|
let unwrappedRef = useUnwrapDOMRef(cellRef);
|
|
191
195
|
|
|
192
196
|
let {rowProps: gridRowProps} = useGridRow({
|
package/src/GalleryLayout.tsx
CHANGED
|
@@ -139,7 +139,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
|
|
|
139
139
|
let y = this.margin;
|
|
140
140
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
141
141
|
|
|
142
|
-
// If
|
|
142
|
+
// If available width is not greater than 0, skip node layout calculations
|
|
143
143
|
if (availableWidth > 0) {
|
|
144
144
|
// Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
|
|
145
145
|
let ratios = [];
|
|
@@ -220,7 +220,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
|
|
|
220
220
|
if (this.isLoading) {
|
|
221
221
|
let loaderY = y;
|
|
222
222
|
let loaderHeight = 60;
|
|
223
|
-
// If there aren't any items, make loader take all
|
|
223
|
+
// If there aren't any items, make loader take all available room and remove margin from y calculation
|
|
224
224
|
// so it doesn't scroll
|
|
225
225
|
if (this.collection.size === 0) {
|
|
226
226
|
loaderY = 0;
|
package/src/GridLayout.tsx
CHANGED
|
@@ -130,41 +130,6 @@ export class GridLayout<T> extends BaseLayout<T> {
|
|
|
130
130
|
);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
getVisibleLayoutInfos(rect) {
|
|
134
|
-
let res: LayoutInfo[] = [];
|
|
135
|
-
let numItems = this.collection.size;
|
|
136
|
-
if (numItems <= 0 || !this.itemSize) {
|
|
137
|
-
// If there aren't any items in the collection, we are in a loader/placeholder state. Return those layoutInfos as
|
|
138
|
-
// the currently visible items
|
|
139
|
-
if (this.layoutInfos.size > 0) {
|
|
140
|
-
for (let layoutInfo of this.layoutInfos.values()) {
|
|
141
|
-
if (this.isVisible(layoutInfo, rect)) {
|
|
142
|
-
res.push(layoutInfo);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
} else {
|
|
147
|
-
// The approach from v2 uses indexes where other v3 layouts iterate through every node/root node. This feels more efficient
|
|
148
|
-
let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
|
|
149
|
-
let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
|
|
150
|
-
for (let index = firstVisibleItem; index <= lastVisibleItem; index++) {
|
|
151
|
-
let keyFromIndex = this.collection.rows[index].key;
|
|
152
|
-
let layoutInfo = this.layoutInfos.get(keyFromIndex);
|
|
153
|
-
if (layoutInfo && this.isVisible(layoutInfo, rect)) {
|
|
154
|
-
res.push(layoutInfo);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
// Check if loader is in view and add to res if so
|
|
159
|
-
let loader = this.layoutInfos.get('loader');
|
|
160
|
-
if (loader && this.isVisible(loader, rect)) {
|
|
161
|
-
res.push(loader);
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
return res;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
133
|
buildCollection() {
|
|
169
134
|
let visibleWidth = this.virtualizer.visibleRect.width;
|
|
170
135
|
let visibleHeight = this.virtualizer.visibleRect.height;
|
package/src/WaterfallLayout.tsx
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import {BaseLayout, BaseLayoutOptions} from './BaseLayout';
|
|
14
14
|
import {getChildNodes, getFirstItem} from '@react-stately/collections';
|
|
15
15
|
import {InvalidationContext, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
|
|
16
|
-
import {Key, KeyboardDelegate
|
|
16
|
+
import {Key, KeyboardDelegate} from '@react-types/shared';
|
|
17
17
|
|
|
18
18
|
export interface WaterfallLayoutOptions extends BaseLayoutOptions {
|
|
19
19
|
/**
|
|
@@ -69,7 +69,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
69
69
|
return 'waterfall';
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
buildCollection(invalidationContext: InvalidationContext
|
|
72
|
+
buildCollection(invalidationContext: InvalidationContext) {
|
|
73
73
|
// Compute the number of columns needed to display the content
|
|
74
74
|
let visibleWidth = this.virtualizer.visibleRect.width;
|
|
75
75
|
let availableWidth = visibleWidth - this.margin * 2;
|