playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21328 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21365

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +0 -4
  3. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +24 -33
  4. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +0 -1
  5. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +104 -45
  6. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +100 -43
  7. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +110 -45
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +107 -44
  9. data/dist/playbook-rails.js +5 -5
  10. data/lib/playbook/version.rb +1 -1
  11. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f0644f1e685425faa2c4f2955e8631573bcafd8c9ec64b504c15e2a59aeb1e45
4
- data.tar.gz: 35d0cb4e4f59b4eb099fedd73819c0fe450e766b0d7d25fe5cf5e53fc043b5dc
3
+ metadata.gz: 0b24f939f35f3d16ce328396ff94b12b78932b9afac25ebce2073542297192c7
4
+ data.tar.gz: c5e52a1f37921f1db1510bc55257c68b6c5d32985d5ef6a3e73cae3f68a87689
5
5
  SHA512:
6
- metadata.gz: 73813bea1c749e60cacf7c60f886326ed297bf05842bad59be1af460c981a97104948bc49d45d9df25e079c1506956ea8f87b21ace412b8bd1762363a9e43fe1
7
- data.tar.gz: 368f7b2a0e4edba51e0ba7699cf3f54ed859bb0ee810d3814f1e125c71a737b3cc2827499eed7c192b971404589ad2c0c707fa842fd088d16a96bbdf8d4511df
6
+ metadata.gz: d573285bc38cdf6004b43d8ef798f73a6959143c2c514e3d42ccea9f5af28e6d5b41a11370f73e3add73de50a89e1842905117bcc5a873896bbe2d3129b19e58
7
+ data.tar.gz: 5f1777c205cb0bab90ac8d62af0ea5e4d2521f5f4755ddc90d40d9c82a2d853693fd51099ad384cccd758221020e1f423114a11d750f3d8f09d583e480639224
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss CHANGED
@@ -85,8 +85,4 @@
85
85
  .open {
86
86
  display: block;
87
87
  }
88
-
89
- .singleHidden {
90
- display: none
91
- }
92
88
  }
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -4,6 +4,7 @@ import { globalProps, GlobalProps } from "../utilities/globalProps"
4
4
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
5
5
  import Checkbox from "../pb_checkbox/_checkbox"
6
6
  import Radio from "../pb_radio/_radio"
7
+ import Body from "../pb_body/_body"
7
8
  import Icon from "../pb_icon/_icon"
8
9
  import FormPill from "../pb_form_pill/_form_pill"
9
10
  import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
@@ -31,7 +32,7 @@ type MultiLevelSelectProps = {
31
32
  treeData?: { [key: string]: string }[]
32
33
  onSelect?: (prop: { [key: string]: any }) => void
33
34
  selectedIds?: string[]
34
- ultimateChildrenOnly?: boolean
35
+ // ultimateChildrenOnly?: boolean
35
36
  variant?: "multi" | "single"
36
37
  } & GlobalProps
37
38
 
@@ -48,7 +49,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
48
49
  treeData,
49
50
  onSelect = () => null,
50
51
  selectedIds,
51
- ultimateChildrenOnly = false,
52
+ // ultimateChildrenOnly = false,
52
53
  variant = "multi"
53
54
  } = props
54
55
 
@@ -335,17 +336,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
335
336
  return items
336
337
  }
337
338
 
338
- const singleHiddenInstances = document.querySelectorAll('.singleHidden');
339
-
340
- singleHiddenInstances.forEach(singleHiddenInstance => {
341
-
342
- const siblingElement = singleHiddenInstance.nextElementSibling as HTMLElement;
343
- if (siblingElement && siblingElement.classList.contains('pb_radio_button')) {
344
- siblingElement.style.display = 'none';
345
- }
346
- });
347
-
348
-
349
339
  // Rendering formattedData to UI based on typeahead
350
340
  const renderNestedOptions = (items: { [key: string]: any }[]) => {
351
341
  return (
@@ -359,34 +349,35 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
359
349
  data-name={item.id}
360
350
  >
361
351
  <div className="dropdown_item_checkbox_row">
362
- <div
363
- key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
364
- >
365
- <CircleIconButton
366
- className={
367
- item.children && item.children.length > 0
368
- ? ""
369
- : "toggle_icon"
370
- }
371
- icon={
372
- isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
373
- }
374
- onClick={(event: any) =>
375
- handleToggleClick(item.id, event)
376
- }
377
- variant="link"
378
- />
379
- </div>
352
+ {item.children && item.children.length > 0
353
+ ?
354
+ <div
355
+ key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
356
+ >
357
+ <CircleIconButton
358
+ icon={
359
+ isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
360
+ }
361
+ onClick={(event: any) =>
362
+ handleToggleClick(item.id, event)
363
+ }
364
+ variant="link"
365
+ />
366
+ </div>
367
+ : null}
380
368
  { variant === "single" ? (
369
+ item.hideRadio ? (
370
+ <Body>{item.label}</Body>
371
+ ) :
381
372
  <Radio
382
373
  checked={item.checked}
383
- class={ultimateChildrenOnly ? item.children ? "singleHidden" : "" : null}
384
374
  id={`${item.id}-${item.label}`}
385
375
  label={item.label}
386
376
  name={inputName}
387
377
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
388
378
  handleRadioButtonClick(e)
389
379
  )}
380
+ padding='xs'
390
381
  type="radio"
391
382
  value={item.label}
392
383
  />
@@ -543,4 +534,4 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
543
534
  )
544
535
  }
545
536
 
546
- export default MultiLevelSelect
537
+ export default MultiLevelSelect
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb CHANGED
@@ -73,4 +73,3 @@
73
73
  selected_ids:["110","102"],
74
74
  tree_data: treeData,
75
75
  }) %>
76
-
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb CHANGED
@@ -1,68 +1,127 @@
1
- <% treeData = [{
2
- label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
4
- id: "200",
5
- expanded: true,
1
+ <% treeData = [
2
+ {
3
+ label: "HQ",
4
+ value: "HQ",
5
+ id: "hq",
6
+ },
7
+ {
8
+ label: "Philadelphia",
9
+ value: "Philadelphia",
10
+ id: "phl",
6
11
  children: [
7
12
  {
8
- label: "People",
9
- value: "People",
10
- id: "201",
11
- expanded: true,
13
+ label: "Marketing & Sales PHL",
14
+ value: "Marketing & Sales PHL",
15
+ id: "marketingPHL",
16
+ },
17
+ {
18
+ label: "Installation Office PHL",
19
+ value: "Installation Office PHL",
20
+ id: "installationPHL",
21
+ },
22
+ {
23
+ label: "Warehouse PHL",
24
+ value: "Warehouse PHL",
25
+ id: "warehousePHL",
26
+ },
27
+ ]
28
+ },
29
+ {
30
+ label: "New Jersey",
31
+ value: "New Jersey",
32
+ id: "nj",
33
+ children: [
34
+ {
35
+ label: "New Jersey",
36
+ value: "New Jersey",
37
+ id: "nj1",
12
38
  children: [
13
39
  {
14
- label: "Talent Acquisition",
15
- value: "Talent Acquisition",
16
- id: "202",
40
+ label: "Marketing & Sales NJ",
41
+ value: "Marketing & Sales NJ",
42
+ id: "marketingNJ",
17
43
  },
18
44
  {
19
- label: "Business Affairs",
20
- value: "Business Affairs",
21
- id: "203",
22
- children: [
23
- {
24
- label: "Initiatives",
25
- value: "Initiatives",
26
- id: "204",
27
- },
28
- {
29
- label: "Learning & Development",
30
- value: "Learning & Development",
31
- id: "205",
32
- },
33
- ],
45
+ label: "Installation Office NJ",
46
+ value: "Installation Office NJ",
47
+ id: "installationNJ",
34
48
  },
35
49
  {
36
- label: "People Experience",
37
- value: "People Experience",
38
- id: "206",
50
+ label: "Warehouse NJ",
51
+ value: "Warehouse NJ",
52
+ id: "warehouseNJ",
39
53
  },
40
54
  ],
41
55
  },
42
56
  {
43
- label: "Contact Center",
44
- value: "Contact Center",
45
- id: "207",
57
+ label: "Princeton",
58
+ value: "Princeton",
59
+ id: "princeton",
46
60
  children: [
47
61
  {
48
- label: "Appointment Management",
49
- value: "Appointment Management",
50
- id: "208",
62
+ label: "Marketing & Sales Princeton",
63
+ value: "Marketing & Sales Princeton",
64
+ id: "marketingPR",
51
65
  },
52
66
  {
53
- label: "Customer Service",
54
- value: "Customer Service",
55
- id: "209",
67
+ label: "Installation Office Princeton",
68
+ value: "Installation Office Princeton",
69
+ id: "installationPR",
56
70
  },
57
71
  {
58
- label: "Energy",
59
- value: "Energy",
60
- id: "210",
72
+ label: "Warehouse Princeton",
73
+ value: "Warehouse Princeton",
74
+ id: "warehousePR",
61
75
  },
62
- ],
76
+ ]
77
+ },
78
+ ]
79
+ },
80
+ {
81
+ label: "Maryland",
82
+ value: "Maryland",
83
+ id: "MD",
84
+ children: [
85
+ {
86
+ label: "Marketing & Sales MD",
87
+ value: "Marketing & Sales MD",
88
+ id: "marketingMD",
89
+ },
90
+ {
91
+ label: "Installation Office MD",
92
+ value: "Installation Office MD",
93
+ id: "installationMD",
94
+ },
95
+ {
96
+ label: "Warehouse MD",
97
+ value: "Warehouse MD",
98
+ id: "warehouseMD",
99
+ },
100
+ ]
101
+ },
102
+ {
103
+ label: "Connecticut",
104
+ value: "Connecticut",
105
+ id: "CT",
106
+ children: [
107
+ {
108
+ label: "Marketing & Sales CT",
109
+ value: "Marketing & Sales CT",
110
+ id: "marketingCT",
111
+ },
112
+ {
113
+ label: "Installation Office CT",
114
+ value: "Installation Office CT",
115
+ id: "installationCT",
116
+ },
117
+ {
118
+ label: "Warehouse CT",
119
+ value: "Warehouse CT",
120
+ id: "warehouseCT",
63
121
  },
64
- ],
65
- }] %>
122
+ ]
123
+ },
124
+ ]; %>
66
125
 
67
126
  <%= pb_rails("multi_level_select", props: {
68
127
  id: "multi-level-select-single-rails",
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx CHANGED
@@ -3,69 +3,126 @@ import MultiLevelSelect from "../_multi_level_select";
3
3
 
4
4
  const treeData = [
5
5
  {
6
- label: "Power Home Remodeling",
7
- value: "Power Home Remodeling",
8
- id: "powerhome2",
9
- expanded: true,
6
+ label: "HQ",
7
+ value: "HQ",
8
+ id: "hq",
9
+ },
10
+ {
11
+ label: "Philadelphia",
12
+ value: "Philadelphia",
13
+ id: "phl",
10
14
  children: [
11
15
  {
12
- label: "People",
13
- value: "People",
14
- id: "people2",
15
- expanded: true,
16
+ label: "Marketing & Sales PHL",
17
+ value: "Marketing & Sales PHL",
18
+ id: "marketingPHL",
19
+ },
20
+ {
21
+ label: "Installation Office PHL",
22
+ value: "Installation Office PHL",
23
+ id: "installationPHL",
24
+ },
25
+ {
26
+ label: "Warehouse PHL",
27
+ value: "Warehouse PHL",
28
+ id: "warehousePHL",
29
+ },
30
+ ]
31
+ },
32
+ {
33
+ label: "New Jersey",
34
+ value: "New Jersey",
35
+ id: "nj",
36
+ children: [
37
+ {
38
+ label: "New Jersey",
39
+ value: "New Jersey",
40
+ id: "nj1",
16
41
  children: [
17
42
  {
18
- label: "Talent Acquisition",
19
- value: "Talent Acquisition",
20
- id: "talent2",
43
+ label: "Marketing & Sales NJ",
44
+ value: "Marketing & Sales NJ",
45
+ id: "marketingNJ",
21
46
  },
22
47
  {
23
- label: "Business Affairs",
24
- value: "Business Affairs",
25
- id: "business2",
26
- children: [
27
- {
28
- label: "Initiatives",
29
- value: "Initiatives",
30
- id: "initiative2",
31
- },
32
- {
33
- label: "Learning & Development",
34
- value: "Learning & Development",
35
- id: "development2",
36
- },
37
- ],
48
+ label: "Installation Office NJ",
49
+ value: "Installation Office NJ",
50
+ id: "installationNJ",
38
51
  },
39
52
  {
40
- label: "People Experience",
41
- value: "People Experience",
42
- id: "experience2",
53
+ label: "Warehouse NJ",
54
+ value: "Warehouse NJ",
55
+ id: "warehouseNJ",
43
56
  },
44
57
  ],
45
58
  },
46
59
  {
47
- label: "Contact Center",
48
- value: "Contact Center",
49
- id: "contact2",
60
+ label: "Princeton",
61
+ value: "Princeton",
62
+ id: "princeton",
50
63
  children: [
51
64
  {
52
- label: "Appointment Management",
53
- value: "Appointment Management",
54
- id: "appointment2",
65
+ label: "Marketing & Sales Princeton",
66
+ value: "Marketing & Sales Princeton",
67
+ id: "marketingPR",
55
68
  },
56
69
  {
57
- label: "Customer Service",
58
- value: "Customer Service",
59
- id: "customer2",
70
+ label: "Installation Office Princeton",
71
+ value: "Installation Office Princeton",
72
+ id: "installationPR",
60
73
  },
61
74
  {
62
- label: "Energy",
63
- value: "Energy",
64
- id: "energy2",
75
+ label: "Warehouse Princeton",
76
+ value: "Warehouse Princeton",
77
+ id: "warehousePR",
65
78
  },
66
- ],
79
+ ]
80
+ },
81
+ ]
82
+ },
83
+ {
84
+ label: "Maryland",
85
+ value: "Maryland",
86
+ id: "MD",
87
+ children: [
88
+ {
89
+ label: "Marketing & Sales MD",
90
+ value: "Marketing & Sales MD",
91
+ id: "marketingMD",
92
+ },
93
+ {
94
+ label: "Installation Office MD",
95
+ value: "Installation Office MD",
96
+ id: "installationMD",
97
+ },
98
+ {
99
+ label: "Warehouse MD",
100
+ value: "Warehouse MD",
101
+ id: "warehouseMD",
102
+ },
103
+ ]
104
+ },
105
+ {
106
+ label: "Connecticut",
107
+ value: "Connecticut",
108
+ id: "CT",
109
+ children: [
110
+ {
111
+ label: "Marketing & Sales CT",
112
+ value: "Marketing & Sales CT",
113
+ id: "marketingCT",
114
+ },
115
+ {
116
+ label: "Installation Office CT",
117
+ value: "Installation Office CT",
118
+ id: "installationCT",
119
+ },
120
+ {
121
+ label: "Warehouse CT",
122
+ value: "Warehouse CT",
123
+ id: "warehouseCT",
67
124
  },
68
- ],
125
+ ]
69
126
  },
70
127
  ];
71
128
 
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb CHANGED
@@ -1,68 +1,133 @@
1
- <% treeData = [{
2
- label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
4
- id: "300",
5
- expanded: true,
1
+ <% treeData = [
2
+ {
3
+ label: "HQ",
4
+ value: "HQ",
5
+ id: "hq1",
6
+ },
7
+ {
8
+ label: "Philadelphia",
9
+ value: "Philadelphia",
10
+ id: "phl1",
11
+ hideRadio: true,
6
12
  children: [
7
13
  {
8
- label: "People",
9
- value: "People",
10
- id: "301",
11
- expanded: true,
14
+ label: "Marketing & Sales PHL",
15
+ value: "Marketing & Sales PHL",
16
+ id: "marketingPHL1",
17
+ },
18
+ {
19
+ label: "Installation Office PHL",
20
+ value: "Installation Office PHL",
21
+ id: "installationPHL1",
22
+ },
23
+ {
24
+ label: "Warehouse PHL",
25
+ value: "Warehouse PHL",
26
+ id: "warehousePHL1",
27
+ },
28
+ ]
29
+ },
30
+ {
31
+ label: "New Jersey",
32
+ value: "New Jersey",
33
+ id: "nj2",
34
+ hideRadio: true,
35
+ children: [
36
+ {
37
+ label: "New Jersey",
38
+ value: "New Jersey",
39
+ id: "nj3",
40
+ hideRadio: true,
12
41
  children: [
13
42
  {
14
- label: "Talent Acquisition",
15
- value: "Talent Acquisition",
16
- id: "302",
43
+ label: "Marketing & Sales NJ",
44
+ value: "Marketing & Sales NJ",
45
+ id: "marketingNJ1",
17
46
  },
18
47
  {
19
- label: "Business Affairs",
20
- value: "Business Affairs",
21
- id: "303",
22
- children: [
23
- {
24
- label: "Initiatives",
25
- value: "Initiatives",
26
- id: "304",
27
- },
28
- {
29
- label: "Learning & Development",
30
- value: "Learning & Development",
31
- id: "305",
32
- },
33
- ],
48
+ label: "Installation Office NJ",
49
+ value: "Installation Office NJ",
50
+ id: "installationNJ1",
34
51
  },
35
52
  {
36
- label: "People Experience",
37
- value: "People Experience",
38
- id: "306",
53
+ label: "Warehouse NJ",
54
+ value: "Warehouse NJ",
55
+ id: "warehouseNJ1",
39
56
  },
40
57
  ],
41
58
  },
42
59
  {
43
- label: "Contact Center",
44
- value: "Contact Center",
45
- id: "307",
60
+ label: "Princeton",
61
+ value: "Princeton",
62
+ id: "princeton1",
63
+ hideRadio: true,
46
64
  children: [
47
65
  {
48
- label: "Appointment Management",
49
- value: "Appointment Management",
50
- id: "308",
66
+ label: "Marketing & Sales Princeton",
67
+ value: "Marketing & Sales Princeton",
68
+ id: "marketingPR1",
51
69
  },
52
70
  {
53
- label: "Customer Service",
54
- value: "Customer Service",
55
- id: "309",
71
+ label: "Installation Office Princeton",
72
+ value: "Installation Office Princeton",
73
+ id: "installationPR1",
56
74
  },
57
75
  {
58
- label: "Energy",
59
- value: "Energy",
60
- id: "310",
76
+ label: "Warehouse Princeton",
77
+ value: "Warehouse Princeton",
78
+ id: "warehousePR1",
61
79
  },
62
- ],
80
+ ]
81
+ },
82
+ ]
83
+ },
84
+ {
85
+ label: "Maryland",
86
+ value: "Maryland",
87
+ id: "MD1",
88
+ hideRadio: true,
89
+ children: [
90
+ {
91
+ label: "Marketing & Sales MD",
92
+ value: "Marketing & Sales MD",
93
+ id: "marketingMD1",
94
+ },
95
+ {
96
+ label: "Installation Office MD",
97
+ value: "Installation Office MD",
98
+ id: "installationMD1",
99
+ },
100
+ {
101
+ label: "Warehouse MD",
102
+ value: "Warehouse MD",
103
+ id: "warehouseMD1",
104
+ },
105
+ ]
106
+ },
107
+ {
108
+ label: "Connecticut",
109
+ value: "Connecticut",
110
+ id: "CT1",
111
+ hideRadio: true,
112
+ children: [
113
+ {
114
+ label: "Marketing & Sales CT",
115
+ value: "Marketing & Sales CT",
116
+ id: "marketingCT1",
117
+ },
118
+ {
119
+ label: "Installation Office CT",
120
+ value: "Installation Office CT",
121
+ id: "installationCT1",
122
+ },
123
+ {
124
+ label: "Warehouse CT",
125
+ value: "Warehouse CT",
126
+ id: "warehouseCT1",
63
127
  },
64
- ],
65
- }] %>
128
+ ]
129
+ },
130
+ ]; %>
66
131
 
67
132
  <%= pb_rails("multi_level_select", props: {
68
133
  id: "multi-level-select-single-children-only-rails",