@react-spectrum/card 3.0.0-nightly.3598 → 3.0.0-nightly.3600
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 +360 -288
- package/dist/main.js.map +1 -1
- package/dist/module.mjs +360 -288
- package/dist/module.mjs.map +1 -1
- package/package.json +23 -23
package/dist/module.mjs
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;
|
|
@@ -832,39 +885,39 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
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);
|
|
888
|
+
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
|
|
836
889
|
let closestRow = this.collection.getItem((ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key);
|
|
837
890
|
return (ref1 = closestRow === null || closestRow === void 0 ? void 0 : closestRow.childNodes[0]) === null || ref1 === void 0 ? void 0 : ref1.key;
|
|
838
891
|
}
|
|
839
892
|
getKeyAbove(key) {
|
|
840
|
-
var ref,
|
|
893
|
+
var ref, ref1;
|
|
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);
|
|
897
|
+
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
|
|
845
898
|
let closestRow = this.collection.getItem((ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key);
|
|
846
|
-
return (
|
|
899
|
+
return (ref1 = closestRow === null || closestRow === void 0 ? void 0 : closestRow.childNodes[0]) === null || ref1 === void 0 ? void 0 : ref1.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() {
|
|
@@ -889,14 +942,14 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
889
942
|
let keyAbove = (ref = this.collection.getItem(this.getKeyAbove(key))) === null || ref === void 0 ? void 0 : ref.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 ref1;
|
|
893
946
|
let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
|
|
894
|
-
let
|
|
895
|
-
layoutInfo = this.getLayoutInfo(
|
|
947
|
+
let keyAbove1 = (ref1 = this.collection.getItem(this.getKeyAbove(childKey))) === null || ref1 === void 0 ? void 0 : ref1.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();
|
|
@@ -915,14 +968,14 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends $8EWFi$Layout {
|
|
|
915
968
|
let keyBelow = (ref = this.collection.getItem(this.getKeyBelow(key))) === null || ref === void 0 ? void 0 : ref.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 ref1;
|
|
919
972
|
let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
|
|
920
|
-
let
|
|
921
|
-
layoutInfo = this.getLayoutInfo(
|
|
973
|
+
let keyBelow1 = (ref1 = this.collection.getItem(this.getKeyBelow(childKey))) === null || ref1 === void 0 ? void 0 : ref1.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
|
|
@@ -1047,8 +1098,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
1047
1098
|
// if the available width can't hold two items, then every item will get its own row
|
|
1048
1099
|
// this leads to a faster run through linear partition and more dependable output for small row widths
|
|
1049
1100
|
if (availableWidth <= this.minItemSize.width * 2 + this.itemPadding * 2) rows = this.collection.size;
|
|
1050
|
-
let weightedRatios = ratios.map((ratio)=>ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio
|
|
1051
|
-
);
|
|
1101
|
+
let weightedRatios = ratios.map((ratio)=>ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio);
|
|
1052
1102
|
let partition = $c0ba81539c443916$var$linearPartition(weightedRatios, rows);
|
|
1053
1103
|
let index = 0;
|
|
1054
1104
|
for (let row of partition){
|
|
@@ -1075,13 +1125,13 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
1075
1125
|
this._distributeWidths(widths);
|
|
1076
1126
|
// Create items for this row.
|
|
1077
1127
|
for(let j2 = index; j2 < index + row.length; j2++){
|
|
1078
|
-
let
|
|
1079
|
-
let
|
|
1080
|
-
let rect = new $8EWFi$Rect(x, y,
|
|
1081
|
-
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);
|
|
1082
1132
|
layoutInfo.allowOverflow = true;
|
|
1083
|
-
this.layoutInfos.set(
|
|
1084
|
-
x +=
|
|
1133
|
+
this.layoutInfos.set(node1.key, layoutInfo);
|
|
1134
|
+
x += itemWidth1 + this.itemSpacing.width;
|
|
1085
1135
|
}
|
|
1086
1136
|
y += itemHeight + this.itemSpacing.height;
|
|
1087
1137
|
index += row.length;
|
|
@@ -1095,24 +1145,23 @@ class $c0ba81539c443916$export$8e52095834484b61 extends $3d424c147206bac9$export
|
|
|
1095
1145
|
loaderY = 0;
|
|
1096
1146
|
loaderHeight = visibleHeight || 60;
|
|
1097
1147
|
}
|
|
1098
|
-
let
|
|
1099
|
-
let loader = new $8EWFi$LayoutInfo(
|
|
1100
|
-
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);
|
|
1101
1151
|
y = loader.rect.maxY;
|
|
1102
1152
|
}
|
|
1103
1153
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
1104
|
-
let
|
|
1105
|
-
let placeholder = new $8EWFi$LayoutInfo(
|
|
1106
|
-
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);
|
|
1107
1157
|
y = placeholder.rect.maxY;
|
|
1108
1158
|
}
|
|
1109
1159
|
}
|
|
1110
|
-
this.contentSize = new $8EWFi$Size(visibleWidth, y);
|
|
1160
|
+
this.contentSize = new (0, $8EWFi$Size)(visibleWidth, y);
|
|
1111
1161
|
}
|
|
1112
|
-
constructor(options = {
|
|
1113
|
-
}){
|
|
1162
|
+
constructor(options = {}){
|
|
1114
1163
|
super(options);
|
|
1115
|
-
let cardSize =
|
|
1164
|
+
let cardSize = "L";
|
|
1116
1165
|
this.idealRowHeight = options.idealRowHeight || $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
|
|
1117
1166
|
this.itemSpacing = options.itemSpacing || $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
|
|
1118
1167
|
this.itemPadding = options.itemPadding != null ? options.itemPadding : $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
|
|
@@ -1127,15 +1176,12 @@ function $c0ba81539c443916$var$linearPartition(seq, k) {
|
|
|
1127
1176
|
if (k <= 0) return [];
|
|
1128
1177
|
if (k >= n) return seq.map((x)=>[
|
|
1129
1178
|
x
|
|
1130
|
-
]
|
|
1131
|
-
);
|
|
1179
|
+
]);
|
|
1132
1180
|
if (n === 1) return [
|
|
1133
1181
|
seq
|
|
1134
1182
|
];
|
|
1135
|
-
let table = Array(n).fill(0).map(()=>Array(k).fill(0)
|
|
1136
|
-
);
|
|
1137
|
-
let solution = Array(n - 1).fill(0).map(()=>Array(k - 1).fill(0)
|
|
1138
|
-
);
|
|
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));
|
|
1139
1185
|
for(let i = 0; i < n; i++)table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);
|
|
1140
1186
|
for(let i1 = 0; i1 < k; i1++)table[0][i1] = seq[0];
|
|
1141
1187
|
for(let i2 = 1; i2 < n; i2++)for(let j = 1; j < k; j++){
|
|
@@ -1159,58 +1205,68 @@ function $c0ba81539c443916$var$linearPartition(seq, k) {
|
|
|
1159
1205
|
while(k >= 0){
|
|
1160
1206
|
if (n >= 1) {
|
|
1161
1207
|
let row = [];
|
|
1162
|
-
for(let
|
|
1208
|
+
for(let i3 = solution[n - 1][k] + 1; i3 < n + 1; i3++)row.push(seq[i3]);
|
|
1163
1209
|
result.unshift(row);
|
|
1164
1210
|
n = solution[n - 1][k];
|
|
1165
1211
|
}
|
|
1166
1212
|
k--;
|
|
1167
1213
|
}
|
|
1168
|
-
let
|
|
1169
|
-
for(let
|
|
1170
|
-
result.unshift(
|
|
1214
|
+
let row1 = [];
|
|
1215
|
+
for(let i4 = 0; i4 < n + 1; i4++)row1.push(seq[i4]);
|
|
1216
|
+
result.unshift(row1);
|
|
1171
1217
|
return result;
|
|
1172
1218
|
}
|
|
1173
1219
|
|
|
1174
1220
|
|
|
1175
|
-
|
|
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
|
+
*/
|
|
1176
1232
|
|
|
1177
1233
|
const $ed42fd44b9b9b664$var$DEFAULT_OPTIONS = {
|
|
1178
1234
|
S: {
|
|
1179
1235
|
itemPadding: 20,
|
|
1180
1236
|
minItemSize: {
|
|
1181
|
-
|
|
1237
|
+
"vertical": new (0, $8EWFi$Size)(96, 96)
|
|
1182
1238
|
},
|
|
1183
|
-
maxItemSize: new $8EWFi$Size(Infinity, Infinity),
|
|
1239
|
+
maxItemSize: new (0, $8EWFi$Size)(Infinity, Infinity),
|
|
1184
1240
|
margin: 8,
|
|
1185
|
-
minSpace: new $8EWFi$Size(6, 6),
|
|
1241
|
+
minSpace: new (0, $8EWFi$Size)(6, 6),
|
|
1186
1242
|
maxColumns: Infinity,
|
|
1187
1243
|
dropSpacing: 50
|
|
1188
1244
|
},
|
|
1189
1245
|
L: {
|
|
1190
1246
|
itemPadding: {
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1247
|
+
"vertical": {
|
|
1248
|
+
"medium": 78,
|
|
1249
|
+
"large": 98
|
|
1194
1250
|
},
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1251
|
+
"horizontal": {
|
|
1252
|
+
"medium": 150,
|
|
1253
|
+
"large": 170
|
|
1198
1254
|
}
|
|
1199
1255
|
},
|
|
1200
1256
|
minItemSize: {
|
|
1201
|
-
|
|
1202
|
-
|
|
1257
|
+
"vertical": new (0, $8EWFi$Size)(208, 208),
|
|
1258
|
+
"horizontal": new (0, $8EWFi$Size)(102, 102)
|
|
1203
1259
|
},
|
|
1204
|
-
maxItemSize: new $8EWFi$Size(Infinity, Infinity),
|
|
1260
|
+
maxItemSize: new (0, $8EWFi$Size)(Infinity, Infinity),
|
|
1205
1261
|
margin: 24,
|
|
1206
|
-
minSpace: new $8EWFi$Size(18, 18),
|
|
1262
|
+
minSpace: new (0, $8EWFi$Size)(18, 18),
|
|
1207
1263
|
maxColumns: Infinity,
|
|
1208
1264
|
dropSpacing: 100
|
|
1209
1265
|
}
|
|
1210
1266
|
};
|
|
1211
|
-
class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export$64943d2e59d72a29 {
|
|
1267
|
+
class $ed42fd44b9b9b664$export$7d2b12578154a735 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
1212
1268
|
get layoutType() {
|
|
1213
|
-
return
|
|
1269
|
+
return "grid";
|
|
1214
1270
|
}
|
|
1215
1271
|
getIndexAtPoint(x, y, allowInsertingAtEnd = false) {
|
|
1216
1272
|
let itemHeight = this.itemSize.height + this.minSpace.height;
|
|
@@ -1232,11 +1288,11 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1232
1288
|
let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
|
|
1233
1289
|
for(let index = firstVisibleItem; index <= lastVisibleItem; index++){
|
|
1234
1290
|
let keyFromIndex = this.collection.rows[index].key;
|
|
1235
|
-
let
|
|
1236
|
-
if (
|
|
1291
|
+
let layoutInfo1 = this.layoutInfos.get(keyFromIndex);
|
|
1292
|
+
if (layoutInfo1 && this.isVisible(layoutInfo1, rect)) res.push(layoutInfo1);
|
|
1237
1293
|
}
|
|
1238
1294
|
// Check if loader is in view and add to res if so
|
|
1239
|
-
let loader = this.layoutInfos.get(
|
|
1295
|
+
let loader = this.layoutInfos.get("loader");
|
|
1240
1296
|
if (loader && this.isVisible(loader, rect)) res.push(loader);
|
|
1241
1297
|
}
|
|
1242
1298
|
return res;
|
|
@@ -1244,8 +1300,8 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1244
1300
|
buildCollection() {
|
|
1245
1301
|
let visibleWidth = this.virtualizer.visibleRect.width;
|
|
1246
1302
|
let visibleHeight = this.virtualizer.visibleRect.height;
|
|
1247
|
-
let horizontalItemPadding = this.cardOrientation ===
|
|
1248
|
-
let verticalItemPadding = this.cardOrientation ===
|
|
1303
|
+
let horizontalItemPadding = this.cardOrientation === "horizontal" ? this.itemPadding : 0;
|
|
1304
|
+
let verticalItemPadding = this.cardOrientation === "vertical" ? this.itemPadding : 0;
|
|
1249
1305
|
let minCardWidth = this.minItemSize.width + horizontalItemPadding;
|
|
1250
1306
|
// Compute the number of rows and columns needed to display the content
|
|
1251
1307
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
@@ -1261,7 +1317,7 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1261
1317
|
let t = (itemWidth - minCardWidth) / minCardWidth;
|
|
1262
1318
|
let itemHeight = Math.floor(this.minItemSize.height + this.minItemSize.height * t);
|
|
1263
1319
|
itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + verticalItemPadding;
|
|
1264
|
-
this.itemSize = new $8EWFi$Size(itemWidth, itemHeight);
|
|
1320
|
+
this.itemSize = new (0, $8EWFi$Size)(itemWidth, itemHeight);
|
|
1265
1321
|
// Compute the horizontal spacing and content height
|
|
1266
1322
|
this.horizontalSpacing = this.numColumns < 2 ? 0 : Math.floor((availableWidth - this.numColumns * this.itemSize.width) / (this.numColumns - 1));
|
|
1267
1323
|
let y = this.margin;
|
|
@@ -1280,27 +1336,27 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1280
1336
|
loaderY = 0;
|
|
1281
1337
|
loaderHeight = visibleHeight || 60;
|
|
1282
1338
|
}
|
|
1283
|
-
let rect = new $8EWFi$Rect(0, loaderY, visibleWidth, loaderHeight);
|
|
1284
|
-
let loader = new $8EWFi$LayoutInfo(
|
|
1285
|
-
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);
|
|
1286
1342
|
y = loader.rect.maxY;
|
|
1287
1343
|
}
|
|
1288
1344
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
1289
|
-
let
|
|
1290
|
-
let placeholder = new $8EWFi$LayoutInfo(
|
|
1291
|
-
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);
|
|
1292
1348
|
y = placeholder.rect.maxY;
|
|
1293
1349
|
}
|
|
1294
|
-
this.contentSize = new $8EWFi$Size(visibleWidth, y);
|
|
1350
|
+
this.contentSize = new (0, $8EWFi$Size)(visibleWidth, y);
|
|
1295
1351
|
}
|
|
1296
1352
|
buildChild(node, y, index) {
|
|
1297
1353
|
let row = Math.floor(index / this.numColumns);
|
|
1298
1354
|
let column = index % this.numColumns;
|
|
1299
1355
|
let x = this.margin + column * (this.itemSize.width + this.horizontalSpacing);
|
|
1300
1356
|
y = this.margin + row * (this.itemSize.height + this.minSpace.height);
|
|
1301
|
-
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);
|
|
1302
1358
|
// TODO: Perhaps have it so that the child key for each row is stored with the layoutInfo?
|
|
1303
|
-
let layoutInfo = new $8EWFi$LayoutInfo(node.type, node.key, rect);
|
|
1359
|
+
let layoutInfo = new (0, $8EWFi$LayoutInfo)(node.type, node.key, rect);
|
|
1304
1360
|
layoutInfo.allowOverflow = true;
|
|
1305
1361
|
this.layoutInfos.set(node.key, layoutInfo);
|
|
1306
1362
|
return layoutInfo;
|
|
@@ -1313,8 +1369,7 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1313
1369
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1314
1370
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1315
1371
|
let indexRowBelow;
|
|
1316
|
-
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey
|
|
1317
|
-
);
|
|
1372
|
+
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey);
|
|
1318
1373
|
if (index !== -1) indexRowBelow = index + this.numColumns;
|
|
1319
1374
|
else return null;
|
|
1320
1375
|
return ((ref = this.collection.rows[indexRowBelow]) === null || ref === void 0 ? void 0 : ref.childNodes[0].key) || null;
|
|
@@ -1324,17 +1379,15 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1324
1379
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1325
1380
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1326
1381
|
let indexRowAbove;
|
|
1327
|
-
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey
|
|
1328
|
-
);
|
|
1382
|
+
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey);
|
|
1329
1383
|
if (index !== -1) indexRowAbove = index - this.numColumns;
|
|
1330
1384
|
else return null;
|
|
1331
1385
|
return ((ref = this.collection.rows[indexRowAbove]) === null || ref === void 0 ? void 0 : ref.childNodes[0].key) || null;
|
|
1332
1386
|
}
|
|
1333
|
-
constructor(options = {
|
|
1334
|
-
}){
|
|
1387
|
+
constructor(options = {}){
|
|
1335
1388
|
super(options);
|
|
1336
|
-
let cardSize =
|
|
1337
|
-
this.cardOrientation = options.cardOrientation ||
|
|
1389
|
+
let cardSize = "L";
|
|
1390
|
+
this.cardOrientation = options.cardOrientation || "vertical";
|
|
1338
1391
|
this.minItemSize = options.minItemSize || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
|
|
1339
1392
|
this.maxItemSize = options.maxItemSize || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].maxItemSize;
|
|
1340
1393
|
this.margin = options.margin != null ? options.margin : $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].margin;
|
|
@@ -1349,11 +1402,21 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends $3d424c147206bac9$export
|
|
|
1349
1402
|
}
|
|
1350
1403
|
|
|
1351
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
|
+
*/
|
|
1352
1416
|
|
|
1353
|
-
|
|
1354
|
-
class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export$64943d2e59d72a29 {
|
|
1417
|
+
class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
1355
1418
|
get layoutType() {
|
|
1356
|
-
return
|
|
1419
|
+
return "waterfall";
|
|
1357
1420
|
}
|
|
1358
1421
|
buildCollection(invalidationContext) {
|
|
1359
1422
|
// Compute the number of columns needed to display the content
|
|
@@ -1393,8 +1456,8 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1393
1456
|
let column = this.getNextColumnIndex(columnHeights);
|
|
1394
1457
|
let x = this.margin + column * (itemWidth + horizontalSpacing);
|
|
1395
1458
|
let y = columnHeights[column];
|
|
1396
|
-
let rect = new $8EWFi$Rect(x, y, itemWidth, height);
|
|
1397
|
-
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);
|
|
1398
1461
|
layoutInfo.estimatedSize = estimatedSize;
|
|
1399
1462
|
layoutInfo.allowOverflow = true;
|
|
1400
1463
|
this.layoutInfos.set(key, layoutInfo);
|
|
@@ -1408,9 +1471,9 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1408
1471
|
// Reset all columns to the maximum for the next section
|
|
1409
1472
|
let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;
|
|
1410
1473
|
columnHeights.fill(maxHeight);
|
|
1411
|
-
let
|
|
1474
|
+
let y1 = columnHeights[0];
|
|
1412
1475
|
if (this.isLoading) {
|
|
1413
|
-
let loaderY =
|
|
1476
|
+
let loaderY = y1;
|
|
1414
1477
|
let loaderHeight = 60;
|
|
1415
1478
|
// If there aren't any items, make loader take all avaliable room and remove margin from y calculation
|
|
1416
1479
|
// so it doesn't scroll
|
|
@@ -1418,18 +1481,18 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1418
1481
|
loaderY = 0;
|
|
1419
1482
|
loaderHeight = this.virtualizer.visibleRect.height || 60;
|
|
1420
1483
|
}
|
|
1421
|
-
let
|
|
1422
|
-
let loader = new $8EWFi$LayoutInfo(
|
|
1423
|
-
this.layoutInfos.set(
|
|
1424
|
-
|
|
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;
|
|
1425
1488
|
}
|
|
1426
1489
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
1427
|
-
let
|
|
1428
|
-
let placeholder = new $8EWFi$LayoutInfo(
|
|
1429
|
-
this.layoutInfos.set(
|
|
1430
|
-
|
|
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;
|
|
1431
1494
|
}
|
|
1432
|
-
this.contentSize = new $8EWFi$Size(this.virtualizer.visibleRect.width,
|
|
1495
|
+
this.contentSize = new (0, $8EWFi$Size)(this.virtualizer.visibleRect.width, y1);
|
|
1433
1496
|
}
|
|
1434
1497
|
updateItemSize(key, size) {
|
|
1435
1498
|
let layoutInfo = this.layoutInfos.get(key);
|
|
@@ -1457,47 +1520,46 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1457
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
|
|
1458
1521
|
// and thus the top corner to top corner distance was massive.
|
|
1459
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
|
|
1460
|
-
let rect = new $8EWFi$Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
1523
|
+
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
1461
1524
|
key = (ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key;
|
|
1462
1525
|
if (!key) {
|
|
1463
1526
|
var ref3;
|
|
1464
|
-
rect = new $8EWFi$Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1527
|
+
rect = new (0, $8EWFi$Rect)(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1465
1528
|
key = (ref3 = this._findClosest(layoutInfo.rect, rect)) === null || ref3 === void 0 ? void 0 : ref3.key;
|
|
1466
1529
|
}
|
|
1467
1530
|
return (ref2 = (ref1 = this.collection.getItem(key)) === null || ref1 === void 0 ? void 0 : ref1.childNodes[0]) === null || ref2 === void 0 ? void 0 : ref2.key;
|
|
1468
1531
|
}
|
|
1469
1532
|
getClosestLeft(key) {
|
|
1470
|
-
var ref,
|
|
1533
|
+
var ref, ref1, ref2;
|
|
1471
1534
|
let layoutInfo = this.getLayoutInfo(key);
|
|
1472
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
|
|
1473
|
-
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);
|
|
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);
|
|
1474
1537
|
key = (ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key;
|
|
1475
1538
|
if (!key) {
|
|
1476
|
-
var
|
|
1477
|
-
rect = new $8EWFi$Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1478
|
-
key = (
|
|
1539
|
+
var ref3;
|
|
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 = (ref3 = this._findClosest(layoutInfo.rect, rect)) === null || ref3 === void 0 ? void 0 : ref3.key;
|
|
1479
1542
|
}
|
|
1480
|
-
return (
|
|
1543
|
+
return (ref2 = (ref1 = this.collection.getItem(key)) === null || ref1 === void 0 ? void 0 : ref1.childNodes[0]) === null || ref2 === void 0 ? void 0 : ref2.key;
|
|
1481
1544
|
}
|
|
1482
1545
|
getKeyRightOf(key) {
|
|
1483
1546
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1484
1547
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1485
|
-
return this.direction ===
|
|
1548
|
+
return this.direction === "rtl" ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
|
|
1486
1549
|
}
|
|
1487
1550
|
getKeyLeftOf(key) {
|
|
1488
1551
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1489
1552
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1490
|
-
return this.direction ===
|
|
1553
|
+
return this.direction === "rtl" ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
|
|
1491
1554
|
}
|
|
1492
|
-
constructor(options = {
|
|
1493
|
-
}){
|
|
1555
|
+
constructor(options = {}){
|
|
1494
1556
|
// TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify
|
|
1495
1557
|
// minItemSize defaults or other things
|
|
1496
1558
|
super(options);
|
|
1497
|
-
this.minItemSize = options.minItemSize || new $8EWFi$Size(240, 136);
|
|
1498
|
-
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);
|
|
1499
1561
|
this.margin = options.margin != null ? options.margin : 24;
|
|
1500
|
-
this.minSpace = options.minSpace || new $8EWFi$Size(18, 18);
|
|
1562
|
+
this.minSpace = options.minSpace || new (0, $8EWFi$Size)(18, 18);
|
|
1501
1563
|
this.maxColumns = options.maxColumns || Infinity;
|
|
1502
1564
|
this.itemWidth = 0;
|
|
1503
1565
|
this.numColumns = 0;
|
|
@@ -1507,25 +1569,35 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends $3d424c147206bac9$export
|
|
|
1507
1569
|
}
|
|
1508
1570
|
|
|
1509
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
|
+
*/
|
|
1510
1583
|
|
|
1511
1584
|
|
|
1512
|
-
|
|
1513
|
-
let
|
|
1514
|
-
let context = $8d180a244893de14$export$fea0b38586ec8f13();
|
|
1585
|
+
let $d2d1c099b89e366a$var$Card = /*#__PURE__*/ (0, $8EWFi$forwardRef)((props, ref)=>{
|
|
1586
|
+
let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
1515
1587
|
if (context !== null) return null;
|
|
1516
|
-
else return
|
|
1588
|
+
else return /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
|
|
1517
1589
|
...props,
|
|
1518
1590
|
ref: ref
|
|
1519
|
-
})
|
|
1591
|
+
});
|
|
1520
1592
|
});
|
|
1521
1593
|
// @ts-ignore
|
|
1522
1594
|
$d2d1c099b89e366a$var$Card.getCollectionNode = function* getCollectionNode(props) {
|
|
1523
1595
|
let { children: children , textValue: textValue } = props;
|
|
1524
1596
|
yield {
|
|
1525
|
-
type:
|
|
1597
|
+
type: "item",
|
|
1526
1598
|
props: props,
|
|
1527
1599
|
rendered: children,
|
|
1528
|
-
|
|
1600
|
+
"aria-label": props["aria-label"],
|
|
1529
1601
|
hasChildNodes: false,
|
|
1530
1602
|
textValue: textValue
|
|
1531
1603
|
};
|