playbook_ui 13.8.0.pre.alpha.PLAY962SingleSelect1246 → 13.8.0.pre.alpha.PLAY962SingleSelect1256
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b8102315dc69078080e1f98874ceea21fcd821128990090d05be19a2e4b4cb17
|
4
|
+
data.tar.gz: b7927d75f3b7bdbebc9dddcd46ece644ace71c20ffd799e663ae22cfd17f6f40
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b73def220f81c357ac0cdc409fa4503171f3bdad7b32d0f57585c30520b52ad605700c2c51db1172f03b3ef143d893f4a7ed1cf23e976dd497915281c0750175
|
7
|
+
data.tar.gz: 6c46e0f9e4933526ea0a26c340dd9cf5cd0d267c376750c71172891d2a3029040727530b54070064d22b1f31d0fa9c4ee30cd2c596a58148213c07ef1fb206b9
|
@@ -62,7 +62,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
62
62
|
|
63
63
|
// State for whether dropdown is open or closed
|
64
64
|
const [isDropdownClosed, setIsDropdownClosed] = useState(true)
|
65
|
-
// State from
|
65
|
+
// State from onChange for textinput, to use for filtering to create typeahead
|
66
66
|
const [filterItem, setFilterItem] = useState("")
|
67
67
|
// FormattedData with checked and parent_id added
|
68
68
|
const [formattedData, setFormattedData] = useState([])
|
@@ -74,27 +74,47 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
74
74
|
const initialExpandedItems = getExpandedItems(treeData, selectedIds)
|
75
75
|
// Initialize state with expanded items
|
76
76
|
const [expanded, setExpanded] = useState(initialExpandedItems)
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
77
|
+
|
78
|
+
// Single Select specific state
|
79
|
+
const [singleSelectedItem, setSingleSelectedItem] = useState({
|
80
|
+
id: [],
|
81
|
+
value: "",
|
82
|
+
item: []
|
83
|
+
})
|
81
84
|
|
82
85
|
useEffect(() => {
|
83
|
-
|
86
|
+
const formattedData = addCheckedAndParentProperty(
|
87
|
+
treeData,
|
88
|
+
variant === "single" ? [selectedIds?.[0]] : selectedIds
|
89
|
+
)
|
90
|
+
|
91
|
+
setFormattedData(formattedData)
|
92
|
+
|
93
|
+
if (variant === "single") {
|
94
|
+
// No selectedIds, reset state
|
95
|
+
if (selectedIds?.length === 0 || !selectedIds?.length) {
|
96
|
+
setSingleSelectedItem({ id: [], value: "", item: []})
|
97
|
+
} else {
|
98
|
+
// If there is a selectedId but no current item, set the selectedItem
|
99
|
+
if (selectedIds?.length !== 0 && !singleSelectedItem.value) {
|
100
|
+
const selectedItem = filterFormattedDataById(formattedData, selectedIds[0])
|
101
|
+
|
102
|
+
if (!selectedItem.length) {
|
103
|
+
setSingleSelectedItem({ id: [], value: "", item: []})
|
104
|
+
} else {
|
105
|
+
const { id, value } = selectedItem[0]
|
106
|
+
setSingleSelectedItem({ id: [id], value, item: selectedItem})
|
107
|
+
}
|
108
|
+
}
|
109
|
+
}
|
110
|
+
}
|
84
111
|
}, [treeData, selectedIds])
|
85
112
|
|
86
113
|
useEffect(() => {
|
87
114
|
if (returnAllSelected) {
|
88
115
|
setReturnedArray(getCheckedItems(formattedData))
|
89
116
|
} else if (variant === "single") {
|
90
|
-
|
91
|
-
// The default is the first selectedId if there are more than one
|
92
|
-
const defaultSelection = filterFormattedDataById(formattedData, selectedIds[0])
|
93
|
-
setSingleSelectInputValue(defaultSelection[0]?.value)
|
94
|
-
setDefaultReturn(defaultSelection)
|
95
|
-
} else {
|
96
|
-
setDefaultReturn(singleSelectedItem)
|
97
|
-
}
|
117
|
+
setDefaultReturn(singleSelectedItem.item)
|
98
118
|
} else {
|
99
119
|
setDefaultReturn(getDefaultCheckedItems(formattedData))
|
100
120
|
}
|
@@ -195,7 +215,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
195
215
|
return treeData.map((item: { [key: string]: any } | any) => {
|
196
216
|
const newItem = {
|
197
217
|
...item,
|
198
|
-
checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
|
218
|
+
checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
|
199
219
|
parent_id,
|
200
220
|
depth,
|
201
221
|
}
|
@@ -259,7 +279,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
259
279
|
const handleRadioButtonClick = (
|
260
280
|
e: React.ChangeEvent<HTMLInputElement>,
|
261
281
|
) => {
|
262
|
-
const { id
|
282
|
+
const { id, value: inputText } = e.target
|
283
|
+
// The radio button needs a unique ID, this grabs the ID before the hyphen
|
284
|
+
const selectedItemID = id.match(/^[^-]*/)[0]
|
263
285
|
// Reset tree checked state, triggering useEffect
|
264
286
|
const treeWithNoSelections = modifyRecursive(formattedData, false)
|
265
287
|
// Update tree with single selection
|
@@ -267,8 +289,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
267
289
|
const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
|
268
290
|
|
269
291
|
setFormattedData(treeWithSelectedItem)
|
270
|
-
setSingleSelectedItem(selectedItem)
|
271
|
-
setSingleSelectInputValue(inputText)
|
292
|
+
setSingleSelectedItem({id: [selectedItemID], value: inputText, item: selectedItem})
|
272
293
|
// Reset the filter to always display dropdown options on click
|
273
294
|
setFilterItem("")
|
274
295
|
setIsDropdownClosed(true)
|
@@ -279,7 +300,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
279
300
|
// Single select: reset the tree state upon typing
|
280
301
|
const handleRadioInputChange = (inputText: string) => {
|
281
302
|
modifyRecursive(formattedData, false)
|
282
|
-
|
303
|
+
setSingleSelectedItem({id: [], value: inputText, item: []})
|
283
304
|
setFilterItem(inputText)
|
284
305
|
};
|
285
306
|
|
@@ -345,7 +366,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
345
366
|
{ variant === "single" ? (
|
346
367
|
<Radio
|
347
368
|
checked={item.checked}
|
348
|
-
id={item.id}
|
369
|
+
id={`${item.id}-${item.label}`}
|
349
370
|
label={item.label}
|
350
371
|
name={inputName}
|
351
372
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
|
@@ -474,7 +495,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
474
495
|
? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
|
475
496
|
: "Start typing..."
|
476
497
|
}
|
477
|
-
value={
|
498
|
+
value={singleSelectedItem.value || filterItem}
|
478
499
|
/>
|
479
500
|
</div>
|
480
501
|
|