playbook_ui_docs 13.22.0.pre.alpha.playbookgemspecrailsversion2608 → 13.22.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +1 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +7 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +7 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +0 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +0 -2
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +1 -17
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +2 -18
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +0 -5
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +0 -6
- data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids_react.jsx → _multi_level_select_selected_ids.jsx} +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +9 -6
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +7 -18
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_toggle/docs/index.js +0 -1
- data/dist/menu.yml +0 -4
- data/dist/playbook-doc.js +10 -10
- metadata +7 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json +0 -278
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +0 -5
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +0 -11
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +0 -21
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7816e281e1433333824ea1879e2cdef51fb005be6e30c0d1884727ae7918961e
|
4
|
+
data.tar.gz: 0f87385e2a060d2501250ff3d79c72fed1ccae96c45c35966065ad9c18ca8a73
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8303962599041c59a49fe5ee6f9122676f31ad0d25dde69f437a596462d6e454f39ddf39136e587b3a379c265e4ce4f773605c9eb7eccf1d7f225d4f49722cbd
|
7
|
+
data.tar.gz: 7e32c83cf7493af7caf4822ee163bc7855f494283822a5e4f54ee2e08be9332c62f97a7c1a81616be2d19d4ea809ffee7d65baffbe4ba4fdb663600696ba68d9
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useState } from "react"
|
2
2
|
import { AdvancedTable } from "../../"
|
3
|
-
import MOCK_DATA from "./
|
3
|
+
import { MOCK_DATA } from "./_mock_data"
|
4
4
|
|
5
5
|
const AdvancedTableExpandedControl = (props) => {
|
6
6
|
const columnDefinitions = [
|
@@ -44,16 +44,11 @@ const AdvancedTableExpandedControl = (props) => {
|
|
44
44
|
onChange: setExpanded,
|
45
45
|
}
|
46
46
|
|
47
|
-
const onRowToggleClick = (row) => {
|
48
|
-
setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
|
49
|
-
}
|
50
|
-
|
51
47
|
return (
|
52
48
|
<div>
|
53
49
|
<AdvancedTable
|
54
50
|
columnDefinitions={columnDefinitions}
|
55
51
|
expandedControl={expandedControl}
|
56
|
-
onRowToggleClick={onRowToggleClick}
|
57
52
|
tableData={MOCK_DATA}
|
58
53
|
{...props}
|
59
54
|
/>
|
@@ -1,5 +1,3 @@
|
|
1
|
-
**NOTE**: If using `expandedControl` the dev is expected to manage the row level expansion state themselves, the kit itself will NOT do it by default.
|
2
|
-
|
3
1
|
`expandedControl` is an optional prop that can be used to gain greater control over the expansion state of the Advanced Table. Tanstack handles expansion itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the expansion state so it persists on page reload, set an initial expansion state, etc.
|
4
2
|
|
5
3
|
In this example we are showing that if initial expansion state is set, it will render the table expanded according to that state.
|
@@ -0,0 +1,278 @@
|
|
1
|
+
export const MOCK_DATA = [
|
2
|
+
{
|
3
|
+
year: "2021",
|
4
|
+
quarter: null,
|
5
|
+
month: null,
|
6
|
+
day: null,
|
7
|
+
newEnrollments: "20",
|
8
|
+
scheduledMeetings: "10",
|
9
|
+
attendanceRate: "51%",
|
10
|
+
completedClasses: "3",
|
11
|
+
classCompletionRate: "33%",
|
12
|
+
graduatedStudents: "19",
|
13
|
+
children: [
|
14
|
+
{
|
15
|
+
year: "2021",
|
16
|
+
quarter: "Q1",
|
17
|
+
month: null,
|
18
|
+
day: null,
|
19
|
+
newEnrollments: "2",
|
20
|
+
scheduledMeetings: "35",
|
21
|
+
attendanceRate: "32%",
|
22
|
+
completedClasses: "15",
|
23
|
+
classCompletionRate: "52%",
|
24
|
+
graduatedStudents: "36",
|
25
|
+
children: [
|
26
|
+
{
|
27
|
+
year: "2021",
|
28
|
+
quarter: "Q1",
|
29
|
+
month: "January",
|
30
|
+
day: null,
|
31
|
+
newEnrollments: "16",
|
32
|
+
scheduledMeetings: "20",
|
33
|
+
attendanceRate: "11%",
|
34
|
+
completedClasses: "13",
|
35
|
+
classCompletionRate: "47%",
|
36
|
+
graduatedStudents: "28",
|
37
|
+
children: [
|
38
|
+
{
|
39
|
+
year: "2021",
|
40
|
+
quarter: "Q1",
|
41
|
+
month: "January",
|
42
|
+
day: "10",
|
43
|
+
newEnrollments: "34",
|
44
|
+
scheduledMeetings: "28",
|
45
|
+
attendanceRate: "97%",
|
46
|
+
completedClasses: "20",
|
47
|
+
classCompletionRate: "15%",
|
48
|
+
graduatedStudents: "17",
|
49
|
+
},
|
50
|
+
{
|
51
|
+
year: "2021",
|
52
|
+
quarter: "Q1",
|
53
|
+
month: "January",
|
54
|
+
day: "20",
|
55
|
+
newEnrollments: "43",
|
56
|
+
scheduledMeetings: "23",
|
57
|
+
attendanceRate: "66%",
|
58
|
+
completedClasses: "26",
|
59
|
+
classCompletionRate: "47%",
|
60
|
+
graduatedStudents: "9",
|
61
|
+
},
|
62
|
+
],
|
63
|
+
},
|
64
|
+
{
|
65
|
+
year: "2021",
|
66
|
+
quarter: "Q1",
|
67
|
+
month: "February",
|
68
|
+
day: null,
|
69
|
+
newEnrollments: "20",
|
70
|
+
scheduledMeetings: "41",
|
71
|
+
attendanceRate: "95%",
|
72
|
+
completedClasses: "26",
|
73
|
+
classCompletionRate: "83%",
|
74
|
+
graduatedStudents: "43",
|
75
|
+
children: [
|
76
|
+
{
|
77
|
+
year: "2011",
|
78
|
+
quarter: "Q1",
|
79
|
+
month: "February",
|
80
|
+
day: "15",
|
81
|
+
newEnrollments: "19",
|
82
|
+
scheduledMeetings: "35",
|
83
|
+
attendanceRate: "69%",
|
84
|
+
completedClasses: "8",
|
85
|
+
classCompletionRate: "75%",
|
86
|
+
graduatedStudents: "23",
|
87
|
+
},
|
88
|
+
],
|
89
|
+
},
|
90
|
+
],
|
91
|
+
},
|
92
|
+
],
|
93
|
+
},
|
94
|
+
{
|
95
|
+
year: "2022",
|
96
|
+
quarter: null,
|
97
|
+
month: null,
|
98
|
+
day: null,
|
99
|
+
newEnrollments: "25",
|
100
|
+
scheduledMeetings: "17",
|
101
|
+
attendanceRate: "75%",
|
102
|
+
completedClasses: "5",
|
103
|
+
classCompletionRate: "45%",
|
104
|
+
graduatedStudents: "32",
|
105
|
+
children: [
|
106
|
+
{
|
107
|
+
year: "2022",
|
108
|
+
quarter: "Q1",
|
109
|
+
month: null,
|
110
|
+
day: null,
|
111
|
+
newEnrollments: "2",
|
112
|
+
scheduledMeetings: "35",
|
113
|
+
attendanceRate: "32%",
|
114
|
+
completedClasses: "15",
|
115
|
+
classCompletionRate: "52%",
|
116
|
+
graduatedStudents: "36",
|
117
|
+
children: [
|
118
|
+
{
|
119
|
+
year: "2022",
|
120
|
+
quarter: "Q1",
|
121
|
+
month: "January",
|
122
|
+
day: null,
|
123
|
+
newEnrollments: "16",
|
124
|
+
scheduledMeetings: "20",
|
125
|
+
attendanceRate: "11%",
|
126
|
+
completedClasses: "13",
|
127
|
+
classCompletionRate: "47%",
|
128
|
+
graduatedStudents: "28",
|
129
|
+
children: [
|
130
|
+
{
|
131
|
+
year: "2022",
|
132
|
+
quarter: "Q1",
|
133
|
+
month: "January",
|
134
|
+
day: "15",
|
135
|
+
newEnrollments: "34",
|
136
|
+
scheduledMeetings: "28",
|
137
|
+
attendanceRate: "97%",
|
138
|
+
completedClasses: "20",
|
139
|
+
classCompletionRate: "15%",
|
140
|
+
graduatedStudents: "17",
|
141
|
+
},
|
142
|
+
{
|
143
|
+
year: "2022",
|
144
|
+
quarter: "Q1",
|
145
|
+
month: "January",
|
146
|
+
day: "25",
|
147
|
+
newEnrollments: "43",
|
148
|
+
scheduledMeetings: "23",
|
149
|
+
attendanceRate: "66%",
|
150
|
+
completedClasses: "26",
|
151
|
+
classCompletionRate: "47%",
|
152
|
+
graduatedStudents: "9",
|
153
|
+
},
|
154
|
+
],
|
155
|
+
},
|
156
|
+
{
|
157
|
+
year: "2022",
|
158
|
+
quarter: "Q1",
|
159
|
+
month: "May",
|
160
|
+
day: null,
|
161
|
+
newEnrollments: "20",
|
162
|
+
scheduledMeetings: "41",
|
163
|
+
attendanceRate: "95%",
|
164
|
+
completedClasses: "26",
|
165
|
+
classCompletionRate: "83%",
|
166
|
+
graduatedStudents: "43",
|
167
|
+
children: [
|
168
|
+
{
|
169
|
+
year: "2011",
|
170
|
+
quarter: "Q1",
|
171
|
+
month: "May",
|
172
|
+
day: "2",
|
173
|
+
newEnrollments: "19",
|
174
|
+
scheduledMeetings: "35",
|
175
|
+
attendanceRate: "69%",
|
176
|
+
completedClasses: "8",
|
177
|
+
classCompletionRate: "75%",
|
178
|
+
graduatedStudents: "23",
|
179
|
+
},
|
180
|
+
],
|
181
|
+
},
|
182
|
+
],
|
183
|
+
},
|
184
|
+
],
|
185
|
+
},
|
186
|
+
{
|
187
|
+
year: "2023",
|
188
|
+
quarter: null,
|
189
|
+
month: null,
|
190
|
+
day: null,
|
191
|
+
newEnrollments: "10",
|
192
|
+
scheduledMeetings: "15",
|
193
|
+
attendanceRate: "65%",
|
194
|
+
completedClasses: "4",
|
195
|
+
classCompletionRate: "49%",
|
196
|
+
graduatedStudents: "29",
|
197
|
+
children: [
|
198
|
+
{
|
199
|
+
year: "2023",
|
200
|
+
quarter: "Q1",
|
201
|
+
month: null,
|
202
|
+
day: null,
|
203
|
+
newEnrollments: "2",
|
204
|
+
scheduledMeetings: "35",
|
205
|
+
attendanceRate: "32%",
|
206
|
+
completedClasses: "15",
|
207
|
+
classCompletionRate: "52%",
|
208
|
+
graduatedStudents: "36",
|
209
|
+
children: [
|
210
|
+
{
|
211
|
+
year: "2023",
|
212
|
+
quarter: "Q1",
|
213
|
+
month: "March",
|
214
|
+
day: null,
|
215
|
+
newEnrollments: "16",
|
216
|
+
scheduledMeetings: "20",
|
217
|
+
attendanceRate: "11%",
|
218
|
+
completedClasses: "13",
|
219
|
+
classCompletionRate: "47%",
|
220
|
+
graduatedStudents: "28",
|
221
|
+
children: [
|
222
|
+
{
|
223
|
+
year: "2023",
|
224
|
+
quarter: "Q1",
|
225
|
+
month: "March",
|
226
|
+
day: "10",
|
227
|
+
newEnrollments: "34",
|
228
|
+
scheduledMeetings: "28",
|
229
|
+
attendanceRate: "97%",
|
230
|
+
completedClasses: "20",
|
231
|
+
classCompletionRate: "15%",
|
232
|
+
graduatedStudents: "17",
|
233
|
+
},
|
234
|
+
{
|
235
|
+
year: "2023",
|
236
|
+
quarter: "Q1",
|
237
|
+
month: "March",
|
238
|
+
day: "11",
|
239
|
+
newEnrollments: "43",
|
240
|
+
scheduledMeetings: "23",
|
241
|
+
attendanceRate: "66%",
|
242
|
+
completedClasses: "26",
|
243
|
+
classCompletionRate: "47%",
|
244
|
+
graduatedStudents: "9",
|
245
|
+
},
|
246
|
+
],
|
247
|
+
},
|
248
|
+
{
|
249
|
+
year: "2023",
|
250
|
+
quarter: "Q1",
|
251
|
+
month: "April",
|
252
|
+
day: null,
|
253
|
+
newEnrollments: "20",
|
254
|
+
scheduledMeetings: "41",
|
255
|
+
attendanceRate: "95%",
|
256
|
+
completedClasses: "26",
|
257
|
+
classCompletionRate: "83%",
|
258
|
+
graduatedStudents: "43",
|
259
|
+
children: [
|
260
|
+
{
|
261
|
+
year: "2023",
|
262
|
+
quarter: "Q1",
|
263
|
+
month: "April",
|
264
|
+
day: "15",
|
265
|
+
newEnrollments: "19",
|
266
|
+
scheduledMeetings: "35",
|
267
|
+
attendanceRate: "69%",
|
268
|
+
completedClasses: "8",
|
269
|
+
classCompletionRate: "75%",
|
270
|
+
graduatedStudents: "23",
|
271
|
+
},
|
272
|
+
],
|
273
|
+
},
|
274
|
+
],
|
275
|
+
},
|
276
|
+
],
|
277
|
+
},
|
278
|
+
]
|
@@ -10,6 +10,13 @@
|
|
10
10
|
picker_id: "date-picker-default-date2"
|
11
11
|
}) %>
|
12
12
|
|
13
|
+
<%= pb_rails("date_picker", props: {
|
14
|
+
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
15
|
+
label: "Default Date Range",
|
16
|
+
mode: "range",
|
17
|
+
picker_id: "date-picker-default-date3"
|
18
|
+
}) %>
|
19
|
+
|
13
20
|
<%= pb_rails("date_picker", props: {
|
14
21
|
label: "Default Behavior",
|
15
22
|
picker_id: "date-picker-default-date4"
|
@@ -16,6 +16,13 @@ const DatePickerDefaultDate = (props) => (
|
|
16
16
|
pickerId="date-picker-default-date2"
|
17
17
|
{...props}
|
18
18
|
/>
|
19
|
+
<DatePicker
|
20
|
+
defaultDate={[new Date(), new Date().fp_incr(7)]}
|
21
|
+
label="Default Date Range"
|
22
|
+
mode="range"
|
23
|
+
pickerId="date-picker-default-date3"
|
24
|
+
{...props}
|
25
|
+
/>
|
19
26
|
<DatePicker
|
20
27
|
label="Default Behavior"
|
21
28
|
pickerId="date-picker-default-date4"
|
@@ -2,11 +2,4 @@
|
|
2
2
|
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
3
3
|
mode: "range",
|
4
4
|
picker_id: "date-picker-range"
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
<%= pb_rails("date_picker", props: {
|
8
|
-
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
9
|
-
label: "Default Date Range",
|
10
|
-
mode: "range",
|
11
|
-
picker_id: "date-picker-default-date3"
|
12
5
|
}) %>
|
@@ -10,13 +10,6 @@ const DatePickerRange = (props) => (
|
|
10
10
|
pickerId="date-picker-range"
|
11
11
|
{...props}
|
12
12
|
/>
|
13
|
-
<DatePicker
|
14
|
-
defaultDate={[new Date(), new Date().fp_incr(7)]}
|
15
|
-
label="Default Date Range"
|
16
|
-
mode="range"
|
17
|
-
pickerId="date-picker-default-date3"
|
18
|
-
{...props}
|
19
|
-
/>
|
20
13
|
</div>
|
21
14
|
)
|
22
15
|
|
@@ -7,7 +7,7 @@ examples:
|
|
7
7
|
- date_picker_allow_input: Allow Input
|
8
8
|
- date_picker_input: Input Field
|
9
9
|
- date_picker_label: Label
|
10
|
-
|
10
|
+
- date_picker_range: Range
|
11
11
|
- date_picker_quick_pick_rails: Range (Quick Pick)
|
12
12
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
13
13
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
@@ -37,7 +37,7 @@ examples:
|
|
37
37
|
- date_picker_label: Label
|
38
38
|
- date_picker_on_change: onChange
|
39
39
|
- date_picker_on_close: onClose
|
40
|
-
|
40
|
+
- date_picker_range: Range
|
41
41
|
- date_picker_quick_pick_react: Range (Quick Pick)
|
42
42
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
43
43
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
@@ -1,7 +1,6 @@
|
|
1
1
|
<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
|
2
2
|
|
3
3
|
<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
|
4
|
-
<form>
|
5
4
|
<%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
|
6
5
|
<%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
|
7
6
|
<% end %>
|
@@ -13,5 +12,4 @@
|
|
13
12
|
|
14
13
|
<% end %>
|
15
14
|
<%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
|
16
|
-
</form>
|
17
15
|
<% end %>
|
@@ -1,7 +1,6 @@
|
|
1
1
|
<div>
|
2
|
-
|
3
2
|
<%= pb_rails("form_group") do %>
|
4
|
-
<%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
|
3
|
+
<%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
|
5
4
|
<%= pb_rails("select", props: {
|
6
5
|
blank_selection: "Genre",
|
7
6
|
options: [
|
@@ -17,19 +16,4 @@
|
|
17
16
|
]
|
18
17
|
}) %>
|
19
18
|
<% end %>
|
20
|
-
<br>
|
21
|
-
<br>
|
22
|
-
<%= pb_rails("form_group") do %>
|
23
|
-
<%= pb_rails("select", props: {
|
24
|
-
blank_selection: "Phone",
|
25
|
-
options: [
|
26
|
-
{ value: "Cell" },
|
27
|
-
{ value: "Work" },
|
28
|
-
{ value: "Home" },
|
29
|
-
]
|
30
|
-
}) %>
|
31
|
-
<%= pb_rails("phone_number_input", props: {
|
32
|
-
id: "phone"
|
33
|
-
}) %>
|
34
|
-
<% end %>
|
35
19
|
</div>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
3
|
import FormGroup from '../_form_group'
|
4
|
-
|
4
|
+
|
5
5
|
import Select from '../../pb_select/_select'
|
6
6
|
import TextInput from '../../pb_text_input/_text_input'
|
7
7
|
|
@@ -18,16 +18,11 @@ const FormGroupSelect = (props) => {
|
|
18
18
|
{ value: 'Other' },
|
19
19
|
]
|
20
20
|
|
21
|
-
const phoneOptions = [
|
22
|
-
{ value: 'Cell' },
|
23
|
-
{ value: 'Work' },
|
24
|
-
{ value: 'Home' },
|
25
|
-
]
|
26
|
-
|
27
21
|
return (
|
28
22
|
<div>
|
29
23
|
<FormGroup>
|
30
24
|
<TextInput
|
25
|
+
label="Artist"
|
31
26
|
placeholder="Enter Artist Name"
|
32
27
|
{...props}
|
33
28
|
/>
|
@@ -37,17 +32,6 @@ const FormGroupSelect = (props) => {
|
|
37
32
|
{...props}
|
38
33
|
/>
|
39
34
|
</FormGroup>
|
40
|
-
<br />
|
41
|
-
<br />
|
42
|
-
<FormGroup>
|
43
|
-
<Select
|
44
|
-
blankSelection="Phone"
|
45
|
-
options={phoneOptions}
|
46
|
-
/>
|
47
|
-
<PhoneNumberInput
|
48
|
-
id='default'
|
49
|
-
/>
|
50
|
-
</FormGroup>
|
51
35
|
</div>
|
52
36
|
)
|
53
37
|
}
|
@@ -68,7 +68,7 @@ const treeData = [
|
|
68
68
|
},
|
69
69
|
];
|
70
70
|
|
71
|
-
const
|
71
|
+
const MultiLevelSelectSelectedIds = (props) => {
|
72
72
|
return (
|
73
73
|
<div>
|
74
74
|
<MultiLevelSelect
|
@@ -85,4 +85,4 @@ const MultiLevelSelectSelectedIdsReact = (props) => {
|
|
85
85
|
);
|
86
86
|
};
|
87
87
|
|
88
|
-
export default
|
88
|
+
export default MultiLevelSelectSelectedIds;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
`selected_ids` is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load.
|
1
|
+
`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load.
|
2
2
|
|
3
3
|
Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
|
4
4
|
|
5
|
-
When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility.
|
5
|
+
When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility.
|
@@ -12,4 +12,4 @@ examples:
|
|
12
12
|
- multi_level_select_single: Single Select
|
13
13
|
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
14
14
|
- multi_level_select_return_all_selected: Return All Selected
|
15
|
-
-
|
15
|
+
- multi_level_select_selected_ids: Selected Ids
|
@@ -2,4 +2,4 @@ export { default as MultiLevelSelectDefault } from './_multi_level_select_defaul
|
|
2
2
|
export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
|
3
3
|
export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
|
4
4
|
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
5
|
-
export { default as
|
5
|
+
export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
|
@@ -1,6 +1,9 @@
|
|
1
|
-
<%= pb_rails("online_status", props: { status: "offline"
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
<%= pb_rails("online_status", props: { status: "
|
6
|
-
|
1
|
+
<%= pb_rails("online_status", props: { status: "offline" }) %>
|
2
|
+
|
3
|
+
<br>
|
4
|
+
|
5
|
+
<%= pb_rails("online_status", props: { status: "online" }) %>
|
6
|
+
|
7
|
+
<br>
|
8
|
+
|
9
|
+
<%= pb_rails("online_status", props: { status: "away" }) %>
|