playbook_ui 13.9.0.pre.alpha.PLAY962SingleSelect1261 → 13.9.0.pre.alpha.play845addswiftkitspage1273

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: bbbb7405fff8ba7bff61edf5ab1b7a454b62f10fbf0ce7373a053dd7e938fd41
4
- data.tar.gz: 88cf1a1646d62f2633ff8b49905dfb7ffab11faea0466627d644016892be5b73
3
+ metadata.gz: 53d50d860e7e9adef5fe334a04cc9280520dfb37b2aa95b5cf4bf9b9fee90989
4
+ data.tar.gz: 345e49952640f1be1926287cca5a6ad843041ff595ee66af344f60458d15662e
5
5
  SHA512:
6
- metadata.gz: 27dd8117514678def0ba2ae25d01e52dd731af744bfeaafc13ae53166604ec41403b513943ea2f9217e3c72c63d23b7b9b8c625dfe2180837ec86c01586be4c0
7
- data.tar.gz: 84fd12d4ed1dd1e67a6bb3a8dc4e9f96fd2f67272048a6f7d0ed686fc1caac9851f254686391b2abae25237e5f6cdd4bf49520c46a424a253a766d1d98b402c5
6
+ metadata.gz: f085b7eeb92a0f525177f4a8f9f0b74740dda58ad287636fbe99df49e876fa5d1cd02c217653e304ae253cdc7576ed44f875ebdcfeb13c889a3b7dd8743e8022
7
+ data.tar.gz: c6ce954df39ae04e270f2ecd1917ad611b481c66e1d346e24ed9853a2ea543190ff4f91f08e8721c8b71b50f85a652c0450867b39542911dd10d0f4963be25dd
@@ -1,9 +1,22 @@
1
- // Function is going over formattedData and returning all objects that match the
2
- // ID of the clicked item from the dropdown
1
+ //function to retrieve all ancestors of unchecked item and set checked to false
2
+ export const getAncestorsOfUnchecked = (
3
+ data: { [key: string]: any }[],
4
+ item: { [key: string]: any }
5
+ ) => {
6
+ if (item.parent_id) {
7
+ const ancestor = filterFormattedDataById(data, item.parent_id);
8
+ ancestor[0].checked = false;
9
+ ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
10
+ }
11
+ return data;
12
+ };
13
+
14
+ //function is going over formattedData and returning all objects that match the
15
+ //id of the clicked item from the dropdown
3
16
  export const filterFormattedDataById = (
4
17
  formattedData: { [key: string]: any }[],
5
18
  id: string
6
- ): { [key: string]: any }[] => {
19
+ ) => {
7
20
  const matched: { [key: string]: any }[] = [];
8
21
  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
9
22
  for (const item of data) {
@@ -25,7 +38,7 @@ export const filterFormattedDataById = (
25
38
  export const findByFilter = (
26
39
  formattedData: { [key: string]: any }[],
27
40
  searchTerm: string
28
- ): { [key: string]: any }[] => {
41
+ ) => {
29
42
  const matchedItems: { [key: string]: any }[] = [];
30
43
  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
31
44
  for (const item of data) {
@@ -43,20 +56,7 @@ export const findByFilter = (
43
56
  return matchedItems;
44
57
  };
45
58
 
46
- // Function to retrieve all ancestors of unchecked item and set checked to false
47
- export const getAncestorsOfUnchecked = (
48
- data: { [key: string]: any }[],
49
- item: { [key: string]: any }
50
- ): { [key: string]: any }[] => {
51
- if (item.parent_id) {
52
- const ancestor = filterFormattedDataById(data, item.parent_id);
53
- ancestor[0].checked = false;
54
- ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
55
- }
56
- return data;
57
- };
58
-
59
- // Function to get all items with checked = true
59
+ //function to get all items with checked = true
60
60
  export const getCheckedItems = (
61
61
  data: { [key: string]: any }[]
62
62
  ): { [key: string]: any }[] => {
@@ -76,9 +76,7 @@ export const getCheckedItems = (
76
76
  return checkedItems;
77
77
  };
78
78
 
79
- export const getDefaultCheckedItems = (
80
- treeData: { [key: string]: any }[]
81
- ): { [key: string]: any }[] => {
79
+ export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
82
80
  const checkedDefault: { [key: string]: any }[] = [];
83
81
 
84
82
  const traverseTree = (items: { [key: string]: any }[]) => {
@@ -120,7 +118,7 @@ export const getDefaultCheckedItems = (
120
118
  export const recursiveCheckParent = (
121
119
  item: { [key: string]: any },
122
120
  data: any
123
- ): any => {
121
+ ) => {
124
122
  if (item.parent_id !== null) {
125
123
  const parent = filterFormattedDataById(data, item.parent_id);
126
124
  const allChildrenChecked = parent[0].children.every(
@@ -137,11 +135,8 @@ export const recursiveCheckParent = (
137
135
  return data;
138
136
  };
139
137
 
140
- export const getExpandedItems = (
141
- treeData: { [key: string]: string }[],
142
- selectedIds: string[]
143
- ): any[] => {
144
- const expandedItems: any[] = [];
138
+ export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
139
+ let expandedItems: any[] = [];
145
140
 
146
141
  const traverse = (items: string | any[], ancestors: any[] = []) => {
147
142
  for (let i = 0; i < items.length; i++) {
@@ -30,11 +30,10 @@
30
30
  align-items: center;
31
31
  justify-content: space-between;
32
32
  .input_inner_container {
33
- width: 100%;
33
+ max-width: 90%;
34
34
  }
35
35
 
36
36
  input {
37
- width: 100%;
38
37
  border: none;
39
38
  font-family: $font_family_base;
40
39
  font-size: $font_base;
@@ -3,7 +3,6 @@ import classnames from "classnames"
3
3
  import { globalProps, GlobalProps } from "../utilities/globalProps"
4
4
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
5
5
  import Checkbox from "../pb_checkbox/_checkbox"
6
- import Radio from "../pb_radio/_radio"
7
6
  import Icon from "../pb_icon/_icon"
8
7
  import FormPill from "../pb_form_pill/_form_pill"
9
8
  import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
@@ -25,13 +24,11 @@ type MultiLevelSelectProps = {
25
24
  data?: { [key: string]: string }
26
25
  id?: string
27
26
  inputDisplay?: "pills" | "none"
28
- inputName?: string
29
27
  name?: string
30
28
  returnAllSelected?: boolean
31
29
  treeData?: { [key: string]: string }[]
32
30
  onSelect?: (prop: { [key: string]: any }) => void
33
31
  selectedIds?: string[]
34
- variant?: "multi" | "single"
35
32
  } & GlobalProps
36
33
 
37
34
  const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -41,13 +38,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
41
38
  data = {},
42
39
  id,
43
40
  inputDisplay = "pills",
44
- inputName,
45
41
  name,
46
42
  returnAllSelected = false,
47
43
  treeData,
48
- onSelect = () => null,
49
- selectedIds,
50
- variant = "multi"
44
+ onSelect = () => {},
45
+ selectedIds
51
46
  } = props
52
47
 
53
48
  const ariaProps = buildAriaProps(aria)
@@ -60,61 +55,29 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
60
55
 
61
56
  const dropdownRef = useRef(null)
62
57
 
63
- // State for whether dropdown is open or closed
64
- const [isDropdownClosed, setIsDropdownClosed] = useState(true)
65
- // State from onChange for textinput, to use for filtering to create typeahead
58
+ //state for whether dropdown is open or closed
59
+ const [isClosed, setIsClosed] = useState(true)
60
+ //state from onchange for textinput, to use for filtering to create typeahead
66
61
  const [filterItem, setFilterItem] = useState("")
67
- // FormattedData with checked and parent_id added
68
- const [formattedData, setFormattedData] = useState([])
69
- // State for the return of returnAllSelected
62
+ //this is essentially the return that the user will get when they use the kit
70
63
  const [returnedArray, setReturnedArray] = useState([])
71
- // State for default return
64
+ //formattedData with checked and parent_id added
65
+ const [formattedData, setFormattedData] = useState([])
66
+ //state for return for default
72
67
  const [defaultReturn, setDefaultReturn] = useState([])
73
- // Get expanded items from treeData
74
- const initialExpandedItems = getExpandedItems(treeData, selectedIds)
75
- // Initialize state with expanded items
76
- const [expanded, setExpanded] = useState(initialExpandedItems)
77
-
78
- // Single Select specific state
79
- const [singleSelectedItem, setSingleSelectedItem] = useState({
80
- id: [],
81
- value: "",
82
- item: []
83
- })
68
+ // Get expanded items from treeData.
69
+ const initialExpandedItems = getExpandedItems(treeData, selectedIds);
70
+ // Initialize state with expanded items.
71
+ const [expanded, setExpanded] = useState(initialExpandedItems);
84
72
 
85
- useEffect(() => {
86
- const formattedData = addCheckedAndParentProperty(
87
- treeData,
88
- variant === "single" ? [selectedIds?.[0]] : selectedIds
89
- )
90
73
 
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
- }
74
+ useEffect(() => {
75
+ setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
111
76
  }, [treeData, selectedIds])
112
77
 
113
78
  useEffect(() => {
114
79
  if (returnAllSelected) {
115
80
  setReturnedArray(getCheckedItems(formattedData))
116
- } else if (variant === "single") {
117
- setDefaultReturn(singleSelectedItem.item)
118
81
  } else {
119
82
  setDefaultReturn(getDefaultCheckedItems(formattedData))
120
83
  }
@@ -124,7 +87,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
124
87
  // Function to handle clicks outside the dropdown
125
88
  const handleClickOutside = (event: any) => {
126
89
  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
127
- setIsDropdownClosed(true)
90
+ setIsClosed(true)
128
91
  }
129
92
  }
130
93
  // Attach the event listener
@@ -146,7 +109,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
146
109
  })
147
110
  }
148
111
 
149
- // Iterate over tree, find item and set checked or unchecked
112
+ //iterate over tree, find item and set checked or unchecked
150
113
  const modifyValue = (
151
114
  id: string,
152
115
  tree: { [key: string]: any }[],
@@ -159,20 +122,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
159
122
  if (item.id != id) item.children = modifyValue(id, item.children, check)
160
123
  else {
161
124
  item.checked = check
162
-
163
- if (variant === "single") {
164
- // Single select: no children should be checked
165
- item.children = modifyRecursive(item.children, !check)
166
- } else {
167
- item.children = modifyRecursive(item.children, check)
168
- }
125
+ item.children = modifyRecursive(item.children, check)
169
126
  }
170
127
 
171
128
  return item
172
129
  })
173
130
  }
174
131
 
175
- // Clone tree, check items + children
132
+ //clone tree, check items + children
176
133
  const checkItem = (item: { [key: string]: any }) => {
177
134
  const tree = cloneDeep(formattedData)
178
135
  if (returnAllSelected) {
@@ -183,7 +140,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
183
140
  }
184
141
  }
185
142
 
186
- // Clone tree, uncheck items + children
143
+ //clone tree, uncheck items + children
187
144
  const unCheckItem = (item: { [key: string]: any }) => {
188
145
  const tree = cloneDeep(formattedData)
189
146
  if (returnAllSelected) {
@@ -194,7 +151,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
194
151
  }
195
152
  }
196
153
 
197
- // setFormattedData with proper properties
154
+ //setformattedData with proper properties
198
155
  const changeItem = (item: { [key: string]: any }, check: boolean) => {
199
156
  const tree = check ? checkItem(item) : unCheckItem(item)
200
157
  setFormattedData(tree)
@@ -202,12 +159,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
202
159
  return tree
203
160
  }
204
161
 
205
- // Function to map over data and add parent_id + depth property to each item
162
+ //function to map over data and add parent_id + depth property to each item
206
163
  const addCheckedAndParentProperty = (
207
164
  treeData: { [key: string]: any }[],
208
165
  selectedIds: string[],
209
166
  parent_id: string = null,
210
- depth = 0,
167
+ depth: number = 0,
211
168
  ) => {
212
169
  if (!Array.isArray(treeData)) {
213
170
  return
@@ -215,7 +172,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
215
172
  return treeData.map((item: { [key: string]: any } | any) => {
216
173
  const newItem = {
217
174
  ...item,
218
- checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
175
+ checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
219
176
  parent_id,
220
177
  depth,
221
178
  }
@@ -235,12 +192,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
235
192
  })
236
193
  }
237
194
 
238
- // Click event for x on form pill
195
+ //click event for x on form pill
239
196
  const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
240
- // Prevents the dropdown from closing when clicking on the pill
197
+ // prevents the dropdown from closing when clicking on the pill
241
198
  event.stopPropagation()
242
199
  const updatedTree = changeItem(clickedItem, false)
243
- // Logic for removing items from returnArray or defaultReturn when pills clicked
200
+ //logic for removing items from returnArray or defaultReturn when pills clicked
244
201
  if (returnAllSelected) {
245
202
  onSelect(getCheckedItems(updatedTree))
246
203
  } else {
@@ -248,7 +205,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
248
205
  }
249
206
  }
250
207
 
251
- // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
208
+ //handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
252
209
  const handleInputWrapperClick = (e: any) => {
253
210
  e.stopPropagation()
254
211
  if (
@@ -257,13 +214,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
257
214
  ) {
258
215
  return
259
216
  }
260
- setIsDropdownClosed(!isDropdownClosed)
217
+ setIsClosed(!isClosed)
261
218
  }
262
219
 
263
- // Main function to handle any click inside dropdown
220
+ //Main function to handle any click inside dropdown
264
221
  const handledropdownItemClick = (e: any, check: boolean) => {
265
222
  const clickedItem = e.target.parentNode.id
266
- // Setting filterItem to "" will clear textinput and clear typeahead
223
+ //setting filterItem to "" will clear textinput and clear typeahead
267
224
  setFilterItem("")
268
225
 
269
226
  const filtered = filterFormattedDataById(formattedData, clickedItem)
@@ -275,45 +232,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
275
232
  }
276
233
  }
277
234
 
278
- // Single select
279
- const handleRadioButtonClick = (
280
- e: React.ChangeEvent<HTMLInputElement>,
281
- ) => {
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]
285
- // Reset tree checked state, triggering useEffect
286
- const treeWithNoSelections = modifyRecursive(formattedData, false)
287
- // Update tree with single selection
288
- const treeWithSelectedItem = modifyValue(selectedItemID, treeWithNoSelections, true)
289
- const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
290
-
291
- setFormattedData(treeWithSelectedItem)
292
- setSingleSelectedItem({id: [selectedItemID], value: inputText, item: selectedItem})
293
- // Reset the filter to always display dropdown options on click
294
- setFilterItem("")
295
- setIsDropdownClosed(true)
296
-
297
- onSelect(selectedItem)
298
- };
299
-
300
- // Single select: reset the tree state upon typing
301
- const handleRadioInputChange = (inputText: string) => {
302
- modifyRecursive(formattedData, false)
303
- setDefaultReturn([])
304
- setSingleSelectedItem({id: [], value: inputText, item: []})
305
- setFilterItem(inputText)
306
- };
235
+ const isExpanded = (item: any) => expanded.indexOf(item.id) > -1
307
236
 
308
- const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1
309
-
310
- // Handle click on chevron toggles in dropdown
237
+ //handle click on chevron toggles in dropdown
311
238
  const handleToggleClick = (id: string, event: React.MouseEvent) => {
312
239
  event.stopPropagation()
313
240
  const clickedItem = filterFormattedDataById(formattedData, id)
314
241
  if (clickedItem) {
315
242
  let expandedArray = [...expanded]
316
- const itemExpanded = isTreeRowExpanded(clickedItem[0])
243
+ const itemExpanded = isExpanded(clickedItem[0])
317
244
 
318
245
  if (itemExpanded)
319
246
  expandedArray = expandedArray.filter((i) => i != clickedItem[0].id)
@@ -332,8 +259,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
332
259
  }
333
260
  return items
334
261
  }
335
-
336
- // Rendering formattedData to UI based on typeahead
262
+ //rendering formattedData to UI based on typeahead
337
263
  const renderNestedOptions = (items: { [key: string]: any }[]) => {
338
264
  return (
339
265
  <ul>
@@ -341,62 +267,42 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
341
267
  items.map((item: { [key: string]: any }) => {
342
268
  return (
343
269
  <div key={item.id}>
344
- <li
345
- className="dropdown_item"
346
- data-name={item.id}
347
- >
348
- <div className="dropdown_item_checkbox_row">
270
+ <li className='dropdown_item' data-name={item.id}>
271
+ <div className='dropdown_item_checkbox_row'>
349
272
  <div
350
- key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
273
+ key={isExpanded(item) ? "chevron-down" : "chevron-right"}
351
274
  >
352
275
  <CircleIconButton
353
- className={
354
- item.children && item.children.length > 0
355
- ? ""
356
- : "toggle_icon"
357
- }
358
- icon={
359
- isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
360
- }
361
- onClick={(event: any) =>
362
- handleToggleClick(item.id, event)
363
- }
364
- variant="link"
276
+ icon={
277
+ isExpanded(item) ? "chevron-down" : "chevron-right"
278
+ }
279
+ className={
280
+ item.children && item.children.length > 0
281
+ ? ""
282
+ : "toggle_icon"
283
+ }
284
+ onClick={(event: any) =>
285
+ handleToggleClick(item.id, event)
286
+ }
287
+ variant='link'
365
288
  />
366
289
  </div>
367
- { variant === "single" ? (
368
- <Radio
369
- checked={item.checked}
370
- id={`${item.id}-${item.label}`}
371
- label={item.label}
372
- name={inputName}
373
- onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
374
- handleRadioButtonClick(e)
375
- )}
376
- type="radio"
377
- value={item.label}
290
+ <Checkbox text={item.label} id={item.id}>
291
+ <input
292
+ checked={item.checked}
293
+ type='checkbox'
294
+ name={item.label}
295
+ value={item.label}
296
+ onChange={(e) => {
297
+ handledropdownItemClick(e, !item.checked)
298
+ }}
378
299
  />
379
- ) : (
380
- <Checkbox
381
- id={item.id}
382
- text={item.label}
383
- >
384
- <input
385
- checked={item.checked}
386
- name={item.label}
387
- onChange={(e) => {
388
- handledropdownItemClick(e, !item.checked)
389
- }}
390
- type="checkbox"
391
- value={item.label}
392
- />
393
- </Checkbox>
394
- )}
300
+ </Checkbox>
395
301
  </div>
396
- {isTreeRowExpanded(item) &&
302
+ {isExpanded(item) &&
397
303
  item.children &&
398
304
  item.children.length > 0 &&
399
- (variant === "single" || !filterItem) && ( // Show children if expanded is true
305
+ !filterItem && ( // Show children if expanded is true
400
306
  <div>{renderNestedOptions(item.children)}</div>
401
307
  )}
402
308
  </li>
@@ -407,121 +313,68 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
407
313
  )
408
314
  }
409
315
 
316
+
317
+
410
318
  return (
411
- <div
412
- {...ariaProps}
413
- {...dataProps}
414
- className={classes}
415
- id={id}
416
- >
417
- <div
418
- className="wrapper"
419
- ref={dropdownRef}
420
- >
421
- <div
422
- className="input_wrapper"
423
- onClick={handleInputWrapperClick}
424
- >
425
- <div className="input_inner_container">
426
- {variant === "single" && defaultReturn.length !== 0
427
- ? defaultReturn.map((selectedItem) => (
428
- <input
429
- key={selectedItem.id}
430
- name={`${name}[]`}
431
- type="hidden"
432
- value={selectedItem.id}
433
- />
319
+ <div {...ariaProps} {...dataProps} className={classes} id={id}>
320
+ <div ref={dropdownRef} className='wrapper'>
321
+ <div className='input_wrapper' onClick={handleInputWrapperClick}>
322
+ <div className='input_inner_container'>
323
+ {returnedArray.length !== 0 && returnAllSelected
324
+ ? returnedArray.map((item) => (
325
+ <input type='hidden' name={`${name}[]`} value={item.id} />
434
326
  ))
435
327
  : null}
436
328
 
437
- {variant !== "single" && (
438
- <>
439
- {returnAllSelected && returnedArray.length !== 0
440
- ? returnedArray.map((item) => (
441
- <input
442
- key={item.id}
443
- name={`${name}[]`}
444
- type="hidden"
445
- value={item.id}
446
- />
447
- ))
448
- : null}
449
-
450
- {returnAllSelected &&
451
- returnedArray.length !== 0 &&
452
- inputDisplay === "pills"
453
- ? returnedArray.map((item, index) => (
454
- <FormPill
455
- key={index}
456
- onClick={(event: any) => handlePillClose(event, item)}
457
- size="small"
458
- text={item.label}
459
- />
460
- ))
461
- : null}
462
-
463
- {!returnAllSelected &&
464
- defaultReturn.length !== 0 &&
465
- inputDisplay === "pills"
466
- ? defaultReturn.map((item, index) => (
467
- <FormPill
468
- key={index}
469
- onClick={(event: any) => handlePillClose(event, item)}
470
- size="small"
471
- text={item.label}
472
- />
473
- ))
474
- : null}
475
-
476
- {returnAllSelected &&
477
- returnedArray.length !== 0 &&
478
- inputDisplay === "pills" && <br />}
479
-
480
- {!returnAllSelected &&
481
- defaultReturn.length !== 0 &&
482
- inputDisplay === "pills" && <br />}
483
- </>
484
- )}
485
-
329
+ {returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
330
+ ? returnedArray.map((item, index) => (
331
+ <FormPill
332
+ key={index}
333
+ text={item.label}
334
+ size='small'
335
+ onClick={(event: any) => handlePillClose(event, item)}
336
+ />
337
+ ))
338
+ : null}
339
+ {!returnAllSelected &&
340
+ defaultReturn.length !== 0 && inputDisplay === "pills" ?
341
+ defaultReturn.map((item, index) => (
342
+ <FormPill
343
+ key={index}
344
+ text={item.label}
345
+ size='small'
346
+ onClick={(event: any) => handlePillClose(event, item)}
347
+ />
348
+ ))
349
+ : null
350
+ }
351
+ {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
352
+ {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
486
353
  <input
487
- id="multiselect_input"
488
- onChange={(e) =>{
489
- variant === "single"
490
- ? handleRadioInputChange(e.target.value)
491
- : setFilterItem(e.target.value)
492
- }}
493
- onClick={() => setIsDropdownClosed(false)}
494
- placeholder={
495
- inputDisplay === "none" && itemsSelectedLength()
496
- ? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
497
- : "Start typing..."
498
- }
499
- value={singleSelectedItem.value || filterItem}
354
+ id='multiselect_input'
355
+ onChange={(e) => {
356
+ setFilterItem(e.target.value)
357
+ }}
358
+ placeholder={inputDisplay === "none" && itemsSelectedLength() ? (
359
+ `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? 'item' : 'items'} selected`
360
+ ) : ("Start typing...")}
361
+ value={filterItem}
362
+ onClick={() => setIsClosed(false)}
500
363
  />
501
364
  </div>
502
-
503
- {isDropdownClosed ? (
504
- <div key="chevron-down">
505
- <Icon
506
- icon="chevron-down"
507
- size="xs"
508
- />
365
+ {isClosed ? (
366
+ <div key='chevron-down'>
367
+ <Icon icon='chevron-down' size="xs"/>
509
368
  </div>
510
369
  ) : (
511
- <div key="chevron-up">
512
- <Icon
513
- icon="chevron-up"
514
- size="xs"
515
- />
370
+ <div key='chevron-up'>
371
+ <Icon icon='chevron-up' size="xs"/>
516
372
  </div>
517
373
  )}
518
374
  </div>
519
-
520
- <div className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}>
375
+ <div className={`dropdown_menu ${isClosed ? "close" : "open"}`}>
521
376
  {renderNestedOptions(
522
- filterItem
523
- ? findByFilter(formattedData, filterItem)
524
- : formattedData
377
+ filterItem ? findByFilter(formattedData, filterItem) : formattedData
525
378
  )}
526
379
  </div>
527
380
  </div>