@react-stately/selection 3.6.1 → 3.9.1
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.js +332 -486
- package/dist/main.js.map +1 -1
- package/dist/module.js +317 -478
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +30 -5
- package/dist/types.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/SelectionManager.ts +65 -6
- package/src/types.ts +13 -3
- package/src/useMultipleSelectionState.ts +39 -4
package/dist/module.js
CHANGED
|
@@ -1,532 +1,371 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
/*
|
|
5
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
6
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
8
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
13
|
-
* governing permissions and limitations under the License.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* A Selection is a special Set containing Keys, which also has an anchor
|
|
18
|
-
* and current selected key for use when range selecting.
|
|
19
|
-
*/
|
|
20
|
-
class $c91e86e24f2dc9a2182dcc2674c58c$export$Selection extends Set {
|
|
21
|
-
constructor(keys, anchorKey, currentKey) {
|
|
22
|
-
super(keys);
|
|
23
|
-
this.anchorKey = void 0;
|
|
24
|
-
this.currentKey = void 0;
|
|
25
|
-
|
|
26
|
-
if (keys instanceof $c91e86e24f2dc9a2182dcc2674c58c$export$Selection) {
|
|
27
|
-
this.anchorKey = anchorKey || keys.anchorKey;
|
|
28
|
-
this.currentKey = currentKey || keys.currentKey;
|
|
29
|
-
} else {
|
|
30
|
-
this.anchorKey = anchorKey;
|
|
31
|
-
this.currentKey = currentKey;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
1
|
+
import {useRef as $chei7$useRef, useState as $chei7$useState, useMemo as $chei7$useMemo} from "react";
|
|
2
|
+
import {useControlledState as $chei7$useControlledState} from "@react-stately/utils";
|
|
34
3
|
|
|
4
|
+
function $parcel$export(e, n, v, s) {
|
|
5
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
6
|
+
}
|
|
7
|
+
var $e961bd55a24935c9$exports = {};
|
|
8
|
+
|
|
9
|
+
$parcel$export($e961bd55a24935c9$exports, "useMultipleSelectionState", () => $e961bd55a24935c9$export$253fe78d46329472);
|
|
10
|
+
|
|
11
|
+
class $c5f55c1d1f0007fc$export$52baac22726c72bf extends Set {
|
|
12
|
+
constructor(keys, anchorKey, currentKey){
|
|
13
|
+
super(keys);
|
|
14
|
+
if (keys instanceof $c5f55c1d1f0007fc$export$52baac22726c72bf) {
|
|
15
|
+
this.anchorKey = anchorKey || keys.anchorKey;
|
|
16
|
+
this.currentKey = currentKey || keys.currentKey;
|
|
17
|
+
} else {
|
|
18
|
+
this.anchorKey = anchorKey;
|
|
19
|
+
this.currentKey = currentKey;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
35
22
|
}
|
|
36
23
|
|
|
37
|
-
/**
|
|
38
|
-
* Manages state for multiple selection and focus in a collection.
|
|
39
|
-
*/
|
|
40
|
-
export function useMultipleSelectionState(props) {
|
|
41
|
-
let {
|
|
42
|
-
selectionMode = 'none',
|
|
43
|
-
disallowEmptySelection
|
|
44
|
-
} = props; // We want synchronous updates to `isFocused` and `focusedKey` after their setters are called.
|
|
45
|
-
// But we also need to trigger a react re-render. So, we have both a ref (sync) and state (async).
|
|
46
|
-
|
|
47
|
-
let isFocusedRef = useRef(false);
|
|
48
|
-
let [, setFocused] = useState(false);
|
|
49
|
-
let focusedKeyRef = useRef(null);
|
|
50
|
-
let childFocusStrategyRef = useRef(null);
|
|
51
|
-
let [, setFocusedKey] = useState(null);
|
|
52
|
-
let selectedKeysProp = useMemo(() => $c86d35e876e048ac11515eee40c7$var$convertSelection(props.selectedKeys), [props.selectedKeys]);
|
|
53
|
-
let defaultSelectedKeys = useMemo(() => $c86d35e876e048ac11515eee40c7$var$convertSelection(props.defaultSelectedKeys, new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection()), [props.defaultSelectedKeys]);
|
|
54
|
-
let [selectedKeys, setSelectedKeys] = useControlledState(selectedKeysProp, defaultSelectedKeys, props.onSelectionChange);
|
|
55
|
-
let disabledKeysProp = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
|
|
56
|
-
return {
|
|
57
|
-
selectionMode,
|
|
58
|
-
disallowEmptySelection,
|
|
59
|
-
|
|
60
|
-
get isFocused() {
|
|
61
|
-
return isFocusedRef.current;
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
setFocused(f) {
|
|
65
|
-
isFocusedRef.current = f;
|
|
66
|
-
setFocused(f);
|
|
67
|
-
},
|
|
68
|
-
|
|
69
|
-
get focusedKey() {
|
|
70
|
-
return focusedKeyRef.current;
|
|
71
|
-
},
|
|
72
|
-
|
|
73
|
-
get childFocusStrategy() {
|
|
74
|
-
return childFocusStrategyRef.current;
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
setFocusedKey(k, childFocusStrategy) {
|
|
78
|
-
if (childFocusStrategy === void 0) {
|
|
79
|
-
childFocusStrategy = 'first';
|
|
80
|
-
}
|
|
81
24
|
|
|
82
|
-
focusedKeyRef.current = k;
|
|
83
|
-
childFocusStrategyRef.current = childFocusStrategy;
|
|
84
|
-
setFocusedKey(k);
|
|
85
|
-
},
|
|
86
25
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
26
|
+
function $e961bd55a24935c9$var$equalSets(setA, setB) {
|
|
27
|
+
if (setA.size !== setB.size) return false;
|
|
28
|
+
for (let item of setA){
|
|
29
|
+
if (!setB.has(item)) return false;
|
|
30
|
+
}
|
|
31
|
+
return true;
|
|
91
32
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
33
|
+
function $e961bd55a24935c9$export$253fe78d46329472(props) {
|
|
34
|
+
let { selectionMode: selectionMode = 'none' , disallowEmptySelection: disallowEmptySelection , allowDuplicateSelectionEvents: allowDuplicateSelectionEvents } = props;
|
|
35
|
+
// We want synchronous updates to `isFocused` and `focusedKey` after their setters are called.
|
|
36
|
+
// But we also need to trigger a react re-render. So, we have both a ref (sync) and state (async).
|
|
37
|
+
let isFocusedRef = $chei7$useRef(false);
|
|
38
|
+
let [, setFocused] = $chei7$useState(false);
|
|
39
|
+
let focusedKeyRef = $chei7$useRef(null);
|
|
40
|
+
let childFocusStrategyRef = $chei7$useRef(null);
|
|
41
|
+
let [, setFocusedKey] = $chei7$useState(null);
|
|
42
|
+
let selectedKeysProp = $chei7$useMemo(()=>$e961bd55a24935c9$var$convertSelection(props.selectedKeys)
|
|
43
|
+
, [
|
|
44
|
+
props.selectedKeys
|
|
45
|
+
]);
|
|
46
|
+
let defaultSelectedKeys = $chei7$useMemo(()=>$e961bd55a24935c9$var$convertSelection(props.defaultSelectedKeys, new $c5f55c1d1f0007fc$export$52baac22726c72bf())
|
|
47
|
+
, [
|
|
48
|
+
props.defaultSelectedKeys
|
|
49
|
+
]);
|
|
50
|
+
let [selectedKeys, setSelectedKeys] = $chei7$useControlledState(selectedKeysProp, defaultSelectedKeys, props.onSelectionChange);
|
|
51
|
+
let disabledKeysProp = $chei7$useMemo(()=>props.disabledKeys ? new Set(props.disabledKeys) : new Set()
|
|
52
|
+
, [
|
|
53
|
+
props.disabledKeys
|
|
54
|
+
]);
|
|
55
|
+
let [selectionBehavior, setSelectionBehavior] = $chei7$useState(props.selectionBehavior || 'toggle');
|
|
56
|
+
// If the selectionBehavior prop is set to replace, but the current state is toggle (e.g. due to long press
|
|
57
|
+
// to enter selection mode on touch), and the selection becomes empty, reset the selection behavior.
|
|
58
|
+
if (props.selectionBehavior === 'replace' && selectionBehavior === 'toggle' && typeof selectedKeys === 'object' && selectedKeys.size === 0) setSelectionBehavior('replace');
|
|
59
|
+
return {
|
|
60
|
+
selectionMode: selectionMode,
|
|
61
|
+
disallowEmptySelection: disallowEmptySelection,
|
|
62
|
+
selectionBehavior: selectionBehavior,
|
|
63
|
+
setSelectionBehavior: setSelectionBehavior,
|
|
64
|
+
get isFocused () {
|
|
65
|
+
return isFocusedRef.current;
|
|
66
|
+
},
|
|
67
|
+
setFocused (f) {
|
|
68
|
+
isFocusedRef.current = f;
|
|
69
|
+
setFocused(f);
|
|
70
|
+
},
|
|
71
|
+
get focusedKey () {
|
|
72
|
+
return focusedKeyRef.current;
|
|
73
|
+
},
|
|
74
|
+
get childFocusStrategy () {
|
|
75
|
+
return childFocusStrategyRef.current;
|
|
76
|
+
},
|
|
77
|
+
setFocusedKey (k, childFocusStrategy = 'first') {
|
|
78
|
+
focusedKeyRef.current = k;
|
|
79
|
+
childFocusStrategyRef.current = childFocusStrategy;
|
|
80
|
+
setFocusedKey(k);
|
|
81
|
+
},
|
|
82
|
+
selectedKeys: selectedKeys,
|
|
83
|
+
setSelectedKeys (keys) {
|
|
84
|
+
if (allowDuplicateSelectionEvents || !$e961bd55a24935c9$var$equalSets(keys, selectedKeys)) setSelectedKeys(keys);
|
|
85
|
+
},
|
|
86
|
+
disabledKeys: disabledKeysProp
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
function $e961bd55a24935c9$var$convertSelection(selection, defaultValue) {
|
|
90
|
+
if (!selection) return defaultValue;
|
|
91
|
+
return selection === 'all' ? 'all' : new $c5f55c1d1f0007fc$export$52baac22726c72bf(selection);
|
|
99
92
|
}
|
|
100
93
|
|
|
101
|
-
/**
|
|
102
|
-
* An interface for reading and updating multiple selection state.
|
|
103
|
-
*/
|
|
104
|
-
export class SelectionManager {
|
|
105
|
-
constructor(collection, state, options) {
|
|
106
|
-
var _options$allowsCellSe;
|
|
107
94
|
|
|
108
|
-
|
|
109
|
-
this.state = void 0;
|
|
110
|
-
this.allowsCellSelection = void 0;
|
|
111
|
-
this._isSelectAll = void 0;
|
|
112
|
-
this.collection = collection;
|
|
113
|
-
this.state = state;
|
|
114
|
-
this.allowsCellSelection = (_options$allowsCellSe = options == null ? void 0 : options.allowsCellSelection) != null ? _options$allowsCellSe : false;
|
|
115
|
-
this._isSelectAll = null;
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* The type of selection that is allowed in the collection.
|
|
119
|
-
*/
|
|
95
|
+
var $2f812fb5fa7ad073$exports = {};
|
|
120
96
|
|
|
97
|
+
$parcel$export($2f812fb5fa7ad073$exports, "SelectionManager", () => $2f812fb5fa7ad073$export$6c8a5aaad13c9852);
|
|
121
98
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
99
|
+
class $2f812fb5fa7ad073$export$6c8a5aaad13c9852 {
|
|
100
|
+
constructor(collection, state, options){
|
|
101
|
+
this.collection = collection;
|
|
102
|
+
this.state = state;
|
|
103
|
+
this.allowsCellSelection = options?.allowsCellSelection ?? false;
|
|
104
|
+
this._isSelectAll = null;
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* The type of selection that is allowed in the collection.
|
|
108
|
+
*/ get selectionMode() {
|
|
109
|
+
return this.state.selectionMode;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
126
112
|
* Whether the collection allows empty selection.
|
|
127
|
-
*/
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
113
|
+
*/ get disallowEmptySelection() {
|
|
114
|
+
return this.state.disallowEmptySelection;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* The selection behavior for the collection.
|
|
118
|
+
*/ get selectionBehavior() {
|
|
119
|
+
return this.state.selectionBehavior;
|
|
120
|
+
}
|
|
121
|
+
/**
|
|
122
|
+
* Sets the selection behavior for the collection.
|
|
123
|
+
*/ setSelectionBehavior(selectionBehavior) {
|
|
124
|
+
this.state.setSelectionBehavior(selectionBehavior);
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
134
127
|
* Whether the collection is currently focused.
|
|
135
|
-
*/
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
return this.state.isFocused;
|
|
140
|
-
}
|
|
141
|
-
/**
|
|
128
|
+
*/ get isFocused() {
|
|
129
|
+
return this.state.isFocused;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
142
132
|
* Sets whether the collection is focused.
|
|
143
|
-
*/
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
this.state.setFocused(isFocused);
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
133
|
+
*/ setFocused(isFocused) {
|
|
134
|
+
this.state.setFocused(isFocused);
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
150
137
|
* The current focused key in the collection.
|
|
151
|
-
*/
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
get childFocusStrategy() {
|
|
161
|
-
return this.state.childFocusStrategy;
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
138
|
+
*/ get focusedKey() {
|
|
139
|
+
return this.state.focusedKey;
|
|
140
|
+
}
|
|
141
|
+
/** Whether the first or last child of the focused key should receive focus. */ get childFocusStrategy() {
|
|
142
|
+
return this.state.childFocusStrategy;
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
164
145
|
* Sets the focused key.
|
|
165
|
-
*/
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
this.state.setFocusedKey(key, childFocusStrategy);
|
|
170
|
-
}
|
|
171
|
-
/**
|
|
146
|
+
*/ setFocusedKey(key, childFocusStrategy) {
|
|
147
|
+
this.state.setFocusedKey(key, childFocusStrategy);
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
172
150
|
* The currently selected keys in the collection.
|
|
173
|
-
*/
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
return this.state.selectedKeys === 'all' ? new Set(this.getSelectAllKeys()) : this.state.selectedKeys;
|
|
178
|
-
}
|
|
179
|
-
/**
|
|
151
|
+
*/ get selectedKeys() {
|
|
152
|
+
return this.state.selectedKeys === 'all' ? new Set(this.getSelectAllKeys()) : this.state.selectedKeys;
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
180
155
|
* The raw selection value for the collection.
|
|
181
156
|
* Either 'all' for select all, or a set of keys.
|
|
182
|
-
*/
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
return this.state.selectedKeys;
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
157
|
+
*/ get rawSelection() {
|
|
158
|
+
return this.state.selectedKeys;
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
189
161
|
* Returns whether a key is selected.
|
|
190
|
-
*/
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
if (this.state.selectionMode === 'none') {
|
|
195
|
-
return false;
|
|
162
|
+
*/ isSelected(key) {
|
|
163
|
+
if (this.state.selectionMode === 'none') return false;
|
|
164
|
+
key = this.getKey(key);
|
|
165
|
+
return this.state.selectedKeys === 'all' ? !this.state.disabledKeys.has(key) : this.state.selectedKeys.has(key);
|
|
196
166
|
}
|
|
197
|
-
|
|
198
|
-
key = this.getKey(key);
|
|
199
|
-
return this.state.selectedKeys === 'all' ? !this.state.disabledKeys.has(key) : this.state.selectedKeys.has(key);
|
|
200
|
-
}
|
|
201
|
-
/**
|
|
167
|
+
/**
|
|
202
168
|
* Whether the selection is empty.
|
|
203
|
-
*/
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
get isEmpty() {
|
|
207
|
-
return this.state.selectedKeys !== 'all' && this.state.selectedKeys.size === 0;
|
|
208
|
-
}
|
|
209
|
-
/**
|
|
210
|
-
* Whether all items in the collection are selected.
|
|
211
|
-
*/
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
get isSelectAll() {
|
|
215
|
-
if (this.isEmpty) {
|
|
216
|
-
return false;
|
|
169
|
+
*/ get isEmpty() {
|
|
170
|
+
return this.state.selectedKeys !== 'all' && this.state.selectedKeys.size === 0;
|
|
217
171
|
}
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
172
|
+
/**
|
|
173
|
+
* Whether all items in the collection are selected.
|
|
174
|
+
*/ get isSelectAll() {
|
|
175
|
+
if (this.isEmpty) return false;
|
|
176
|
+
if (this.state.selectedKeys === 'all') return true;
|
|
177
|
+
if (this._isSelectAll != null) return this._isSelectAll;
|
|
178
|
+
let allKeys = this.getSelectAllKeys();
|
|
179
|
+
let selectedKeys = this.state.selectedKeys;
|
|
180
|
+
this._isSelectAll = allKeys.every((k)=>selectedKeys.has(k)
|
|
181
|
+
);
|
|
182
|
+
return this._isSelectAll;
|
|
225
183
|
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
get firstSelectedKey() {
|
|
234
|
-
var _first;
|
|
235
|
-
|
|
236
|
-
let first = null;
|
|
237
|
-
|
|
238
|
-
for (let key of this.state.selectedKeys) {
|
|
239
|
-
let item = this.collection.getItem(key);
|
|
240
|
-
|
|
241
|
-
if (!first || (item == null ? void 0 : item.index) < first.index) {
|
|
242
|
-
first = item;
|
|
243
|
-
}
|
|
184
|
+
get firstSelectedKey() {
|
|
185
|
+
let first = null;
|
|
186
|
+
for (let key of this.state.selectedKeys){
|
|
187
|
+
let item = this.collection.getItem(key);
|
|
188
|
+
if (!first || item?.index < first.index) first = item;
|
|
189
|
+
}
|
|
190
|
+
return first?.key;
|
|
244
191
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
let last = null;
|
|
253
|
-
|
|
254
|
-
for (let key of this.state.selectedKeys) {
|
|
255
|
-
let item = this.collection.getItem(key);
|
|
256
|
-
|
|
257
|
-
if (!last || (item == null ? void 0 : item.index) > last.index) {
|
|
258
|
-
last = item;
|
|
259
|
-
}
|
|
192
|
+
get lastSelectedKey() {
|
|
193
|
+
let last = null;
|
|
194
|
+
for (let key of this.state.selectedKeys){
|
|
195
|
+
let item = this.collection.getItem(key);
|
|
196
|
+
if (!last || item?.index > last.index) last = item;
|
|
197
|
+
}
|
|
198
|
+
return last?.key;
|
|
260
199
|
}
|
|
261
|
-
|
|
262
|
-
return (_last = last) == null ? void 0 : _last.key;
|
|
263
|
-
}
|
|
264
|
-
/**
|
|
200
|
+
/**
|
|
265
201
|
* Extends the selection to the given key.
|
|
266
|
-
*/
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
let selection; // Only select the one key if coming from a select all.
|
|
272
|
-
|
|
273
|
-
if (this.state.selectedKeys === 'all') {
|
|
274
|
-
selection = new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection([toKey], toKey, toKey);
|
|
275
|
-
} else {
|
|
276
|
-
let selectedKeys = this.state.selectedKeys;
|
|
277
|
-
let anchorKey = selectedKeys.anchorKey || toKey;
|
|
278
|
-
selection = new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection(selectedKeys, anchorKey, toKey);
|
|
279
|
-
|
|
280
|
-
for (let key of this.getKeyRange(anchorKey, selectedKeys.currentKey || toKey)) {
|
|
281
|
-
selection.delete(key);
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
for (let key of this.getKeyRange(toKey, anchorKey)) {
|
|
285
|
-
if (!this.state.disabledKeys.has(key)) {
|
|
286
|
-
selection.add(key);
|
|
202
|
+
*/ extendSelection(toKey) {
|
|
203
|
+
if (this.selectionMode === 'none') return;
|
|
204
|
+
if (this.selectionMode === 'single') {
|
|
205
|
+
this.replaceSelection(toKey);
|
|
206
|
+
return;
|
|
287
207
|
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
return this.getKeyRangeInternal(to, from);
|
|
208
|
+
toKey = this.getKey(toKey);
|
|
209
|
+
let selection;
|
|
210
|
+
// Only select the one key if coming from a select all.
|
|
211
|
+
if (this.state.selectedKeys === 'all') selection = new $c5f55c1d1f0007fc$export$52baac22726c72bf([
|
|
212
|
+
toKey
|
|
213
|
+
], toKey, toKey);
|
|
214
|
+
else {
|
|
215
|
+
let selectedKeys = this.state.selectedKeys;
|
|
216
|
+
let anchorKey = selectedKeys.anchorKey || toKey;
|
|
217
|
+
selection = new $c5f55c1d1f0007fc$export$52baac22726c72bf(selectedKeys, anchorKey, toKey);
|
|
218
|
+
for (let key of this.getKeyRange(anchorKey, selectedKeys.currentKey || toKey))selection.delete(key);
|
|
219
|
+
for (let key1 of this.getKeyRange(toKey, anchorKey))if (!this.state.disabledKeys.has(key1)) selection.add(key1);
|
|
220
|
+
}
|
|
221
|
+
this.state.setSelectedKeys(selection);
|
|
304
222
|
}
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
while (key) {
|
|
314
|
-
let item = this.collection.getItem(key);
|
|
315
|
-
|
|
316
|
-
if (item && item.type === 'item' || item.type === 'cell' && this.allowsCellSelection) {
|
|
317
|
-
keys.push(key);
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
if (key === to) {
|
|
321
|
-
return keys;
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
key = this.collection.getKeyAfter(key);
|
|
223
|
+
getKeyRange(from, to) {
|
|
224
|
+
let fromItem = this.collection.getItem(from);
|
|
225
|
+
let toItem = this.collection.getItem(to);
|
|
226
|
+
if (fromItem && toItem) {
|
|
227
|
+
if (fromItem.index <= toItem.index) return this.getKeyRangeInternal(from, to);
|
|
228
|
+
return this.getKeyRangeInternal(to, from);
|
|
229
|
+
}
|
|
230
|
+
return [];
|
|
325
231
|
}
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
} // If cell selection is allowed, just return the key.
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
if (item.type === 'cell' && this.allowsCellSelection) {
|
|
340
|
-
return key;
|
|
341
|
-
} // Find a parent item to select
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
while (item.type !== 'item' && item.parentKey) {
|
|
345
|
-
item = this.collection.getItem(item.parentKey);
|
|
232
|
+
getKeyRangeInternal(from, to) {
|
|
233
|
+
let keys = [];
|
|
234
|
+
let key = from;
|
|
235
|
+
while(key){
|
|
236
|
+
let item = this.collection.getItem(key);
|
|
237
|
+
if (item && item.type === 'item' || item.type === 'cell' && this.allowsCellSelection) keys.push(key);
|
|
238
|
+
if (key === to) return keys;
|
|
239
|
+
key = this.collection.getKeyAfter(key);
|
|
240
|
+
}
|
|
241
|
+
return [];
|
|
346
242
|
}
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
243
|
+
getKey(key) {
|
|
244
|
+
let item = this.collection.getItem(key);
|
|
245
|
+
if (!item) // ¯\_(ツ)_/¯
|
|
246
|
+
return key;
|
|
247
|
+
// If cell selection is allowed, just return the key.
|
|
248
|
+
if (item.type === 'cell' && this.allowsCellSelection) return key;
|
|
249
|
+
// Find a parent item to select
|
|
250
|
+
while(item.type !== 'item' && item.parentKey != null)item = this.collection.getItem(item.parentKey);
|
|
251
|
+
if (!item || item.type !== 'item') return null;
|
|
252
|
+
return item.key;
|
|
350
253
|
}
|
|
351
|
-
|
|
352
|
-
return item.key;
|
|
353
|
-
}
|
|
354
|
-
/**
|
|
254
|
+
/**
|
|
355
255
|
* Toggles whether the given key is selected.
|
|
356
|
-
*/
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
keys.anchorKey = key;
|
|
374
|
-
keys.currentKey = key;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
if (this.disallowEmptySelection && keys.size === 0) {
|
|
378
|
-
return;
|
|
256
|
+
*/ toggleSelection(key) {
|
|
257
|
+
if (this.selectionMode === 'none') return;
|
|
258
|
+
if (this.selectionMode === 'single' && !this.isSelected(key)) {
|
|
259
|
+
this.replaceSelection(key);
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
key = this.getKey(key);
|
|
263
|
+
if (key == null) return;
|
|
264
|
+
let keys = new $c5f55c1d1f0007fc$export$52baac22726c72bf(this.state.selectedKeys === 'all' ? this.getSelectAllKeys() : this.state.selectedKeys);
|
|
265
|
+
if (keys.has(key)) keys.delete(key);
|
|
266
|
+
else {
|
|
267
|
+
keys.add(key);
|
|
268
|
+
keys.anchorKey = key;
|
|
269
|
+
keys.currentKey = key;
|
|
270
|
+
}
|
|
271
|
+
if (this.disallowEmptySelection && keys.size === 0) return;
|
|
272
|
+
this.state.setSelectedKeys(keys);
|
|
379
273
|
}
|
|
380
|
-
|
|
381
|
-
this.state.setSelectedKeys(keys);
|
|
382
|
-
}
|
|
383
|
-
/**
|
|
274
|
+
/**
|
|
384
275
|
* Replaces the selection with only the given key.
|
|
385
|
-
*/
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
return;
|
|
276
|
+
*/ replaceSelection(key) {
|
|
277
|
+
if (this.selectionMode === 'none') return;
|
|
278
|
+
key = this.getKey(key);
|
|
279
|
+
if (key == null) return;
|
|
280
|
+
this.state.setSelectedKeys(new $c5f55c1d1f0007fc$export$52baac22726c72bf([
|
|
281
|
+
key
|
|
282
|
+
], key, key));
|
|
393
283
|
}
|
|
394
|
-
|
|
395
|
-
this.state.setSelectedKeys(new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection([key], key, key));
|
|
396
|
-
}
|
|
397
|
-
/**
|
|
284
|
+
/**
|
|
398
285
|
* Replaces the selection with the given keys.
|
|
399
|
-
*/
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
for (let key of keys) {
|
|
410
|
-
key = this.getKey(key);
|
|
411
|
-
|
|
412
|
-
if (key != null) {
|
|
413
|
-
selection.add(key);
|
|
414
|
-
|
|
415
|
-
if (this.selectionMode === 'single') {
|
|
416
|
-
break;
|
|
286
|
+
*/ setSelectedKeys(keys) {
|
|
287
|
+
if (this.selectionMode === 'none') return;
|
|
288
|
+
let selection = new $c5f55c1d1f0007fc$export$52baac22726c72bf();
|
|
289
|
+
for (let key of keys){
|
|
290
|
+
key = this.getKey(key);
|
|
291
|
+
if (key != null) {
|
|
292
|
+
selection.add(key);
|
|
293
|
+
if (this.selectionMode === 'single') break;
|
|
294
|
+
}
|
|
417
295
|
}
|
|
418
|
-
|
|
296
|
+
this.state.setSelectedKeys(selection);
|
|
419
297
|
}
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
}
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
key = this.collection.getKeyAfter(key);
|
|
443
|
-
}
|
|
444
|
-
};
|
|
445
|
-
|
|
446
|
-
addKeys(this.collection.getFirstKey());
|
|
447
|
-
return keys;
|
|
448
|
-
}
|
|
449
|
-
/**
|
|
298
|
+
getSelectAllKeys() {
|
|
299
|
+
let keys = [];
|
|
300
|
+
let addKeys = (key)=>{
|
|
301
|
+
while(key){
|
|
302
|
+
if (!this.state.disabledKeys.has(key)) {
|
|
303
|
+
let item = this.collection.getItem(key);
|
|
304
|
+
if (item.type === 'item') keys.push(key);
|
|
305
|
+
// Add child keys. If cell selection is allowed, then include item children too.
|
|
306
|
+
if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) addKeys([
|
|
307
|
+
...item.childNodes
|
|
308
|
+
][0].key);
|
|
309
|
+
}
|
|
310
|
+
key = this.collection.getKeyAfter(key);
|
|
311
|
+
}
|
|
312
|
+
};
|
|
313
|
+
addKeys(this.collection.getFirstKey());
|
|
314
|
+
return keys;
|
|
315
|
+
}
|
|
316
|
+
/**
|
|
450
317
|
* Selects all items in the collection.
|
|
451
|
-
*/
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
selectAll() {
|
|
455
|
-
if (this.selectionMode === 'multiple') {
|
|
456
|
-
this.state.setSelectedKeys('all');
|
|
318
|
+
*/ selectAll() {
|
|
319
|
+
if (this.selectionMode === 'multiple') this.state.setSelectedKeys('all');
|
|
457
320
|
}
|
|
458
|
-
|
|
459
|
-
/**
|
|
321
|
+
/**
|
|
460
322
|
* Removes all keys from the selection.
|
|
461
|
-
*/
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
clearSelection() {
|
|
465
|
-
if (!this.disallowEmptySelection && (this.state.selectedKeys === 'all' || this.state.selectedKeys.size > 0)) {
|
|
466
|
-
this.state.setSelectedKeys(new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection());
|
|
323
|
+
*/ clearSelection() {
|
|
324
|
+
if (!this.disallowEmptySelection && (this.state.selectedKeys === 'all' || this.state.selectedKeys.size > 0)) this.state.setSelectedKeys(new $c5f55c1d1f0007fc$export$52baac22726c72bf());
|
|
467
325
|
}
|
|
468
|
-
|
|
469
|
-
/**
|
|
326
|
+
/**
|
|
470
327
|
* Toggles between select all and an empty selection.
|
|
471
|
-
*/
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
toggleSelectAll() {
|
|
475
|
-
if (this.isSelectAll) {
|
|
476
|
-
this.clearSelection();
|
|
477
|
-
} else {
|
|
478
|
-
this.selectAll();
|
|
328
|
+
*/ toggleSelectAll() {
|
|
329
|
+
if (this.isSelectAll) this.clearSelection();
|
|
330
|
+
else this.selectAll();
|
|
479
331
|
}
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
if (this.selectionMode === 'single') {
|
|
488
|
-
if (this.isSelected(key) && !this.disallowEmptySelection) {
|
|
332
|
+
select(key, e) {
|
|
333
|
+
if (this.selectionMode === 'none') return;
|
|
334
|
+
if (this.selectionMode === 'single') {
|
|
335
|
+
if (this.isSelected(key) && !this.disallowEmptySelection) this.toggleSelection(key);
|
|
336
|
+
else this.replaceSelection(key);
|
|
337
|
+
} else if (this.selectionBehavior === 'toggle' || e && (e.pointerType === 'touch' || e.pointerType === 'virtual')) // if touch or virtual (VO) then we just want to toggle, otherwise it's impossible to multi select because they don't have modifier keys
|
|
489
338
|
this.toggleSelection(key);
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
} else if (e && e.shiftKey) {
|
|
494
|
-
this.extendSelection(key);
|
|
495
|
-
} else {
|
|
496
|
-
this.toggleSelection(key);
|
|
497
|
-
}
|
|
498
|
-
}
|
|
499
|
-
/**
|
|
339
|
+
else this.replaceSelection(key);
|
|
340
|
+
}
|
|
341
|
+
/**
|
|
500
342
|
* Returns whether the current selection is equal to the given selection.
|
|
501
|
-
*/
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
343
|
+
*/ isSelectionEqual(selection) {
|
|
344
|
+
if (selection === this.state.selectedKeys) return true;
|
|
345
|
+
// Check if the set of keys match.
|
|
346
|
+
let selectedKeys = this.selectedKeys;
|
|
347
|
+
if (selection.size !== selectedKeys.size) return false;
|
|
348
|
+
for (let key of selection){
|
|
349
|
+
if (!selectedKeys.has(key)) return false;
|
|
350
|
+
}
|
|
351
|
+
for (let key2 of selectedKeys){
|
|
352
|
+
if (!selection.has(key2)) return false;
|
|
353
|
+
}
|
|
354
|
+
return true;
|
|
355
|
+
}
|
|
356
|
+
canSelectItem(key) {
|
|
357
|
+
if (this.state.selectionMode === 'none' || this.state.disabledKeys.has(key)) return false;
|
|
358
|
+
let item = this.collection.getItem(key);
|
|
359
|
+
if (!item || item.type === 'cell' && !this.allowsCellSelection) return false;
|
|
360
|
+
return true;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
509
363
|
|
|
510
|
-
let selectedKeys = this.selectedKeys;
|
|
511
364
|
|
|
512
|
-
|
|
513
|
-
return false;
|
|
514
|
-
}
|
|
365
|
+
var $39bbcc3a62d931fe$exports = {};
|
|
515
366
|
|
|
516
|
-
for (let key of selection) {
|
|
517
|
-
if (!selectedKeys.has(key)) {
|
|
518
|
-
return false;
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
367
|
|
|
522
|
-
for (let key of selectedKeys) {
|
|
523
|
-
if (!selection.has(key)) {
|
|
524
|
-
return false;
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
368
|
|
|
528
|
-
return true;
|
|
529
|
-
}
|
|
530
369
|
|
|
531
|
-
}
|
|
370
|
+
export {$e961bd55a24935c9$export$253fe78d46329472 as useMultipleSelectionState, $2f812fb5fa7ad073$export$6c8a5aaad13c9852 as SelectionManager};
|
|
532
371
|
//# sourceMappingURL=module.js.map
|