playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2173 → 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c50bdb2d776257482837525dcef9ac706994226966a7acc3041b81f5f9cf89e6
4
- data.tar.gz: c467ed886607d31ee16abca2bdec30da5880ad8ff58798d74232f7852d6165db
3
+ metadata.gz: af16199bf3de903780fbe8aef3da42bc2864cdbed9ef37c559bd9c6e3b823ec8
4
+ data.tar.gz: 3d64795bc4c41d875381d33a8303280f184fe0cc4915471f6f1cf11455ef604f
5
5
  SHA512:
6
- metadata.gz: cd6efe9805a59dfd26fa143d566f107e6ab5f0435920a6ca5d7985aee7b2859b297734c319a13b1f76ba04732ca8292a24b40811b742bbd9703ae662f48217b4
7
- data.tar.gz: c60068a9dcb1beebd857868a1fcbf795f9d59697ebce2de88da31fe9a7d50c7e22fd17563417676d0a806ab9e30417223095b9012a8d42e1a594673450e2c41f
6
+ metadata.gz: fad31fe23e5f08b313d6e7b0d7c571c3ca20c08bd59d5e75b001009c8a2ccf2657eb84f3ac882093745458d494ca9d3d54056d83f76f06aafd6897f9c33285a4
7
+ data.tar.gz: f0e6431938db0f7fec379cf5c6374d89f7383a9cd6936c3b302811519c74f96fd40df04580f7a5c0c8bfb8ce889c15567ed3075f65e4d32d6e792a83b5e84140
@@ -53,6 +53,7 @@ export const TableBody = ({
53
53
  const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
54
54
  const numberOfColumns = table.getAllFlatColumns().length
55
55
  const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
56
+ const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
56
57
 
57
58
  return (
58
59
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -68,7 +69,7 @@ export const TableBody = ({
68
69
  )}
69
70
 
70
71
  <tr
71
- className={`${isExpandable ? "bg-silver" : "bg-white"} ${
72
+ className={`${rowBackground ? "bg-silver" : "bg-white"} ${
72
73
  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
73
74
  }`}
74
75
  id={`${row.index}-${row.id}-${row.depth}-row`}
@@ -0,0 +1,58 @@
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
4
+
5
+ const AdvancedTableInlineRowLoading = (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
+ tableData={MOCK_DATA_INLINE_LOADING}
49
+ {...props}
50
+ >
51
+ <AdvancedTable.Header />
52
+ <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
53
+ </AdvancedTable>
54
+ </div>
55
+ );
56
+ };
57
+
58
+ export default AdvancedTableInlineRowLoading;
@@ -0,0 +1,5 @@
1
+ As a default, the kit assumes that the dataset provided to it at first render is the complete dataset and renders the row level expansion buttons, the toggleAllExpansion buttons in the subrow headers (if any), etc based on that dataset. However, if the dev wants to set up a more complicated querying logic that for instance, runs a query on each expansion button click, then they can use the `inlineRowLoading` prop. This prop, if present, assumes that any item in the dataset that has an empty children array WILL have children even if it does not have any on first render. The kit therefore renders the correct buttons as well as adding an inline Loading state for the row with that empty children array.
2
+
3
+ In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
4
+
5
+ This prop is set to `false` by default.
@@ -0,0 +1,200 @@
1
+ export const MOCK_DATA_INLINE_LOADING = [
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
+ {
28
+ year: "2022",
29
+ quarter: "Q1",
30
+ month: null,
31
+ day: null,
32
+ newEnrollments: "2",
33
+ scheduledMeetings: "35",
34
+ attendanceRate: "32%",
35
+ completedClasses: "15",
36
+ classCompletionRate: "52%",
37
+ graduatedStudents: "36",
38
+ children: [
39
+ {
40
+ year: "2022",
41
+ quarter: "Q1",
42
+ month: "January",
43
+ day: null,
44
+ newEnrollments: "16",
45
+ scheduledMeetings: "20",
46
+ attendanceRate: "11%",
47
+ completedClasses: "13",
48
+ classCompletionRate: "47%",
49
+ graduatedStudents: "28",
50
+ children: [
51
+ {
52
+ year: "2022",
53
+ quarter: "Q1",
54
+ month: "January",
55
+ day: "15",
56
+ newEnrollments: "34",
57
+ scheduledMeetings: "28",
58
+ attendanceRate: "97%",
59
+ completedClasses: "20",
60
+ classCompletionRate: "15%",
61
+ graduatedStudents: "17",
62
+ },
63
+ {
64
+ year: "2022",
65
+ quarter: "Q1",
66
+ month: "January",
67
+ day: "25",
68
+ newEnrollments: "43",
69
+ scheduledMeetings: "23",
70
+ attendanceRate: "66%",
71
+ completedClasses: "26",
72
+ classCompletionRate: "47%",
73
+ graduatedStudents: "9",
74
+ },
75
+ ],
76
+ },
77
+ {
78
+ year: "2022",
79
+ quarter: "Q1",
80
+ month: "May",
81
+ day: null,
82
+ newEnrollments: "20",
83
+ scheduledMeetings: "41",
84
+ attendanceRate: "95%",
85
+ completedClasses: "26",
86
+ classCompletionRate: "83%",
87
+ graduatedStudents: "43",
88
+ children: [
89
+ {
90
+ year: "2011",
91
+ quarter: "Q1",
92
+ month: "May",
93
+ day: "2",
94
+ newEnrollments: "19",
95
+ scheduledMeetings: "35",
96
+ attendanceRate: "69%",
97
+ completedClasses: "8",
98
+ classCompletionRate: "75%",
99
+ graduatedStudents: "23",
100
+ },
101
+ ],
102
+ },
103
+ ],
104
+ },
105
+ ],
106
+ },
107
+ {
108
+ year: "2023",
109
+ quarter: null,
110
+ month: null,
111
+ day: null,
112
+ newEnrollments: "10",
113
+ scheduledMeetings: "15",
114
+ attendanceRate: "65%",
115
+ completedClasses: "4",
116
+ classCompletionRate: "49%",
117
+ graduatedStudents: "29",
118
+ children: [
119
+ {
120
+ year: "2023",
121
+ quarter: "Q1",
122
+ month: null,
123
+ day: null,
124
+ newEnrollments: "2",
125
+ scheduledMeetings: "35",
126
+ attendanceRate: "32%",
127
+ completedClasses: "15",
128
+ classCompletionRate: "52%",
129
+ graduatedStudents: "36",
130
+ children: [
131
+ {
132
+ year: "2023",
133
+ quarter: "Q1",
134
+ month: "March",
135
+ day: null,
136
+ newEnrollments: "16",
137
+ scheduledMeetings: "20",
138
+ attendanceRate: "11%",
139
+ completedClasses: "13",
140
+ classCompletionRate: "47%",
141
+ graduatedStudents: "28",
142
+ children: [
143
+ {
144
+ year: "2023",
145
+ quarter: "Q1",
146
+ month: "March",
147
+ day: "10",
148
+ newEnrollments: "34",
149
+ scheduledMeetings: "28",
150
+ attendanceRate: "97%",
151
+ completedClasses: "20",
152
+ classCompletionRate: "15%",
153
+ graduatedStudents: "17",
154
+ },
155
+ {
156
+ year: "2023",
157
+ quarter: "Q1",
158
+ month: "March",
159
+ day: "11",
160
+ newEnrollments: "43",
161
+ scheduledMeetings: "23",
162
+ attendanceRate: "66%",
163
+ completedClasses: "26",
164
+ classCompletionRate: "47%",
165
+ graduatedStudents: "9",
166
+ },
167
+ ],
168
+ },
169
+ {
170
+ year: "2023",
171
+ quarter: "Q1",
172
+ month: "April",
173
+ day: null,
174
+ newEnrollments: "20",
175
+ scheduledMeetings: "41",
176
+ attendanceRate: "95%",
177
+ completedClasses: "26",
178
+ classCompletionRate: "83%",
179
+ graduatedStudents: "43",
180
+ children: [
181
+ {
182
+ year: "2023",
183
+ quarter: "Q1",
184
+ month: "April",
185
+ day: "15",
186
+ newEnrollments: "19",
187
+ scheduledMeetings: "35",
188
+ attendanceRate: "69%",
189
+ completedClasses: "8",
190
+ classCompletionRate: "75%",
191
+ graduatedStudents: "23",
192
+ },
193
+ ],
194
+ },
195
+ ],
196
+ },
197
+ ],
198
+ },
199
+ ];
200
+
@@ -9,4 +9,5 @@ examples:
9
9
  - advanced_table_collapsible_trail: Collapsible Trail
10
10
  - advanced_table_table_options: Table Options
11
11
  - advanced_table_table_props: Table Props
12
+ - advanced_table_inline_row_loading: inline Row Loading
12
13
 
@@ -7,3 +7,4 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
7
7
  export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
8
8
  export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
9
9
  export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
10
+ export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.18.0"
5
- VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2173"
5
+ VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2173
4
+ version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -293,6 +293,8 @@ files:
293
293
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
294
294
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
295
295
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
296
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
297
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
296
298
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
297
299
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
298
300
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
@@ -307,6 +309,7 @@ files:
307
309
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
308
310
  - app/pb_kits/playbook/pb_advanced_table/docs/_description.md
309
311
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
312
+ - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
310
313
  - app/pb_kits/playbook/pb_advanced_table/docs/example.yml
311
314
  - app/pb_kits/playbook/pb_advanced_table/docs/index.js
312
315
  - app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss