@react-spectrum/card 3.0.0-alpha.12 → 3.0.0-alpha.14
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/main.css +1 -1
- package/dist/main.js +379 -306
- package/dist/main.js.map +1 -1
- package/dist/module.js +379 -306
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +22 -22
- package/src/CardBase.tsx +1 -0
- package/src/GalleryLayout.tsx +1 -0
package/dist/module.js
CHANGED
|
@@ -13,6 +13,7 @@ import {Checkbox as $8EWFi$Checkbox} from "@react-spectrum/checkbox";
|
|
|
13
13
|
import {getFocusableTreeWalker as $8EWFi$getFocusableTreeWalker, FocusRing as $8EWFi$FocusRing} from "@react-aria/focus";
|
|
14
14
|
import {useHover as $8EWFi$useHover, useFocusWithin as $8EWFi$useFocusWithin} from "@react-aria/interactions";
|
|
15
15
|
import {Size as $8EWFi$Size, Rect as $8EWFi$Rect, LayoutInfo as $8EWFi$LayoutInfo, Layout as $8EWFi$Layout} from "@react-stately/virtualizer";
|
|
16
|
+
import $8EWFi$swchelperssrc_define_propertymjs from "@swc/helpers/src/_define_property.mjs";
|
|
16
17
|
|
|
17
18
|
function $parcel$interopDefault(a) {
|
|
18
19
|
return a && a.__esModule ? a.default : a;
|
|
@@ -20,7 +21,38 @@ function $parcel$interopDefault(a) {
|
|
|
20
21
|
function $parcel$export(e, n, v, s) {
|
|
21
22
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
+
/*
|
|
25
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
26
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
27
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
28
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
29
|
+
*
|
|
30
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
31
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
32
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
33
|
+
* governing permissions and limitations under the License.
|
|
34
|
+
*/ /// <reference types="css-module-types" />
|
|
35
|
+
/*
|
|
36
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
37
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
38
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
39
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
40
|
+
*
|
|
41
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
42
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
43
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
44
|
+
* governing permissions and limitations under the License.
|
|
45
|
+
*/ /*
|
|
46
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
47
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
48
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
49
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
50
|
+
*
|
|
51
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
52
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
53
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
54
|
+
* governing permissions and limitations under the License.
|
|
55
|
+
*/
|
|
24
56
|
|
|
25
57
|
|
|
26
58
|
|
|
@@ -111,51 +143,59 @@ $408a78e5068502c2$export$4746ac09daa215ae = "spectrum-CardView-row_6fdf9f";
|
|
|
111
143
|
$408a78e5068502c2$export$d8467f38d2d00bd0 = "is-drop-target_6fdf9f";
|
|
112
144
|
|
|
113
145
|
|
|
114
|
-
|
|
115
|
-
|
|
146
|
+
/*
|
|
147
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
148
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
149
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
150
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
151
|
+
*
|
|
152
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
153
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
154
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
155
|
+
* governing permissions and limitations under the License.
|
|
156
|
+
*/
|
|
157
|
+
const $8d180a244893de14$export$64992ac69f286e5c = /*#__PURE__*/ (0, $8EWFi$react).createContext(null);
|
|
116
158
|
function $8d180a244893de14$export$fea0b38586ec8f13() {
|
|
117
|
-
return $8EWFi$useContext($8d180a244893de14$export$64992ac69f286e5c);
|
|
159
|
+
return (0, $8EWFi$useContext)($8d180a244893de14$export$64992ac69f286e5c);
|
|
118
160
|
}
|
|
119
161
|
|
|
120
162
|
|
|
121
163
|
|
|
122
164
|
|
|
123
165
|
function $643dd8fa80926f94$var$CardBase(props, ref) {
|
|
124
|
-
props = $8EWFi$useProviderProps(props);
|
|
125
|
-
let context = $8d180a244893de14$export$fea0b38586ec8f13() || {
|
|
126
|
-
}; // we can call again here, won't change from Card.tsx
|
|
166
|
+
props = (0, $8EWFi$useProviderProps)(props);
|
|
167
|
+
let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
|
|
127
168
|
let { state: state } = context;
|
|
128
169
|
let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
|
|
129
|
-
let { isQuiet: isQuiet , orientation: orientation =
|
|
130
|
-
} , item: item , layout: layout , children: children } = props;
|
|
170
|
+
let { isQuiet: isQuiet , orientation: orientation = "vertical" , articleProps: articleProps = {} , item: item , layout: layout , children: children } = props;
|
|
131
171
|
let key = item === null || item === void 0 ? void 0 : item.key;
|
|
132
172
|
let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
|
|
133
173
|
let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
|
|
134
174
|
let onChange = ()=>{
|
|
135
175
|
return manager === null || manager === void 0 ? void 0 : manager.select(key);
|
|
136
176
|
};
|
|
137
|
-
let { styleProps: styleProps } = $8EWFi$useStyleProps(props);
|
|
177
|
+
let { styleProps: styleProps } = (0, $8EWFi$useStyleProps)(props);
|
|
138
178
|
let { cardProps: cardProps , titleProps: titleProps , contentProps: contentProps } = $643dd8fa80926f94$var$useCard(props);
|
|
139
|
-
let domRef = $8EWFi$useDOMRef(ref);
|
|
140
|
-
let gridRef = $8EWFi$useRef();
|
|
141
|
-
let checkboxRef = $8EWFi$useRef(null);
|
|
179
|
+
let domRef = (0, $8EWFi$useDOMRef)(ref);
|
|
180
|
+
let gridRef = (0, $8EWFi$useRef)();
|
|
181
|
+
let checkboxRef = (0, $8EWFi$useRef)(null);
|
|
142
182
|
// cards are only interactive if there is a selection manager and it allows selection
|
|
143
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $8EWFi$useHover({
|
|
144
|
-
isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) ===
|
|
183
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = (0, $8EWFi$useHover)({
|
|
184
|
+
isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
|
|
145
185
|
});
|
|
146
|
-
let [isFocused, setIsFocused] = $8EWFi$useState(false);
|
|
147
|
-
let { focusWithinProps: focusWithinProps } = $8EWFi$useFocusWithin({
|
|
186
|
+
let [isFocused, setIsFocused] = (0, $8EWFi$useState)(false);
|
|
187
|
+
let { focusWithinProps: focusWithinProps } = (0, $8EWFi$useFocusWithin)({
|
|
148
188
|
onFocusWithinChange: setIsFocused,
|
|
149
189
|
isDisabled: isDisabled
|
|
150
190
|
});
|
|
151
191
|
// ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
|
|
152
|
-
let hasPreviewImage = $8EWFi$useHasChild(`.${(/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))[
|
|
153
|
-
let hasPreviewIllustration = $8EWFi$useHasChild(`.${(/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))[
|
|
192
|
+
let hasPreviewImage = (0, $8EWFi$useHasChild)(`.${(0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)))["spectrum-Card-image"]}`, gridRef);
|
|
193
|
+
let hasPreviewIllustration = (0, $8EWFi$useHasChild)(`.${(0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)))["spectrum-Card-illustration"]}`, gridRef);
|
|
154
194
|
let hasPreview = hasPreviewImage || hasPreviewIllustration;
|
|
155
195
|
// this is for horizontal cards
|
|
156
|
-
let [height, setHeight] = $8EWFi$useState(NaN);
|
|
157
|
-
let updateHeight = $8EWFi$useCallback(()=>{
|
|
158
|
-
if (orientation !==
|
|
196
|
+
let [height, setHeight] = (0, $8EWFi$useState)(NaN);
|
|
197
|
+
let updateHeight = (0, $8EWFi$useCallback)(()=>{
|
|
198
|
+
if (orientation !== "horizontal") return;
|
|
159
199
|
let cardHeight = gridRef.current.getBoundingClientRect().height;
|
|
160
200
|
setHeight(cardHeight);
|
|
161
201
|
}, [
|
|
@@ -163,56 +203,55 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
|
|
|
163
203
|
gridRef,
|
|
164
204
|
setHeight
|
|
165
205
|
]);
|
|
166
|
-
$8EWFi$useResizeObserver({
|
|
206
|
+
(0, $8EWFi$useResizeObserver)({
|
|
167
207
|
ref: gridRef,
|
|
168
208
|
onResize: updateHeight
|
|
169
209
|
});
|
|
170
210
|
let aspectRatioEnforce = undefined;
|
|
171
|
-
if (orientation ===
|
|
211
|
+
if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
|
|
172
212
|
height: `${height}px`,
|
|
173
213
|
width: `${height}px`
|
|
174
214
|
};
|
|
175
|
-
let slots = $8EWFi$useMemo(()=>({
|
|
215
|
+
let slots = (0, $8EWFi$useMemo)(()=>({
|
|
176
216
|
image: {
|
|
177
|
-
UNSAFE_className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
178
|
-
objectFit: orientation ===
|
|
179
|
-
alt:
|
|
217
|
+
UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-image"),
|
|
218
|
+
objectFit: orientation === "horizontal" ? "cover" : "contain",
|
|
219
|
+
alt: "",
|
|
180
220
|
...aspectRatioEnforce
|
|
181
221
|
},
|
|
182
222
|
illustration: {
|
|
183
|
-
UNSAFE_className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
223
|
+
UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-illustration"),
|
|
184
224
|
...aspectRatioEnforce
|
|
185
225
|
},
|
|
186
226
|
avatar: {
|
|
187
|
-
UNSAFE_className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
188
|
-
size:
|
|
227
|
+
UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-avatar"),
|
|
228
|
+
size: "avatar-size-400"
|
|
189
229
|
},
|
|
190
230
|
heading: {
|
|
191
|
-
UNSAFE_className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
231
|
+
UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-heading"),
|
|
192
232
|
...titleProps
|
|
193
233
|
},
|
|
194
234
|
content: {
|
|
195
|
-
UNSAFE_className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
235
|
+
UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-content"),
|
|
196
236
|
...contentProps
|
|
197
237
|
},
|
|
198
238
|
detail: {
|
|
199
|
-
UNSAFE_className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
239
|
+
UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-detail")
|
|
200
240
|
}
|
|
201
|
-
})
|
|
202
|
-
, [
|
|
241
|
+
}), [
|
|
203
242
|
titleProps,
|
|
204
243
|
contentProps,
|
|
205
244
|
height,
|
|
206
245
|
isQuiet,
|
|
207
246
|
orientation
|
|
208
247
|
]);
|
|
209
|
-
$8EWFi$useLayoutEffect(()=>{
|
|
248
|
+
(0, $8EWFi$useLayoutEffect)(()=>{
|
|
210
249
|
if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
|
|
211
|
-
let walker = $8EWFi$getFocusableTreeWalker(gridRef.current);
|
|
250
|
+
let walker = (0, $8EWFi$getFocusableTreeWalker)(gridRef.current);
|
|
212
251
|
let nextNode = walker.nextNode();
|
|
213
252
|
while(nextNode != null){
|
|
214
253
|
if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
|
|
215
|
-
console.warn(
|
|
254
|
+
console.warn("Card does not support focusable elements, please contact the team regarding your use case.");
|
|
216
255
|
break;
|
|
217
256
|
}
|
|
218
257
|
nextNode = walker.nextNode();
|
|
@@ -221,65 +260,63 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
|
|
|
221
260
|
}, [
|
|
222
261
|
children
|
|
223
262
|
]);
|
|
224
|
-
return
|
|
225
|
-
focusRingClass: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
226
|
-
}, /*#__PURE__*/ $8EWFi$react.createElement("article", {
|
|
263
|
+
return /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$FocusRing), {
|
|
264
|
+
focusRingClass: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "focus-ring")
|
|
265
|
+
}, /*#__PURE__*/ (0, $8EWFi$react).createElement("article", {
|
|
227
266
|
...styleProps,
|
|
228
|
-
|
|
267
|
+
...(0, $8EWFi$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8EWFi$filterDOMProps)(props), articleProps),
|
|
229
268
|
ref: domRef,
|
|
230
|
-
className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
269
|
+
className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card", {
|
|
270
|
+
"spectrum-Card--default": !isQuiet && orientation !== "horizontal",
|
|
271
|
+
"spectrum-Card--isQuiet": isQuiet && orientation !== "horizontal",
|
|
272
|
+
"spectrum-Card--horizontal": orientation === "horizontal",
|
|
273
|
+
"spectrum-Card--noPreview": !hasPreview,
|
|
274
|
+
"is-hovered": isHovered,
|
|
275
|
+
"is-focused": isFocused,
|
|
276
|
+
"is-selected": isSelected,
|
|
277
|
+
"spectrum-Card--waterfall": layout === "waterfall",
|
|
278
|
+
"spectrum-Card--gallery": layout === "gallery",
|
|
279
|
+
"spectrum-Card--grid": layout === "grid",
|
|
280
|
+
"spectrum-Card--noLayout": layout !== "waterfall" && layout !== "gallery" && layout !== "grid"
|
|
242
281
|
}, styleProps.className)
|
|
243
|
-
}, /*#__PURE__*/ $8EWFi$react.createElement("div", {
|
|
282
|
+
}, /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
|
|
244
283
|
ref: gridRef,
|
|
245
|
-
className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
246
|
-
}, manager && manager.selectionMode !==
|
|
247
|
-
className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
248
|
-
}, /*#__PURE__*/ $8EWFi$react.createElement($8EWFi$Checkbox, {
|
|
284
|
+
className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-grid")
|
|
285
|
+
}, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
|
|
286
|
+
className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-checkboxWrapper")
|
|
287
|
+
}, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$Checkbox), {
|
|
249
288
|
ref: checkboxRef,
|
|
250
289
|
isDisabled: isDisabled,
|
|
251
290
|
excludeFromTabOrder: true,
|
|
252
291
|
isSelected: isSelected,
|
|
253
292
|
onChange: onChange,
|
|
254
|
-
UNSAFE_className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
293
|
+
UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-checkbox"),
|
|
255
294
|
isEmphasized: true,
|
|
256
295
|
"aria-label": "select"
|
|
257
|
-
})), /*#__PURE__*/ $8EWFi$react.createElement($8EWFi$SlotProvider, {
|
|
296
|
+
})), /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$SlotProvider), {
|
|
258
297
|
slots: slots
|
|
259
|
-
}, children), /*#__PURE__*/ $8EWFi$react.createElement("div", {
|
|
260
|
-
className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
261
|
-
}))))
|
|
298
|
+
}, children), /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
|
|
299
|
+
className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-decoration")
|
|
300
|
+
}))));
|
|
262
301
|
}
|
|
263
302
|
function $643dd8fa80926f94$var$useCard(props) {
|
|
264
|
-
let titleId = $8EWFi$useSlotId();
|
|
265
|
-
let descriptionId = $8EWFi$useSlotId();
|
|
266
|
-
let titleProps = $8EWFi$useMemo(()=>({
|
|
303
|
+
let titleId = (0, $8EWFi$useSlotId)();
|
|
304
|
+
let descriptionId = (0, $8EWFi$useSlotId)();
|
|
305
|
+
let titleProps = (0, $8EWFi$useMemo)(()=>({
|
|
267
306
|
id: titleId
|
|
268
|
-
})
|
|
269
|
-
, [
|
|
307
|
+
}), [
|
|
270
308
|
titleId
|
|
271
309
|
]);
|
|
272
|
-
let contentProps = $8EWFi$useMemo(()=>({
|
|
310
|
+
let contentProps = (0, $8EWFi$useMemo)(()=>({
|
|
273
311
|
id: descriptionId
|
|
274
|
-
})
|
|
275
|
-
, [
|
|
312
|
+
}), [
|
|
276
313
|
descriptionId
|
|
277
314
|
]);
|
|
278
315
|
return {
|
|
279
316
|
cardProps: {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
317
|
+
...(0, $8EWFi$filterDOMProps)(props),
|
|
318
|
+
"aria-labelledby": titleId,
|
|
319
|
+
"aria-describedby": descriptionId,
|
|
283
320
|
tabIndex: 0
|
|
284
321
|
},
|
|
285
322
|
titleProps: titleProps,
|
|
@@ -288,7 +325,7 @@ function $643dd8fa80926f94$var$useCard(props) {
|
|
|
288
325
|
}
|
|
289
326
|
/**
|
|
290
327
|
* TODO: Add description of component here.
|
|
291
|
-
*/ const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ $8EWFi$react.forwardRef($643dd8fa80926f94$var$CardBase);
|
|
328
|
+
*/ const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8EWFi$react).forwardRef($643dd8fa80926f94$var$CardBase);
|
|
292
329
|
|
|
293
330
|
|
|
294
331
|
|
|
@@ -581,31 +618,30 @@ $e24fb79fb8b63230$exports = {
|
|
|
581
618
|
|
|
582
619
|
|
|
583
620
|
function $81a52da995c19652$var$CardView(props, ref) {
|
|
584
|
-
let { scale: scale } = $8EWFi$useProvider();
|
|
585
|
-
let { styleProps: styleProps } = $8EWFi$useStyleProps(props);
|
|
586
|
-
let domRef = $8EWFi$useDOMRef(ref);
|
|
587
|
-
let { isQuiet: isQuiet , renderEmptyState: renderEmptyState , layout: layout , loadingState: loadingState , onLoadMore: onLoadMore , cardOrientation: cardOrientation =
|
|
588
|
-
let collator = $8EWFi$useCollator({
|
|
589
|
-
usage:
|
|
590
|
-
sensitivity:
|
|
621
|
+
let { scale: scale } = (0, $8EWFi$useProvider)();
|
|
622
|
+
let { styleProps: styleProps } = (0, $8EWFi$useStyleProps)(props);
|
|
623
|
+
let domRef = (0, $8EWFi$useDOMRef)(ref);
|
|
624
|
+
let { isQuiet: isQuiet , renderEmptyState: renderEmptyState , layout: layout , loadingState: loadingState , onLoadMore: onLoadMore , cardOrientation: cardOrientation = "vertical" } = props;
|
|
625
|
+
let collator = (0, $8EWFi$useCollator)({
|
|
626
|
+
usage: "search",
|
|
627
|
+
sensitivity: "base"
|
|
591
628
|
});
|
|
592
|
-
let isLoading = loadingState ===
|
|
593
|
-
let cardViewLayout = $8EWFi$useMemo(()=>typeof layout ===
|
|
629
|
+
let isLoading = loadingState === "loading" || loadingState === "loadingMore";
|
|
630
|
+
let cardViewLayout = (0, $8EWFi$useMemo)(()=>typeof layout === "function" ? new layout({
|
|
594
631
|
collator: collator,
|
|
595
632
|
cardOrientation: cardOrientation,
|
|
596
633
|
scale: scale
|
|
597
|
-
}) : layout
|
|
598
|
-
, [
|
|
634
|
+
}) : layout, [
|
|
599
635
|
layout,
|
|
600
636
|
collator,
|
|
601
637
|
cardOrientation,
|
|
602
638
|
scale
|
|
603
639
|
]);
|
|
604
640
|
let layoutType = cardViewLayout.layoutType;
|
|
605
|
-
let stringFormatter = $8EWFi$useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($e24fb79fb8b63230$exports)));
|
|
606
|
-
let { direction: direction } = $8EWFi$useLocale();
|
|
607
|
-
let { collection: collection } = $8EWFi$useListState(props);
|
|
608
|
-
let gridCollection = $8EWFi$useMemo(()=>new $8EWFi$GridCollection({
|
|
641
|
+
let stringFormatter = (0, $8EWFi$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($e24fb79fb8b63230$exports))));
|
|
642
|
+
let { direction: direction } = (0, $8EWFi$useLocale)();
|
|
643
|
+
let { collection: collection } = (0, $8EWFi$useListState)(props);
|
|
644
|
+
let gridCollection = (0, $8EWFi$useMemo)(()=>new (0, $8EWFi$GridCollection)({
|
|
609
645
|
columnCount: 1,
|
|
610
646
|
items: [
|
|
611
647
|
...collection
|
|
@@ -616,7 +652,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
|
|
|
616
652
|
childNodes: [
|
|
617
653
|
{
|
|
618
654
|
key: `cell-${item.key}`,
|
|
619
|
-
type:
|
|
655
|
+
type: "cell",
|
|
620
656
|
value: null,
|
|
621
657
|
level: 0,
|
|
622
658
|
rendered: null,
|
|
@@ -625,39 +661,36 @@ function $81a52da995c19652$var$CardView(props, ref) {
|
|
|
625
661
|
childNodes: []
|
|
626
662
|
}
|
|
627
663
|
]
|
|
628
|
-
})
|
|
629
|
-
|
|
630
|
-
})
|
|
631
|
-
, [
|
|
664
|
+
}))
|
|
665
|
+
}), [
|
|
632
666
|
collection
|
|
633
667
|
]);
|
|
634
|
-
let state = $8EWFi$useGridState({
|
|
668
|
+
let state = (0, $8EWFi$useGridState)({
|
|
635
669
|
...props,
|
|
636
|
-
selectionMode: cardOrientation ===
|
|
670
|
+
selectionMode: cardOrientation === "horizontal" && layoutType === "grid" ? "none" : props.selectionMode,
|
|
637
671
|
collection: gridCollection,
|
|
638
|
-
focusMode:
|
|
672
|
+
focusMode: "cell"
|
|
639
673
|
});
|
|
640
674
|
cardViewLayout.collection = gridCollection;
|
|
641
675
|
cardViewLayout.disabledKeys = state.disabledKeys;
|
|
642
676
|
cardViewLayout.isLoading = isLoading;
|
|
643
677
|
cardViewLayout.direction = direction;
|
|
644
|
-
let { gridProps: gridProps } = $8EWFi$useGrid({
|
|
678
|
+
let { gridProps: gridProps } = (0, $8EWFi$useGrid)({
|
|
645
679
|
...props,
|
|
646
680
|
isVirtualized: true,
|
|
647
681
|
keyboardDelegate: cardViewLayout
|
|
648
682
|
}, state, domRef);
|
|
649
|
-
let renderWrapper = (parent, reusableView)=>/*#__PURE__*/ $8EWFi$react.createElement($8EWFi$VirtualizerItem, {
|
|
683
|
+
let renderWrapper = (parent, reusableView)=>/*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$VirtualizerItem), {
|
|
650
684
|
key: reusableView.key,
|
|
651
685
|
reusableView: reusableView,
|
|
652
686
|
parent: parent
|
|
653
|
-
})
|
|
654
|
-
;
|
|
687
|
+
});
|
|
655
688
|
let focusedKey = state.selectionManager.focusedKey;
|
|
656
689
|
let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
|
|
657
690
|
if ((focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) != null) focusedKey = focusedItem.parentKey;
|
|
658
691
|
let margin = cardViewLayout.margin || 0;
|
|
659
692
|
let virtualizer = cardViewLayout.virtualizer;
|
|
660
|
-
let scrollToItem = $8EWFi$useCallback((key)=>{
|
|
693
|
+
let scrollToItem = (0, $8EWFi$useCallback)((key)=>{
|
|
661
694
|
virtualizer && virtualizer.scrollToItem(key, {
|
|
662
695
|
duration: 0,
|
|
663
696
|
offsetY: margin
|
|
@@ -667,17 +700,17 @@ function $81a52da995c19652$var$CardView(props, ref) {
|
|
|
667
700
|
virtualizer
|
|
668
701
|
]);
|
|
669
702
|
// TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
|
|
670
|
-
return
|
|
703
|
+
return /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8d180a244893de14$export$64992ac69f286e5c).Provider, {
|
|
671
704
|
value: {
|
|
672
705
|
state: state,
|
|
673
706
|
isQuiet: isQuiet,
|
|
674
707
|
layout: cardViewLayout,
|
|
675
708
|
cardOrientation: cardOrientation
|
|
676
709
|
}
|
|
677
|
-
}, /*#__PURE__*/ $8EWFi$react.createElement($8EWFi$Virtualizer, {
|
|
710
|
+
}, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$Virtualizer), {
|
|
678
711
|
...gridProps,
|
|
679
712
|
...styleProps,
|
|
680
|
-
className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
713
|
+
className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-CardView"),
|
|
681
714
|
ref: domRef,
|
|
682
715
|
focusedKey: focusedKey,
|
|
683
716
|
scrollDirection: "vertical",
|
|
@@ -689,97 +722,117 @@ function $81a52da995c19652$var$CardView(props, ref) {
|
|
|
689
722
|
transitionDuration: isLoading ? 160 : 220,
|
|
690
723
|
scrollToItem: scrollToItem
|
|
691
724
|
}, (type, item)=>{
|
|
692
|
-
if (type ===
|
|
725
|
+
if (type === "item") return /*#__PURE__*/ (0, $8EWFi$react).createElement($81a52da995c19652$var$InternalCard, {
|
|
693
726
|
item: item
|
|
694
|
-
})
|
|
695
|
-
else if (type ===
|
|
727
|
+
});
|
|
728
|
+
else if (type === "loader") return /*#__PURE__*/ (0, $8EWFi$react).createElement($81a52da995c19652$var$CenteredWrapper, null, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$ProgressCircle), {
|
|
696
729
|
isIndeterminate: true,
|
|
697
|
-
"aria-label": state.collection.size > 0 ? stringFormatter.format(
|
|
698
|
-
}))
|
|
699
|
-
else if (type ===
|
|
730
|
+
"aria-label": state.collection.size > 0 ? stringFormatter.format("loadingMore") : stringFormatter.format("loading")
|
|
731
|
+
}));
|
|
732
|
+
else if (type === "placeholder") {
|
|
700
733
|
let emptyState = renderEmptyState ? renderEmptyState() : null;
|
|
701
734
|
if (emptyState == null) return null;
|
|
702
|
-
return
|
|
735
|
+
return /*#__PURE__*/ (0, $8EWFi$react).createElement($81a52da995c19652$var$CenteredWrapper, null, emptyState);
|
|
703
736
|
}
|
|
704
|
-
}))
|
|
737
|
+
}));
|
|
705
738
|
}
|
|
706
739
|
function $81a52da995c19652$var$CenteredWrapper({ children: children }) {
|
|
707
|
-
let { state: state } = $8d180a244893de14$export$fea0b38586ec8f13();
|
|
708
|
-
return
|
|
740
|
+
let { state: state } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
741
|
+
return /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
|
|
709
742
|
role: "row",
|
|
710
743
|
"aria-rowindex": state.collection.size + 1,
|
|
711
|
-
className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
712
|
-
}, /*#__PURE__*/ $8EWFi$react.createElement("div", {
|
|
744
|
+
className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-CardView-centeredWrapper")
|
|
745
|
+
}, /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
|
|
713
746
|
role: "gridcell"
|
|
714
|
-
}, children))
|
|
747
|
+
}, children));
|
|
715
748
|
}
|
|
716
749
|
function $81a52da995c19652$var$InternalCard(props) {
|
|
717
750
|
let { item: item } = props;
|
|
718
751
|
let cellNode = [
|
|
719
752
|
...item.childNodes
|
|
720
753
|
][0];
|
|
721
|
-
let { state: state , cardOrientation: cardOrientation , isQuiet: isQuiet , layout: layout } = $8d180a244893de14$export$fea0b38586ec8f13();
|
|
754
|
+
let { state: state , cardOrientation: cardOrientation , isQuiet: isQuiet , layout: layout } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
722
755
|
let layoutType = layout.layoutType;
|
|
723
|
-
let rowRef = $8EWFi$useRef();
|
|
724
|
-
let cellRef = $8EWFi$useRef();
|
|
725
|
-
let unwrappedRef = $8EWFi$useUnwrapDOMRef(cellRef);
|
|
726
|
-
let { rowProps: gridRowProps } = $8EWFi$useGridRow({
|
|
756
|
+
let rowRef = (0, $8EWFi$useRef)();
|
|
757
|
+
let cellRef = (0, $8EWFi$useRef)();
|
|
758
|
+
let unwrappedRef = (0, $8EWFi$useUnwrapDOMRef)(cellRef);
|
|
759
|
+
let { rowProps: gridRowProps } = (0, $8EWFi$useGridRow)({
|
|
727
760
|
node: item,
|
|
728
761
|
isVirtualized: true
|
|
729
762
|
}, state, rowRef);
|
|
730
|
-
let { gridCellProps: gridCellProps } = $8EWFi$useGridCell({
|
|
763
|
+
let { gridCellProps: gridCellProps } = (0, $8EWFi$useGridCell)({
|
|
731
764
|
node: cellNode,
|
|
732
|
-
focusMode:
|
|
765
|
+
focusMode: "cell"
|
|
733
766
|
}, state, unwrappedRef);
|
|
734
767
|
// Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode="none" CardView.
|
|
735
|
-
let allowsInteraction = state.selectionManager.selectionMode !==
|
|
768
|
+
let allowsInteraction = state.selectionManager.selectionMode !== "none";
|
|
736
769
|
let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
|
|
737
770
|
let onKeyDown = (e)=>{
|
|
738
|
-
if (e.key ===
|
|
771
|
+
if (e.key === " " && isDisabled) e.preventDefault();
|
|
739
772
|
};
|
|
740
|
-
let rowProps = $8EWFi$mergeProps(gridRowProps, {
|
|
773
|
+
let rowProps = (0, $8EWFi$mergeProps)(gridRowProps, {
|
|
741
774
|
onKeyDown: onKeyDown
|
|
742
775
|
});
|
|
743
|
-
if (layoutType ===
|
|
744
|
-
if (layoutType !==
|
|
776
|
+
if (layoutType === "grid" || layoutType === "gallery") isQuiet = true;
|
|
777
|
+
if (layoutType !== "grid") cardOrientation = "vertical";
|
|
745
778
|
// We don't want to focus the checkbox (or any other focusable elements) within the Card
|
|
746
779
|
// when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
|
|
747
780
|
// the cards in the CardView is handled by useGrid => useSelectableCollection instead.
|
|
748
781
|
delete gridCellProps.onKeyDownCapture;
|
|
749
|
-
return
|
|
782
|
+
return /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
|
|
750
783
|
...rowProps,
|
|
751
784
|
ref: rowRef,
|
|
752
|
-
className: $8EWFi$classNames((/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)),
|
|
753
|
-
}, /*#__PURE__*/ $8EWFi$react.createElement($643dd8fa80926f94$export$7a6ccaf429ad93a8, {
|
|
785
|
+
className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-CardView-row")
|
|
786
|
+
}, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
|
|
754
787
|
ref: cellRef,
|
|
755
788
|
articleProps: gridCellProps,
|
|
756
789
|
isQuiet: isQuiet,
|
|
757
790
|
orientation: cardOrientation,
|
|
758
791
|
item: item,
|
|
759
792
|
layout: layoutType
|
|
760
|
-
}, item.rendered))
|
|
793
|
+
}, item.rendered));
|
|
761
794
|
}
|
|
762
795
|
/**
|
|
763
796
|
* TODO: Add description of component here.
|
|
764
|
-
*/ const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ $8EWFi$react.forwardRef($81a52da995c19652$var$CardView);
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
797
|
+
*/ const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $8EWFi$react).forwardRef($81a52da995c19652$var$CardView);
|
|
798
|
+
|
|
799
|
+
|
|
800
|
+
/*
|
|
801
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
802
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
803
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
804
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
805
|
+
*
|
|
806
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
807
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
808
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
809
|
+
* governing permissions and limitations under the License.
|
|
810
|
+
*/ /*
|
|
811
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
812
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
813
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
814
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
815
|
+
*
|
|
816
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
817
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
818
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
819
|
+
* governing permissions and limitations under the License.
|
|
820
|
+
*/
|
|
821
|
+
|
|
822
|
+
class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$Layout) {
|
|
769
823
|
validate(invalidationContext) {
|
|
770
824
|
this.collection = this.virtualizer.collection;
|
|
771
825
|
this.buildCollection(invalidationContext);
|
|
772
826
|
// Remove layout info that doesn't exist in new collection
|
|
773
827
|
if (this.lastCollection) {
|
|
774
828
|
for (let key of this.lastCollection.getKeys())if (!this.collection.getItem(key)) this.layoutInfos.delete(key);
|
|
775
|
-
if (!this.isLoading) this.layoutInfos.delete(
|
|
776
|
-
if (this.collection.size > 0) this.layoutInfos.delete(
|
|
829
|
+
if (!this.isLoading) this.layoutInfos.delete("loader");
|
|
830
|
+
if (this.collection.size > 0) this.layoutInfos.delete("placeholder");
|
|
777
831
|
}
|
|
778
832
|
this.lastCollection = this.collection;
|
|
779
833
|
}
|
|
780
834
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
781
|
-
buildCollection(invalidationContext) {
|
|
782
|
-
}
|
|
835
|
+
buildCollection(invalidationContext) {}
|
|
783
836
|
getContentSize() {
|
|
784
837
|
return this.contentSize;
|
|
785
838
|
}
|
|
@@ -796,12 +849,12 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
796
849
|
}
|
|
797
850
|
getInitialLayoutInfo(layoutInfo) {
|
|
798
851
|
layoutInfo.opacity = 0;
|
|
799
|
-
layoutInfo.transform =
|
|
852
|
+
layoutInfo.transform = "scale3d(0.8, 0.8, 0.8)";
|
|
800
853
|
return layoutInfo;
|
|
801
854
|
}
|
|
802
855
|
getFinalLayoutInfo(layoutInfo) {
|
|
803
856
|
layoutInfo.opacity = 0;
|
|
804
|
-
layoutInfo.transform =
|
|
857
|
+
layoutInfo.transform = "scale3d(0.8, 0.8, 0.8)";
|
|
805
858
|
return layoutInfo;
|
|
806
859
|
}
|
|
807
860
|
_findClosestLayoutInfo(target, rect) {
|
|
@@ -809,7 +862,7 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
809
862
|
let best = null;
|
|
810
863
|
let bestDistance = Infinity;
|
|
811
864
|
// Calculates distance as the distance between the center of 2 rects.
|
|
812
|
-
for (let cur of layoutInfos)if (cur.type ===
|
|
865
|
+
for (let cur of layoutInfos)if (cur.type === "item") {
|
|
813
866
|
let curRect = cur.rect;
|
|
814
867
|
let targetMidX = (target.x + target.maxX) / 2;
|
|
815
868
|
let targetMidY = (target.y + target.maxY) / 2;
|
|
@@ -828,43 +881,43 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
828
881
|
return best || null;
|
|
829
882
|
}
|
|
830
883
|
getKeyBelow(key) {
|
|
831
|
-
var
|
|
884
|
+
var _this__findClosest, _closestRow_childNodes_;
|
|
832
885
|
// Expected key is the currently focused cell so we need the parent row key
|
|
833
886
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
834
887
|
let layoutInfo = this.getLayoutInfo(parentRowKey);
|
|
835
|
-
let rect = new $8EWFi$Rect(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
|
|
836
|
-
let closestRow = this.collection.getItem((
|
|
837
|
-
return (
|
|
888
|
+
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
|
|
889
|
+
let closestRow = this.collection.getItem((_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key);
|
|
890
|
+
return (_closestRow_childNodes_ = closestRow === null || closestRow === void 0 ? void 0 : closestRow.childNodes[0]) === null || _closestRow_childNodes_ === void 0 ? void 0 : _closestRow_childNodes_.key;
|
|
838
891
|
}
|
|
839
892
|
getKeyAbove(key) {
|
|
840
|
-
var
|
|
893
|
+
var _this__findClosest, _closestRow_childNodes_;
|
|
841
894
|
// Expected key is the currently focused cell so we need the parent row key
|
|
842
895
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
843
896
|
let layoutInfo = this.getLayoutInfo(parentRowKey);
|
|
844
|
-
let rect = new $8EWFi$Rect(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
|
|
845
|
-
let closestRow = this.collection.getItem((
|
|
846
|
-
return (
|
|
897
|
+
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
|
|
898
|
+
let closestRow = this.collection.getItem((_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key);
|
|
899
|
+
return (_closestRow_childNodes_ = closestRow === null || closestRow === void 0 ? void 0 : closestRow.childNodes[0]) === null || _closestRow_childNodes_ === void 0 ? void 0 : _closestRow_childNodes_.key;
|
|
847
900
|
}
|
|
848
901
|
getKeyRightOf(key) {
|
|
849
902
|
// Expected key is the currently focused cell so we need the parent row key
|
|
850
903
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
851
|
-
key = this.direction ===
|
|
904
|
+
key = this.direction === "rtl" ? this.collection.getKeyBefore(parentRowKey) : this.collection.getKeyAfter(parentRowKey);
|
|
852
905
|
while(key != null){
|
|
853
906
|
let item = this.collection.getItem(key);
|
|
854
907
|
// Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
|
|
855
|
-
if (item.type ===
|
|
856
|
-
key = this.direction ===
|
|
908
|
+
if (item.type === "item") return item.childNodes[0].key;
|
|
909
|
+
key = this.direction === "rtl" ? this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
|
|
857
910
|
}
|
|
858
911
|
}
|
|
859
912
|
getKeyLeftOf(key) {
|
|
860
913
|
// Expected key is the currently focused cell so we need the parent row key
|
|
861
914
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
862
|
-
key = this.direction ===
|
|
915
|
+
key = this.direction === "rtl" ? this.collection.getKeyAfter(parentRowKey) : this.collection.getKeyBefore(parentRowKey);
|
|
863
916
|
while(key != null){
|
|
864
917
|
let item = this.collection.getItem(key);
|
|
865
918
|
// Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
|
|
866
|
-
if (item.type ===
|
|
867
|
-
key = this.direction ===
|
|
919
|
+
if (item.type === "item") return item.childNodes[0].key;
|
|
920
|
+
key = this.direction === "rtl" ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
|
|
868
921
|
}
|
|
869
922
|
}
|
|
870
923
|
getFirstKey() {
|
|
@@ -882,21 +935,21 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
882
935
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
883
936
|
let layoutInfo = this.getLayoutInfo(parentRowKey);
|
|
884
937
|
if (layoutInfo) {
|
|
885
|
-
var
|
|
938
|
+
var _this_collection_getItem;
|
|
886
939
|
let pageY = Math.max(0, layoutInfo.rect.y + layoutInfo.rect.height - this.virtualizer.visibleRect.height);
|
|
887
940
|
// If the node is so large that it spans multiple page heights, return the key of the item immediately above
|
|
888
941
|
// Otherwise keep going up until we exceed a single page height worth of nodes
|
|
889
|
-
let keyAbove = (
|
|
942
|
+
let keyAbove = (_this_collection_getItem = this.collection.getItem(this.getKeyAbove(key))) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.parentKey;
|
|
890
943
|
layoutInfo = this.getLayoutInfo(keyAbove);
|
|
891
944
|
if (layoutInfo && layoutInfo.rect.y > pageY) while(layoutInfo && layoutInfo.rect.y > pageY){
|
|
892
|
-
var
|
|
945
|
+
var _this_collection_getItem1;
|
|
893
946
|
let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
|
|
894
|
-
let
|
|
895
|
-
layoutInfo = this.getLayoutInfo(
|
|
947
|
+
let keyAbove1 = (_this_collection_getItem1 = this.collection.getItem(this.getKeyAbove(childKey))) === null || _this_collection_getItem1 === void 0 ? void 0 : _this_collection_getItem1.parentKey;
|
|
948
|
+
layoutInfo = this.getLayoutInfo(keyAbove1);
|
|
896
949
|
}
|
|
897
950
|
if (layoutInfo) {
|
|
898
|
-
let
|
|
899
|
-
return
|
|
951
|
+
let childKey1 = this.collection.getItem(layoutInfo.key).childNodes[0].key;
|
|
952
|
+
return childKey1;
|
|
900
953
|
}
|
|
901
954
|
}
|
|
902
955
|
return this.getFirstKey();
|
|
@@ -908,21 +961,21 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
908
961
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
909
962
|
let layoutInfo = this.getLayoutInfo(parentRowKey);
|
|
910
963
|
if (layoutInfo) {
|
|
911
|
-
var
|
|
964
|
+
var _this_collection_getItem;
|
|
912
965
|
let pageY = Math.min(this.virtualizer.contentSize.height, layoutInfo.rect.y - layoutInfo.rect.height + this.virtualizer.visibleRect.height);
|
|
913
966
|
// If the node is so large that it spans multiple page heights, return the key of the item immediately below
|
|
914
967
|
// Otherwise keep going up until we exceed a single page height worth of nodes
|
|
915
|
-
let keyBelow = (
|
|
968
|
+
let keyBelow = (_this_collection_getItem = this.collection.getItem(this.getKeyBelow(key))) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.parentKey;
|
|
916
969
|
layoutInfo = this.getLayoutInfo(keyBelow);
|
|
917
970
|
if (layoutInfo && layoutInfo.rect.y < pageY) while(layoutInfo && layoutInfo.rect.y < pageY){
|
|
918
|
-
var
|
|
971
|
+
var _this_collection_getItem1;
|
|
919
972
|
let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
|
|
920
|
-
let
|
|
921
|
-
layoutInfo = this.getLayoutInfo(
|
|
973
|
+
let keyBelow1 = (_this_collection_getItem1 = this.collection.getItem(this.getKeyBelow(childKey))) === null || _this_collection_getItem1 === void 0 ? void 0 : _this_collection_getItem1.parentKey;
|
|
974
|
+
layoutInfo = this.getLayoutInfo(keyBelow1);
|
|
922
975
|
}
|
|
923
976
|
if (layoutInfo) {
|
|
924
|
-
let
|
|
925
|
-
return
|
|
977
|
+
let childKey1 = this.collection.getItem(layoutInfo.key).childNodes[0].key;
|
|
978
|
+
return childKey1;
|
|
926
979
|
}
|
|
927
980
|
}
|
|
928
981
|
return this.getLastKey();
|
|
@@ -945,14 +998,13 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
945
998
|
}
|
|
946
999
|
return null;
|
|
947
1000
|
}
|
|
948
|
-
constructor(options = {
|
|
949
|
-
}){
|
|
1001
|
+
constructor(options = {}){
|
|
950
1002
|
super();
|
|
951
|
-
this
|
|
1003
|
+
(0, $8EWFi$swchelperssrc_define_propertymjs)(this, "disabledKeys", new Set());
|
|
952
1004
|
this.layoutInfos = new Map();
|
|
953
1005
|
this.collator = options.collator;
|
|
954
1006
|
this.lastCollection = null;
|
|
955
|
-
this.scale = options.scale ||
|
|
1007
|
+
this.scale = options.scale || "medium";
|
|
956
1008
|
this.margin = options.margin || 24;
|
|
957
1009
|
}
|
|
958
1010
|
}
|
|
@@ -962,27 +1014,27 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
962
1014
|
const $c0ba81539c443916$var$DEFAULT_OPTIONS = {
|
|
963
1015
|
S: {
|
|
964
1016
|
idealRowHeight: 112,
|
|
965
|
-
minItemSize: new $8EWFi$Size(96, 96),
|
|
966
|
-
itemSpacing: new $8EWFi$Size(8, 16),
|
|
1017
|
+
minItemSize: new (0, $8EWFi$Size)(96, 96),
|
|
1018
|
+
itemSpacing: new (0, $8EWFi$Size)(8, 16),
|
|
967
1019
|
itemPadding: 24,
|
|
968
1020
|
dropSpacing: 50,
|
|
969
1021
|
margin: 8
|
|
970
1022
|
},
|
|
971
1023
|
L: {
|
|
972
1024
|
idealRowHeight: 208,
|
|
973
|
-
minItemSize: new $8EWFi$Size(136, 136),
|
|
974
|
-
itemSpacing: new $8EWFi$Size(18, 18),
|
|
1025
|
+
minItemSize: new (0, $8EWFi$Size)(136, 136),
|
|
1026
|
+
itemSpacing: new (0, $8EWFi$Size)(18, 18),
|
|
975
1027
|
itemPadding: {
|
|
976
|
-
|
|
977
|
-
|
|
1028
|
+
"medium": 78,
|
|
1029
|
+
"large": 99
|
|
978
1030
|
},
|
|
979
1031
|
dropSpacing: 100,
|
|
980
1032
|
margin: 24
|
|
981
1033
|
}
|
|
982
1034
|
};
|
|
983
|
-
class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export$64943d2e59d72a29 {
|
|
1035
|
+
class $c0ba81539c443916$export$8e52095834484b61 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
984
1036
|
get layoutType() {
|
|
985
|
-
return
|
|
1037
|
+
return "gallery";
|
|
986
1038
|
}
|
|
987
1039
|
/**
|
|
988
1040
|
* Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from
|
|
@@ -990,8 +1042,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
990
1042
|
* Do this until all assets meet the min-width.
|
|
991
1043
|
* */ _distributeWidths(widths) {
|
|
992
1044
|
// create a copy of the widths array and sort it largest to smallest
|
|
993
|
-
let sortedWidths = widths.concat().sort((a, b)=>a[1] > b[1] ? -1 : 1
|
|
994
|
-
);
|
|
1045
|
+
let sortedWidths = widths.concat().sort((a, b)=>a[1] > b[1] ? -1 : 1);
|
|
995
1046
|
for (let width of widths)// for each width, if it's smaller than the min width
|
|
996
1047
|
if (width[1] < this.minItemSize.width) {
|
|
997
1048
|
// then figure out how much smaller
|
|
@@ -1001,6 +1052,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
1001
1052
|
if (widths[item[0]][1] > this.minItemSize.width) {
|
|
1002
1053
|
// subtract the delta from the width, if it's still greater than the min width
|
|
1003
1054
|
// then we have finished, subtract the delta permanently from that width
|
|
1055
|
+
// eslint-disable-next-line max-depth
|
|
1004
1056
|
if (widths[item[0]][1] - delta > this.minItemSize.width) {
|
|
1005
1057
|
widths[item[0]][1] -= delta;
|
|
1006
1058
|
delta = 0;
|
|
@@ -1046,8 +1098,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
1046
1098
|
// if the available width can't hold two items, then every item will get its own row
|
|
1047
1099
|
// this leads to a faster run through linear partition and more dependable output for small row widths
|
|
1048
1100
|
if (availableWidth <= this.minItemSize.width * 2 + this.itemPadding * 2) rows = this.collection.size;
|
|
1049
|
-
let weightedRatios = ratios.map((ratio)=>ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio
|
|
1050
|
-
);
|
|
1101
|
+
let weightedRatios = ratios.map((ratio)=>ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio);
|
|
1051
1102
|
let partition = $c0ba81539c443916$var$linearPartition(weightedRatios, rows);
|
|
1052
1103
|
let index = 0;
|
|
1053
1104
|
for (let row of partition){
|
|
@@ -1074,13 +1125,13 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
1074
1125
|
this._distributeWidths(widths);
|
|
1075
1126
|
// Create items for this row.
|
|
1076
1127
|
for(let j2 = index; j2 < index + row.length; j2++){
|
|
1077
|
-
let
|
|
1078
|
-
let
|
|
1079
|
-
let rect = new $8EWFi$Rect(x, y,
|
|
1080
|
-
let layoutInfo = new $8EWFi$LayoutInfo(
|
|
1128
|
+
let node1 = this.collection.rows[j2];
|
|
1129
|
+
let itemWidth1 = Math.max(widths[j2 - index][1], this.minItemSize.width);
|
|
1130
|
+
let rect = new (0, $8EWFi$Rect)(x, y, itemWidth1, itemHeight);
|
|
1131
|
+
let layoutInfo = new (0, $8EWFi$LayoutInfo)(node1.type, node1.key, rect);
|
|
1081
1132
|
layoutInfo.allowOverflow = true;
|
|
1082
|
-
this.layoutInfos.set(
|
|
1083
|
-
x +=
|
|
1133
|
+
this.layoutInfos.set(node1.key, layoutInfo);
|
|
1134
|
+
x += itemWidth1 + this.itemSpacing.width;
|
|
1084
1135
|
}
|
|
1085
1136
|
y += itemHeight + this.itemSpacing.height;
|
|
1086
1137
|
index += row.length;
|
|
@@ -1094,24 +1145,23 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
1094
1145
|
loaderY = 0;
|
|
1095
1146
|
loaderHeight = visibleHeight || 60;
|
|
1096
1147
|
}
|
|
1097
|
-
let
|
|
1098
|
-
let loader = new $8EWFi$LayoutInfo(
|
|
1099
|
-
this.layoutInfos.set(
|
|
1148
|
+
let rect1 = new (0, $8EWFi$Rect)(0, loaderY, visibleWidth, loaderHeight);
|
|
1149
|
+
let loader = new (0, $8EWFi$LayoutInfo)("loader", "loader", rect1);
|
|
1150
|
+
this.layoutInfos.set("loader", loader);
|
|
1100
1151
|
y = loader.rect.maxY;
|
|
1101
1152
|
}
|
|
1102
1153
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
1103
|
-
let
|
|
1104
|
-
let placeholder = new $8EWFi$LayoutInfo(
|
|
1105
|
-
this.layoutInfos.set(
|
|
1154
|
+
let rect2 = new (0, $8EWFi$Rect)(0, 0, visibleWidth, visibleHeight);
|
|
1155
|
+
let placeholder = new (0, $8EWFi$LayoutInfo)("placeholder", "placeholder", rect2);
|
|
1156
|
+
this.layoutInfos.set("placeholder", placeholder);
|
|
1106
1157
|
y = placeholder.rect.maxY;
|
|
1107
1158
|
}
|
|
1108
1159
|
}
|
|
1109
|
-
this.contentSize = new $8EWFi$Size(visibleWidth, y);
|
|
1160
|
+
this.contentSize = new (0, $8EWFi$Size)(visibleWidth, y);
|
|
1110
1161
|
}
|
|
1111
|
-
constructor(options = {
|
|
1112
|
-
}){
|
|
1162
|
+
constructor(options = {}){
|
|
1113
1163
|
super(options);
|
|
1114
|
-
let cardSize =
|
|
1164
|
+
let cardSize = "L";
|
|
1115
1165
|
this.idealRowHeight = options.idealRowHeight || $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
|
|
1116
1166
|
this.itemSpacing = options.itemSpacing || $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
|
|
1117
1167
|
this.itemPadding = options.itemPadding != null ? options.itemPadding : $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
|
|
@@ -1126,15 +1176,12 @@ function $c0ba81539c443916$var$linearPartition(seq, k) {
|
|
|
1126
1176
|
if (k <= 0) return [];
|
|
1127
1177
|
if (k >= n) return seq.map((x)=>[
|
|
1128
1178
|
x
|
|
1129
|
-
]
|
|
1130
|
-
);
|
|
1179
|
+
]);
|
|
1131
1180
|
if (n === 1) return [
|
|
1132
1181
|
seq
|
|
1133
1182
|
];
|
|
1134
|
-
let table = Array(n).fill(0).map(()=>Array(k).fill(0)
|
|
1135
|
-
);
|
|
1136
|
-
let solution = Array(n - 1).fill(0).map(()=>Array(k - 1).fill(0)
|
|
1137
|
-
);
|
|
1183
|
+
let table = Array(n).fill(0).map(()=>Array(k).fill(0));
|
|
1184
|
+
let solution = Array(n - 1).fill(0).map(()=>Array(k - 1).fill(0));
|
|
1138
1185
|
for(let i = 0; i < n; i++)table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);
|
|
1139
1186
|
for(let i1 = 0; i1 < k; i1++)table[0][i1] = seq[0];
|
|
1140
1187
|
for(let i2 = 1; i2 < n; i2++)for(let j = 1; j < k; j++){
|
|
@@ -1158,58 +1205,68 @@ function $c0ba81539c443916$var$linearPartition(seq, k) {
|
|
|
1158
1205
|
while(k >= 0){
|
|
1159
1206
|
if (n >= 1) {
|
|
1160
1207
|
let row = [];
|
|
1161
|
-
for(let
|
|
1208
|
+
for(let i3 = solution[n - 1][k] + 1; i3 < n + 1; i3++)row.push(seq[i3]);
|
|
1162
1209
|
result.unshift(row);
|
|
1163
1210
|
n = solution[n - 1][k];
|
|
1164
1211
|
}
|
|
1165
1212
|
k--;
|
|
1166
1213
|
}
|
|
1167
|
-
let
|
|
1168
|
-
for(let
|
|
1169
|
-
result.unshift(
|
|
1214
|
+
let row1 = [];
|
|
1215
|
+
for(let i4 = 0; i4 < n + 1; i4++)row1.push(seq[i4]);
|
|
1216
|
+
result.unshift(row1);
|
|
1170
1217
|
return result;
|
|
1171
1218
|
}
|
|
1172
1219
|
|
|
1173
1220
|
|
|
1174
|
-
|
|
1221
|
+
/*
|
|
1222
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
1223
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1224
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
1225
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
1226
|
+
*
|
|
1227
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
1228
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
1229
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1230
|
+
* governing permissions and limitations under the License.
|
|
1231
|
+
*/
|
|
1175
1232
|
|
|
1176
1233
|
const $ed42fd44b9b9b664$var$DEFAULT_OPTIONS = {
|
|
1177
1234
|
S: {
|
|
1178
1235
|
itemPadding: 20,
|
|
1179
1236
|
minItemSize: {
|
|
1180
|
-
|
|
1237
|
+
"vertical": new (0, $8EWFi$Size)(96, 96)
|
|
1181
1238
|
},
|
|
1182
|
-
maxItemSize: new $8EWFi$Size(Infinity, Infinity),
|
|
1239
|
+
maxItemSize: new (0, $8EWFi$Size)(Infinity, Infinity),
|
|
1183
1240
|
margin: 8,
|
|
1184
|
-
minSpace: new $8EWFi$Size(6, 6),
|
|
1241
|
+
minSpace: new (0, $8EWFi$Size)(6, 6),
|
|
1185
1242
|
maxColumns: Infinity,
|
|
1186
1243
|
dropSpacing: 50
|
|
1187
1244
|
},
|
|
1188
1245
|
L: {
|
|
1189
1246
|
itemPadding: {
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1247
|
+
"vertical": {
|
|
1248
|
+
"medium": 78,
|
|
1249
|
+
"large": 98
|
|
1193
1250
|
},
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1251
|
+
"horizontal": {
|
|
1252
|
+
"medium": 150,
|
|
1253
|
+
"large": 170
|
|
1197
1254
|
}
|
|
1198
1255
|
},
|
|
1199
1256
|
minItemSize: {
|
|
1200
|
-
|
|
1201
|
-
|
|
1257
|
+
"vertical": new (0, $8EWFi$Size)(208, 208),
|
|
1258
|
+
"horizontal": new (0, $8EWFi$Size)(102, 102)
|
|
1202
1259
|
},
|
|
1203
|
-
maxItemSize: new $8EWFi$Size(Infinity, Infinity),
|
|
1260
|
+
maxItemSize: new (0, $8EWFi$Size)(Infinity, Infinity),
|
|
1204
1261
|
margin: 24,
|
|
1205
|
-
minSpace: new $8EWFi$Size(18, 18),
|
|
1262
|
+
minSpace: new (0, $8EWFi$Size)(18, 18),
|
|
1206
1263
|
maxColumns: Infinity,
|
|
1207
1264
|
dropSpacing: 100
|
|
1208
1265
|
}
|
|
1209
1266
|
};
|
|
1210
|
-
class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export$64943d2e59d72a29 {
|
|
1267
|
+
class $ed42fd44b9b9b664$export$7d2b12578154a735 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
1211
1268
|
get layoutType() {
|
|
1212
|
-
return
|
|
1269
|
+
return "grid";
|
|
1213
1270
|
}
|
|
1214
1271
|
getIndexAtPoint(x, y, allowInsertingAtEnd = false) {
|
|
1215
1272
|
let itemHeight = this.itemSize.height + this.minSpace.height;
|
|
@@ -1231,11 +1288,11 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1231
1288
|
let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
|
|
1232
1289
|
for(let index = firstVisibleItem; index <= lastVisibleItem; index++){
|
|
1233
1290
|
let keyFromIndex = this.collection.rows[index].key;
|
|
1234
|
-
let
|
|
1235
|
-
if (
|
|
1291
|
+
let layoutInfo1 = this.layoutInfos.get(keyFromIndex);
|
|
1292
|
+
if (layoutInfo1 && this.isVisible(layoutInfo1, rect)) res.push(layoutInfo1);
|
|
1236
1293
|
}
|
|
1237
1294
|
// Check if loader is in view and add to res if so
|
|
1238
|
-
let loader = this.layoutInfos.get(
|
|
1295
|
+
let loader = this.layoutInfos.get("loader");
|
|
1239
1296
|
if (loader && this.isVisible(loader, rect)) res.push(loader);
|
|
1240
1297
|
}
|
|
1241
1298
|
return res;
|
|
@@ -1243,8 +1300,8 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1243
1300
|
buildCollection() {
|
|
1244
1301
|
let visibleWidth = this.virtualizer.visibleRect.width;
|
|
1245
1302
|
let visibleHeight = this.virtualizer.visibleRect.height;
|
|
1246
|
-
let horizontalItemPadding = this.cardOrientation ===
|
|
1247
|
-
let verticalItemPadding = this.cardOrientation ===
|
|
1303
|
+
let horizontalItemPadding = this.cardOrientation === "horizontal" ? this.itemPadding : 0;
|
|
1304
|
+
let verticalItemPadding = this.cardOrientation === "vertical" ? this.itemPadding : 0;
|
|
1248
1305
|
let minCardWidth = this.minItemSize.width + horizontalItemPadding;
|
|
1249
1306
|
// Compute the number of rows and columns needed to display the content
|
|
1250
1307
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
@@ -1260,7 +1317,7 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1260
1317
|
let t = (itemWidth - minCardWidth) / minCardWidth;
|
|
1261
1318
|
let itemHeight = Math.floor(this.minItemSize.height + this.minItemSize.height * t);
|
|
1262
1319
|
itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + verticalItemPadding;
|
|
1263
|
-
this.itemSize = new $8EWFi$Size(itemWidth, itemHeight);
|
|
1320
|
+
this.itemSize = new (0, $8EWFi$Size)(itemWidth, itemHeight);
|
|
1264
1321
|
// Compute the horizontal spacing and content height
|
|
1265
1322
|
this.horizontalSpacing = this.numColumns < 2 ? 0 : Math.floor((availableWidth - this.numColumns * this.itemSize.width) / (this.numColumns - 1));
|
|
1266
1323
|
let y = this.margin;
|
|
@@ -1279,27 +1336,27 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1279
1336
|
loaderY = 0;
|
|
1280
1337
|
loaderHeight = visibleHeight || 60;
|
|
1281
1338
|
}
|
|
1282
|
-
let rect = new $8EWFi$Rect(0, loaderY, visibleWidth, loaderHeight);
|
|
1283
|
-
let loader = new $8EWFi$LayoutInfo(
|
|
1284
|
-
this.layoutInfos.set(
|
|
1339
|
+
let rect = new (0, $8EWFi$Rect)(0, loaderY, visibleWidth, loaderHeight);
|
|
1340
|
+
let loader = new (0, $8EWFi$LayoutInfo)("loader", "loader", rect);
|
|
1341
|
+
this.layoutInfos.set("loader", loader);
|
|
1285
1342
|
y = loader.rect.maxY;
|
|
1286
1343
|
}
|
|
1287
1344
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
1288
|
-
let
|
|
1289
|
-
let placeholder = new $8EWFi$LayoutInfo(
|
|
1290
|
-
this.layoutInfos.set(
|
|
1345
|
+
let rect1 = new (0, $8EWFi$Rect)(0, 0, visibleWidth, visibleHeight);
|
|
1346
|
+
let placeholder = new (0, $8EWFi$LayoutInfo)("placeholder", "placeholder", rect1);
|
|
1347
|
+
this.layoutInfos.set("placeholder", placeholder);
|
|
1291
1348
|
y = placeholder.rect.maxY;
|
|
1292
1349
|
}
|
|
1293
|
-
this.contentSize = new $8EWFi$Size(visibleWidth, y);
|
|
1350
|
+
this.contentSize = new (0, $8EWFi$Size)(visibleWidth, y);
|
|
1294
1351
|
}
|
|
1295
1352
|
buildChild(node, y, index) {
|
|
1296
1353
|
let row = Math.floor(index / this.numColumns);
|
|
1297
1354
|
let column = index % this.numColumns;
|
|
1298
1355
|
let x = this.margin + column * (this.itemSize.width + this.horizontalSpacing);
|
|
1299
1356
|
y = this.margin + row * (this.itemSize.height + this.minSpace.height);
|
|
1300
|
-
let rect = new $8EWFi$Rect(x, y, this.itemSize.width, this.itemSize.height);
|
|
1357
|
+
let rect = new (0, $8EWFi$Rect)(x, y, this.itemSize.width, this.itemSize.height);
|
|
1301
1358
|
// TODO: Perhaps have it so that the child key for each row is stored with the layoutInfo?
|
|
1302
|
-
let layoutInfo = new $8EWFi$LayoutInfo(node.type, node.key, rect);
|
|
1359
|
+
let layoutInfo = new (0, $8EWFi$LayoutInfo)(node.type, node.key, rect);
|
|
1303
1360
|
layoutInfo.allowOverflow = true;
|
|
1304
1361
|
this.layoutInfos.set(node.key, layoutInfo);
|
|
1305
1362
|
return layoutInfo;
|
|
@@ -1308,32 +1365,29 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1308
1365
|
// 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
|
|
1309
1366
|
// collection contents by that number (which will give us the row distribution)
|
|
1310
1367
|
getKeyBelow(key) {
|
|
1311
|
-
var
|
|
1368
|
+
var _this_collection_rows_indexRowBelow;
|
|
1312
1369
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1313
1370
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1314
1371
|
let indexRowBelow;
|
|
1315
|
-
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey
|
|
1316
|
-
);
|
|
1372
|
+
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey);
|
|
1317
1373
|
if (index !== -1) indexRowBelow = index + this.numColumns;
|
|
1318
1374
|
else return null;
|
|
1319
|
-
return ((
|
|
1375
|
+
return ((_this_collection_rows_indexRowBelow = this.collection.rows[indexRowBelow]) === null || _this_collection_rows_indexRowBelow === void 0 ? void 0 : _this_collection_rows_indexRowBelow.childNodes[0].key) || null;
|
|
1320
1376
|
}
|
|
1321
1377
|
getKeyAbove(key) {
|
|
1322
|
-
var
|
|
1378
|
+
var _this_collection_rows_indexRowAbove;
|
|
1323
1379
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1324
1380
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1325
1381
|
let indexRowAbove;
|
|
1326
|
-
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey
|
|
1327
|
-
);
|
|
1382
|
+
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey);
|
|
1328
1383
|
if (index !== -1) indexRowAbove = index - this.numColumns;
|
|
1329
1384
|
else return null;
|
|
1330
|
-
return ((
|
|
1385
|
+
return ((_this_collection_rows_indexRowAbove = this.collection.rows[indexRowAbove]) === null || _this_collection_rows_indexRowAbove === void 0 ? void 0 : _this_collection_rows_indexRowAbove.childNodes[0].key) || null;
|
|
1331
1386
|
}
|
|
1332
|
-
constructor(options = {
|
|
1333
|
-
}){
|
|
1387
|
+
constructor(options = {}){
|
|
1334
1388
|
super(options);
|
|
1335
|
-
let cardSize =
|
|
1336
|
-
this.cardOrientation = options.cardOrientation ||
|
|
1389
|
+
let cardSize = "L";
|
|
1390
|
+
this.cardOrientation = options.cardOrientation || "vertical";
|
|
1337
1391
|
this.minItemSize = options.minItemSize || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
|
|
1338
1392
|
this.maxItemSize = options.maxItemSize || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].maxItemSize;
|
|
1339
1393
|
this.margin = options.margin != null ? options.margin : $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].margin;
|
|
@@ -1348,11 +1402,21 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1348
1402
|
}
|
|
1349
1403
|
|
|
1350
1404
|
|
|
1405
|
+
/*
|
|
1406
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
1407
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1408
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
1409
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
1410
|
+
*
|
|
1411
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
1412
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
1413
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1414
|
+
* governing permissions and limitations under the License.
|
|
1415
|
+
*/
|
|
1351
1416
|
|
|
1352
|
-
|
|
1353
|
-
class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export$64943d2e59d72a29 {
|
|
1417
|
+
class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
1354
1418
|
get layoutType() {
|
|
1355
|
-
return
|
|
1419
|
+
return "waterfall";
|
|
1356
1420
|
}
|
|
1357
1421
|
buildCollection(invalidationContext) {
|
|
1358
1422
|
// Compute the number of columns needed to display the content
|
|
@@ -1392,8 +1456,8 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1392
1456
|
let column = this.getNextColumnIndex(columnHeights);
|
|
1393
1457
|
let x = this.margin + column * (itemWidth + horizontalSpacing);
|
|
1394
1458
|
let y = columnHeights[column];
|
|
1395
|
-
let rect = new $8EWFi$Rect(x, y, itemWidth, height);
|
|
1396
|
-
let layoutInfo = new $8EWFi$LayoutInfo(node.type, key, rect);
|
|
1459
|
+
let rect = new (0, $8EWFi$Rect)(x, y, itemWidth, height);
|
|
1460
|
+
let layoutInfo = new (0, $8EWFi$LayoutInfo)(node.type, key, rect);
|
|
1397
1461
|
layoutInfo.estimatedSize = estimatedSize;
|
|
1398
1462
|
layoutInfo.allowOverflow = true;
|
|
1399
1463
|
this.layoutInfos.set(key, layoutInfo);
|
|
@@ -1407,9 +1471,9 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1407
1471
|
// Reset all columns to the maximum for the next section
|
|
1408
1472
|
let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;
|
|
1409
1473
|
columnHeights.fill(maxHeight);
|
|
1410
|
-
let
|
|
1474
|
+
let y1 = columnHeights[0];
|
|
1411
1475
|
if (this.isLoading) {
|
|
1412
|
-
let loaderY =
|
|
1476
|
+
let loaderY = y1;
|
|
1413
1477
|
let loaderHeight = 60;
|
|
1414
1478
|
// If there aren't any items, make loader take all avaliable room and remove margin from y calculation
|
|
1415
1479
|
// so it doesn't scroll
|
|
@@ -1417,18 +1481,18 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1417
1481
|
loaderY = 0;
|
|
1418
1482
|
loaderHeight = this.virtualizer.visibleRect.height || 60;
|
|
1419
1483
|
}
|
|
1420
|
-
let
|
|
1421
|
-
let loader = new $8EWFi$LayoutInfo(
|
|
1422
|
-
this.layoutInfos.set(
|
|
1423
|
-
|
|
1484
|
+
let rect1 = new (0, $8EWFi$Rect)(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);
|
|
1485
|
+
let loader = new (0, $8EWFi$LayoutInfo)("loader", "loader", rect1);
|
|
1486
|
+
this.layoutInfos.set("loader", loader);
|
|
1487
|
+
y1 = loader.rect.maxY;
|
|
1424
1488
|
}
|
|
1425
1489
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
1426
|
-
let
|
|
1427
|
-
let placeholder = new $8EWFi$LayoutInfo(
|
|
1428
|
-
this.layoutInfos.set(
|
|
1429
|
-
|
|
1490
|
+
let rect2 = new (0, $8EWFi$Rect)(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
|
|
1491
|
+
let placeholder = new (0, $8EWFi$LayoutInfo)("placeholder", "placeholder", rect2);
|
|
1492
|
+
this.layoutInfos.set("placeholder", placeholder);
|
|
1493
|
+
y1 = placeholder.rect.maxY;
|
|
1430
1494
|
}
|
|
1431
|
-
this.contentSize = new $8EWFi$Size(this.virtualizer.visibleRect.width,
|
|
1495
|
+
this.contentSize = new (0, $8EWFi$Size)(this.virtualizer.visibleRect.width, y1);
|
|
1432
1496
|
}
|
|
1433
1497
|
updateItemSize(key, size) {
|
|
1434
1498
|
let layoutInfo = this.layoutInfos.get(key);
|
|
@@ -1450,53 +1514,52 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1450
1514
|
return minIndex;
|
|
1451
1515
|
}
|
|
1452
1516
|
getClosestRight(key) {
|
|
1453
|
-
var
|
|
1517
|
+
var _this__findClosest, _this_collection_getItem_childNodes_, _this_collection_getItem;
|
|
1454
1518
|
let layoutInfo = this.getLayoutInfo(key);
|
|
1455
1519
|
// Refactored from v2. Current strategy is to find the closest card in the adjacent column.
|
|
1456
1520
|
// 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
|
|
1457
1521
|
// and thus the top corner to top corner distance was massive.
|
|
1458
1522
|
// First look for a card to the immediate right of the current card. If we can't find any, look for the nearest card in the entire column to the right of the card
|
|
1459
|
-
let rect = new $8EWFi$Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
1460
|
-
key = (
|
|
1523
|
+
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
1524
|
+
key = (_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key;
|
|
1461
1525
|
if (!key) {
|
|
1462
|
-
var
|
|
1463
|
-
rect = new $8EWFi$Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1464
|
-
key = (
|
|
1526
|
+
var _this__findClosest1;
|
|
1527
|
+
rect = new (0, $8EWFi$Rect)(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1528
|
+
key = (_this__findClosest1 = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest1 === void 0 ? void 0 : _this__findClosest1.key;
|
|
1465
1529
|
}
|
|
1466
|
-
return (
|
|
1530
|
+
return (_this_collection_getItem_childNodes_ = (_this_collection_getItem = this.collection.getItem(key)) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.childNodes[0]) === null || _this_collection_getItem_childNodes_ === void 0 ? void 0 : _this_collection_getItem_childNodes_.key;
|
|
1467
1531
|
}
|
|
1468
1532
|
getClosestLeft(key) {
|
|
1469
|
-
var
|
|
1533
|
+
var _this__findClosest, _this_collection_getItem_childNodes_, _this_collection_getItem;
|
|
1470
1534
|
let layoutInfo = this.getLayoutInfo(key);
|
|
1471
1535
|
// 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
|
|
1472
|
-
let rect = new $8EWFi$Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
1473
|
-
key = (
|
|
1536
|
+
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
1537
|
+
key = (_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key;
|
|
1474
1538
|
if (!key) {
|
|
1475
|
-
var
|
|
1476
|
-
rect = new $8EWFi$Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1477
|
-
key = (
|
|
1539
|
+
var _this__findClosest1;
|
|
1540
|
+
rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1541
|
+
key = (_this__findClosest1 = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest1 === void 0 ? void 0 : _this__findClosest1.key;
|
|
1478
1542
|
}
|
|
1479
|
-
return (
|
|
1543
|
+
return (_this_collection_getItem_childNodes_ = (_this_collection_getItem = this.collection.getItem(key)) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.childNodes[0]) === null || _this_collection_getItem_childNodes_ === void 0 ? void 0 : _this_collection_getItem_childNodes_.key;
|
|
1480
1544
|
}
|
|
1481
1545
|
getKeyRightOf(key) {
|
|
1482
1546
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1483
1547
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1484
|
-
return this.direction ===
|
|
1548
|
+
return this.direction === "rtl" ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
|
|
1485
1549
|
}
|
|
1486
1550
|
getKeyLeftOf(key) {
|
|
1487
1551
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1488
1552
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1489
|
-
return this.direction ===
|
|
1553
|
+
return this.direction === "rtl" ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
|
|
1490
1554
|
}
|
|
1491
|
-
constructor(options = {
|
|
1492
|
-
}){
|
|
1555
|
+
constructor(options = {}){
|
|
1493
1556
|
// TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify
|
|
1494
1557
|
// minItemSize defaults or other things
|
|
1495
1558
|
super(options);
|
|
1496
|
-
this.minItemSize = options.minItemSize || new $8EWFi$Size(240, 136);
|
|
1497
|
-
this.maxItemSize = options.maxItemSize || new $8EWFi$Size(Infinity, Infinity);
|
|
1559
|
+
this.minItemSize = options.minItemSize || new (0, $8EWFi$Size)(240, 136);
|
|
1560
|
+
this.maxItemSize = options.maxItemSize || new (0, $8EWFi$Size)(Infinity, Infinity);
|
|
1498
1561
|
this.margin = options.margin != null ? options.margin : 24;
|
|
1499
|
-
this.minSpace = options.minSpace || new $8EWFi$Size(18, 18);
|
|
1562
|
+
this.minSpace = options.minSpace || new (0, $8EWFi$Size)(18, 18);
|
|
1500
1563
|
this.maxColumns = options.maxColumns || Infinity;
|
|
1501
1564
|
this.itemWidth = 0;
|
|
1502
1565
|
this.numColumns = 0;
|
|
@@ -1506,25 +1569,35 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1506
1569
|
}
|
|
1507
1570
|
|
|
1508
1571
|
|
|
1572
|
+
/*
|
|
1573
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
1574
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1575
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
1576
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
1577
|
+
*
|
|
1578
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
1579
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
1580
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1581
|
+
* governing permissions and limitations under the License.
|
|
1582
|
+
*/
|
|
1509
1583
|
|
|
1510
1584
|
|
|
1511
|
-
|
|
1512
|
-
let
|
|
1513
|
-
let context = $8d180a244893de14$export$fea0b38586ec8f13();
|
|
1585
|
+
let $d2d1c099b89e366a$var$Card = /*#__PURE__*/ (0, $8EWFi$forwardRef)((props, ref)=>{
|
|
1586
|
+
let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
1514
1587
|
if (context !== null) return null;
|
|
1515
|
-
else return
|
|
1588
|
+
else return /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
|
|
1516
1589
|
...props,
|
|
1517
1590
|
ref: ref
|
|
1518
|
-
})
|
|
1591
|
+
});
|
|
1519
1592
|
});
|
|
1520
1593
|
// @ts-ignore
|
|
1521
1594
|
$d2d1c099b89e366a$var$Card.getCollectionNode = function* getCollectionNode(props) {
|
|
1522
1595
|
let { children: children , textValue: textValue } = props;
|
|
1523
1596
|
yield {
|
|
1524
|
-
type:
|
|
1597
|
+
type: "item",
|
|
1525
1598
|
props: props,
|
|
1526
1599
|
rendered: children,
|
|
1527
|
-
|
|
1600
|
+
"aria-label": props["aria-label"],
|
|
1528
1601
|
hasChildNodes: false,
|
|
1529
1602
|
textValue: textValue
|
|
1530
1603
|
};
|