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: 91dabc0c37f4b0d7c83e0c9728a4db6d2eb34fe92c387934cab037fd18025e2a
4
- data.tar.gz: ab8ea303f33c2cc6e47d9af314ccf15e41fad54fdfa1e743a00cd1ec5b3e41f5
3
+ metadata.gz: b8102315dc69078080e1f98874ceea21fcd821128990090d05be19a2e4b4cb17
4
+ data.tar.gz: b7927d75f3b7bdbebc9dddcd46ece644ace71c20ffd799e663ae22cfd17f6f40
5
5
  SHA512:
6
- metadata.gz: dd3547fb3e5ec0242dd18e1ad45c4bbf075adc932f33befa20f5cb6874b63bd90df323661d58330a55ea0f6e4d03460c9d8ac888c5e887cb28cef8c66f208289
7
- data.tar.gz: 44206940d57a0f6dd4d875dac195ade688a6aaff286ae489f9e6ee70987355410a8d397d66f3d06237adb5b49df2e9965a72f63c2245ab78c5b94692e8703f81
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 onchange for textinput, to use for filtering to create typeahead
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
- // State for single select variant input value
78
- const [singleSelectInputValue, setSingleSelectInputValue] = useState("")
79
- // State for single select variant input value
80
- const [singleSelectedItem, setSingleSelectedItem] = useState([])
77
+
78
+ // Single Select specific state
79
+ const [singleSelectedItem, setSingleSelectedItem] = useState({
80
+ id: [],
81
+ value: "",
82
+ item: []
83
+ })
81
84
 
82
85
  useEffect(() => {
83
- setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
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
- if (selectedIds?.length && !singleSelectedItem.length) {
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: selectedItemID, value: inputText } = e.target
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
- setSingleSelectInputValue(inputText)
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={singleSelectInputValue || filterItem}
498
+ value={singleSelectedItem.value || filterItem}
478
499
  />
479
500
  </div>
480
501
 
@@ -76,6 +76,7 @@ const MultiLevelSelectSingle = (props) => {
76
76
  id="multiselect-single"
77
77
  inputName="Power"
78
78
  onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
79
+ selectedIds={["eney2"]}
79
80
  treeData={treeData}
80
81
  variant="single"
81
82
  {...props}