playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21323 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21358

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) 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 +7 -13
  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 -48
  6. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +100 -46
  7. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +133 -0
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +145 -0
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
  11. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
  12. data/dist/playbook-rails.js +5 -5
  13. data/lib/playbook/version.rb +1 -1
  14. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c8120f74ec160cee373cdd8848e6e614b47ab8f2c92f2dd87a53c533a735fbe9
4
- data.tar.gz: db41eb2d926684394701fbb886da7382e84ece42a1e213faf89ef3f48a31d2dd
3
+ metadata.gz: 6cffb4deb32026d50ebd6f176124e14a474b9dc07e363dc391f18ad3d4a76fc2
4
+ data.tar.gz: 547342907e5e3d82f0ef33986210c63d72d05c7561f911eee9090508892e2d69
5
5
  SHA512:
6
- metadata.gz: ebc7da2bb3c53cba46fc93a186daaaf1fb7cdcaa6798196d1ec151e27c512dcda54536e0e52cd4c40a8b72ad1dde57738febd0825dd036c9f9a5ce9d619c7a0f
7
- data.tar.gz: 023e6ef6b4f7464466f3c05f27a25ace1e26702a7bc02cc48d3218d53ebd60c766d6b6f4063621cafb89e009a44d8059c2d754b86d3b06938af539d31f943006
6
+ metadata.gz: c95749136e16e3beb811eb0c904534c18574d2bae274e5614dc8ab3058698609818b20b00d9b8ca80809987a51c2f89f21408f145ae0931f2d8601fb777ebeec
7
+ data.tar.gz: b82ae99c6fa3d381b57a89d41c3ae4883648592a9e67f3e66166eba50fe98e24305fdf71ef99185d4d1655cfec5c51055d3bee6292ce3986f8b153864f4fca51
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,6 +32,7 @@ type MultiLevelSelectProps = {
31
32
  treeData?: { [key: string]: string }[]
32
33
  onSelect?: (prop: { [key: string]: any }) => void
33
34
  selectedIds?: string[]
35
+ ultimateChildrenOnly?: boolean
34
36
  variant?: "multi" | "single"
35
37
  } & GlobalProps
36
38
 
@@ -47,6 +49,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
47
49
  treeData,
48
50
  onSelect = () => null,
49
51
  selectedIds,
52
+ ultimateChildrenOnly = false,
50
53
  variant = "multi"
51
54
  } = props
52
55
 
@@ -333,17 +336,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
333
336
  return items
334
337
  }
335
338
 
336
- const singleHiddenInstances = document.querySelectorAll('.singleHidden');
337
-
338
- singleHiddenInstances.forEach(singleHiddenInstance => {
339
-
340
- const siblingElement = singleHiddenInstance.nextElementSibling as HTMLElement;
341
- if (siblingElement && siblingElement.classList.contains('pb_radio_button')) {
342
- siblingElement.style.display = 'none';
343
- }
344
- });
345
-
346
-
347
339
  // Rendering formattedData to UI based on typeahead
348
340
  const renderNestedOptions = (items: { [key: string]: any }[]) => {
349
341
  return (
@@ -376,9 +368,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
376
368
  />
377
369
  </div>
378
370
  { variant === "single" ? (
371
+ ultimateChildrenOnly && item.children ? (
372
+ <Body>{item.label}</Body>
373
+ ) :
379
374
  <Radio
380
375
  checked={item.checked}
381
- class={item.hidden ? "singleHidden" : ""}
382
376
  id={`${item.id}-${item.label}`}
383
377
  label={item.label}
384
378
  name={inputName}
@@ -541,4 +535,4 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
541
535
  )
542
536
  }
543
537
 
544
- export default MultiLevelSelect
538
+ 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,71 +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: "Philadelphia",
4
+ value: "Philadelphia",
5
+ id: "phl",
6
6
  children: [
7
7
  {
8
- label: "People",
9
- value: "People",
10
- id: "201",
11
- expanded: true,
12
- hidden: true,
8
+ label: "HQ",
9
+ value: "HQ",
10
+ id: "hq",
11
+ },
12
+ {
13
+ label: "Marketing & Sales PHL",
14
+ value: "Marketing & Sales PHL",
15
+ id: "marketing1",
16
+ },
17
+ {
18
+ label: "Installation Office PHL",
19
+ value: "Installation Office PHL",
20
+ id: "installation1",
21
+ },
22
+ {
23
+ label: "Warehouse PHL",
24
+ value: "Warehouse PHL",
25
+ id: "warehouse1",
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",
13
38
  children: [
14
39
  {
15
- label: "Talent Acquisition",
16
- value: "Talent Acquisition",
17
- id: "202",
40
+ label: "Marketing & Sales NJ",
41
+ value: "Marketing & Sales NJ",
42
+ id: "marketing2",
18
43
  },
19
44
  {
20
- label: "Business Affairs",
21
- value: "Business Affairs",
22
- id: "203",
23
- hidden: true,
24
- children: [
25
- {
26
- label: "Initiatives",
27
- value: "Initiatives",
28
- id: "204",
29
- },
30
- {
31
- label: "Learning & Development",
32
- value: "Learning & Development",
33
- id: "205",
34
- },
35
- ],
45
+ label: "Installation Office NJ",
46
+ value: "Installation Office NJ",
47
+ id: "installation2",
36
48
  },
37
49
  {
38
- label: "People Experience",
39
- value: "People Experience",
40
- id: "206",
50
+ label: "Warehouse NJ",
51
+ value: "Warehouse NJ",
52
+ id: "warehouse2",
41
53
  },
42
54
  ],
43
55
  },
44
56
  {
45
- label: "Contact Center",
46
- value: "Contact Center",
47
- id: "207",
48
- hidden: true,
57
+ label: "Princeton",
58
+ value: "Princeton",
59
+ id: "princeton",
49
60
  children: [
50
61
  {
51
- label: "Appointment Management",
52
- value: "Appointment Management",
53
- id: "208",
62
+ label: "Marketing & Sales Princeton",
63
+ value: "Marketing & Sales Princeton",
64
+ id: "marketing3",
54
65
  },
55
66
  {
56
- label: "Customer Service",
57
- value: "Customer Service",
58
- id: "209",
67
+ label: "Installation Office Princeton",
68
+ value: "Installation Office Princeton",
69
+ id: "installation3",
59
70
  },
60
71
  {
61
- label: "Energy",
62
- value: "Energy",
63
- id: "210",
72
+ label: "Warehouse Princeton",
73
+ value: "Warehouse Princeton",
74
+ id: "warehouse3",
64
75
  },
65
- ],
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: "marketing4",
89
+ },
90
+ {
91
+ label: "Installation Office MD",
92
+ value: "Installation Office MD",
93
+ id: "installation4",
94
+ },
95
+ {
96
+ label: "Warehouse MD",
97
+ value: "Warehouse MD",
98
+ id: "warehouse4",
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: "marketing5",
111
+ },
112
+ {
113
+ label: "Installation Office CT",
114
+ value: "Installation Office CT",
115
+ id: "installation5",
116
+ },
117
+ {
118
+ label: "Warehouse CT",
119
+ value: "Warehouse CT",
120
+ id: "warehouse5",
66
121
  },
67
- ],
68
- }] %>
122
+ ]
123
+ },
124
+ ]; %>
69
125
 
70
126
  <%= pb_rails("multi_level_select", props: {
71
127
  id: "multi-level-select-single-rails",
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx CHANGED
@@ -3,72 +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: "Philadelphia",
7
+ value: "Philadelphia",
8
+ id: "phl",
10
9
  children: [
11
10
  {
12
- label: "People",
13
- value: "People",
14
- id: "people2",
15
- expanded: true,
16
- hidden: true,
11
+ label: "HQ",
12
+ value: "HQ",
13
+ id: "hq",
14
+ },
15
+ {
16
+ label: "Marketing & Sales PHL",
17
+ value: "Marketing & Sales PHL",
18
+ id: "marketing1",
19
+ },
20
+ {
21
+ label: "Installation Office PHL",
22
+ value: "Installation Office PHL",
23
+ id: "installation1",
24
+ },
25
+ {
26
+ label: "Warehouse PHL",
27
+ value: "Warehouse PHL",
28
+ id: "warehouse1",
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",
17
41
  children: [
18
42
  {
19
- label: "Talent Acquisition",
20
- value: "Talent Acquisition",
21
- id: "talent2",
43
+ label: "Marketing & Sales NJ",
44
+ value: "Marketing & Sales NJ",
45
+ id: "marketing2",
22
46
  },
23
47
  {
24
- label: "Business Affairs",
25
- value: "Business Affairs",
26
- id: "business2",
27
- hidden: true,
28
- children: [
29
- {
30
- label: "Initiatives",
31
- value: "Initiatives",
32
- id: "initiative2",
33
- },
34
- {
35
- label: "Learning & Development",
36
- value: "Learning & Development",
37
- id: "development2",
38
- },
39
- ],
48
+ label: "Installation Office NJ",
49
+ value: "Installation Office NJ",
50
+ id: "installation2",
40
51
  },
41
52
  {
42
- label: "People Experience",
43
- value: "People Experience",
44
- id: "experience2",
53
+ label: "Warehouse NJ",
54
+ value: "Warehouse NJ",
55
+ id: "warehouse2",
45
56
  },
46
57
  ],
47
58
  },
48
59
  {
49
- label: "Contact Center",
50
- value: "Contact Center",
51
- id: "contact2",
52
- hidden: true,
60
+ label: "Princeton",
61
+ value: "Princeton",
62
+ id: "princeton",
53
63
  children: [
54
64
  {
55
- label: "Appointment Management",
56
- value: "Appointment Management",
57
- id: "appointment2",
65
+ label: "Marketing & Sales Princeton",
66
+ value: "Marketing & Sales Princeton",
67
+ id: "marketing3",
58
68
  },
59
69
  {
60
- label: "Customer Service",
61
- value: "Customer Service",
62
- id: "customer2",
70
+ label: "Installation Office Princeton",
71
+ value: "Installation Office Princeton",
72
+ id: "installation3",
63
73
  },
64
74
  {
65
- label: "Energy",
66
- value: "Energy",
67
- id: "energy2",
75
+ label: "Warehouse Princeton",
76
+ value: "Warehouse Princeton",
77
+ id: "warehouse3",
68
78
  },
69
- ],
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: "marketing4",
92
+ },
93
+ {
94
+ label: "Installation Office MD",
95
+ value: "Installation Office MD",
96
+ id: "installation4",
97
+ },
98
+ {
99
+ label: "Warehouse MD",
100
+ value: "Warehouse MD",
101
+ id: "warehouse4",
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: "marketing5",
114
+ },
115
+ {
116
+ label: "Installation Office CT",
117
+ value: "Installation Office CT",
118
+ id: "installation5",
119
+ },
120
+ {
121
+ label: "Warehouse CT",
122
+ value: "Warehouse CT",
123
+ id: "warehouse5",
70
124
  },
71
- ],
125
+ ]
72
126
  },
73
127
  ];
74
128
 
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb ADDED
@@ -0,0 +1,133 @@
1
+ <% treeData = [
2
+ {
3
+ label: "Philadelphia",
4
+ value: "Philadelphia",
5
+ id: "phl",
6
+ children: [
7
+ {
8
+ label: "HQ",
9
+ value: "HQ",
10
+ id: "hq",
11
+ },
12
+ {
13
+ label: "Marketing & Sales PHL",
14
+ value: "Marketing & Sales PHL",
15
+ id: "marketing1",
16
+ },
17
+ {
18
+ label: "Installation Office PHL",
19
+ value: "Installation Office PHL",
20
+ id: "installation1",
21
+ },
22
+ {
23
+ label: "Warehouse PHL",
24
+ value: "Warehouse PHL",
25
+ id: "warehouse1",
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",
38
+ children: [
39
+ {
40
+ label: "Marketing & Sales NJ",
41
+ value: "Marketing & Sales NJ",
42
+ id: "marketing2",
43
+ },
44
+ {
45
+ label: "Installation Office NJ",
46
+ value: "Installation Office NJ",
47
+ id: "installation2",
48
+ },
49
+ {
50
+ label: "Warehouse NJ",
51
+ value: "Warehouse NJ",
52
+ id: "warehouse2",
53
+ },
54
+ ],
55
+ },
56
+ {
57
+ label: "Princeton",
58
+ value: "Princeton",
59
+ id: "princeton",
60
+ children: [
61
+ {
62
+ label: "Marketing & Sales Princeton",
63
+ value: "Marketing & Sales Princeton",
64
+ id: "marketing3",
65
+ },
66
+ {
67
+ label: "Installation Office Princeton",
68
+ value: "Installation Office Princeton",
69
+ id: "installation3",
70
+ },
71
+ {
72
+ label: "Warehouse Princeton",
73
+ value: "Warehouse Princeton",
74
+ id: "warehouse3",
75
+ },
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: "marketing4",
89
+ },
90
+ {
91
+ label: "Installation Office MD",
92
+ value: "Installation Office MD",
93
+ id: "installation4",
94
+ },
95
+ {
96
+ label: "Warehouse MD",
97
+ value: "Warehouse MD",
98
+ id: "warehouse4",
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: "marketing5",
111
+ },
112
+ {
113
+ label: "Installation Office CT",
114
+ value: "Installation Office CT",
115
+ id: "installation5",
116
+ },
117
+ {
118
+ label: "Warehouse CT",
119
+ value: "Warehouse CT",
120
+ id: "warehouse5",
121
+ },
122
+ ]
123
+ },
124
+ ]; %>
125
+
126
+ <%= pb_rails("multi_level_select", props: {
127
+ id: "multi-level-select-single-children-only-rails",
128
+ name: "my_single_children_only_select_array",
129
+ tree_data: treeData,
130
+ input_name: "PowerChildren",
131
+ ultimate_children_only: true,
132
+ variant: "single"
133
+ }) %>