playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4162 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175
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/_advanced_table.tsx +25 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +19 -15
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +1 -2
- data/dist/chunks/_weekday_stacked-PLi3twbe.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -3
- data/dist/chunks/_weekday_stacked-CDe9cyw6.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ac3a7f34f18dec19abc8d9a9b989a8267bd5c454ebc7332e28ee7f29ed6cd59b
|
|
4
|
+
data.tar.gz: 7f1896e362d73d4741359400df42897b8778f539eb671789f3969f94dd201033
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 225b32c1ce7e41af851a4bfd0d40cc502d3458ec796146f76511dc9db8504316f154060857c35737a93dc4ecfb0e6a9d2d36690883b463f1dc23e16b135a44dd
|
|
7
|
+
data.tar.gz: e31d7f5cad0f0e456e2afb580573650eb72391230227dcad825a32fcb221f906660609baf3941ff8cbdebec68185fc064c0685e318825b594668b04601649527
|
|
@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
91
91
|
const columnHelper = createColumnHelper()
|
|
92
92
|
|
|
93
93
|
//Create cells for first columns
|
|
94
|
-
const createCellFunction = (cellAccessors: string[]) => {
|
|
94
|
+
const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
|
|
95
95
|
const columnCells = ({
|
|
96
96
|
row,
|
|
97
97
|
getValue,
|
|
@@ -101,6 +101,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
101
101
|
}) => {
|
|
102
102
|
const rowData = row.original
|
|
103
103
|
|
|
104
|
+
// Use customRenderer if provided, otherwise default rendering
|
|
105
|
+
if (customRenderer) {
|
|
106
|
+
return customRenderer(row, getValue())
|
|
107
|
+
}
|
|
108
|
+
|
|
104
109
|
switch (row.depth) {
|
|
105
110
|
case 0: {
|
|
106
111
|
return (
|
|
@@ -134,18 +139,31 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
134
139
|
//Create column array in format needed by Tanstack
|
|
135
140
|
const columns =
|
|
136
141
|
columnDefinitions &&
|
|
137
|
-
columnDefinitions.map((column) => {
|
|
142
|
+
columnDefinitions.map((column, index) => {
|
|
138
143
|
// Define the base column structure
|
|
139
144
|
const columnStructure = {
|
|
140
145
|
...columnHelper.accessor(column.accessor, {
|
|
141
146
|
header: column.label,
|
|
142
147
|
}),
|
|
143
148
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
+
|
|
150
|
+
// Use the custom renderer if provided, EXCEPT for the first column
|
|
151
|
+
if (index !== 0) {
|
|
152
|
+
if (column.cellAccessors || column.customRenderer) {
|
|
153
|
+
columnStructure.cell = createCellFunction(
|
|
154
|
+
column.cellAccessors,
|
|
155
|
+
column.customRenderer
|
|
156
|
+
)
|
|
157
|
+
}
|
|
158
|
+
} else {
|
|
159
|
+
// For the first column, apply createCellFunction without customRenderer
|
|
160
|
+
if (column.cellAccessors) {
|
|
161
|
+
columnStructure.cell = createCellFunction(column.cellAccessors)
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
return columnStructure
|
|
166
|
+
})
|
|
149
167
|
|
|
150
168
|
//Syntax for sorting Array if we want to manage state ourselves
|
|
151
169
|
const sorting = [
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableCustomCell = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
customRenderer: (row, value) => (
|
|
17
|
+
<Pill text={value}
|
|
18
|
+
variant="success"
|
|
19
|
+
/>
|
|
20
|
+
),
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "scheduledMeetings",
|
|
24
|
+
label: "Scheduled Meetings",
|
|
25
|
+
customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "attendanceRate",
|
|
29
|
+
label: "Attendance Rate",
|
|
30
|
+
customRenderer: (row, value) => (
|
|
31
|
+
<Flex alignItems="end"
|
|
32
|
+
orientation="column"
|
|
33
|
+
>
|
|
34
|
+
<Detail bold
|
|
35
|
+
color="default"
|
|
36
|
+
text={value}
|
|
37
|
+
/>
|
|
38
|
+
<Caption size="xs">{row.original.graduatedStudents}</Caption>
|
|
39
|
+
</Flex>
|
|
40
|
+
),
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
accessor: "completedClasses",
|
|
44
|
+
label: "Completed Classes",
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
accessor: "classCompletionRate",
|
|
48
|
+
label: "Class Completion Rate",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
accessor: "graduatedStudents",
|
|
52
|
+
label: "Graduated Students",
|
|
53
|
+
},
|
|
54
|
+
]
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div>
|
|
58
|
+
<AdvancedTable
|
|
59
|
+
columnDefinitions={columnDefinitions}
|
|
60
|
+
enableToggleExpansion="all"
|
|
61
|
+
responsive="none"
|
|
62
|
+
tableData={MOCK_DATA}
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<AdvancedTable.Header enableSorting />
|
|
66
|
+
<AdvancedTable.Body />
|
|
67
|
+
</AdvancedTable>
|
|
68
|
+
</div>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default AdvancedTableCustomCell
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived.
|
|
2
|
+
|
|
3
|
+
See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
|
|
4
|
+
|
|
5
|
+
See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
|
4
4
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
|
5
5
|
- advanced_table_beta_sort: Enable Sorting
|
|
6
|
+
|
|
6
7
|
react:
|
|
7
8
|
- advanced_table_default: Default (Required Props)
|
|
8
9
|
- advanced_table_loading: Loading State
|
|
@@ -15,3 +16,4 @@ examples:
|
|
|
15
16
|
- advanced_table_table_props: Table Props
|
|
16
17
|
- advanced_table_inline_row_loading: Inline Row Loading
|
|
17
18
|
- advanced_table_responsive: Responsive Tables
|
|
19
|
+
- advanced_table_custom_cell: Custom Components for Cells
|
|
@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
|
|
|
9
9
|
export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
|
|
10
10
|
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
|
11
11
|
export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
|
|
12
|
+
export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
|
|
@@ -5,6 +5,15 @@ $transform-rotate-deg: 135deg;
|
|
|
5
5
|
$dropdown-min-width: 340px;
|
|
6
6
|
$flag-min-resolution: 192dpi;
|
|
7
7
|
|
|
8
|
+
:root {
|
|
9
|
+
--iti-arrow-padding: #{$space_xs};
|
|
10
|
+
--iti-spacer-horizontal: #{$space_sm};
|
|
11
|
+
--iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
|
|
12
|
+
--iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
|
|
13
|
+
--iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
|
|
14
|
+
--iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
|
|
15
|
+
}
|
|
16
|
+
|
|
8
17
|
.pb_phone_number_input {
|
|
9
18
|
.iti {
|
|
10
19
|
width: 100%;
|
|
@@ -30,6 +39,15 @@ $flag-min-resolution: 192dpi;
|
|
|
30
39
|
color: $charcoal;
|
|
31
40
|
}
|
|
32
41
|
|
|
42
|
+
// iti-spacer-horizontal's default is 8px, or $space_xs
|
|
43
|
+
.iti__country-list .iti__flag, .iti__country-name {
|
|
44
|
+
margin-right: $space_xs;
|
|
45
|
+
}
|
|
46
|
+
[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
|
|
47
|
+
margin-right: 0;
|
|
48
|
+
margin-left: $space_xs;
|
|
49
|
+
}
|
|
50
|
+
|
|
33
51
|
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
|
|
34
52
|
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
|
|
35
53
|
background-color: transparent;
|
|
@@ -50,7 +68,7 @@ $flag-min-resolution: 192dpi;
|
|
|
50
68
|
}
|
|
51
69
|
|
|
52
70
|
.iti__country {
|
|
53
|
-
padding: 5px
|
|
71
|
+
padding: 5px $space_xs 5px $space_sm;
|
|
54
72
|
transition: $transition_default;
|
|
55
73
|
}
|
|
56
74
|
|
|
@@ -75,8 +93,6 @@ $flag-min-resolution: 192dpi;
|
|
|
75
93
|
justify-content: center;
|
|
76
94
|
align-items: center;
|
|
77
95
|
border-width: 0;
|
|
78
|
-
|
|
79
|
-
padding: 0 $space_xxs 0 $space_xs;
|
|
80
96
|
border-radius: $space_xxs;
|
|
81
97
|
|
|
82
98
|
&[aria-expanded="true"] {
|
|
@@ -256,15 +272,3 @@ $flag-min-resolution: 192dpi;
|
|
|
256
272
|
}
|
|
257
273
|
}
|
|
258
274
|
}
|
|
259
|
-
|
|
260
|
-
// Rails Phone Number Input padding placement of placeholders
|
|
261
|
-
// is off in a Dialog because it doesn't account for
|
|
262
|
-
// padding: 0 $space_xxs 0 $space_xs;
|
|
263
|
-
// Set to 0 so the placeholder doesn't overlap with selected country
|
|
264
|
-
.pb_dialog {
|
|
265
|
-
.pb_phone_number_input_rails {
|
|
266
|
-
.iti__selected-country {
|
|
267
|
-
padding: 0;
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
}
|
|
@@ -23,13 +23,12 @@ module Playbook
|
|
|
23
23
|
default: ""
|
|
24
24
|
|
|
25
25
|
def classname
|
|
26
|
-
generate_classname("
|
|
26
|
+
generate_classname("pb_phone_number_input")
|
|
27
27
|
end
|
|
28
28
|
|
|
29
29
|
def phone_number_input_options
|
|
30
30
|
{
|
|
31
31
|
id: id,
|
|
32
|
-
className: classname,
|
|
33
32
|
dark: dark,
|
|
34
33
|
disabled: disabled,
|
|
35
34
|
error: error,
|