playbook_ui_docs 16.11.0.pre.rc.0 → 16.11.0.pre.rc.2
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_pinned_rows_both.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_react.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_react.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_playground.json +149 -237
- data/app/pb_kits/playbook/pb_dropdown/docs/_playground.overrides.json +58 -74
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb +66 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx +53 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md +5 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.jsx +1 -1
- data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.md +1 -1
- data/app/pb_kits/playbook/pb_icon/docs/_playground.json +2 -16
- data/app/pb_kits/playbook/pb_icon/docs/_playground.overrides.json +2 -13
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +1 -1
- 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: 9aeba2a5a2194029a406138e8d79cdfc9e0537d1cb8b0dbe633e539e7664c963
|
|
4
|
+
data.tar.gz: 2f977b71ba7e2d799e9912caed0e3d728170d2c9728435695d60f884fc1feaec
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e490dac24f0130b452f93c6483700b91a731dc3b4d37337bb86f6e6b2c3963698cbe57591901483ab0ddbca638e06304eaf3f4f307648a1d87cbb8cb032e2bb5
|
|
7
|
+
data.tar.gz: e282ad05fc6b15f02339eb91772f1b16da21617ceeba44d2c30eb7f3cc505f0923895a7a209d6e35e038831ebc32dd037fb310cb0ec6937463ce1a230a6b21ef
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
|
3
|
+
import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableRowPinningBoth = (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
|
+
const [pinnedRows, setPinnedRows] = useState({top: ["8"], bottom: ["1"]})
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<div>
|
|
42
|
+
<AdvancedTable
|
|
43
|
+
columnDefinitions={columnDefinitions}
|
|
44
|
+
maxHeight="xs"
|
|
45
|
+
pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
|
|
46
|
+
tableData={MOCK_DATA_WITH_ID}
|
|
47
|
+
tableProps={{sticky: true}}
|
|
48
|
+
{...props}
|
|
49
|
+
>
|
|
50
|
+
<AdvancedTable.Header enableSorting />
|
|
51
|
+
<AdvancedTable.Body />
|
|
52
|
+
</AdvancedTable>
|
|
53
|
+
</div>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default AdvancedTableRowPinningBoth
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
This code snippet demonstrates `pinnedRows` taking an array of row ids to both the `top` and `bottom` properties.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
|
3
|
+
import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableRowPinningBottom = (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
|
+
const [pinnedRows, setPinnedRows] = useState({bottom: ["8"]})
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<div>
|
|
42
|
+
<AdvancedTable
|
|
43
|
+
columnDefinitions={columnDefinitions}
|
|
44
|
+
maxHeight="xs"
|
|
45
|
+
pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
|
|
46
|
+
tableData={MOCK_DATA_WITH_ID}
|
|
47
|
+
tableProps={{sticky: true}}
|
|
48
|
+
{...props}
|
|
49
|
+
>
|
|
50
|
+
<AdvancedTable.Header enableSorting />
|
|
51
|
+
<AdvancedTable.Body />
|
|
52
|
+
</AdvancedTable>
|
|
53
|
+
</div>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default AdvancedTableRowPinningBottom
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
This code snippet demonstrates `pinnedRows` taking an array of row ids to the `bottom` property.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
|
|
1
|
+
Use the `pinnedRows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
|
|
2
2
|
|
|
3
3
|
**NOTE:**
|
|
4
4
|
- Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
|
|
5
5
|
- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
|
6
|
-
- `pinnedRows` takes an array of row ids to the `top` property
|
|
6
|
+
- `pinnedRows` takes an array of row ids to the `top` or `bottom` property, or both. `top` is shown in the code snippet below.
|
|
7
7
|
- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned.
|
|
@@ -67,7 +67,9 @@ examples:
|
|
|
67
67
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
|
68
68
|
- advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
|
|
69
69
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
|
70
|
-
- advanced_table_pinned_rows: Pinned Rows
|
|
70
|
+
- advanced_table_pinned_rows: Pinned Rows (Top)
|
|
71
|
+
- advanced_table_pinned_rows_bottom: Pinned Rows (Bottom)
|
|
72
|
+
- advanced_table_pinned_rows_both: Pinned Rows (Both)
|
|
71
73
|
- advanced_table_selectable_rows: Selectable Rows
|
|
72
74
|
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
|
73
75
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
|
@@ -89,5 +91,4 @@ examples:
|
|
|
89
91
|
- advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
|
|
90
92
|
- advanced_table_padding_control: Padding Control using Column Styling
|
|
91
93
|
- advanced_table_column_border_color: Column Group Border Color
|
|
92
|
-
- advanced_table_fullscreen: Fullscreen
|
|
93
94
|
- advanced_table_infinite_scroll: Infinite Scroll
|
|
@@ -52,4 +52,6 @@ export { default as AdvancedTableColumnStylingBackground } from './_advanced_tab
|
|
|
52
52
|
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
53
53
|
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
54
54
|
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
55
|
-
export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
|
|
55
|
+
export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
|
|
56
|
+
export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
|
|
57
|
+
export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
"clearable": true,
|
|
8
8
|
"closeOnClick": "any",
|
|
9
9
|
"constrainHeight": false,
|
|
10
|
+
"disabled": false,
|
|
10
11
|
"multiSelect": false,
|
|
11
12
|
"separators": true,
|
|
12
13
|
"variant": "default",
|
|
@@ -25,12 +26,59 @@
|
|
|
25
26
|
{
|
|
26
27
|
"label": "Canada",
|
|
27
28
|
"value": "canada",
|
|
28
|
-
"id": "ca"
|
|
29
|
+
"id": "ca",
|
|
30
|
+
"disabled": true
|
|
29
31
|
},
|
|
30
32
|
{
|
|
31
33
|
"label": "Pakistan",
|
|
32
34
|
"value": "pakistan",
|
|
33
35
|
"id": "pk"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"label": "Mexico",
|
|
39
|
+
"value": "mexico",
|
|
40
|
+
"id": "mx",
|
|
41
|
+
"disabled": true
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"label": "United Kingdom",
|
|
45
|
+
"value": "unitedKingdom",
|
|
46
|
+
"id": "gb"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"label": "India",
|
|
50
|
+
"value": "india",
|
|
51
|
+
"id": "in"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"label": "Australia",
|
|
55
|
+
"value": "australia",
|
|
56
|
+
"id": "au"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"label": "New Zealand",
|
|
60
|
+
"value": "newZealand",
|
|
61
|
+
"id": "nz"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"label": "Italy",
|
|
65
|
+
"value": "italy",
|
|
66
|
+
"id": "it"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"label": "Germany",
|
|
70
|
+
"value": "germany",
|
|
71
|
+
"id": "de"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"label": "Brazil",
|
|
75
|
+
"value": "brazil",
|
|
76
|
+
"id": "br"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"label": "Philippines",
|
|
80
|
+
"value": "philippines",
|
|
81
|
+
"id": "ph"
|
|
34
82
|
}
|
|
35
83
|
],
|
|
36
84
|
"placeholder": "Select a country"
|
|
@@ -75,7 +123,8 @@
|
|
|
75
123
|
"separators",
|
|
76
124
|
"formPillProps",
|
|
77
125
|
"activeStyle",
|
|
78
|
-
"dark"
|
|
126
|
+
"dark",
|
|
127
|
+
"disabled"
|
|
79
128
|
]
|
|
80
129
|
},
|
|
81
130
|
{
|
|
@@ -90,72 +139,28 @@
|
|
|
90
139
|
"name": "Default trigger",
|
|
91
140
|
"props": {
|
|
92
141
|
"variant": "default",
|
|
93
|
-
"placeholder": "Select a country"
|
|
94
|
-
"options": [
|
|
95
|
-
{
|
|
96
|
-
"label": "United States",
|
|
97
|
-
"value": "unitedStates",
|
|
98
|
-
"id": "us"
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
"label": "Canada",
|
|
102
|
-
"value": "canada",
|
|
103
|
-
"id": "ca"
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
"label": "Mexico",
|
|
107
|
-
"value": "mexico",
|
|
108
|
-
"id": "mx"
|
|
109
|
-
}
|
|
110
|
-
]
|
|
142
|
+
"placeholder": "Select a country"
|
|
111
143
|
}
|
|
112
144
|
},
|
|
113
145
|
{
|
|
114
146
|
"name": "With label",
|
|
115
147
|
"props": {
|
|
116
148
|
"label": "Select a Country",
|
|
117
|
-
"placeholder": "Choose a country"
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
"label": "Canada",
|
|
126
|
-
"value": "canada",
|
|
127
|
-
"id": "ca"
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"label": "Pakistan",
|
|
131
|
-
"value": "pakistan",
|
|
132
|
-
"id": "pk"
|
|
133
|
-
}
|
|
134
|
-
]
|
|
149
|
+
"placeholder": "Choose a country"
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "Disabled options",
|
|
154
|
+
"props": {
|
|
155
|
+
"label": "Select a Country",
|
|
156
|
+
"placeholder": "Choose a country"
|
|
135
157
|
}
|
|
136
158
|
},
|
|
137
159
|
{
|
|
138
160
|
"name": "Subtle Variant",
|
|
139
161
|
"props": {
|
|
140
162
|
"variant": "subtle",
|
|
141
|
-
"separators": false
|
|
142
|
-
"options": [
|
|
143
|
-
{
|
|
144
|
-
"label": "Alpha",
|
|
145
|
-
"value": "alpha",
|
|
146
|
-
"id": "a"
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
"label": "Beta",
|
|
150
|
-
"value": "beta",
|
|
151
|
-
"id": "b"
|
|
152
|
-
},
|
|
153
|
-
{
|
|
154
|
-
"label": "Gamma",
|
|
155
|
-
"value": "gamma",
|
|
156
|
-
"id": "g"
|
|
157
|
-
}
|
|
158
|
-
]
|
|
163
|
+
"separators": false
|
|
159
164
|
}
|
|
160
165
|
},
|
|
161
166
|
{
|
|
@@ -222,29 +227,7 @@
|
|
|
222
227
|
"props": {
|
|
223
228
|
"variant": "default",
|
|
224
229
|
"multiSelect": true,
|
|
225
|
-
"placeholder": "Select
|
|
226
|
-
"options": [
|
|
227
|
-
{
|
|
228
|
-
"label": "North",
|
|
229
|
-
"value": "north",
|
|
230
|
-
"id": "n"
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
"label": "South",
|
|
234
|
-
"value": "south",
|
|
235
|
-
"id": "s"
|
|
236
|
-
},
|
|
237
|
-
{
|
|
238
|
-
"label": "East",
|
|
239
|
-
"value": "east",
|
|
240
|
-
"id": "e"
|
|
241
|
-
},
|
|
242
|
-
{
|
|
243
|
-
"label": "West",
|
|
244
|
-
"value": "west",
|
|
245
|
-
"id": "w"
|
|
246
|
-
}
|
|
247
|
-
]
|
|
230
|
+
"placeholder": "Select countries"
|
|
248
231
|
}
|
|
249
232
|
},
|
|
250
233
|
{
|
|
@@ -266,48 +249,6 @@
|
|
|
266
249
|
"label": "Italy",
|
|
267
250
|
"value": "italy"
|
|
268
251
|
}
|
|
269
|
-
],
|
|
270
|
-
"options": [
|
|
271
|
-
{
|
|
272
|
-
"label": "United States",
|
|
273
|
-
"value": "unitedStates",
|
|
274
|
-
"id": "us"
|
|
275
|
-
},
|
|
276
|
-
{
|
|
277
|
-
"label": "United Kingdom",
|
|
278
|
-
"value": "unitedKingdom",
|
|
279
|
-
"id": "gb"
|
|
280
|
-
},
|
|
281
|
-
{
|
|
282
|
-
"label": "Canada",
|
|
283
|
-
"value": "canada",
|
|
284
|
-
"id": "ca"
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
"label": "Pakistan",
|
|
288
|
-
"value": "pakistan",
|
|
289
|
-
"id": "pk"
|
|
290
|
-
},
|
|
291
|
-
{
|
|
292
|
-
"label": "India",
|
|
293
|
-
"value": "india",
|
|
294
|
-
"id": "in"
|
|
295
|
-
},
|
|
296
|
-
{
|
|
297
|
-
"label": "Australia",
|
|
298
|
-
"value": "australia",
|
|
299
|
-
"id": "au"
|
|
300
|
-
},
|
|
301
|
-
{
|
|
302
|
-
"label": "New Zealand",
|
|
303
|
-
"value": "newZealand",
|
|
304
|
-
"id": "nz"
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
"label": "Italy",
|
|
308
|
-
"value": "italy",
|
|
309
|
-
"id": "it"
|
|
310
|
-
}
|
|
311
252
|
]
|
|
312
253
|
}
|
|
313
254
|
},
|
|
@@ -317,19 +258,7 @@
|
|
|
317
258
|
"variant": "default",
|
|
318
259
|
"label": "Required field",
|
|
319
260
|
"placeholder": "Required field",
|
|
320
|
-
"error": "Please make a selection."
|
|
321
|
-
"options": [
|
|
322
|
-
{
|
|
323
|
-
"label": "Option A",
|
|
324
|
-
"value": "a",
|
|
325
|
-
"id": "a"
|
|
326
|
-
},
|
|
327
|
-
{
|
|
328
|
-
"label": "Option B",
|
|
329
|
-
"value": "b",
|
|
330
|
-
"id": "b"
|
|
331
|
-
}
|
|
332
|
-
]
|
|
261
|
+
"error": "Please make a selection."
|
|
333
262
|
}
|
|
334
263
|
},
|
|
335
264
|
{
|
|
@@ -337,93 +266,14 @@
|
|
|
337
266
|
"props": {
|
|
338
267
|
"variant": "default",
|
|
339
268
|
"autocomplete": true,
|
|
340
|
-
"placeholder": "Search
|
|
341
|
-
"options": [
|
|
342
|
-
{
|
|
343
|
-
"label": "Apple",
|
|
344
|
-
"value": "apple",
|
|
345
|
-
"id": "1"
|
|
346
|
-
},
|
|
347
|
-
{
|
|
348
|
-
"label": "Apricot",
|
|
349
|
-
"value": "apricot",
|
|
350
|
-
"id": "2"
|
|
351
|
-
},
|
|
352
|
-
{
|
|
353
|
-
"label": "Banana",
|
|
354
|
-
"value": "banana",
|
|
355
|
-
"id": "3"
|
|
356
|
-
}
|
|
357
|
-
]
|
|
269
|
+
"placeholder": "Search..."
|
|
358
270
|
}
|
|
359
271
|
},
|
|
360
272
|
{
|
|
361
273
|
"name": "Constrained height",
|
|
362
274
|
"props": {
|
|
363
275
|
"label": "Choose an Option",
|
|
364
|
-
"constrainHeight": true
|
|
365
|
-
"options": [
|
|
366
|
-
{
|
|
367
|
-
"label": "Option 1",
|
|
368
|
-
"value": "option_1",
|
|
369
|
-
"id": "opt_1"
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"label": "Option 2",
|
|
373
|
-
"value": "option_2",
|
|
374
|
-
"id": "opt_2"
|
|
375
|
-
},
|
|
376
|
-
{
|
|
377
|
-
"label": "Option 3",
|
|
378
|
-
"value": "option_3",
|
|
379
|
-
"id": "opt_3"
|
|
380
|
-
},
|
|
381
|
-
{
|
|
382
|
-
"label": "Option 4",
|
|
383
|
-
"value": "option_4",
|
|
384
|
-
"id": "opt_4"
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
"label": "Option 5",
|
|
388
|
-
"value": "option_5",
|
|
389
|
-
"id": "opt_5"
|
|
390
|
-
},
|
|
391
|
-
{
|
|
392
|
-
"label": "Option 6",
|
|
393
|
-
"value": "option_6",
|
|
394
|
-
"id": "opt_6"
|
|
395
|
-
},
|
|
396
|
-
{
|
|
397
|
-
"label": "Option 7",
|
|
398
|
-
"value": "option_7",
|
|
399
|
-
"id": "opt_7"
|
|
400
|
-
},
|
|
401
|
-
{
|
|
402
|
-
"label": "Option 8",
|
|
403
|
-
"value": "option_8",
|
|
404
|
-
"id": "opt_8"
|
|
405
|
-
},
|
|
406
|
-
{
|
|
407
|
-
"label": "Option 9",
|
|
408
|
-
"value": "option_9",
|
|
409
|
-
"id": "opt_9"
|
|
410
|
-
},
|
|
411
|
-
{
|
|
412
|
-
"label": "Option 10",
|
|
413
|
-
"value": "option_10",
|
|
414
|
-
"id": "opt_10"
|
|
415
|
-
},
|
|
416
|
-
{
|
|
417
|
-
"label": "Option 11",
|
|
418
|
-
"value": "option_11",
|
|
419
|
-
"id": "opt_11"
|
|
420
|
-
},
|
|
421
|
-
{
|
|
422
|
-
"label": "Option 12",
|
|
423
|
-
"value": "option_12",
|
|
424
|
-
"id": "opt_12"
|
|
425
|
-
}
|
|
426
|
-
]
|
|
276
|
+
"constrainHeight": true
|
|
427
277
|
}
|
|
428
278
|
}
|
|
429
279
|
],
|
|
@@ -492,6 +342,11 @@
|
|
|
492
342
|
"message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
|
|
493
343
|
"type": "info"
|
|
494
344
|
},
|
|
345
|
+
"disabled_options_info": {
|
|
346
|
+
"presetName": "Disabled options",
|
|
347
|
+
"message": "Set disabled: true on individual option objects to keep them visible while preventing selection.",
|
|
348
|
+
"type": "info"
|
|
349
|
+
},
|
|
495
350
|
"subcomponent_structure_info": {
|
|
496
351
|
"message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
|
|
497
352
|
"type": "info"
|
|
@@ -502,33 +357,90 @@
|
|
|
502
357
|
"modes": {
|
|
503
358
|
"simple": {
|
|
504
359
|
"label": "Simple",
|
|
505
|
-
"template": "<Dropdown{{props}} />",
|
|
360
|
+
"template": "<Dropdown options={options}{{props}} />",
|
|
506
361
|
"children": ""
|
|
507
362
|
},
|
|
508
363
|
"subcomponents": {
|
|
509
364
|
"label": "With Subcomponents",
|
|
510
|
-
"template": "<Dropdown{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n
|
|
511
|
-
"children": ""
|
|
512
|
-
"props": {
|
|
513
|
-
"options": [
|
|
514
|
-
{
|
|
515
|
-
"label": "United States",
|
|
516
|
-
"value": "unitedStates",
|
|
517
|
-
"id": "us"
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
"label": "Canada",
|
|
521
|
-
"value": "canada",
|
|
522
|
-
"id": "ca"
|
|
523
|
-
},
|
|
524
|
-
{
|
|
525
|
-
"label": "Pakistan",
|
|
526
|
-
"value": "pakistan",
|
|
527
|
-
"id": "pk"
|
|
528
|
-
}
|
|
529
|
-
]
|
|
530
|
-
}
|
|
365
|
+
"template": "<Dropdown options={options}{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n {options.map((option) => (\n <Dropdown.Option key={option.id} option={option} />\n ))}\n </Dropdown.Container>\n</Dropdown>",
|
|
366
|
+
"children": ""
|
|
531
367
|
}
|
|
532
368
|
}
|
|
369
|
+
},
|
|
370
|
+
"customProps": {
|
|
371
|
+
"options": {
|
|
372
|
+
"type": "array",
|
|
373
|
+
"platforms": [
|
|
374
|
+
"react",
|
|
375
|
+
"rails"
|
|
376
|
+
],
|
|
377
|
+
"description": "Dropdown option data with label, value, id, and optional disabled state."
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
"requiredProps": {
|
|
381
|
+
"options": [
|
|
382
|
+
{
|
|
383
|
+
"label": "United States",
|
|
384
|
+
"value": "unitedStates",
|
|
385
|
+
"id": "us"
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"label": "Canada",
|
|
389
|
+
"value": "canada",
|
|
390
|
+
"id": "ca",
|
|
391
|
+
"disabled": true
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"label": "Pakistan",
|
|
395
|
+
"value": "pakistan",
|
|
396
|
+
"id": "pk"
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"label": "Mexico",
|
|
400
|
+
"value": "mexico",
|
|
401
|
+
"id": "mx",
|
|
402
|
+
"disabled": true
|
|
403
|
+
},
|
|
404
|
+
{
|
|
405
|
+
"label": "United Kingdom",
|
|
406
|
+
"value": "unitedKingdom",
|
|
407
|
+
"id": "gb"
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
"label": "India",
|
|
411
|
+
"value": "india",
|
|
412
|
+
"id": "in"
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"label": "Australia",
|
|
416
|
+
"value": "australia",
|
|
417
|
+
"id": "au"
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"label": "New Zealand",
|
|
421
|
+
"value": "newZealand",
|
|
422
|
+
"id": "nz"
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"label": "Italy",
|
|
426
|
+
"value": "italy",
|
|
427
|
+
"id": "it"
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"label": "Germany",
|
|
431
|
+
"value": "germany",
|
|
432
|
+
"id": "de"
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"label": "Brazil",
|
|
436
|
+
"value": "brazil",
|
|
437
|
+
"id": "br"
|
|
438
|
+
},
|
|
439
|
+
{
|
|
440
|
+
"label": "Philippines",
|
|
441
|
+
"value": "philippines",
|
|
442
|
+
"id": "ph"
|
|
443
|
+
}
|
|
444
|
+
]
|
|
533
445
|
}
|
|
534
446
|
}
|
|
@@ -4,23 +4,39 @@
|
|
|
4
4
|
"modes": {
|
|
5
5
|
"simple": {
|
|
6
6
|
"label": "Simple",
|
|
7
|
-
"template": "<Dropdown{{props}} />",
|
|
7
|
+
"template": "<Dropdown options={options}{{props}} />",
|
|
8
8
|
"children": ""
|
|
9
9
|
},
|
|
10
10
|
"subcomponents": {
|
|
11
11
|
"label": "With Subcomponents",
|
|
12
|
-
"template": "<Dropdown{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n
|
|
13
|
-
"children": ""
|
|
14
|
-
"props": {
|
|
15
|
-
"options": [
|
|
16
|
-
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
17
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
18
|
-
{ "label": "Pakistan", "value": "pakistan", "id": "pk" }
|
|
19
|
-
]
|
|
20
|
-
}
|
|
12
|
+
"template": "<Dropdown options={options}{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n {options.map((option) => (\n <Dropdown.Option key={option.id} option={option} />\n ))}\n </Dropdown.Container>\n</Dropdown>",
|
|
13
|
+
"children": ""
|
|
21
14
|
}
|
|
22
15
|
}
|
|
23
16
|
},
|
|
17
|
+
"customProps": {
|
|
18
|
+
"options": {
|
|
19
|
+
"type": "array",
|
|
20
|
+
"platforms": ["react", "rails"],
|
|
21
|
+
"description": "Dropdown option data with label, value, id, and optional disabled state."
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"requiredProps": {
|
|
25
|
+
"options": [
|
|
26
|
+
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
27
|
+
{ "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
|
|
28
|
+
{ "label": "Pakistan", "value": "pakistan", "id": "pk" },
|
|
29
|
+
{ "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
|
|
30
|
+
{ "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
|
|
31
|
+
{ "label": "India", "value": "india", "id": "in" },
|
|
32
|
+
{ "label": "Australia", "value": "australia", "id": "au" },
|
|
33
|
+
{ "label": "New Zealand", "value": "newZealand", "id": "nz" },
|
|
34
|
+
{ "label": "Italy", "value": "italy", "id": "it" },
|
|
35
|
+
{ "label": "Germany", "value": "germany", "id": "de" },
|
|
36
|
+
{ "label": "Brazil", "value": "brazil", "id": "br" },
|
|
37
|
+
{ "label": "Philippines", "value": "philippines", "id": "ph" }
|
|
38
|
+
]
|
|
39
|
+
},
|
|
24
40
|
"defaults": {
|
|
25
41
|
"autocomplete": false,
|
|
26
42
|
"blankSelection": "",
|
|
@@ -32,8 +48,17 @@
|
|
|
32
48
|
"multiSelect": false,
|
|
33
49
|
"options": [
|
|
34
50
|
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
35
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
36
|
-
{ "label": "Pakistan", "value": "pakistan", "id": "pk" }
|
|
51
|
+
{ "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
|
|
52
|
+
{ "label": "Pakistan", "value": "pakistan", "id": "pk" },
|
|
53
|
+
{ "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
|
|
54
|
+
{ "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
|
|
55
|
+
{ "label": "India", "value": "india", "id": "in" },
|
|
56
|
+
{ "label": "Australia", "value": "australia", "id": "au" },
|
|
57
|
+
{ "label": "New Zealand", "value": "newZealand", "id": "nz" },
|
|
58
|
+
{ "label": "Italy", "value": "italy", "id": "it" },
|
|
59
|
+
{ "label": "Germany", "value": "germany", "id": "de" },
|
|
60
|
+
{ "label": "Brazil", "value": "brazil", "id": "br" },
|
|
61
|
+
{ "label": "Philippines", "value": "philippines", "id": "ph" }
|
|
37
62
|
],
|
|
38
63
|
"placeholder": "Select a country",
|
|
39
64
|
"requiredIndicator": false,
|
|
@@ -80,7 +105,8 @@
|
|
|
80
105
|
"separators",
|
|
81
106
|
"formPillProps",
|
|
82
107
|
"activeStyle",
|
|
83
|
-
"dark"
|
|
108
|
+
"dark",
|
|
109
|
+
"disabled"
|
|
84
110
|
]
|
|
85
111
|
},
|
|
86
112
|
{
|
|
@@ -93,36 +119,28 @@
|
|
|
93
119
|
"name": "Default trigger",
|
|
94
120
|
"props": {
|
|
95
121
|
"variant": "default",
|
|
96
|
-
"placeholder": "Select a country"
|
|
97
|
-
"options": [
|
|
98
|
-
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
99
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
100
|
-
{ "label": "Mexico", "value": "mexico", "id": "mx" }
|
|
101
|
-
]
|
|
122
|
+
"placeholder": "Select a country"
|
|
102
123
|
}
|
|
103
124
|
},
|
|
104
125
|
{
|
|
105
126
|
"name": "With label",
|
|
106
127
|
"props": {
|
|
107
128
|
"label": "Select a Country",
|
|
108
|
-
"placeholder": "Choose a country"
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
129
|
+
"placeholder": "Choose a country"
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"name": "Disabled options",
|
|
134
|
+
"props": {
|
|
135
|
+
"label": "Select a Country",
|
|
136
|
+
"placeholder": "Choose a country"
|
|
114
137
|
}
|
|
115
138
|
},
|
|
116
139
|
{
|
|
117
140
|
"name": "Subtle Variant",
|
|
118
141
|
"props": {
|
|
119
142
|
"variant": "subtle",
|
|
120
|
-
"separators": false
|
|
121
|
-
"options": [
|
|
122
|
-
{ "label": "Alpha", "value": "alpha", "id": "a" },
|
|
123
|
-
{ "label": "Beta", "value": "beta", "id": "b" },
|
|
124
|
-
{ "label": "Gamma", "value": "gamma", "id": "g" }
|
|
125
|
-
]
|
|
143
|
+
"separators": false
|
|
126
144
|
}
|
|
127
145
|
},
|
|
128
146
|
{
|
|
@@ -183,13 +201,7 @@
|
|
|
183
201
|
"props": {
|
|
184
202
|
"variant": "default",
|
|
185
203
|
"multiSelect": true,
|
|
186
|
-
"placeholder": "Select
|
|
187
|
-
"options": [
|
|
188
|
-
{ "label": "North", "value": "north", "id": "n" },
|
|
189
|
-
{ "label": "South", "value": "south", "id": "s" },
|
|
190
|
-
{ "label": "East", "value": "east", "id": "e" },
|
|
191
|
-
{ "label": "West", "value": "west", "id": "w" }
|
|
192
|
-
]
|
|
204
|
+
"placeholder": "Select countries"
|
|
193
205
|
}
|
|
194
206
|
},
|
|
195
207
|
{
|
|
@@ -202,16 +214,6 @@
|
|
|
202
214
|
"defaultValue": [
|
|
203
215
|
{ "label": "United States", "value": "unitedStates" },
|
|
204
216
|
{ "label": "Italy", "value": "italy" }
|
|
205
|
-
],
|
|
206
|
-
"options": [
|
|
207
|
-
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
208
|
-
{ "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
|
|
209
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
210
|
-
{ "label": "Pakistan", "value": "pakistan", "id": "pk" },
|
|
211
|
-
{ "label": "India", "value": "india", "id": "in" },
|
|
212
|
-
{ "label": "Australia", "value": "australia", "id": "au" },
|
|
213
|
-
{ "label": "New Zealand", "value": "newZealand", "id": "nz" },
|
|
214
|
-
{ "label": "Italy", "value": "italy", "id": "it" }
|
|
215
217
|
]
|
|
216
218
|
}
|
|
217
219
|
},
|
|
@@ -221,11 +223,7 @@
|
|
|
221
223
|
"variant": "default",
|
|
222
224
|
"label": "Required field",
|
|
223
225
|
"placeholder": "Required field",
|
|
224
|
-
"error": "Please make a selection."
|
|
225
|
-
"options": [
|
|
226
|
-
{ "label": "Option A", "value": "a", "id": "a" },
|
|
227
|
-
{ "label": "Option B", "value": "b", "id": "b" }
|
|
228
|
-
]
|
|
226
|
+
"error": "Please make a selection."
|
|
229
227
|
}
|
|
230
228
|
},
|
|
231
229
|
{
|
|
@@ -233,33 +231,14 @@
|
|
|
233
231
|
"props": {
|
|
234
232
|
"variant": "default",
|
|
235
233
|
"autocomplete": true,
|
|
236
|
-
"placeholder": "Search
|
|
237
|
-
"options": [
|
|
238
|
-
{ "label": "Apple", "value": "apple", "id": "1" },
|
|
239
|
-
{ "label": "Apricot", "value": "apricot", "id": "2" },
|
|
240
|
-
{ "label": "Banana", "value": "banana", "id": "3" }
|
|
241
|
-
]
|
|
234
|
+
"placeholder": "Search..."
|
|
242
235
|
}
|
|
243
236
|
},
|
|
244
237
|
{
|
|
245
238
|
"name": "Constrained height",
|
|
246
239
|
"props": {
|
|
247
240
|
"label": "Choose an Option",
|
|
248
|
-
"constrainHeight": true
|
|
249
|
-
"options": [
|
|
250
|
-
{ "label": "Option 1", "value": "option_1", "id": "opt_1" },
|
|
251
|
-
{ "label": "Option 2", "value": "option_2", "id": "opt_2" },
|
|
252
|
-
{ "label": "Option 3", "value": "option_3", "id": "opt_3" },
|
|
253
|
-
{ "label": "Option 4", "value": "option_4", "id": "opt_4" },
|
|
254
|
-
{ "label": "Option 5", "value": "option_5", "id": "opt_5" },
|
|
255
|
-
{ "label": "Option 6", "value": "option_6", "id": "opt_6" },
|
|
256
|
-
{ "label": "Option 7", "value": "option_7", "id": "opt_7" },
|
|
257
|
-
{ "label": "Option 8", "value": "option_8", "id": "opt_8" },
|
|
258
|
-
{ "label": "Option 9", "value": "option_9", "id": "opt_9" },
|
|
259
|
-
{ "label": "Option 10", "value": "option_10", "id": "opt_10" },
|
|
260
|
-
{ "label": "Option 11", "value": "option_11", "id": "opt_11" },
|
|
261
|
-
{ "label": "Option 12", "value": "option_12", "id": "opt_12" }
|
|
262
|
-
]
|
|
241
|
+
"constrainHeight": true
|
|
263
242
|
}
|
|
264
243
|
}
|
|
265
244
|
],
|
|
@@ -302,6 +281,11 @@
|
|
|
302
281
|
"message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
|
|
303
282
|
"type": "info"
|
|
304
283
|
},
|
|
284
|
+
"disabled_options_info": {
|
|
285
|
+
"presetName": "Disabled options",
|
|
286
|
+
"message": "Set disabled: true on individual option objects to keep them visible while preventing selection.",
|
|
287
|
+
"type": "info"
|
|
288
|
+
},
|
|
305
289
|
"subcomponent_structure_info": {
|
|
306
290
|
"message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
|
|
307
291
|
"type": "info"
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<div id="file-upload-remove-replace">
|
|
2
|
+
<%= pb_rails("list", props: { id: "selected-files-list", margin_bottom: "sm" }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("file_upload", props: {
|
|
5
|
+
id: "remove_replace",
|
|
6
|
+
input_options: { multiple: true },
|
|
7
|
+
}) %>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<template id="file-list-item-template">
|
|
11
|
+
<%= pb_rails("list/item") do %>
|
|
12
|
+
<%= pb_rails("flex", props: { align: "center", justify: "between", width: "100%" }) do %>
|
|
13
|
+
<%= pb_rails("body", props: { data: { file_name: true } }) %>
|
|
14
|
+
<%= pb_rails("circle_icon_button", props: {
|
|
15
|
+
icon: "times",
|
|
16
|
+
variant: "secondary",
|
|
17
|
+
input_options: { classname: "remove-file-button" },
|
|
18
|
+
}) %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<%= javascript_tag defer: "defer" do %>
|
|
24
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
25
|
+
const fileInput = document.getElementById("upload-remove_replace")
|
|
26
|
+
const list = document.getElementById("selected-files-list")
|
|
27
|
+
const template = document.getElementById("file-list-item-template")
|
|
28
|
+
let files = []
|
|
29
|
+
|
|
30
|
+
if (!fileInput || !list || !template) return
|
|
31
|
+
|
|
32
|
+
function syncInput() {
|
|
33
|
+
const dataTransfer = new DataTransfer()
|
|
34
|
+
files.forEach((file) => dataTransfer.items.add(file))
|
|
35
|
+
fileInput.files = dataTransfer.files
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function render() {
|
|
39
|
+
list.innerHTML = ""
|
|
40
|
+
|
|
41
|
+
files.forEach((file, index) => {
|
|
42
|
+
const clone = template.content.cloneNode(true)
|
|
43
|
+
const nameElement = clone.querySelector("[data-file-name]")
|
|
44
|
+
const removeButton = clone.querySelector(".remove-file-button")
|
|
45
|
+
|
|
46
|
+
nameElement.textContent = file.name
|
|
47
|
+
removeButton.addEventListener("click", function (event) {
|
|
48
|
+
event.preventDefault()
|
|
49
|
+
event.stopPropagation()
|
|
50
|
+
files = files.filter((_, fileIndex) => fileIndex !== index)
|
|
51
|
+
syncInput()
|
|
52
|
+
render()
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
list.appendChild(clone)
|
|
56
|
+
})
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
fileInput.addEventListener("change", function () {
|
|
60
|
+
const newFiles = Array.from(fileInput.files)
|
|
61
|
+
files = [...files, ...newFiles]
|
|
62
|
+
syncInput()
|
|
63
|
+
render()
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
<% end %>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
|
|
4
|
+
import Body from '../../pb_body/_body'
|
|
5
|
+
import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
|
|
6
|
+
import FileUpload from '../../pb_file_upload/_file_upload'
|
|
7
|
+
import Flex from '../../pb_flex/_flex'
|
|
8
|
+
import List from '../../pb_list/_list'
|
|
9
|
+
import ListItem from '../../pb_list/_list_item'
|
|
10
|
+
|
|
11
|
+
const FileUploadRemoveReplace = (props) => {
|
|
12
|
+
const [filesToUpload, setFilesToUpload] = useState([])
|
|
13
|
+
|
|
14
|
+
const handleOnFilesAccepted = (files) => {
|
|
15
|
+
setFilesToUpload([...filesToUpload, ...files])
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const handleRemoveFile = (index) => {
|
|
19
|
+
setFilesToUpload(filesToUpload.filter((_, fileIndex) => fileIndex !== index))
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
{filesToUpload.length > 0 && (
|
|
25
|
+
<List marginBottom="sm">
|
|
26
|
+
{filesToUpload.map((file, index) => (
|
|
27
|
+
<ListItem key={`${file.name}-${index}`}>
|
|
28
|
+
<Flex
|
|
29
|
+
align="center"
|
|
30
|
+
justify="between"
|
|
31
|
+
width="100%"
|
|
32
|
+
>
|
|
33
|
+
<Body text={file.name} />
|
|
34
|
+
<CircleIconButton
|
|
35
|
+
aria={{ label: `Remove ${file.name}` }}
|
|
36
|
+
icon="times"
|
|
37
|
+
onClick={() => handleRemoveFile(index)}
|
|
38
|
+
variant="secondary"
|
|
39
|
+
/>
|
|
40
|
+
</Flex>
|
|
41
|
+
</ListItem>
|
|
42
|
+
))}
|
|
43
|
+
</List>
|
|
44
|
+
)}
|
|
45
|
+
<FileUpload
|
|
46
|
+
onFilesAccepted={handleOnFilesAccepted}
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export default FileUploadRemoveReplace
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The File Upload kit does not include built-in remove or replace behavior. Manage selected files in application state and compose the kit with other Playbook components.
|
|
2
|
+
|
|
3
|
+
**Remove** — Track accepted files in state and filter out the file to remove. In React, pair `List` with `CircleIconButton`. In Rails, listen for `change` on the file input, keep files in a JavaScript array, and use `DataTransfer` to sync the input when a file is removed.
|
|
4
|
+
|
|
5
|
+
**Replace** — Selecting a new file on the native Rails input replaces the current selection. For single-file React workflows, set state to the newly accepted files instead of appending: `setFilesToUpload(files)`.
|
|
@@ -4,6 +4,7 @@ examples:
|
|
|
4
4
|
- file_upload_default: File Upload
|
|
5
5
|
- file_upload_custom: Custom
|
|
6
6
|
- file_upload_error: Error
|
|
7
|
+
- file_upload_remove_replace: Remove and Replace
|
|
7
8
|
|
|
8
9
|
react:
|
|
9
10
|
- file_upload_default: Default List of files to upload
|
|
@@ -11,4 +12,5 @@ examples:
|
|
|
11
12
|
- file_upload_custom_message: Add a custom message
|
|
12
13
|
- file_upload_custom_description: Add your one accepted files description
|
|
13
14
|
- file_upload_max_size: Set a file size limit
|
|
14
|
-
- file_upload_error: Error
|
|
15
|
+
- file_upload_error: Error
|
|
16
|
+
- file_upload_remove_replace: Remove and Replace
|
|
@@ -4,3 +4,4 @@ export { default as FileUploadCustomMessage } from './_file_upload_custom_messag
|
|
|
4
4
|
export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
|
|
5
5
|
export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
|
|
6
6
|
export { default as FileUploadError } from './_file_upload_error.jsx'
|
|
7
|
+
export { default as FileUploadRemoveReplace } from './_file_upload_remove_replace.jsx'
|
|
@@ -90,7 +90,7 @@ const FullScreenTableAndFilter = (props) => {
|
|
|
90
90
|
double
|
|
91
91
|
maxHeight="50vh"
|
|
92
92
|
minWidth="xs"
|
|
93
|
-
popoverProps={{ width: "350px"
|
|
93
|
+
popoverProps={{ width: "350px" }}
|
|
94
94
|
results={50}
|
|
95
95
|
sortOptions={{
|
|
96
96
|
territory_id: "Territory ID",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Full Screen can host composed workflows such as a filter paired with a data table.
|
|
1
|
+
Full Screen can host composed workflows such as a filter paired with a data table. Filter and sort popovers automatically append to the fullscreen overlay; dropdown menus inside them portal above the overlay via the shared floating UI stack.
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
"template": "<Icon{{props}} />",
|
|
3
3
|
"propTargets": {},
|
|
4
4
|
"defaults": {
|
|
5
|
-
"border": false,
|
|
6
5
|
"fixedWidth": true,
|
|
7
6
|
"inverse": false,
|
|
8
7
|
"listItem": false,
|
|
@@ -122,11 +121,6 @@
|
|
|
122
121
|
"message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
|
|
123
122
|
"type": "info"
|
|
124
123
|
},
|
|
125
|
-
"bordered_pull": {
|
|
126
|
-
"presetName": "Bordered Pull",
|
|
127
|
-
"message": "border and pull can be combined for quote-style or floated icon treatments.",
|
|
128
|
-
"type": "info"
|
|
129
|
-
},
|
|
130
124
|
"primary_check": {
|
|
131
125
|
"presetName": "Primary Check",
|
|
132
126
|
"message": "Use the color prop to change the color of the icon.",
|
|
@@ -138,17 +132,9 @@
|
|
|
138
132
|
"type": "info"
|
|
139
133
|
}
|
|
140
134
|
},
|
|
141
|
-
"customProps": {
|
|
142
|
-
"border": {
|
|
143
|
-
"type": "boolean",
|
|
144
|
-
"platforms": [
|
|
145
|
-
"react"
|
|
146
|
-
],
|
|
147
|
-
"default": false
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
135
|
"hiddenProps": [
|
|
151
136
|
"customIcon",
|
|
152
|
-
"fontStyle"
|
|
137
|
+
"fontStyle",
|
|
138
|
+
"border"
|
|
153
139
|
]
|
|
154
140
|
}
|
|
@@ -4,16 +4,10 @@
|
|
|
4
4
|
"fixedWidth": true,
|
|
5
5
|
"fontStyle": "far"
|
|
6
6
|
},
|
|
7
|
-
"customProps": {
|
|
8
|
-
"border": {
|
|
9
|
-
"type": "boolean",
|
|
10
|
-
"platforms": ["react"],
|
|
11
|
-
"default": false
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
7
|
"hiddenProps": [
|
|
15
8
|
"customIcon",
|
|
16
|
-
"fontStyle"
|
|
9
|
+
"fontStyle",
|
|
10
|
+
"border"
|
|
17
11
|
],
|
|
18
12
|
"groups": [
|
|
19
13
|
{
|
|
@@ -110,11 +104,6 @@
|
|
|
110
104
|
"message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
|
|
111
105
|
"type": "info"
|
|
112
106
|
},
|
|
113
|
-
"bordered_pull": {
|
|
114
|
-
"presetName": "Bordered Pull",
|
|
115
|
-
"message": "border and pull can be combined for quote-style or floated icon treatments.",
|
|
116
|
-
"type": "info"
|
|
117
|
-
},
|
|
118
107
|
"primary_check": {
|
|
119
108
|
"presetName": "Primary Check",
|
|
120
109
|
"message": "Use the color prop to change the color of the icon.",
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.11.0.pre.rc.
|
|
4
|
+
version: 16.11.0.pre.rc.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-
|
|
12
|
+
date: 2026-07-08 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -129,6 +129,10 @@ files:
|
|
|
129
129
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
|
|
130
130
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
|
|
131
131
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
|
|
132
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both.jsx
|
|
133
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_react.md
|
|
134
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom.jsx
|
|
135
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_react.md
|
|
132
136
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb
|
|
133
137
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md
|
|
134
138
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md
|
|
@@ -1092,6 +1096,9 @@ files:
|
|
|
1092
1096
|
- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb
|
|
1093
1097
|
- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx
|
|
1094
1098
|
- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
|
|
1099
|
+
- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb
|
|
1100
|
+
- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx
|
|
1101
|
+
- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md
|
|
1095
1102
|
- app/pb_kits/playbook/pb_file_upload/docs/_playground.json
|
|
1096
1103
|
- app/pb_kits/playbook/pb_file_upload/docs/_playground.overrides.json
|
|
1097
1104
|
- app/pb_kits/playbook/pb_file_upload/docs/example.yml
|