playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4162 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175

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: f54238916554d7fc5db336d5fd9f600012d2d3451b1232364a9a6f70276f6241
4
- data.tar.gz: 2081782f7da94b64103e5a4beeb61a34c3fd1d3c9e4d99979388d4042ec5edae
3
+ metadata.gz: ac3a7f34f18dec19abc8d9a9b989a8267bd5c454ebc7332e28ee7f29ed6cd59b
4
+ data.tar.gz: 7f1896e362d73d4741359400df42897b8778f539eb671789f3969f94dd201033
5
5
  SHA512:
6
- metadata.gz: c6fffc6c90ba549db56e62d9db74f412ad6d86a52b6ff9dfd1329c33a385226086d547cdbc046555c908cb408c2d262c33b541c63d4e3193bc961bed58475c72
7
- data.tar.gz: 2e8ffc641e46dd560aeb456042d3f437a152e4341836f2d5ffdf87872264663076c1d0d4f6d8e30ebe80f346aca768764cbb5d57b4280137a63a9b182d5ca019
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
- if (column.cellAccessors) {
145
- columnStructure.cell = createCellFunction(column.cellAccessors)
146
- }
147
- return columnStructure
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 10px 5px 16px;
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("pb_phone_number_input_rails")
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,