@react-spectrum/list 3.10.10 → 3.11.0
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/import.mjs +3 -3
- package/dist/main.js +4 -4
- package/dist/main.js.map +1 -1
- package/dist/module.js +3 -3
- package/dist/module.js.map +1 -1
- package/dist/types/src/index.d.ts +3 -0
- package/package.json +13 -50
- package/src/index.ts +4 -3
- package/dist/DragPreview.main.js +0 -79
- package/dist/DragPreview.main.js.map +0 -1
- package/dist/DragPreview.mjs +0 -74
- package/dist/DragPreview.module.js +0 -74
- package/dist/DragPreview.module.js.map +0 -1
- package/dist/InsertionIndicator.main.js +0 -49
- package/dist/InsertionIndicator.main.js.map +0 -1
- package/dist/InsertionIndicator.mjs +0 -44
- package/dist/InsertionIndicator.module.js +0 -44
- package/dist/InsertionIndicator.module.js.map +0 -1
- package/dist/ListView.main.js +0 -300
- package/dist/ListView.main.js.map +0 -1
- package/dist/ListView.mjs +0 -294
- package/dist/ListView.module.js +0 -294
- package/dist/ListView.module.js.map +0 -1
- package/dist/ListViewItem.main.js +0 -245
- package/dist/ListViewItem.main.js.map +0 -1
- package/dist/ListViewItem.mjs +0 -240
- package/dist/ListViewItem.module.js +0 -240
- package/dist/ListViewItem.module.js.map +0 -1
- package/dist/ListViewLayout.main.js +0 -69
- package/dist/ListViewLayout.main.js.map +0 -1
- package/dist/ListViewLayout.mjs +0 -64
- package/dist/ListViewLayout.module.js +0 -64
- package/dist/ListViewLayout.module.js.map +0 -1
- package/dist/RootDropIndicator.main.js +0 -46
- package/dist/RootDropIndicator.main.js.map +0 -1
- package/dist/RootDropIndicator.mjs +0 -37
- package/dist/RootDropIndicator.module.js +0 -37
- package/dist/RootDropIndicator.module.js.map +0 -1
- package/dist/ar-AE.main.js +0 -7
- package/dist/ar-AE.main.js.map +0 -1
- package/dist/ar-AE.mjs +0 -9
- package/dist/ar-AE.module.js +0 -9
- package/dist/ar-AE.module.js.map +0 -1
- package/dist/bg-BG.main.js +0 -7
- package/dist/bg-BG.main.js.map +0 -1
- package/dist/bg-BG.mjs +0 -9
- package/dist/bg-BG.module.js +0 -9
- package/dist/bg-BG.module.js.map +0 -1
- package/dist/cs-CZ.main.js +0 -7
- package/dist/cs-CZ.main.js.map +0 -1
- package/dist/cs-CZ.mjs +0 -9
- package/dist/cs-CZ.module.js +0 -9
- package/dist/cs-CZ.module.js.map +0 -1
- package/dist/da-DK.main.js +0 -7
- package/dist/da-DK.main.js.map +0 -1
- package/dist/da-DK.mjs +0 -9
- package/dist/da-DK.module.js +0 -9
- package/dist/da-DK.module.js.map +0 -1
- package/dist/de-DE.main.js +0 -7
- package/dist/de-DE.main.js.map +0 -1
- package/dist/de-DE.mjs +0 -9
- package/dist/de-DE.module.js +0 -9
- package/dist/de-DE.module.js.map +0 -1
- package/dist/el-GR.main.js +0 -7
- package/dist/el-GR.main.js.map +0 -1
- package/dist/el-GR.mjs +0 -9
- package/dist/el-GR.module.js +0 -9
- package/dist/el-GR.module.js.map +0 -1
- package/dist/en-US.main.js +0 -7
- package/dist/en-US.main.js.map +0 -1
- package/dist/en-US.mjs +0 -9
- package/dist/en-US.module.js +0 -9
- package/dist/en-US.module.js.map +0 -1
- package/dist/es-ES.main.js +0 -7
- package/dist/es-ES.main.js.map +0 -1
- package/dist/es-ES.mjs +0 -9
- package/dist/es-ES.module.js +0 -9
- package/dist/es-ES.module.js.map +0 -1
- package/dist/et-EE.main.js +0 -7
- package/dist/et-EE.main.js.map +0 -1
- package/dist/et-EE.mjs +0 -9
- package/dist/et-EE.module.js +0 -9
- package/dist/et-EE.module.js.map +0 -1
- package/dist/fi-FI.main.js +0 -7
- package/dist/fi-FI.main.js.map +0 -1
- package/dist/fi-FI.mjs +0 -9
- package/dist/fi-FI.module.js +0 -9
- package/dist/fi-FI.module.js.map +0 -1
- package/dist/fr-FR.main.js +0 -7
- package/dist/fr-FR.main.js.map +0 -1
- package/dist/fr-FR.mjs +0 -9
- package/dist/fr-FR.module.js +0 -9
- package/dist/fr-FR.module.js.map +0 -1
- package/dist/he-IL.main.js +0 -7
- package/dist/he-IL.main.js.map +0 -1
- package/dist/he-IL.mjs +0 -9
- package/dist/he-IL.module.js +0 -9
- package/dist/he-IL.module.js.map +0 -1
- package/dist/hr-HR.main.js +0 -7
- package/dist/hr-HR.main.js.map +0 -1
- package/dist/hr-HR.mjs +0 -9
- package/dist/hr-HR.module.js +0 -9
- package/dist/hr-HR.module.js.map +0 -1
- package/dist/hu-HU.main.js +0 -7
- package/dist/hu-HU.main.js.map +0 -1
- package/dist/hu-HU.mjs +0 -9
- package/dist/hu-HU.module.js +0 -9
- package/dist/hu-HU.module.js.map +0 -1
- package/dist/intlStrings.main.js +0 -108
- package/dist/intlStrings.main.js.map +0 -1
- package/dist/intlStrings.mjs +0 -110
- package/dist/intlStrings.module.js +0 -110
- package/dist/intlStrings.module.js.map +0 -1
- package/dist/it-IT.main.js +0 -7
- package/dist/it-IT.main.js.map +0 -1
- package/dist/it-IT.mjs +0 -9
- package/dist/it-IT.module.js +0 -9
- package/dist/it-IT.module.js.map +0 -1
- package/dist/ja-JP.main.js +0 -7
- package/dist/ja-JP.main.js.map +0 -1
- package/dist/ja-JP.mjs +0 -9
- package/dist/ja-JP.module.js +0 -9
- package/dist/ja-JP.module.js.map +0 -1
- package/dist/ko-KR.main.js +0 -7
- package/dist/ko-KR.main.js.map +0 -1
- package/dist/ko-KR.mjs +0 -9
- package/dist/ko-KR.module.js +0 -9
- package/dist/ko-KR.module.js.map +0 -1
- package/dist/list.5918e378.css +0 -839
- package/dist/list.5918e378.css.map +0 -1
- package/dist/lt-LT.main.js +0 -7
- package/dist/lt-LT.main.js.map +0 -1
- package/dist/lt-LT.mjs +0 -9
- package/dist/lt-LT.module.js +0 -9
- package/dist/lt-LT.module.js.map +0 -1
- package/dist/lv-LV.main.js +0 -7
- package/dist/lv-LV.main.js.map +0 -1
- package/dist/lv-LV.mjs +0 -9
- package/dist/lv-LV.module.js +0 -9
- package/dist/lv-LV.module.js.map +0 -1
- package/dist/nb-NO.main.js +0 -7
- package/dist/nb-NO.main.js.map +0 -1
- package/dist/nb-NO.mjs +0 -9
- package/dist/nb-NO.module.js +0 -9
- package/dist/nb-NO.module.js.map +0 -1
- package/dist/nl-NL.main.js +0 -7
- package/dist/nl-NL.main.js.map +0 -1
- package/dist/nl-NL.mjs +0 -9
- package/dist/nl-NL.module.js +0 -9
- package/dist/nl-NL.module.js.map +0 -1
- package/dist/pl-PL.main.js +0 -7
- package/dist/pl-PL.main.js.map +0 -1
- package/dist/pl-PL.mjs +0 -9
- package/dist/pl-PL.module.js +0 -9
- package/dist/pl-PL.module.js.map +0 -1
- package/dist/pt-BR.main.js +0 -7
- package/dist/pt-BR.main.js.map +0 -1
- package/dist/pt-BR.mjs +0 -9
- package/dist/pt-BR.module.js +0 -9
- package/dist/pt-BR.module.js.map +0 -1
- package/dist/pt-PT.main.js +0 -7
- package/dist/pt-PT.main.js.map +0 -1
- package/dist/pt-PT.mjs +0 -9
- package/dist/pt-PT.module.js +0 -9
- package/dist/pt-PT.module.js.map +0 -1
- package/dist/ro-RO.main.js +0 -7
- package/dist/ro-RO.main.js.map +0 -1
- package/dist/ro-RO.mjs +0 -9
- package/dist/ro-RO.module.js +0 -9
- package/dist/ro-RO.module.js.map +0 -1
- package/dist/ru-RU.main.js +0 -7
- package/dist/ru-RU.main.js.map +0 -1
- package/dist/ru-RU.mjs +0 -9
- package/dist/ru-RU.module.js +0 -9
- package/dist/ru-RU.module.js.map +0 -1
- package/dist/sk-SK.main.js +0 -7
- package/dist/sk-SK.main.js.map +0 -1
- package/dist/sk-SK.mjs +0 -9
- package/dist/sk-SK.module.js +0 -9
- package/dist/sk-SK.module.js.map +0 -1
- package/dist/sl-SI.main.js +0 -7
- package/dist/sl-SI.main.js.map +0 -1
- package/dist/sl-SI.mjs +0 -9
- package/dist/sl-SI.module.js +0 -9
- package/dist/sl-SI.module.js.map +0 -1
- package/dist/sr-SP.main.js +0 -7
- package/dist/sr-SP.main.js.map +0 -1
- package/dist/sr-SP.mjs +0 -9
- package/dist/sr-SP.module.js +0 -9
- package/dist/sr-SP.module.js.map +0 -1
- package/dist/styles_css.main.js +0 -197
- package/dist/styles_css.main.js.map +0 -1
- package/dist/styles_css.mjs +0 -199
- package/dist/styles_css.module.js +0 -199
- package/dist/styles_css.module.js.map +0 -1
- package/dist/sv-SE.main.js +0 -7
- package/dist/sv-SE.main.js.map +0 -1
- package/dist/sv-SE.mjs +0 -9
- package/dist/sv-SE.module.js +0 -9
- package/dist/sv-SE.module.js.map +0 -1
- package/dist/tr-TR.main.js +0 -7
- package/dist/tr-TR.main.js.map +0 -1
- package/dist/tr-TR.mjs +0 -9
- package/dist/tr-TR.module.js +0 -9
- package/dist/tr-TR.module.js.map +0 -1
- package/dist/types.d.ts +0 -40
- package/dist/types.d.ts.map +0 -1
- package/dist/uk-UA.main.js +0 -7
- package/dist/uk-UA.main.js.map +0 -1
- package/dist/uk-UA.mjs +0 -9
- package/dist/uk-UA.module.js +0 -9
- package/dist/uk-UA.module.js.map +0 -1
- package/dist/zh-CN.main.js +0 -7
- package/dist/zh-CN.main.js.map +0 -1
- package/dist/zh-CN.mjs +0 -9
- package/dist/zh-CN.module.js +0 -9
- package/dist/zh-CN.module.js.map +0 -1
- package/dist/zh-TW.main.js +0 -7
- package/dist/zh-TW.main.js.map +0 -1
- package/dist/zh-TW.mjs +0 -9
- package/dist/zh-TW.module.js +0 -9
- package/dist/zh-TW.module.js.map +0 -1
- package/src/DragPreview.tsx +0 -72
- package/src/InsertionIndicator.tsx +0 -46
- package/src/ListView.tsx +0 -356
- package/src/ListViewItem.tsx +0 -284
- package/src/ListViewLayout.ts +0 -66
- package/src/RootDropIndicator.tsx +0 -27
- package/src/styles.css +0 -720
package/dist/ListViewItem.mjs
DELETED
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
import "./list.5918e378.css";
|
|
2
|
-
import $asbps$styles_cssmodulejs from "./styles_css.mjs";
|
|
3
|
-
import {ListViewContext as $f85fb77f9d4cbc6c$export$870039b0abfe3de0} from "./ListView.mjs";
|
|
4
|
-
import {Checkbox as $asbps$Checkbox} from "@react-spectrum/checkbox";
|
|
5
|
-
import $asbps$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
6
|
-
import $asbps$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
|
|
7
|
-
import {useHasChild as $asbps$useHasChild, classNames as $asbps$classNames, SlotProvider as $asbps$SlotProvider, ClearSlots as $asbps$ClearSlots} from "@react-spectrum/utils";
|
|
8
|
-
import {CSSTransition as $asbps$CSSTransition} from "react-transition-group";
|
|
9
|
-
import {useFocusRing as $asbps$useFocusRing, FocusRing as $asbps$FocusRing} from "@react-aria/focus";
|
|
10
|
-
import {Grid as $asbps$Grid} from "@react-spectrum/layout";
|
|
11
|
-
import {useHover as $asbps$useHover, isFocusVisible as $asbps$isFocusVisible} from "@react-aria/interactions";
|
|
12
|
-
import $asbps$spectrumiconsuiListGripper from "@spectrum-icons/ui/ListGripper";
|
|
13
|
-
import {mergeProps as $asbps$mergeProps} from "@react-aria/utils";
|
|
14
|
-
import {Provider as $asbps$Provider} from "@react-spectrum/provider";
|
|
15
|
-
import $asbps$react, {useContext as $asbps$useContext, useRef as $asbps$useRef} from "react";
|
|
16
|
-
import {Text as $asbps$Text} from "@react-spectrum/text";
|
|
17
|
-
import {useButton as $asbps$useButton} from "@react-aria/button";
|
|
18
|
-
import {useGridListItem as $asbps$useGridListItem, useGridListSelectionCheckbox as $asbps$useGridListSelectionCheckbox} from "@react-aria/gridlist";
|
|
19
|
-
import {useLocale as $asbps$useLocale} from "@react-aria/i18n";
|
|
20
|
-
import {useVisuallyHidden as $asbps$useVisuallyHidden} from "@react-aria/visually-hidden";
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
function $parcel$interopDefault(a) {
|
|
24
|
-
return a && a.__esModule ? a.default : a;
|
|
25
|
-
}
|
|
26
|
-
/*
|
|
27
|
-
* Copyright 2021 Adobe. All rights reserved.
|
|
28
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
29
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
30
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
31
|
-
*
|
|
32
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
33
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
34
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
35
|
-
* governing permissions and limitations under the License.
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
function $d7c07ca2efc5ba02$export$c6bde0c04b033c0e(props) {
|
|
56
|
-
var _dragAndDropHooks_isVirtualDragging, _layout_getContentSize, _layout_virtualizer;
|
|
57
|
-
let { item: item, isEmphasized: isEmphasized } = props;
|
|
58
|
-
let { state: state, dragState: dragState, dropState: dropState, isListDraggable: isListDraggable, isListDroppable: isListDroppable, layout: layout, dragAndDropHooks: dragAndDropHooks, loadingState: loadingState } = (0, $asbps$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
|
|
59
|
-
let { direction: direction } = (0, $asbps$useLocale)();
|
|
60
|
-
let rowRef = (0, $asbps$useRef)(null);
|
|
61
|
-
let checkboxWrapperRef = (0, $asbps$useRef)(null);
|
|
62
|
-
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = (0, $asbps$useFocusRing)({
|
|
63
|
-
within: true
|
|
64
|
-
});
|
|
65
|
-
let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $asbps$useFocusRing)();
|
|
66
|
-
let { rowProps: rowProps, gridCellProps: gridCellProps, isPressed: isPressed, descriptionProps: descriptionProps, isSelected: isSelected, isDisabled: isDisabled, allowsSelection: allowsSelection, hasAction: hasAction } = (0, $asbps$useGridListItem)({
|
|
67
|
-
node: item,
|
|
68
|
-
isVirtualized: true,
|
|
69
|
-
shouldSelectOnPressUp: isListDraggable
|
|
70
|
-
}, state, rowRef);
|
|
71
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $asbps$useHover)({
|
|
72
|
-
isDisabled: !allowsSelection && !hasAction
|
|
73
|
-
});
|
|
74
|
-
let { checkboxProps: checkboxProps } = (0, $asbps$useGridListSelectionCheckbox)({
|
|
75
|
-
key: item.key
|
|
76
|
-
}, state);
|
|
77
|
-
let hasDescription = (0, $asbps$useHasChild)(`.${(0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description']}`, rowRef);
|
|
78
|
-
let draggableItem = null;
|
|
79
|
-
if (isListDraggable && dragAndDropHooks && dragState) {
|
|
80
|
-
draggableItem = dragAndDropHooks.useDraggableItem({
|
|
81
|
-
key: item.key,
|
|
82
|
-
hasDragButton: true
|
|
83
|
-
}, dragState);
|
|
84
|
-
if (isDisabled) draggableItem = null;
|
|
85
|
-
}
|
|
86
|
-
let isDropTarget = false;
|
|
87
|
-
let dropIndicator = null;
|
|
88
|
-
let dropIndicatorRef = (0, $asbps$useRef)(null);
|
|
89
|
-
if (isListDroppable && dragAndDropHooks && dropState) {
|
|
90
|
-
let target = {
|
|
91
|
-
type: 'item',
|
|
92
|
-
key: item.key,
|
|
93
|
-
dropPosition: 'on'
|
|
94
|
-
};
|
|
95
|
-
isDropTarget = dropState.isDropTarget(target);
|
|
96
|
-
dropIndicator = dragAndDropHooks.useDropIndicator({
|
|
97
|
-
target: target
|
|
98
|
-
}, dropState, dropIndicatorRef);
|
|
99
|
-
}
|
|
100
|
-
let dragButtonRef = (0, $asbps$react).useRef(null);
|
|
101
|
-
let { buttonProps: buttonProps } = (0, $asbps$useButton)({
|
|
102
|
-
...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
|
|
103
|
-
elementType: 'div'
|
|
104
|
-
}, dragButtonRef);
|
|
105
|
-
let chevron = direction === 'ltr' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronRightMedium), {
|
|
106
|
-
"aria-hidden": "true",
|
|
107
|
-
UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
|
|
108
|
-
'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
|
|
109
|
-
'is-disabled': !hasAction
|
|
110
|
-
})
|
|
111
|
-
}) : /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronLeftMedium), {
|
|
112
|
-
"aria-hidden": "true",
|
|
113
|
-
UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
|
|
114
|
-
'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
|
|
115
|
-
'is-disabled': !hasAction
|
|
116
|
-
})
|
|
117
|
-
});
|
|
118
|
-
let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
|
|
119
|
-
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $asbps$useVisuallyHidden)();
|
|
120
|
-
const mergedProps = (0, $asbps$mergeProps)(rowProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, hoverProps, focusWithinProps, focusProps);
|
|
121
|
-
// Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
|
|
122
|
-
// allowing for single swipe navigation between row drop indicator
|
|
123
|
-
if (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging.call(dragAndDropHooks)) mergedProps.tabIndex = undefined;
|
|
124
|
-
let isFirstRow = item.prevKey == null;
|
|
125
|
-
let isLastRow = item.nextKey == null;
|
|
126
|
-
// Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom
|
|
127
|
-
// border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap
|
|
128
|
-
// with bottom border
|
|
129
|
-
let isFlushWithContainerBottom = false;
|
|
130
|
-
var _layout_virtualizer_visibleRect_height;
|
|
131
|
-
if (isLastRow && loadingState !== 'loadingMore') {
|
|
132
|
-
if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer_visibleRect_height = (_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.visibleRect.height) !== null && _layout_virtualizer_visibleRect_height !== void 0 ? _layout_virtualizer_visibleRect_height : 0)) isFlushWithContainerBottom = true;
|
|
133
|
-
}
|
|
134
|
-
// previous item isn't selected
|
|
135
|
-
// and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview
|
|
136
|
-
let roundTops = !(item.prevKey != null && state.selectionManager.isSelected(item.prevKey)) && (state.selectionManager.focusedKey !== item.prevKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
|
|
137
|
-
let roundBottoms = !(item.nextKey != null && state.selectionManager.isSelected(item.nextKey)) && (state.selectionManager.focusedKey !== item.nextKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
|
|
138
|
-
let content = typeof item.rendered === 'string' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Text), null, item.rendered) : item.rendered;
|
|
139
|
-
if (isDisabled) content = /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Provider), {
|
|
140
|
-
isDisabled: true
|
|
141
|
-
}, content);
|
|
142
|
-
return /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
143
|
-
...mergedProps,
|
|
144
|
-
className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListView-row', {
|
|
145
|
-
'focus-ring': isFocusVisible,
|
|
146
|
-
'round-tops': roundTops || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key,
|
|
147
|
-
'round-bottoms': roundBottoms || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key
|
|
148
|
-
}),
|
|
149
|
-
ref: rowRef
|
|
150
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
151
|
-
// TODO: refactor the css here now that we are focusing the row?
|
|
152
|
-
className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem', {
|
|
153
|
-
'is-active': isPressed,
|
|
154
|
-
'is-focused': isFocusVisibleWithin,
|
|
155
|
-
'focus-ring': isFocusVisible,
|
|
156
|
-
'is-hovered': isHovered,
|
|
157
|
-
'is-selected': isSelected,
|
|
158
|
-
'is-disabled': isDisabled,
|
|
159
|
-
'is-prev-selected': item.prevKey != null && state.selectionManager.isSelected(item.prevKey),
|
|
160
|
-
'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),
|
|
161
|
-
'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || item.nextKey != null && state.selectionManager.isSelected(item.nextKey)),
|
|
162
|
-
'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,
|
|
163
|
-
'react-spectrum-ListViewItem--firstRow': isFirstRow,
|
|
164
|
-
'react-spectrum-ListViewItem--lastRow': isLastRow,
|
|
165
|
-
'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,
|
|
166
|
-
'react-spectrum-ListViewItem--hasDescription': hasDescription
|
|
167
|
-
}),
|
|
168
|
-
...gridCellProps
|
|
169
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Grid), {
|
|
170
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-grid']
|
|
171
|
-
}, isListDraggable && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
172
|
-
className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-draghandle-container']
|
|
173
|
-
}, !isDisabled && /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$FocusRing), {
|
|
174
|
-
focusRingClass: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'focus-ring')
|
|
175
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
176
|
-
...buttonProps,
|
|
177
|
-
className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-draghandle-button'),
|
|
178
|
-
style: !isFocusVisibleWithin ? {
|
|
179
|
-
...visuallyHiddenProps.style
|
|
180
|
-
} : {},
|
|
181
|
-
ref: dragButtonRef,
|
|
182
|
-
draggable: "true"
|
|
183
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiListGripper), null)))), isListDroppable && !(dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.isHidden) && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
184
|
-
role: "button",
|
|
185
|
-
...visuallyHiddenProps,
|
|
186
|
-
...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
|
|
187
|
-
ref: dropIndicatorRef
|
|
188
|
-
}), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$CSSTransition), {
|
|
189
|
-
in: showCheckbox,
|
|
190
|
-
unmountOnExit: true,
|
|
191
|
-
classNames: {
|
|
192
|
-
enter: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enter'],
|
|
193
|
-
enterActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enterActive'],
|
|
194
|
-
exit: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exit'],
|
|
195
|
-
exitActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exitActive']
|
|
196
|
-
},
|
|
197
|
-
timeout: 160,
|
|
198
|
-
nodeRef: checkboxWrapperRef
|
|
199
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
200
|
-
ref: checkboxWrapperRef,
|
|
201
|
-
className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkboxWrapper']
|
|
202
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Checkbox), {
|
|
203
|
-
...checkboxProps,
|
|
204
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox'],
|
|
205
|
-
isEmphasized: isEmphasized
|
|
206
|
-
}))), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$SlotProvider), {
|
|
207
|
-
slots: {
|
|
208
|
-
text: {
|
|
209
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-content']
|
|
210
|
-
},
|
|
211
|
-
description: {
|
|
212
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description'],
|
|
213
|
-
...descriptionProps
|
|
214
|
-
},
|
|
215
|
-
illustration: {
|
|
216
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
|
|
217
|
-
},
|
|
218
|
-
image: {
|
|
219
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
|
|
220
|
-
},
|
|
221
|
-
actionButton: {
|
|
222
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
|
|
223
|
-
isQuiet: true
|
|
224
|
-
},
|
|
225
|
-
actionGroup: {
|
|
226
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
|
|
227
|
-
isQuiet: true,
|
|
228
|
-
density: 'compact'
|
|
229
|
-
},
|
|
230
|
-
actionMenu: {
|
|
231
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actionmenu'],
|
|
232
|
-
isQuiet: true
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
}, content, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$ClearSlots), null, chevron)))));
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
export {$d7c07ca2efc5ba02$export$c6bde0c04b033c0e as ListViewItem};
|
|
240
|
-
//# sourceMappingURL=ListViewItem.module.js.map
|
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
import "./list.5918e378.css";
|
|
2
|
-
import $asbps$styles_cssmodulejs from "./styles_css.module.js";
|
|
3
|
-
import {ListViewContext as $f85fb77f9d4cbc6c$export$870039b0abfe3de0} from "./ListView.module.js";
|
|
4
|
-
import {Checkbox as $asbps$Checkbox} from "@react-spectrum/checkbox";
|
|
5
|
-
import $asbps$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
6
|
-
import $asbps$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
|
|
7
|
-
import {useHasChild as $asbps$useHasChild, classNames as $asbps$classNames, SlotProvider as $asbps$SlotProvider, ClearSlots as $asbps$ClearSlots} from "@react-spectrum/utils";
|
|
8
|
-
import {CSSTransition as $asbps$CSSTransition} from "react-transition-group";
|
|
9
|
-
import {useFocusRing as $asbps$useFocusRing, FocusRing as $asbps$FocusRing} from "@react-aria/focus";
|
|
10
|
-
import {Grid as $asbps$Grid} from "@react-spectrum/layout";
|
|
11
|
-
import {useHover as $asbps$useHover, isFocusVisible as $asbps$isFocusVisible} from "@react-aria/interactions";
|
|
12
|
-
import $asbps$spectrumiconsuiListGripper from "@spectrum-icons/ui/ListGripper";
|
|
13
|
-
import {mergeProps as $asbps$mergeProps} from "@react-aria/utils";
|
|
14
|
-
import {Provider as $asbps$Provider} from "@react-spectrum/provider";
|
|
15
|
-
import $asbps$react, {useContext as $asbps$useContext, useRef as $asbps$useRef} from "react";
|
|
16
|
-
import {Text as $asbps$Text} from "@react-spectrum/text";
|
|
17
|
-
import {useButton as $asbps$useButton} from "@react-aria/button";
|
|
18
|
-
import {useGridListItem as $asbps$useGridListItem, useGridListSelectionCheckbox as $asbps$useGridListSelectionCheckbox} from "@react-aria/gridlist";
|
|
19
|
-
import {useLocale as $asbps$useLocale} from "@react-aria/i18n";
|
|
20
|
-
import {useVisuallyHidden as $asbps$useVisuallyHidden} from "@react-aria/visually-hidden";
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
function $parcel$interopDefault(a) {
|
|
24
|
-
return a && a.__esModule ? a.default : a;
|
|
25
|
-
}
|
|
26
|
-
/*
|
|
27
|
-
* Copyright 2021 Adobe. All rights reserved.
|
|
28
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
29
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
30
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
31
|
-
*
|
|
32
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
33
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
34
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
35
|
-
* governing permissions and limitations under the License.
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
function $d7c07ca2efc5ba02$export$c6bde0c04b033c0e(props) {
|
|
56
|
-
var _dragAndDropHooks_isVirtualDragging, _layout_getContentSize, _layout_virtualizer;
|
|
57
|
-
let { item: item, isEmphasized: isEmphasized } = props;
|
|
58
|
-
let { state: state, dragState: dragState, dropState: dropState, isListDraggable: isListDraggable, isListDroppable: isListDroppable, layout: layout, dragAndDropHooks: dragAndDropHooks, loadingState: loadingState } = (0, $asbps$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
|
|
59
|
-
let { direction: direction } = (0, $asbps$useLocale)();
|
|
60
|
-
let rowRef = (0, $asbps$useRef)(null);
|
|
61
|
-
let checkboxWrapperRef = (0, $asbps$useRef)(null);
|
|
62
|
-
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = (0, $asbps$useFocusRing)({
|
|
63
|
-
within: true
|
|
64
|
-
});
|
|
65
|
-
let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $asbps$useFocusRing)();
|
|
66
|
-
let { rowProps: rowProps, gridCellProps: gridCellProps, isPressed: isPressed, descriptionProps: descriptionProps, isSelected: isSelected, isDisabled: isDisabled, allowsSelection: allowsSelection, hasAction: hasAction } = (0, $asbps$useGridListItem)({
|
|
67
|
-
node: item,
|
|
68
|
-
isVirtualized: true,
|
|
69
|
-
shouldSelectOnPressUp: isListDraggable
|
|
70
|
-
}, state, rowRef);
|
|
71
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $asbps$useHover)({
|
|
72
|
-
isDisabled: !allowsSelection && !hasAction
|
|
73
|
-
});
|
|
74
|
-
let { checkboxProps: checkboxProps } = (0, $asbps$useGridListSelectionCheckbox)({
|
|
75
|
-
key: item.key
|
|
76
|
-
}, state);
|
|
77
|
-
let hasDescription = (0, $asbps$useHasChild)(`.${(0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description']}`, rowRef);
|
|
78
|
-
let draggableItem = null;
|
|
79
|
-
if (isListDraggable && dragAndDropHooks && dragState) {
|
|
80
|
-
draggableItem = dragAndDropHooks.useDraggableItem({
|
|
81
|
-
key: item.key,
|
|
82
|
-
hasDragButton: true
|
|
83
|
-
}, dragState);
|
|
84
|
-
if (isDisabled) draggableItem = null;
|
|
85
|
-
}
|
|
86
|
-
let isDropTarget = false;
|
|
87
|
-
let dropIndicator = null;
|
|
88
|
-
let dropIndicatorRef = (0, $asbps$useRef)(null);
|
|
89
|
-
if (isListDroppable && dragAndDropHooks && dropState) {
|
|
90
|
-
let target = {
|
|
91
|
-
type: 'item',
|
|
92
|
-
key: item.key,
|
|
93
|
-
dropPosition: 'on'
|
|
94
|
-
};
|
|
95
|
-
isDropTarget = dropState.isDropTarget(target);
|
|
96
|
-
dropIndicator = dragAndDropHooks.useDropIndicator({
|
|
97
|
-
target: target
|
|
98
|
-
}, dropState, dropIndicatorRef);
|
|
99
|
-
}
|
|
100
|
-
let dragButtonRef = (0, $asbps$react).useRef(null);
|
|
101
|
-
let { buttonProps: buttonProps } = (0, $asbps$useButton)({
|
|
102
|
-
...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
|
|
103
|
-
elementType: 'div'
|
|
104
|
-
}, dragButtonRef);
|
|
105
|
-
let chevron = direction === 'ltr' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronRightMedium), {
|
|
106
|
-
"aria-hidden": "true",
|
|
107
|
-
UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
|
|
108
|
-
'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
|
|
109
|
-
'is-disabled': !hasAction
|
|
110
|
-
})
|
|
111
|
-
}) : /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiChevronLeftMedium), {
|
|
112
|
-
"aria-hidden": "true",
|
|
113
|
-
UNSAFE_className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-parentIndicator', {
|
|
114
|
-
'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
|
|
115
|
-
'is-disabled': !hasAction
|
|
116
|
-
})
|
|
117
|
-
});
|
|
118
|
-
let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
|
|
119
|
-
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $asbps$useVisuallyHidden)();
|
|
120
|
-
const mergedProps = (0, $asbps$mergeProps)(rowProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, hoverProps, focusWithinProps, focusProps);
|
|
121
|
-
// Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
|
|
122
|
-
// allowing for single swipe navigation between row drop indicator
|
|
123
|
-
if (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging.call(dragAndDropHooks)) mergedProps.tabIndex = undefined;
|
|
124
|
-
let isFirstRow = item.prevKey == null;
|
|
125
|
-
let isLastRow = item.nextKey == null;
|
|
126
|
-
// Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom
|
|
127
|
-
// border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap
|
|
128
|
-
// with bottom border
|
|
129
|
-
let isFlushWithContainerBottom = false;
|
|
130
|
-
var _layout_virtualizer_visibleRect_height;
|
|
131
|
-
if (isLastRow && loadingState !== 'loadingMore') {
|
|
132
|
-
if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer_visibleRect_height = (_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.visibleRect.height) !== null && _layout_virtualizer_visibleRect_height !== void 0 ? _layout_virtualizer_visibleRect_height : 0)) isFlushWithContainerBottom = true;
|
|
133
|
-
}
|
|
134
|
-
// previous item isn't selected
|
|
135
|
-
// and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview
|
|
136
|
-
let roundTops = !(item.prevKey != null && state.selectionManager.isSelected(item.prevKey)) && (state.selectionManager.focusedKey !== item.prevKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
|
|
137
|
-
let roundBottoms = !(item.nextKey != null && state.selectionManager.isSelected(item.nextKey)) && (state.selectionManager.focusedKey !== item.nextKey || !((0, $asbps$isFocusVisible)() && state.selectionManager.isFocused));
|
|
138
|
-
let content = typeof item.rendered === 'string' ? /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Text), null, item.rendered) : item.rendered;
|
|
139
|
-
if (isDisabled) content = /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Provider), {
|
|
140
|
-
isDisabled: true
|
|
141
|
-
}, content);
|
|
142
|
-
return /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
143
|
-
...mergedProps,
|
|
144
|
-
className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListView-row', {
|
|
145
|
-
'focus-ring': isFocusVisible,
|
|
146
|
-
'round-tops': roundTops || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key,
|
|
147
|
-
'round-bottoms': roundBottoms || isHovered && !isSelected && state.selectionManager.focusedKey !== item.key
|
|
148
|
-
}),
|
|
149
|
-
ref: rowRef
|
|
150
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
151
|
-
// TODO: refactor the css here now that we are focusing the row?
|
|
152
|
-
className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem', {
|
|
153
|
-
'is-active': isPressed,
|
|
154
|
-
'is-focused': isFocusVisibleWithin,
|
|
155
|
-
'focus-ring': isFocusVisible,
|
|
156
|
-
'is-hovered': isHovered,
|
|
157
|
-
'is-selected': isSelected,
|
|
158
|
-
'is-disabled': isDisabled,
|
|
159
|
-
'is-prev-selected': item.prevKey != null && state.selectionManager.isSelected(item.prevKey),
|
|
160
|
-
'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),
|
|
161
|
-
'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || item.nextKey != null && state.selectionManager.isSelected(item.nextKey)),
|
|
162
|
-
'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,
|
|
163
|
-
'react-spectrum-ListViewItem--firstRow': isFirstRow,
|
|
164
|
-
'react-spectrum-ListViewItem--lastRow': isLastRow,
|
|
165
|
-
'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,
|
|
166
|
-
'react-spectrum-ListViewItem--hasDescription': hasDescription
|
|
167
|
-
}),
|
|
168
|
-
...gridCellProps
|
|
169
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Grid), {
|
|
170
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-grid']
|
|
171
|
-
}, isListDraggable && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
172
|
-
className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-draghandle-container']
|
|
173
|
-
}, !isDisabled && /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$FocusRing), {
|
|
174
|
-
focusRingClass: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'focus-ring')
|
|
175
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
176
|
-
...buttonProps,
|
|
177
|
-
className: (0, $asbps$classNames)((0, ($parcel$interopDefault($asbps$styles_cssmodulejs))), 'react-spectrum-ListViewItem-draghandle-button'),
|
|
178
|
-
style: !isFocusVisibleWithin ? {
|
|
179
|
-
...visuallyHiddenProps.style
|
|
180
|
-
} : {},
|
|
181
|
-
ref: dragButtonRef,
|
|
182
|
-
draggable: "true"
|
|
183
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$spectrumiconsuiListGripper), null)))), isListDroppable && !(dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.isHidden) && /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
184
|
-
role: "button",
|
|
185
|
-
...visuallyHiddenProps,
|
|
186
|
-
...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
|
|
187
|
-
ref: dropIndicatorRef
|
|
188
|
-
}), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$CSSTransition), {
|
|
189
|
-
in: showCheckbox,
|
|
190
|
-
unmountOnExit: true,
|
|
191
|
-
classNames: {
|
|
192
|
-
enter: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enter'],
|
|
193
|
-
enterActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--enterActive'],
|
|
194
|
-
exit: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exit'],
|
|
195
|
-
exitActive: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox--exitActive']
|
|
196
|
-
},
|
|
197
|
-
timeout: 160,
|
|
198
|
-
nodeRef: checkboxWrapperRef
|
|
199
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement("div", {
|
|
200
|
-
ref: checkboxWrapperRef,
|
|
201
|
-
className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkboxWrapper']
|
|
202
|
-
}, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$Checkbox), {
|
|
203
|
-
...checkboxProps,
|
|
204
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-checkbox'],
|
|
205
|
-
isEmphasized: isEmphasized
|
|
206
|
-
}))), /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$SlotProvider), {
|
|
207
|
-
slots: {
|
|
208
|
-
text: {
|
|
209
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-content']
|
|
210
|
-
},
|
|
211
|
-
description: {
|
|
212
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-description'],
|
|
213
|
-
...descriptionProps
|
|
214
|
-
},
|
|
215
|
-
illustration: {
|
|
216
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
|
|
217
|
-
},
|
|
218
|
-
image: {
|
|
219
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-thumbnail']
|
|
220
|
-
},
|
|
221
|
-
actionButton: {
|
|
222
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
|
|
223
|
-
isQuiet: true
|
|
224
|
-
},
|
|
225
|
-
actionGroup: {
|
|
226
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actions'],
|
|
227
|
-
isQuiet: true,
|
|
228
|
-
density: 'compact'
|
|
229
|
-
},
|
|
230
|
-
actionMenu: {
|
|
231
|
-
UNSAFE_className: (0, ($parcel$interopDefault($asbps$styles_cssmodulejs)))['react-spectrum-ListViewItem-actionmenu'],
|
|
232
|
-
isQuiet: true
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
}, content, /*#__PURE__*/ (0, $asbps$react).createElement((0, $asbps$ClearSlots), null, chevron)))));
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
export {$d7c07ca2efc5ba02$export$c6bde0c04b033c0e as ListViewItem};
|
|
240
|
-
//# sourceMappingURL=ListViewItem.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/list/src/ListViewItem.tsx"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {classNames, ClearSlots, SlotProvider, useHasChild} from '@react-spectrum/utils';\nimport {CSSTransition} from 'react-transition-group';\nimport type {DraggableItemResult, DropIndicatorAria} from '@react-aria/dnd';\nimport {DropTarget, Node} from '@react-types/shared';\nimport {FocusRing, useFocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport {isFocusVisible as isGlobalFocusVisible, useHover} from '@react-aria/interactions';\nimport ListGripper from '@spectrum-icons/ui/ListGripper';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport {mergeProps} from '@react-aria/utils';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {JSX, useContext, useRef} from 'react';\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface ListViewItemProps<T> {\n item: Node<T>,\n isEmphasized: boolean,\n hasActions: boolean\n}\n\nexport function ListViewItem<T>(props: ListViewItemProps<T>): JSX.Element {\n let {\n item,\n isEmphasized\n } = props;\n let {\n state,\n dragState,\n dropState,\n isListDraggable,\n isListDroppable,\n layout,\n dragAndDropHooks,\n loadingState\n } = useContext(ListViewContext)!;\n let {direction} = useLocale();\n let rowRef = useRef<HTMLDivElement | null>(null);\n let checkboxWrapperRef = useRef<HTMLDivElement | null>(null);\n let {\n isFocusVisible: isFocusVisibleWithin,\n focusProps: focusWithinProps\n } = useFocusRing({within: true});\n let {isFocusVisible, focusProps} = useFocusRing();\n let {\n rowProps,\n gridCellProps,\n isPressed,\n descriptionProps,\n isSelected,\n isDisabled,\n allowsSelection,\n hasAction\n } = useGridListItem({\n node: item,\n isVirtualized: true,\n shouldSelectOnPressUp: isListDraggable\n }, state, rowRef);\n let {hoverProps, isHovered} = useHover({isDisabled: !allowsSelection && !hasAction});\n\n let {checkboxProps} = useGridListSelectionCheckbox({key: item.key}, state);\n let hasDescription = useHasChild(`.${listStyles['react-spectrum-ListViewItem-description']}`, rowRef);\n\n let draggableItem: DraggableItemResult | null = null;\n if (isListDraggable && dragAndDropHooks && dragState) {\n\n draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);\n if (isDisabled) {\n draggableItem = null;\n }\n }\n let isDropTarget = false;\n let dropIndicator: DropIndicatorAria | null = null;\n let dropIndicatorRef = useRef<HTMLDivElement | null>(null);\n if (isListDroppable && dragAndDropHooks && dropState) {\n let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;\n isDropTarget = dropState.isDropTarget(target);\n\n dropIndicator = dragAndDropHooks.useDropIndicator!({target}, dropState, dropIndicatorRef);\n }\n\n let dragButtonRef = React.useRef<HTMLDivElement | null>(null);\n let {buttonProps} = useButton({\n ...draggableItem?.dragButtonProps,\n elementType: 'div'\n }, dragButtonRef);\n\n let chevron = direction === 'ltr'\n ? (\n <ChevronRightMedium\n aria-hidden=\"true\"\n UNSAFE_className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-parentIndicator',\n {\n 'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n 'is-disabled': !hasAction\n }\n )\n } />\n )\n : (\n <ChevronLeftMedium\n aria-hidden=\"true\"\n UNSAFE_className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-parentIndicator',\n {\n 'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n 'is-disabled': !hasAction\n }\n )\n } />\n );\n\n let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n const mergedProps = mergeProps(\n rowProps,\n draggableItem?.dragProps,\n hoverProps,\n focusWithinProps,\n focusProps\n );\n\n // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,\n // allowing for single swipe navigation between row drop indicator\n if (dragAndDropHooks?.isVirtualDragging?.()) {\n mergedProps.tabIndex = undefined;\n }\n\n let isFirstRow = item.prevKey == null;\n let isLastRow = item.nextKey == null;\n // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom\n // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap\n // with bottom border\n let isFlushWithContainerBottom = false;\n if (isLastRow && loadingState !== 'loadingMore') {\n if (layout.getContentSize()?.height >= (layout.virtualizer?.visibleRect.height ?? 0)) {\n isFlushWithContainerBottom = true;\n }\n }\n // previous item isn't selected\n // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview\n let roundTops = (!(item.prevKey != null && state.selectionManager.isSelected(item.prevKey))\n && (state.selectionManager.focusedKey !== item.prevKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n let roundBottoms = (!(item.nextKey != null && state.selectionManager.isSelected(item.nextKey))\n && (state.selectionManager.focusedKey !== item.nextKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n\n let content = typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered;\n if (isDisabled) {\n content = <Provider isDisabled>{content}</Provider>;\n }\n\n return (\n <div\n {...mergedProps}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListView-row',\n {\n 'focus-ring': isFocusVisible,\n 'round-tops':\n roundTops || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key),\n 'round-bottoms':\n roundBottoms || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key)\n }\n )\n }\n ref={rowRef}>\n <div\n // TODO: refactor the css here now that we are focusing the row?\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem',\n {\n 'is-active': isPressed,\n 'is-focused': isFocusVisibleWithin,\n 'focus-ring': isFocusVisible,\n 'is-hovered': isHovered,\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-prev-selected': item.prevKey != null && state.selectionManager.isSelected(item.prevKey),\n 'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),\n 'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || (item.nextKey != null && state.selectionManager.isSelected(item.nextKey))),\n 'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,\n 'react-spectrum-ListViewItem--firstRow': isFirstRow,\n 'react-spectrum-ListViewItem--lastRow': isLastRow,\n 'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,\n 'react-spectrum-ListViewItem--hasDescription': hasDescription\n }\n )\n }\n {...gridCellProps}>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n {isListDraggable &&\n <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>\n {!isDisabled &&\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <div\n {...buttonProps as React.HTMLAttributes<HTMLElement>}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-draghandle-button'\n )\n }\n style={!isFocusVisibleWithin ? {...visuallyHiddenProps.style} : {}}\n ref={dragButtonRef}\n draggable=\"true\">\n <ListGripper />\n </div>\n </FocusRing>\n }\n </div>\n }\n {isListDroppable && !dropIndicator?.isHidden &&\n <div role=\"button\" {...visuallyHiddenProps} {...dropIndicator?.dropIndicatorProps} ref={dropIndicatorRef} />\n }\n <CSSTransition\n in={showCheckbox}\n unmountOnExit\n classNames={{\n enter: listStyles['react-spectrum-ListViewItem-checkbox--enter'],\n enterActive: listStyles['react-spectrum-ListViewItem-checkbox--enterActive'],\n exit: listStyles['react-spectrum-ListViewItem-checkbox--exit'],\n exitActive: listStyles['react-spectrum-ListViewItem-checkbox--exitActive']\n }}\n timeout={160}\n nodeRef={checkboxWrapperRef} >\n <div ref={checkboxWrapperRef} className={listStyles['react-spectrum-ListViewItem-checkboxWrapper']}>\n <Checkbox\n {...checkboxProps}\n UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}\n isEmphasized={isEmphasized} />\n </div>\n </CSSTransition>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description'], ...descriptionProps},\n illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},\n actionGroup: {\n UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],\n isQuiet: true,\n density: 'compact'\n },\n actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}\n }}>\n {content}\n <ClearSlots>\n {chevron}\n </ClearSlots>\n </SlotProvider>\n </Grid>\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListViewItem.module.js.map"}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
var $gyQtY$reactstatelyvirtualizer = require("@react-stately/virtualizer");
|
|
2
|
-
var $gyQtY$reactstatelylayout = require("@react-stately/layout");
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function $parcel$export(e, n, v, s) {
|
|
6
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
$parcel$export(module.exports, "ListViewLayout", () => $a0cb8c9f009bf274$export$dab781655dfbb7d3);
|
|
10
|
-
/*
|
|
11
|
-
* Copyright 2024 Adobe. All rights reserved.
|
|
12
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
-
*
|
|
16
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
17
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
18
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19
|
-
* governing permissions and limitations under the License.
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
class $a0cb8c9f009bf274$export$dab781655dfbb7d3 extends (0, $gyQtY$reactstatelylayout.ListLayout) {
|
|
23
|
-
update(invalidationContext) {
|
|
24
|
-
var _invalidationContext_layoutOptions;
|
|
25
|
-
this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
|
|
26
|
-
super.update(invalidationContext);
|
|
27
|
-
}
|
|
28
|
-
buildCollection() {
|
|
29
|
-
let nodes = super.buildCollection();
|
|
30
|
-
let y = this.contentSize.height;
|
|
31
|
-
if (this.isLoading) {
|
|
32
|
-
var _this_estimatedRowHeight;
|
|
33
|
-
let rect = new (0, $gyQtY$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : (_this_estimatedRowHeight = this.estimatedRowHeight) !== null && _this_estimatedRowHeight !== void 0 ? _this_estimatedRowHeight : 48);
|
|
34
|
-
let loader = new (0, $gyQtY$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
|
|
35
|
-
let node = {
|
|
36
|
-
layoutInfo: loader,
|
|
37
|
-
validRect: loader.rect
|
|
38
|
-
};
|
|
39
|
-
nodes.push(node);
|
|
40
|
-
this.layoutNodes.set(loader.key, node);
|
|
41
|
-
y = loader.rect.maxY;
|
|
42
|
-
}
|
|
43
|
-
if (nodes.length === 0) {
|
|
44
|
-
let rect = new (0, $gyQtY$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
|
|
45
|
-
let placeholder = new (0, $gyQtY$reactstatelyvirtualizer.LayoutInfo)('placeholder', 'placeholder', rect);
|
|
46
|
-
let node = {
|
|
47
|
-
layoutInfo: placeholder,
|
|
48
|
-
validRect: placeholder.rect
|
|
49
|
-
};
|
|
50
|
-
nodes.push(node);
|
|
51
|
-
this.layoutNodes.set(placeholder.key, node);
|
|
52
|
-
y = placeholder.rect.maxY;
|
|
53
|
-
}
|
|
54
|
-
this.contentSize.height = y;
|
|
55
|
-
return nodes;
|
|
56
|
-
}
|
|
57
|
-
buildItem(node, x, y) {
|
|
58
|
-
let res = super.buildItem(node, x, y);
|
|
59
|
-
// allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
|
|
60
|
-
res.layoutInfo.allowOverflow = true;
|
|
61
|
-
return res;
|
|
62
|
-
}
|
|
63
|
-
constructor(...args){
|
|
64
|
-
super(...args), this.isLoading = false;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
//# sourceMappingURL=ListViewLayout.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AASM,MAAM,kDAA0B,CAAA,GAAA,oCAAS;IAG9C,OAAO,mBAA6D,EAAQ;YACzD;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC;QAClB,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;gBACyG;YAA3H,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,MAAM,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM,GAAG,CAAA,2BAAA,IAAI,CAAC,kBAAkB,cAAvB,sCAAA,2BAA2B;YACtJ,IAAI,SAAS,IAAI,CAAA,GAAA,yCAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YACnG,IAAI,cAAc,IAAI,CAAA,GAAA,yCAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG;QAC1B,OAAO;IACT;IAEU,UAAU,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACnE,IAAI,MAAM,KAAK,CAAC,UAAU,MAAM,GAAG;QACnC,gHAAgH;QAChH,IAAI,UAAU,CAAC,aAAa,GAAG;QAC/B,OAAO;IACT;;QA7CK,qBACG,YAAqB;;AA6C/B","sources":["packages/@react-spectrum/list/src/ListViewLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';\nimport {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout';\nimport {Node} from '@react-types/shared';\n\ninterface ListViewLayoutProps extends ListLayoutOptions {\n isLoading?: boolean\n}\n\nexport class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {\n private isLoading: boolean = false;\n\n update(invalidationContext: InvalidationContext<ListViewLayoutProps>): void {\n this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n super.update(invalidationContext);\n }\n\n protected buildCollection(): LayoutNode[] {\n let nodes = super.buildCollection();\n let y = this.contentSize.height;\n\n if (this.isLoading) {\n let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, nodes.length === 0 ? this.virtualizer!.visibleRect.height : this.estimatedRowHeight ?? 48);\n let loader = new LayoutInfo('loader', 'loader', rect);\n let node = {\n layoutInfo: loader,\n validRect: loader.rect\n };\n nodes.push(node);\n this.layoutNodes.set(loader.key, node);\n y = loader.rect.maxY;\n }\n\n if (nodes.length === 0) {\n let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, this.virtualizer!.visibleRect.height);\n let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n let node = {\n layoutInfo: placeholder,\n validRect: placeholder.rect\n };\n nodes.push(node);\n this.layoutNodes.set(placeholder.key, node);\n y = placeholder.rect.maxY;\n }\n\n this.contentSize.height = y;\n return nodes;\n }\n\n protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {\n let res = super.buildItem(node, x, y);\n // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders\n res.layoutInfo.allowOverflow = true;\n return res;\n }\n}\n"],"names":[],"version":3,"file":"ListViewLayout.main.js.map"}
|