playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21358 → 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 (9) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +20 -21
  3. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +20 -20
  4. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +20 -20
  5. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +32 -26
  6. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +33 -27
  7. data/dist/playbook-rails.js +1 -1
  8. data/lib/playbook/version.rb +1 -1
  9. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6cffb4deb32026d50ebd6f176124e14a474b9dc07e363dc391f18ad3d4a76fc2
4
- data.tar.gz: 547342907e5e3d82f0ef33986210c63d72d05c7561f911eee9090508892e2d69
3
+ metadata.gz: 0b24f939f35f3d16ce328396ff94b12b78932b9afac25ebce2073542297192c7
4
+ data.tar.gz: c5e52a1f37921f1db1510bc55257c68b6c5d32985d5ef6a3e73cae3f68a87689
5
5
  SHA512:
6
- metadata.gz: c95749136e16e3beb811eb0c904534c18574d2bae274e5614dc8ab3058698609818b20b00d9b8ca80809987a51c2f89f21408f145ae0931f2d8601fb777ebeec
7
- data.tar.gz: b82ae99c6fa3d381b57a89d41c3ae4883648592a9e67f3e66166eba50fe98e24305fdf71ef99185d4d1655cfec5c51055d3bee6292ce3986f8b153864f4fca51
6
+ metadata.gz: d573285bc38cdf6004b43d8ef798f73a6959143c2c514e3d42ccea9f5af28e6d5b41a11370f73e3add73de50a89e1842905117bcc5a873896bbe2d3129b19e58
7
+ data.tar.gz: 5f1777c205cb0bab90ac8d62af0ea5e4d2521f5f4755ddc90d40d9c82a2d853693fd51099ad384cccd758221020e1f423114a11d750f3d8f09d583e480639224
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -32,7 +32,7 @@ type MultiLevelSelectProps = {
32
32
  treeData?: { [key: string]: string }[]
33
33
  onSelect?: (prop: { [key: string]: any }) => void
34
34
  selectedIds?: string[]
35
- ultimateChildrenOnly?: boolean
35
+ // ultimateChildrenOnly?: boolean
36
36
  variant?: "multi" | "single"
37
37
  } & GlobalProps
38
38
 
@@ -49,7 +49,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
49
49
  treeData,
50
50
  onSelect = () => null,
51
51
  selectedIds,
52
- ultimateChildrenOnly = false,
52
+ // ultimateChildrenOnly = false,
53
53
  variant = "multi"
54
54
  } = props
55
55
 
@@ -349,26 +349,24 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
349
349
  data-name={item.id}
350
350
  >
351
351
  <div className="dropdown_item_checkbox_row">
352
- <div
353
- key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
354
- >
355
- <CircleIconButton
356
- className={
357
- item.children && item.children.length > 0
358
- ? ""
359
- : "toggle_icon"
360
- }
361
- icon={
362
- isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
363
- }
364
- onClick={(event: any) =>
365
- handleToggleClick(item.id, event)
366
- }
367
- variant="link"
368
- />
369
- </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}
370
368
  { variant === "single" ? (
371
- ultimateChildrenOnly && item.children ? (
369
+ item.hideRadio ? (
372
370
  <Body>{item.label}</Body>
373
371
  ) :
374
372
  <Radio
@@ -379,6 +377,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
379
377
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
380
378
  handleRadioButtonClick(e)
381
379
  )}
380
+ padding='xs'
382
381
  type="radio"
383
382
  value={item.label}
384
383
  />
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb CHANGED
@@ -1,28 +1,28 @@
1
1
  <% treeData = [
2
+ {
3
+ label: "HQ",
4
+ value: "HQ",
5
+ id: "hq",
6
+ },
2
7
  {
3
8
  label: "Philadelphia",
4
9
  value: "Philadelphia",
5
10
  id: "phl",
6
11
  children: [
7
- {
8
- label: "HQ",
9
- value: "HQ",
10
- id: "hq",
11
- },
12
12
  {
13
13
  label: "Marketing & Sales PHL",
14
14
  value: "Marketing & Sales PHL",
15
- id: "marketing1",
15
+ id: "marketingPHL",
16
16
  },
17
17
  {
18
18
  label: "Installation Office PHL",
19
19
  value: "Installation Office PHL",
20
- id: "installation1",
20
+ id: "installationPHL",
21
21
  },
22
22
  {
23
23
  label: "Warehouse PHL",
24
24
  value: "Warehouse PHL",
25
- id: "warehouse1",
25
+ id: "warehousePHL",
26
26
  },
27
27
  ]
28
28
  },
@@ -39,17 +39,17 @@
39
39
  {
40
40
  label: "Marketing & Sales NJ",
41
41
  value: "Marketing & Sales NJ",
42
- id: "marketing2",
42
+ id: "marketingNJ",
43
43
  },
44
44
  {
45
45
  label: "Installation Office NJ",
46
46
  value: "Installation Office NJ",
47
- id: "installation2",
47
+ id: "installationNJ",
48
48
  },
49
49
  {
50
50
  label: "Warehouse NJ",
51
51
  value: "Warehouse NJ",
52
- id: "warehouse2",
52
+ id: "warehouseNJ",
53
53
  },
54
54
  ],
55
55
  },
@@ -61,17 +61,17 @@
61
61
  {
62
62
  label: "Marketing & Sales Princeton",
63
63
  value: "Marketing & Sales Princeton",
64
- id: "marketing3",
64
+ id: "marketingPR",
65
65
  },
66
66
  {
67
67
  label: "Installation Office Princeton",
68
68
  value: "Installation Office Princeton",
69
- id: "installation3",
69
+ id: "installationPR",
70
70
  },
71
71
  {
72
72
  label: "Warehouse Princeton",
73
73
  value: "Warehouse Princeton",
74
- id: "warehouse3",
74
+ id: "warehousePR",
75
75
  },
76
76
  ]
77
77
  },
@@ -85,17 +85,17 @@
85
85
  {
86
86
  label: "Marketing & Sales MD",
87
87
  value: "Marketing & Sales MD",
88
- id: "marketing4",
88
+ id: "marketingMD",
89
89
  },
90
90
  {
91
91
  label: "Installation Office MD",
92
92
  value: "Installation Office MD",
93
- id: "installation4",
93
+ id: "installationMD",
94
94
  },
95
95
  {
96
96
  label: "Warehouse MD",
97
97
  value: "Warehouse MD",
98
- id: "warehouse4",
98
+ id: "warehouseMD",
99
99
  },
100
100
  ]
101
101
  },
@@ -107,17 +107,17 @@
107
107
  {
108
108
  label: "Marketing & Sales CT",
109
109
  value: "Marketing & Sales CT",
110
- id: "marketing5",
110
+ id: "marketingCT",
111
111
  },
112
112
  {
113
113
  label: "Installation Office CT",
114
114
  value: "Installation Office CT",
115
- id: "installation5",
115
+ id: "installationCT",
116
116
  },
117
117
  {
118
118
  label: "Warehouse CT",
119
119
  value: "Warehouse CT",
120
- id: "warehouse5",
120
+ id: "warehouseCT",
121
121
  },
122
122
  ]
123
123
  },
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx CHANGED
@@ -2,30 +2,30 @@ import React from "react";
2
2
  import MultiLevelSelect from "../_multi_level_select";
3
3
 
4
4
  const treeData = [
5
+ {
6
+ label: "HQ",
7
+ value: "HQ",
8
+ id: "hq",
9
+ },
5
10
  {
6
11
  label: "Philadelphia",
7
12
  value: "Philadelphia",
8
13
  id: "phl",
9
14
  children: [
10
- {
11
- label: "HQ",
12
- value: "HQ",
13
- id: "hq",
14
- },
15
15
  {
16
16
  label: "Marketing & Sales PHL",
17
17
  value: "Marketing & Sales PHL",
18
- id: "marketing1",
18
+ id: "marketingPHL",
19
19
  },
20
20
  {
21
21
  label: "Installation Office PHL",
22
22
  value: "Installation Office PHL",
23
- id: "installation1",
23
+ id: "installationPHL",
24
24
  },
25
25
  {
26
26
  label: "Warehouse PHL",
27
27
  value: "Warehouse PHL",
28
- id: "warehouse1",
28
+ id: "warehousePHL",
29
29
  },
30
30
  ]
31
31
  },
@@ -42,17 +42,17 @@ const treeData = [
42
42
  {
43
43
  label: "Marketing & Sales NJ",
44
44
  value: "Marketing & Sales NJ",
45
- id: "marketing2",
45
+ id: "marketingNJ",
46
46
  },
47
47
  {
48
48
  label: "Installation Office NJ",
49
49
  value: "Installation Office NJ",
50
- id: "installation2",
50
+ id: "installationNJ",
51
51
  },
52
52
  {
53
53
  label: "Warehouse NJ",
54
54
  value: "Warehouse NJ",
55
- id: "warehouse2",
55
+ id: "warehouseNJ",
56
56
  },
57
57
  ],
58
58
  },
@@ -64,17 +64,17 @@ const treeData = [
64
64
  {
65
65
  label: "Marketing & Sales Princeton",
66
66
  value: "Marketing & Sales Princeton",
67
- id: "marketing3",
67
+ id: "marketingPR",
68
68
  },
69
69
  {
70
70
  label: "Installation Office Princeton",
71
71
  value: "Installation Office Princeton",
72
- id: "installation3",
72
+ id: "installationPR",
73
73
  },
74
74
  {
75
75
  label: "Warehouse Princeton",
76
76
  value: "Warehouse Princeton",
77
- id: "warehouse3",
77
+ id: "warehousePR",
78
78
  },
79
79
  ]
80
80
  },
@@ -88,17 +88,17 @@ const treeData = [
88
88
  {
89
89
  label: "Marketing & Sales MD",
90
90
  value: "Marketing & Sales MD",
91
- id: "marketing4",
91
+ id: "marketingMD",
92
92
  },
93
93
  {
94
94
  label: "Installation Office MD",
95
95
  value: "Installation Office MD",
96
- id: "installation4",
96
+ id: "installationMD",
97
97
  },
98
98
  {
99
99
  label: "Warehouse MD",
100
100
  value: "Warehouse MD",
101
- id: "warehouse4",
101
+ id: "warehouseMD",
102
102
  },
103
103
  ]
104
104
  },
@@ -110,17 +110,17 @@ const treeData = [
110
110
  {
111
111
  label: "Marketing & Sales CT",
112
112
  value: "Marketing & Sales CT",
113
- id: "marketing5",
113
+ id: "marketingCT",
114
114
  },
115
115
  {
116
116
  label: "Installation Office CT",
117
117
  value: "Installation Office CT",
118
- id: "installation5",
118
+ id: "installationCT",
119
119
  },
120
120
  {
121
121
  label: "Warehouse CT",
122
122
  value: "Warehouse CT",
123
- id: "warehouse5",
123
+ id: "warehouseCT",
124
124
  },
125
125
  ]
126
126
  },
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb CHANGED
@@ -1,77 +1,81 @@
1
1
  <% treeData = [
2
+ {
3
+ label: "HQ",
4
+ value: "HQ",
5
+ id: "hq1",
6
+ },
2
7
  {
3
8
  label: "Philadelphia",
4
9
  value: "Philadelphia",
5
- id: "phl",
10
+ id: "phl1",
11
+ hideRadio: true,
6
12
  children: [
7
- {
8
- label: "HQ",
9
- value: "HQ",
10
- id: "hq",
11
- },
12
13
  {
13
14
  label: "Marketing & Sales PHL",
14
15
  value: "Marketing & Sales PHL",
15
- id: "marketing1",
16
+ id: "marketingPHL1",
16
17
  },
17
18
  {
18
19
  label: "Installation Office PHL",
19
20
  value: "Installation Office PHL",
20
- id: "installation1",
21
+ id: "installationPHL1",
21
22
  },
22
23
  {
23
24
  label: "Warehouse PHL",
24
25
  value: "Warehouse PHL",
25
- id: "warehouse1",
26
+ id: "warehousePHL1",
26
27
  },
27
28
  ]
28
29
  },
29
30
  {
30
31
  label: "New Jersey",
31
32
  value: "New Jersey",
32
- id: "nj",
33
+ id: "nj2",
34
+ hideRadio: true,
33
35
  children: [
34
36
  {
35
37
  label: "New Jersey",
36
38
  value: "New Jersey",
37
- id: "nj1",
39
+ id: "nj3",
40
+ hideRadio: true,
38
41
  children: [
39
42
  {
40
43
  label: "Marketing & Sales NJ",
41
44
  value: "Marketing & Sales NJ",
42
- id: "marketing2",
45
+ id: "marketingNJ1",
43
46
  },
44
47
  {
45
48
  label: "Installation Office NJ",
46
49
  value: "Installation Office NJ",
47
- id: "installation2",
50
+ id: "installationNJ1",
48
51
  },
49
52
  {
50
53
  label: "Warehouse NJ",
51
54
  value: "Warehouse NJ",
52
- id: "warehouse2",
55
+ id: "warehouseNJ1",
53
56
  },
54
57
  ],
55
58
  },
56
59
  {
57
60
  label: "Princeton",
58
61
  value: "Princeton",
59
- id: "princeton",
62
+ id: "princeton1",
63
+ hideRadio: true,
60
64
  children: [
61
65
  {
62
66
  label: "Marketing & Sales Princeton",
63
67
  value: "Marketing & Sales Princeton",
64
- id: "marketing3",
68
+ id: "marketingPR1",
65
69
  },
66
70
  {
67
71
  label: "Installation Office Princeton",
68
72
  value: "Installation Office Princeton",
69
- id: "installation3",
73
+ id: "installationPR1",
70
74
  },
71
75
  {
72
76
  label: "Warehouse Princeton",
73
77
  value: "Warehouse Princeton",
74
- id: "warehouse3",
78
+ id: "warehousePR1",
75
79
  },
76
80
  ]
77
81
  },
@@ -80,44 +84,46 @@
80
84
  {
81
85
  label: "Maryland",
82
86
  value: "Maryland",
83
- id: "MD",
87
+ id: "MD1",
88
+ hideRadio: true,
84
89
  children: [
85
90
  {
86
91
  label: "Marketing & Sales MD",
87
92
  value: "Marketing & Sales MD",
88
- id: "marketing4",
93
+ id: "marketingMD1",
89
94
  },
90
95
  {
91
96
  label: "Installation Office MD",
92
97
  value: "Installation Office MD",
93
- id: "installation4",
98
+ id: "installationMD1",
94
99
  },
95
100
  {
96
101
  label: "Warehouse MD",
97
102
  value: "Warehouse MD",
98
- id: "warehouse4",
103
+ id: "warehouseMD1",
99
104
  },
100
105
  ]
101
106
  },
102
107
  {
103
108
  label: "Connecticut",
104
109
  value: "Connecticut",
105
- id: "CT",
110
+ id: "CT1",
111
+ hideRadio: true,
106
112
  children: [
107
113
  {
108
114
  label: "Marketing & Sales CT",
109
115
  value: "Marketing & Sales CT",
110
- id: "marketing5",
116
+ id: "marketingCT1",
111
117
  },
112
118
  {
113
119
  label: "Installation Office CT",
114
120
  value: "Installation Office CT",
115
- id: "installation5",
121
+ id: "installationCT1",
116
122
  },
117
123
  {
118
124
  label: "Warehouse CT",
119
125
  value: "Warehouse CT",
120
- id: "warehouse5",
126
+ id: "warehouseCT1",
121
127
  },
122
128
  ]
123
129
  },
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx CHANGED
@@ -2,79 +2,83 @@ import React from "react";
2
2
  import MultiLevelSelect from "../_multi_level_select";
3
3
 
4
4
  const treeData = [
5
+ {
6
+ label: "HQ",
7
+ value: "HQ",
8
+ id: "hq1",
9
+ },
5
10
  {
6
11
  label: "Philadelphia",
7
12
  value: "Philadelphia",
8
- id: "phl",
13
+ id: "phl1",
14
+ hideRadio: true,
9
15
  children: [
10
- {
11
- label: "HQ",
12
- value: "HQ",
13
- id: "hq",
14
- },
15
16
  {
16
17
  label: "Marketing & Sales PHL",
17
18
  value: "Marketing & Sales PHL",
18
- id: "marketing1",
19
+ id: "marketingPHL1",
19
20
  },
20
21
  {
21
22
  label: "Installation Office PHL",
22
23
  value: "Installation Office PHL",
23
- id: "installation1",
24
+ id: "installationPHL1",
24
25
  },
25
26
  {
26
27
  label: "Warehouse PHL",
27
28
  value: "Warehouse PHL",
28
- id: "warehouse1",
29
+ id: "warehousePHL1",
29
30
  },
30
31
  ]
31
32
  },
32
33
  {
33
34
  label: "New Jersey",
34
35
  value: "New Jersey",
35
- id: "nj",
36
+ id: "nj2",
37
+ hideRadio: true,
36
38
  children: [
37
39
  {
38
40
  label: "New Jersey",
39
41
  value: "New Jersey",
40
- id: "nj1",
42
+ id: "nj3",
43
+ hideRadio: true,
41
44
  children: [
42
45
  {
43
46
  label: "Marketing & Sales NJ",
44
47
  value: "Marketing & Sales NJ",
45
- id: "marketing2",
48
+ id: "marketingNJ1",
46
49
  },
47
50
  {
48
51
  label: "Installation Office NJ",
49
52
  value: "Installation Office NJ",
50
- id: "installation2",
53
+ id: "installationNJ1",
51
54
  },
52
55
  {
53
56
  label: "Warehouse NJ",
54
57
  value: "Warehouse NJ",
55
- id: "warehouse2",
58
+ id: "warehouseNJ1",
56
59
  },
57
60
  ],
58
61
  },
59
62
  {
60
63
  label: "Princeton",
61
64
  value: "Princeton",
62
- id: "princeton",
65
+ id: "princeton1",
66
+ hideRadio: true,
63
67
  children: [
64
68
  {
65
69
  label: "Marketing & Sales Princeton",
66
70
  value: "Marketing & Sales Princeton",
67
- id: "marketing3",
71
+ id: "marketingPR1",
68
72
  },
69
73
  {
70
74
  label: "Installation Office Princeton",
71
75
  value: "Installation Office Princeton",
72
- id: "installation3",
76
+ id: "installationPR1",
73
77
  },
74
78
  {
75
79
  label: "Warehouse Princeton",
76
80
  value: "Warehouse Princeton",
77
- id: "warehouse3",
81
+ id: "warehousePR1",
78
82
  },
79
83
  ]
80
84
  },
@@ -83,44 +87,46 @@ const treeData = [
83
87
  {
84
88
  label: "Maryland",
85
89
  value: "Maryland",
86
- id: "MD",
90
+ id: "MD1",
91
+ hideRadio: true,
87
92
  children: [
88
93
  {
89
94
  label: "Marketing & Sales MD",
90
95
  value: "Marketing & Sales MD",
91
- id: "marketing4",
96
+ id: "marketingMD1",
92
97
  },
93
98
  {
94
99
  label: "Installation Office MD",
95
100
  value: "Installation Office MD",
96
- id: "installation4",
101
+ id: "installationMD1",
97
102
  },
98
103
  {
99
104
  label: "Warehouse MD",
100
105
  value: "Warehouse MD",
101
- id: "warehouse4",
106
+ id: "warehouseMD1",
102
107
  },
103
108
  ]
104
109
  },
105
110
  {
106
111
  label: "Connecticut",
107
112
  value: "Connecticut",
108
- id: "CT",
113
+ id: "CT1",
114
+ hideRadio: true,
109
115
  children: [
110
116
  {
111
117
  label: "Marketing & Sales CT",
112
118
  value: "Marketing & Sales CT",
113
- id: "marketing5",
119
+ id: "marketingCT1",
114
120
  },
115
121
  {
116
122
  label: "Installation Office CT",
117
123
  value: "Installation Office CT",
118
- id: "installation5",
124
+ id: "installationCT1",
119
125
  },
120
126
  {
121
127
  label: "Warehouse CT",
122
128
  value: "Warehouse CT",
123
- id: "warehouse5",
129
+ id: "warehouseCT1",
124
130
  },
125
131
  ]
126
132
  },
@@ -134,7 +140,7 @@ const MultiLevelSelectSingleChildrenOnly = (props) => {
134
140
  inputName="PowerChildren"
135
141
  onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
136
142
  treeData={treeData}
137
- ultimateChildrenOnly
143
+ // ultimateChildrenOnly
138
144
  variant="single"
139
145
  {...props}
140
146
  />