playbook_ui_docs 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11607 → 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11641
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.jsx +59 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js +202 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb +36 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx +41 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e0186dd802e5e2207e838bf9217600001d031c18a92aaa68cb37a2d26e52e980
|
|
4
|
+
data.tar.gz: fbee8c9be4ed2c448656e79905c978aa48bc4b371c3fd755fa3e9f3f4eb5526f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1daae975aee505b4f15d88b2620cb1bb8ee9c475ec1c4838907db7633a9907bfe25fec494c5cd8145571b6803dbbc056f8964ac07d3133d6d23eb4579d65e2e8
|
|
7
|
+
data.tar.gz: '0277912c0bb6529fd90508269ebde1b3efd5084f76166534f514762c0cf3cd1f8b6b308c5d36f3d944687653e0dbb7a3051480bad2573a218388bcf9bd80d590'
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.jsx
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
|
3
|
+
import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableInlineRowLoadingShowToggle = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
accessor: "newEnrollments",
|
|
14
|
+
label: "New Enrollments",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "scheduledMeetings",
|
|
18
|
+
label: "Scheduled Meetings",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
accessor: "attendanceRate",
|
|
22
|
+
label: "Attendance Rate",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
accessor: "completedClasses",
|
|
26
|
+
label: "Completed Classes",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
accessor: "classCompletionRate",
|
|
30
|
+
label: "Class Completion Rate",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
accessor: "graduatedStudents",
|
|
34
|
+
label: "Graduated Students",
|
|
35
|
+
},
|
|
36
|
+
]
|
|
37
|
+
|
|
38
|
+
//Render the subRow header rows
|
|
39
|
+
const subRowHeaders = ["Quarter", "Month", "Day"]
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
<AdvancedTable
|
|
45
|
+
columnDefinitions={columnDefinitions}
|
|
46
|
+
enableToggleExpansion="all"
|
|
47
|
+
inlineRowLoading
|
|
48
|
+
showToggleWithInlineRowLoading
|
|
49
|
+
tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
|
|
50
|
+
{...props}
|
|
51
|
+
>
|
|
52
|
+
<AdvancedTable.Header />
|
|
53
|
+
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
54
|
+
</AdvancedTable>
|
|
55
|
+
</div>
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export default AdvancedTableInlineRowLoadingShowToggle
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.md
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The `showToggleWithInlineRowLoading` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with enoty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
2
|
+
|
|
3
|
+
In this code example, all 3 rows have empty children arrays. The toggle all button would not render (prior to an initial row expansion) without `showToggleWithInlineRowLoading` in place.
|
|
4
|
+
|
|
5
|
+
This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
|
|
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
|
+
{
|
|
16
|
+
year: "2022",
|
|
17
|
+
quarter: null,
|
|
18
|
+
month: null,
|
|
19
|
+
day: null,
|
|
20
|
+
newEnrollments: "25",
|
|
21
|
+
scheduledMeetings: "17",
|
|
22
|
+
attendanceRate: "75%",
|
|
23
|
+
completedClasses: "5",
|
|
24
|
+
classCompletionRate: "45%",
|
|
25
|
+
graduatedStudents: "32",
|
|
26
|
+
children: [],
|
|
27
|
+
// children: [
|
|
28
|
+
// {
|
|
29
|
+
// year: "2022",
|
|
30
|
+
// quarter: "Q1",
|
|
31
|
+
// month: null,
|
|
32
|
+
// day: null,
|
|
33
|
+
// newEnrollments: "2",
|
|
34
|
+
// scheduledMeetings: "35",
|
|
35
|
+
// attendanceRate: "32%",
|
|
36
|
+
// completedClasses: "15",
|
|
37
|
+
// classCompletionRate: "52%",
|
|
38
|
+
// graduatedStudents: "36",
|
|
39
|
+
// children: [
|
|
40
|
+
// {
|
|
41
|
+
// year: "2022",
|
|
42
|
+
// quarter: "Q1",
|
|
43
|
+
// month: "January",
|
|
44
|
+
// day: null,
|
|
45
|
+
// newEnrollments: "16",
|
|
46
|
+
// scheduledMeetings: "20",
|
|
47
|
+
// attendanceRate: "11%",
|
|
48
|
+
// completedClasses: "13",
|
|
49
|
+
// classCompletionRate: "47%",
|
|
50
|
+
// graduatedStudents: "28",
|
|
51
|
+
// children: [
|
|
52
|
+
// {
|
|
53
|
+
// year: "2022",
|
|
54
|
+
// quarter: "Q1",
|
|
55
|
+
// month: "January",
|
|
56
|
+
// day: "15",
|
|
57
|
+
// newEnrollments: "34",
|
|
58
|
+
// scheduledMeetings: "28",
|
|
59
|
+
// attendanceRate: "97%",
|
|
60
|
+
// completedClasses: "20",
|
|
61
|
+
// classCompletionRate: "15%",
|
|
62
|
+
// graduatedStudents: "17",
|
|
63
|
+
// },
|
|
64
|
+
// {
|
|
65
|
+
// year: "2022",
|
|
66
|
+
// quarter: "Q1",
|
|
67
|
+
// month: "January",
|
|
68
|
+
// day: "25",
|
|
69
|
+
// newEnrollments: "43",
|
|
70
|
+
// scheduledMeetings: "23",
|
|
71
|
+
// attendanceRate: "66%",
|
|
72
|
+
// completedClasses: "26",
|
|
73
|
+
// classCompletionRate: "47%",
|
|
74
|
+
// graduatedStudents: "9",
|
|
75
|
+
// },
|
|
76
|
+
// ],
|
|
77
|
+
// },
|
|
78
|
+
// {
|
|
79
|
+
// year: "2022",
|
|
80
|
+
// quarter: "Q1",
|
|
81
|
+
// month: "May",
|
|
82
|
+
// day: null,
|
|
83
|
+
// newEnrollments: "20",
|
|
84
|
+
// scheduledMeetings: "41",
|
|
85
|
+
// attendanceRate: "95%",
|
|
86
|
+
// completedClasses: "26",
|
|
87
|
+
// classCompletionRate: "83%",
|
|
88
|
+
// graduatedStudents: "43",
|
|
89
|
+
// children: [
|
|
90
|
+
// {
|
|
91
|
+
// year: "2011",
|
|
92
|
+
// quarter: "Q1",
|
|
93
|
+
// month: "May",
|
|
94
|
+
// day: "2",
|
|
95
|
+
// newEnrollments: "19",
|
|
96
|
+
// scheduledMeetings: "35",
|
|
97
|
+
// attendanceRate: "69%",
|
|
98
|
+
// completedClasses: "8",
|
|
99
|
+
// classCompletionRate: "75%",
|
|
100
|
+
// graduatedStudents: "23",
|
|
101
|
+
// },
|
|
102
|
+
// ],
|
|
103
|
+
// },
|
|
104
|
+
// ],
|
|
105
|
+
// },
|
|
106
|
+
// ],
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
year: "2023",
|
|
110
|
+
quarter: null,
|
|
111
|
+
month: null,
|
|
112
|
+
day: null,
|
|
113
|
+
newEnrollments: "10",
|
|
114
|
+
scheduledMeetings: "15",
|
|
115
|
+
attendanceRate: "65%",
|
|
116
|
+
completedClasses: "4",
|
|
117
|
+
classCompletionRate: "49%",
|
|
118
|
+
graduatedStudents: "29",
|
|
119
|
+
children: [],
|
|
120
|
+
// children: [
|
|
121
|
+
// {
|
|
122
|
+
// year: "2023",
|
|
123
|
+
// quarter: "Q1",
|
|
124
|
+
// month: null,
|
|
125
|
+
// day: null,
|
|
126
|
+
// newEnrollments: "2",
|
|
127
|
+
// scheduledMeetings: "35",
|
|
128
|
+
// attendanceRate: "32%",
|
|
129
|
+
// completedClasses: "15",
|
|
130
|
+
// classCompletionRate: "52%",
|
|
131
|
+
// graduatedStudents: "36",
|
|
132
|
+
// children: [
|
|
133
|
+
// {
|
|
134
|
+
// year: "2023",
|
|
135
|
+
// quarter: "Q1",
|
|
136
|
+
// month: "March",
|
|
137
|
+
// day: null,
|
|
138
|
+
// newEnrollments: "16",
|
|
139
|
+
// scheduledMeetings: "20",
|
|
140
|
+
// attendanceRate: "11%",
|
|
141
|
+
// completedClasses: "13",
|
|
142
|
+
// classCompletionRate: "47%",
|
|
143
|
+
// graduatedStudents: "28",
|
|
144
|
+
// children: [
|
|
145
|
+
// {
|
|
146
|
+
// year: "2023",
|
|
147
|
+
// quarter: "Q1",
|
|
148
|
+
// month: "March",
|
|
149
|
+
// day: "10",
|
|
150
|
+
// newEnrollments: "34",
|
|
151
|
+
// scheduledMeetings: "28",
|
|
152
|
+
// attendanceRate: "97%",
|
|
153
|
+
// completedClasses: "20",
|
|
154
|
+
// classCompletionRate: "15%",
|
|
155
|
+
// graduatedStudents: "17",
|
|
156
|
+
// },
|
|
157
|
+
// {
|
|
158
|
+
// year: "2023",
|
|
159
|
+
// quarter: "Q1",
|
|
160
|
+
// month: "March",
|
|
161
|
+
// day: "11",
|
|
162
|
+
// newEnrollments: "43",
|
|
163
|
+
// scheduledMeetings: "23",
|
|
164
|
+
// attendanceRate: "66%",
|
|
165
|
+
// completedClasses: "26",
|
|
166
|
+
// classCompletionRate: "47%",
|
|
167
|
+
// graduatedStudents: "9",
|
|
168
|
+
// },
|
|
169
|
+
// ],
|
|
170
|
+
// },
|
|
171
|
+
// {
|
|
172
|
+
// year: "2023",
|
|
173
|
+
// quarter: "Q1",
|
|
174
|
+
// month: "April",
|
|
175
|
+
// day: null,
|
|
176
|
+
// newEnrollments: "20",
|
|
177
|
+
// scheduledMeetings: "41",
|
|
178
|
+
// attendanceRate: "95%",
|
|
179
|
+
// completedClasses: "26",
|
|
180
|
+
// classCompletionRate: "83%",
|
|
181
|
+
// graduatedStudents: "43",
|
|
182
|
+
// children: [
|
|
183
|
+
// {
|
|
184
|
+
// year: "2023",
|
|
185
|
+
// quarter: "Q1",
|
|
186
|
+
// month: "April",
|
|
187
|
+
// day: "15",
|
|
188
|
+
// newEnrollments: "19",
|
|
189
|
+
// scheduledMeetings: "35",
|
|
190
|
+
// attendanceRate: "69%",
|
|
191
|
+
// completedClasses: "8",
|
|
192
|
+
// classCompletionRate: "75%",
|
|
193
|
+
// graduatedStudents: "23",
|
|
194
|
+
// },
|
|
195
|
+
// ],
|
|
196
|
+
// },
|
|
197
|
+
// ],
|
|
198
|
+
// },
|
|
199
|
+
// ],
|
|
200
|
+
},
|
|
201
|
+
]
|
|
202
|
+
|
|
@@ -54,6 +54,7 @@ examples:
|
|
|
54
54
|
- advanced_table_pagination_with_props: Pagination Props
|
|
55
55
|
- advanced_table_loading: Loading State
|
|
56
56
|
- advanced_table_inline_row_loading: Inline Row Loading
|
|
57
|
+
- advanced_table_inline_row_loading_show_toggle: Inline Row Loading with Show Toggle
|
|
57
58
|
- advanced_table_column_headers: Multi-Header Columns
|
|
58
59
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
|
59
60
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
|
@@ -45,4 +45,5 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
|
|
|
45
45
|
export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
|
|
46
46
|
export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
|
|
47
47
|
export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
|
|
48
|
-
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
48
|
+
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
49
|
+
export { default as AdvancedTableInlineRowLoadingShowToggle } from './_advanced_table_inline_row_loading_show_toggle.jsx'
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
+
{ label: 'Red', value: '#FF0000' },
|
|
5
|
+
{ label: 'Green', value: '#1e3d1eff' },
|
|
6
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
+
{ label: 'Purple', value: '#800080' },
|
|
8
|
+
{ label: 'Yellow', value: '#FFFF00' },
|
|
9
|
+
{ label: 'Pink', value: '#FFC0CB' },
|
|
10
|
+
{ label: 'Brown', value: '#A52A2A' },
|
|
11
|
+
{ label: 'Black', value: '#000000' },
|
|
12
|
+
{ label: 'White', value: '#FFFFFF' },
|
|
13
|
+
{ label: 'Gray', value: '#808080' },
|
|
14
|
+
{ label: 'Cyan', value: '#00FFFF' },
|
|
15
|
+
{ label: 'Magenta', value: '#FF00FF' },
|
|
16
|
+
{ label: 'Lime', value: '#00FF00' },
|
|
17
|
+
{ label: 'Maroon', value: '#800000' },
|
|
18
|
+
{ label: 'Olive', value: '#808000' },
|
|
19
|
+
{ label: 'Navy', value: '#000080' },
|
|
20
|
+
{ label: 'Teal', value: '#008080' },
|
|
21
|
+
{ label: 'Silver', value: '#C0C0C0' },
|
|
22
|
+
{ label: 'Gold', value: '#FFD700' },
|
|
23
|
+
{ label: 'Beige', value: '#F5F5DC' },
|
|
24
|
+
{ label: 'Coral', value: '#FF7F50' }
|
|
25
|
+
]
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("typeahead", props: {
|
|
29
|
+
default_options: [{ label: 'Gray', value: '#808080' }],
|
|
30
|
+
id: "typeahead-default-value",
|
|
31
|
+
options: options,
|
|
32
|
+
label: "Colors",
|
|
33
|
+
name: :foo,
|
|
34
|
+
is_multi: false
|
|
35
|
+
})
|
|
36
|
+
%>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `default_options` prop can be used to set a default value for the kit. When a default value is set, focus will be automatically set to the selected option and the dropdown container will scroll to bring the selected option into view.
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Typeahead from '../_typeahead'
|
|
4
|
+
|
|
5
|
+
const options = [
|
|
6
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
7
|
+
{ label: 'Red', value: '#FF0000' },
|
|
8
|
+
{ label: 'Green', value: '#1e3d1eff' },
|
|
9
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
10
|
+
{ label: 'Purple', value: '#800080' },
|
|
11
|
+
{ label: 'Yellow', value: '#FFFF00' },
|
|
12
|
+
{ label: 'Pink', value: '#FFC0CB' },
|
|
13
|
+
{ label: 'Brown', value: '#A52A2A' },
|
|
14
|
+
{ label: 'Black', value: '#000000' },
|
|
15
|
+
{ label: 'White', value: '#FFFFFF' },
|
|
16
|
+
{ label: 'Gray', value: '#808080' },
|
|
17
|
+
{ label: 'Cyan', value: '#00FFFF' },
|
|
18
|
+
{ label: 'Magenta', value: '#FF00FF' },
|
|
19
|
+
{ label: 'Lime', value: '#00FF00' },
|
|
20
|
+
{ label: 'Maroon', value: '#800000' },
|
|
21
|
+
{ label: 'Olive', value: '#808000' },
|
|
22
|
+
{ label: 'Navy', value: '#000080' },
|
|
23
|
+
{ label: 'Teal', value: '#008080' },
|
|
24
|
+
{ label: 'Silver', value: '#C0C0C0' },
|
|
25
|
+
{ label: 'Gold', value: '#FFD700' },
|
|
26
|
+
{ label: 'Beige', value: '#F5F5DC' },
|
|
27
|
+
{ label: 'Coral', value: '#FF7F50' }
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
const TypeaheadDefaultValue = (props) => {
|
|
31
|
+
return (
|
|
32
|
+
<Typeahead
|
|
33
|
+
defaultValue={options[10]}
|
|
34
|
+
label="Colors"
|
|
35
|
+
options={options}
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export default TypeaheadDefaultValue
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `defaultValue` prop can be used to set a default value for the kit. When a default value is set, focus will be automatically set to the selected option and the dropdown container will scroll to bring the selected option into view.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- typeahead_default: Default
|
|
4
|
+
- typeahead_default_options: With Default Options
|
|
4
5
|
- typeahead_with_context: With Context
|
|
5
6
|
- typeahead_with_pills: With Pills
|
|
6
7
|
- typeahead_without_pills: Without Pills (Single Select)
|
|
@@ -19,6 +20,7 @@ examples:
|
|
|
19
20
|
|
|
20
21
|
react:
|
|
21
22
|
- typeahead_default: Default
|
|
23
|
+
- typeahead_default_value: With Default Value
|
|
22
24
|
- typeahead_react_hook: React Hook
|
|
23
25
|
- typeahead_with_highlight: With Highlight
|
|
24
26
|
- typeahead_with_pills: With Pills
|
|
@@ -16,3 +16,4 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
|
|
|
16
16
|
export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|
|
17
17
|
export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
|
|
18
18
|
export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
|
|
19
|
+
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|