@react-spectrum/card 3.0.0-alpha.41 → 3.0.0-alpha.43
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.map +1 -1
- package/dist/BaseLayout.module.js.map +1 -1
- package/dist/CardBase.main.js +1 -1
- package/dist/CardBase.mjs +1 -1
- package/dist/CardBase.module.js +1 -1
- package/dist/CardView.main.js +1 -1
- package/dist/CardView.mjs +1 -1
- package/dist/CardView.module.js +1 -1
- package/dist/CardViewContext.main.js.map +1 -1
- package/dist/CardViewContext.module.js.map +1 -1
- package/dist/GalleryLayout.main.js.map +1 -1
- package/dist/GalleryLayout.module.js.map +1 -1
- package/dist/GridLayout.main.js.map +1 -1
- package/dist/GridLayout.module.js.map +1 -1
- package/dist/WaterfallLayout.main.js.map +1 -1
- package/dist/WaterfallLayout.module.js.map +1 -1
- package/dist/{vars.02438011.css → card.370c5606.css} +1 -1
- package/dist/{vars.02438011.css.map → card.370c5606.css.map} +1 -1
- package/dist/types.d.ts +22 -22
- package/dist/types.d.ts.map +1 -1
- package/package.json +18 -18
- package/src/BaseLayout.tsx +17 -17
- package/src/CardViewContext.tsx +9 -2
- package/src/GalleryLayout.tsx +3 -3
- package/src/GridLayout.tsx +5 -5
- package/src/WaterfallLayout.tsx +8 -8
package/src/GridLayout.tsx
CHANGED
|
@@ -116,11 +116,11 @@ export class GridLayout<T> extends BaseLayout<T> {
|
|
|
116
116
|
this.horizontalSpacing = 0;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
get layoutType() {
|
|
119
|
+
get layoutType(): string {
|
|
120
120
|
return 'grid';
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
getIndexAtPoint(x, y, allowInsertingAtEnd = false) {
|
|
123
|
+
getIndexAtPoint(x: number, y: number, allowInsertingAtEnd = false): number {
|
|
124
124
|
let itemHeight = this.itemSize.height + this.minSpace.height;
|
|
125
125
|
let itemWidth = this.itemSize.width + this.horizontalSpacing;
|
|
126
126
|
return Math.max(0,
|
|
@@ -131,7 +131,7 @@ export class GridLayout<T> extends BaseLayout<T> {
|
|
|
131
131
|
);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
buildCollection() {
|
|
134
|
+
buildCollection(): void {
|
|
135
135
|
let visibleWidth = this.virtualizer.visibleRect.width;
|
|
136
136
|
let visibleHeight = this.virtualizer.visibleRect.height;
|
|
137
137
|
let horizontalItemPadding = this.cardOrientation === 'horizontal' ? this.itemPadding : 0;
|
|
@@ -210,7 +210,7 @@ export class GridLayout<T> extends BaseLayout<T> {
|
|
|
210
210
|
// Since the collection doesn't represent the visual layout, need to calculate what row and column the current key is in,
|
|
211
211
|
// then return the key that occupies the row + column below. This can be done by figuring out how many cards exist per column then dividing the
|
|
212
212
|
// collection contents by that number (which will give us the row distribution)
|
|
213
|
-
getKeyBelow(key: Key) {
|
|
213
|
+
getKeyBelow(key: Key): Node<T> | undefined | null {
|
|
214
214
|
// Expected key is the currently focused cell so we need the parent row key
|
|
215
215
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
216
216
|
let indexRowBelow;
|
|
@@ -225,7 +225,7 @@ export class GridLayout<T> extends BaseLayout<T> {
|
|
|
225
225
|
return row ? getFirstItem(getChildNodes(row, this.collection))?.key : null;
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
-
getKeyAbove(key: Key) {
|
|
228
|
+
getKeyAbove(key: Key): Node<T> | undefined | null {
|
|
229
229
|
// Expected key is the currently focused cell so we need the parent row key
|
|
230
230
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
231
231
|
let indexRowAbove;
|
package/src/WaterfallLayout.tsx
CHANGED
|
@@ -66,11 +66,11 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
66
66
|
this.collator = options.collator;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
get layoutType() {
|
|
69
|
+
get layoutType(): string {
|
|
70
70
|
return 'waterfall';
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
buildCollection(invalidationContext: InvalidationContext) {
|
|
73
|
+
buildCollection(invalidationContext: InvalidationContext): void {
|
|
74
74
|
// Compute the number of columns needed to display the content
|
|
75
75
|
let visibleWidth = this.virtualizer.visibleRect.width;
|
|
76
76
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
@@ -163,7 +163,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
163
163
|
this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
-
updateItemSize(key: Key, size: Size) {
|
|
166
|
+
updateItemSize(key: Key, size: Size): number {
|
|
167
167
|
let layoutInfo = this.layoutInfos.get(key);
|
|
168
168
|
if (!size || !layoutInfo) {
|
|
169
169
|
return false;
|
|
@@ -182,7 +182,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
182
182
|
return false;
|
|
183
183
|
}
|
|
184
184
|
|
|
185
|
-
getNextColumnIndex(columnHeights) {
|
|
185
|
+
getNextColumnIndex(columnHeights: number[]): number {
|
|
186
186
|
let minIndex = 0;
|
|
187
187
|
for (let i = 0; i < columnHeights.length; i++) {
|
|
188
188
|
if (columnHeights[i] < columnHeights[minIndex]) {
|
|
@@ -193,7 +193,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
193
193
|
return minIndex;
|
|
194
194
|
}
|
|
195
195
|
|
|
196
|
-
getClosestRight(key: Key) {
|
|
196
|
+
getClosestRight(key: Key): Node<T> | undefined {
|
|
197
197
|
let layoutInfo = this.getLayoutInfo(key);
|
|
198
198
|
// Refactored from v2. Current strategy is to find the closest card in the adjacent column.
|
|
199
199
|
// This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall
|
|
@@ -212,7 +212,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
212
212
|
return getFirstItem(getChildNodes(item, this.collection))?.key;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
-
getClosestLeft(key: Key) {
|
|
215
|
+
getClosestLeft(key: Key): Node<T> | undefined {
|
|
216
216
|
let layoutInfo = this.getLayoutInfo(key);
|
|
217
217
|
// First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card
|
|
218
218
|
let rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
@@ -227,13 +227,13 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
227
227
|
return getFirstItem(getChildNodes(item, this.collection))?.key;
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
getKeyRightOf(key: Key) {
|
|
230
|
+
getKeyRightOf(key: Key): Node<T> | undefined {
|
|
231
231
|
// Expected key is the currently focused cell so we need the parent row key
|
|
232
232
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
233
233
|
return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
|
|
234
234
|
}
|
|
235
235
|
|
|
236
|
-
getKeyLeftOf(key: Key) {
|
|
236
|
+
getKeyLeftOf(key: Key): Node<T> | undefined {
|
|
237
237
|
// Expected key is the currently focused cell so we need the parent row key
|
|
238
238
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
239
239
|
return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
|