playbook_ui_docs 15.6.0.pre.alpha.play265012910 → 15.6.0.pre.rc.0
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_table_props.html.erb +163 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +190 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +0 -31
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +4 -34
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +7 -16
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.md +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md +1 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -2
- metadata +2 -10
- data/app/pb_kits/playbook/pb_background/docs/_background_light.md +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +0 -180
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +0 -22
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +0 -42
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb +0 -30
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx +0 -37
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 828fd024c2950b857d0ff61e9aced530635e804cea10943f716aae842a061588
|
|
4
|
+
data.tar.gz: 6c1b739e7cac2a08139638f8c5215a8d88f90f96179218c23d8c899a1836ae44
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 505e690902c0dae8ae9fe2597ebb432daa2326010de9559048913b5714fdfdd23c1b9221a3c40cae285bd4baa675bd379850abaa2e1658a48447f29a8252feca
|
|
7
|
+
data.tar.gz: 5adae0c2447b01560e700be5cd1a3e9becea1df8faa306dd9b4c689ebafb53fd14e8f24f01bc64927085c509cd26cba562f715f6954604a1d2c46640a33e2690
|
|
@@ -29,5 +29,167 @@
|
|
|
29
29
|
label: "Graduated Students",
|
|
30
30
|
}
|
|
31
31
|
] %>
|
|
32
|
+
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
|
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
|
|
32
34
|
|
|
33
|
-
|
|
35
|
+
<% column_definitions_two = [
|
|
36
|
+
{
|
|
37
|
+
accessor: "year",
|
|
38
|
+
label: "Year",
|
|
39
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "Enrollment Data",
|
|
43
|
+
columns: [
|
|
44
|
+
{
|
|
45
|
+
accessor: "newEnrollments",
|
|
46
|
+
label: "New Enrollments",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
accessor: "scheduledMeetings",
|
|
50
|
+
label: "Scheduled Meetings",
|
|
51
|
+
},
|
|
52
|
+
],
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Performance Data",
|
|
56
|
+
columns: [
|
|
57
|
+
{
|
|
58
|
+
accessor: "attendanceRate",
|
|
59
|
+
label: "Attendance Rate",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
accessor: "completedClasses",
|
|
63
|
+
label: "Completed Classes",
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
accessor: "classCompletionRate",
|
|
67
|
+
label: "Class Completion Rate",
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
accessor: "graduatedStudents",
|
|
71
|
+
label: "Graduated Students",
|
|
72
|
+
},
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
] %>
|
|
76
|
+
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
|
|
77
|
+
<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
|
|
78
|
+
|
|
79
|
+
<% column_definitions_three = [
|
|
80
|
+
{
|
|
81
|
+
accessor: "year",
|
|
82
|
+
label: "Year",
|
|
83
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
label: "Enrollment Data",
|
|
87
|
+
columns: [
|
|
88
|
+
{
|
|
89
|
+
label: "Enrollment Stats",
|
|
90
|
+
columns: [
|
|
91
|
+
{
|
|
92
|
+
accessor: "newEnrollments",
|
|
93
|
+
label: "New Enrollments",
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
accessor: "scheduledMeetings",
|
|
97
|
+
label: "Scheduled Meetings",
|
|
98
|
+
},
|
|
99
|
+
],
|
|
100
|
+
},
|
|
101
|
+
],
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
label: "Performance Data",
|
|
105
|
+
columns: [
|
|
106
|
+
{
|
|
107
|
+
label: "Completion Metrics",
|
|
108
|
+
columns: [
|
|
109
|
+
{
|
|
110
|
+
accessor: "completedClasses",
|
|
111
|
+
label: "Completed Classes",
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
accessor: "classCompletionRate",
|
|
115
|
+
label: "Class Completion Rate",
|
|
116
|
+
},
|
|
117
|
+
],
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
label: "Attendance",
|
|
121
|
+
columns: [
|
|
122
|
+
{
|
|
123
|
+
accessor: "attendanceRate",
|
|
124
|
+
label: "Attendance Rate",
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
accessor: "scheduledMeetings",
|
|
128
|
+
label: "Scheduled Meetings",
|
|
129
|
+
},
|
|
130
|
+
],
|
|
131
|
+
},
|
|
132
|
+
],
|
|
133
|
+
},
|
|
134
|
+
] %>
|
|
135
|
+
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
|
|
136
|
+
<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
|
|
137
|
+
|
|
138
|
+
<% column_definitions_four = [
|
|
139
|
+
{
|
|
140
|
+
accessor: "year",
|
|
141
|
+
label: "Year",
|
|
142
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
label: "Enrollment Data",
|
|
146
|
+
columns: [
|
|
147
|
+
{
|
|
148
|
+
label: "Enrollment Stats",
|
|
149
|
+
columns: [
|
|
150
|
+
{
|
|
151
|
+
accessor: "newEnrollments",
|
|
152
|
+
label: "New Enrollments",
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
accessor: "scheduledMeetings",
|
|
156
|
+
label: "Scheduled Meetings",
|
|
157
|
+
},
|
|
158
|
+
],
|
|
159
|
+
},
|
|
160
|
+
],
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
label: "Performance Data",
|
|
164
|
+
columns: [
|
|
165
|
+
{
|
|
166
|
+
label: "Completion Metrics",
|
|
167
|
+
columns: [
|
|
168
|
+
{
|
|
169
|
+
accessor: "completedClasses",
|
|
170
|
+
label: "Completed Classes",
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
accessor: "classCompletionRate",
|
|
174
|
+
label: "Class Completion Rate",
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
label: "Attendance",
|
|
180
|
+
columns: [
|
|
181
|
+
{
|
|
182
|
+
accessor: "attendanceRate",
|
|
183
|
+
label: "Attendance Rate",
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
accessor: "scheduledMeetings",
|
|
187
|
+
label: "Scheduled Meetings",
|
|
188
|
+
},
|
|
189
|
+
],
|
|
190
|
+
},
|
|
191
|
+
],
|
|
192
|
+
},
|
|
193
|
+
] %>
|
|
194
|
+
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
|
|
195
|
+
<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
3
|
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
import Caption from "../../pb_caption/_caption"
|
|
4
5
|
|
|
5
6
|
const AdvancedTableTableProps = (props) => {
|
|
6
7
|
const columnDefinitions = [
|
|
@@ -40,14 +41,203 @@ const AdvancedTableTableProps = (props) => {
|
|
|
40
41
|
verticalBorder: true
|
|
41
42
|
}
|
|
42
43
|
|
|
44
|
+
const columnDefinitionsTwo = [
|
|
45
|
+
{
|
|
46
|
+
accessor: "year",
|
|
47
|
+
label: "Year",
|
|
48
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
label: "Enrollment Data",
|
|
52
|
+
columns: [
|
|
53
|
+
{
|
|
54
|
+
accessor: "newEnrollments",
|
|
55
|
+
label: "New Enrollments",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
accessor: "scheduledMeetings",
|
|
59
|
+
label: "Scheduled Meetings",
|
|
60
|
+
},
|
|
61
|
+
],
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
label: "Performance Data",
|
|
65
|
+
columns: [
|
|
66
|
+
{
|
|
67
|
+
accessor: "attendanceRate",
|
|
68
|
+
label: "Attendance Rate",
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
accessor: "completedClasses",
|
|
72
|
+
label: "Completed Classes",
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
accessor: "classCompletionRate",
|
|
76
|
+
label: "Class Completion Rate",
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
accessor: "graduatedStudents",
|
|
80
|
+
label: "Graduated Students",
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
];
|
|
85
|
+
|
|
86
|
+
const tablePropsTwo = {
|
|
87
|
+
verticalBorder: true,
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const columnDefinitionsThree = [
|
|
91
|
+
{
|
|
92
|
+
accessor: "year",
|
|
93
|
+
label: "Year",
|
|
94
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
label: "Enrollment Data",
|
|
98
|
+
columns: [
|
|
99
|
+
{
|
|
100
|
+
label: "Enrollment Stats",
|
|
101
|
+
columns: [
|
|
102
|
+
{
|
|
103
|
+
accessor: "newEnrollments",
|
|
104
|
+
label: "New Enrollments",
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
accessor: "scheduledMeetings",
|
|
108
|
+
label: "Scheduled Meetings",
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
],
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
label: "Performance Data",
|
|
116
|
+
columns: [
|
|
117
|
+
{
|
|
118
|
+
label: "Completion Metrics",
|
|
119
|
+
columns: [
|
|
120
|
+
{
|
|
121
|
+
accessor: "completedClasses",
|
|
122
|
+
label: "Completed Classes",
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
accessor: "classCompletionRate",
|
|
126
|
+
label: "Class Completion Rate",
|
|
127
|
+
},
|
|
128
|
+
],
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
label: "Attendance",
|
|
132
|
+
columns: [
|
|
133
|
+
{
|
|
134
|
+
accessor: "attendanceRate",
|
|
135
|
+
label: "Attendance Rate",
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
accessor: "scheduledMeetings",
|
|
139
|
+
label: "Scheduled Meetings",
|
|
140
|
+
},
|
|
141
|
+
],
|
|
142
|
+
},
|
|
143
|
+
],
|
|
144
|
+
},
|
|
145
|
+
];
|
|
146
|
+
|
|
147
|
+
const tablePropsThree = {
|
|
148
|
+
verticalBorder: true
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const columnDefinitionsFour = [
|
|
152
|
+
{
|
|
153
|
+
accessor: "year",
|
|
154
|
+
label: "Year",
|
|
155
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
label: "Enrollment Data",
|
|
159
|
+
columns: [
|
|
160
|
+
{
|
|
161
|
+
label: "Enrollment Stats",
|
|
162
|
+
columns: [
|
|
163
|
+
{
|
|
164
|
+
accessor: "newEnrollments",
|
|
165
|
+
label: "New Enrollments",
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
accessor: "scheduledMeetings",
|
|
169
|
+
label: "Scheduled Meetings",
|
|
170
|
+
},
|
|
171
|
+
],
|
|
172
|
+
},
|
|
173
|
+
],
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
label: "Performance Data",
|
|
177
|
+
columns: [
|
|
178
|
+
{
|
|
179
|
+
label: "Completion Metrics",
|
|
180
|
+
columns: [
|
|
181
|
+
{
|
|
182
|
+
accessor: "completedClasses",
|
|
183
|
+
label: "Completed Classes",
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
accessor: "classCompletionRate",
|
|
187
|
+
label: "Class Completion Rate",
|
|
188
|
+
},
|
|
189
|
+
],
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
label: "Attendance",
|
|
193
|
+
columns: [
|
|
194
|
+
{
|
|
195
|
+
accessor: "attendanceRate",
|
|
196
|
+
label: "Attendance Rate",
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
accessor: "scheduledMeetings",
|
|
200
|
+
label: "Scheduled Meetings",
|
|
201
|
+
},
|
|
202
|
+
],
|
|
203
|
+
},
|
|
204
|
+
],
|
|
205
|
+
},
|
|
206
|
+
];
|
|
207
|
+
|
|
43
208
|
return (
|
|
44
209
|
<div>
|
|
210
|
+
<Caption text="Advanced Table Vertical Border Table Props" />
|
|
45
211
|
<AdvancedTable
|
|
46
212
|
columnDefinitions={columnDefinitions}
|
|
213
|
+
marginBottom="md"
|
|
47
214
|
tableData={MOCK_DATA}
|
|
48
215
|
tableProps={tableProps}
|
|
49
216
|
{...props}
|
|
50
217
|
/>
|
|
218
|
+
<Caption text="Advanced Table Vertical Border Multi Header" />
|
|
219
|
+
<AdvancedTable
|
|
220
|
+
columnDefinitions={columnDefinitionsTwo}
|
|
221
|
+
marginBottom="md"
|
|
222
|
+
tableData={MOCK_DATA}
|
|
223
|
+
tableProps={tablePropsTwo}
|
|
224
|
+
{...props}
|
|
225
|
+
/>
|
|
226
|
+
<Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
|
|
227
|
+
<AdvancedTable
|
|
228
|
+
columnDefinitions={columnDefinitionsThree}
|
|
229
|
+
columnGroupBorderColor="text_lt_default"
|
|
230
|
+
marginBottom="md"
|
|
231
|
+
tableData={MOCK_DATA}
|
|
232
|
+
tableProps={tablePropsThree}
|
|
233
|
+
{...props}
|
|
234
|
+
/>
|
|
235
|
+
<Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
|
|
236
|
+
<AdvancedTable
|
|
237
|
+
columnDefinitions={columnDefinitionsFour}
|
|
238
|
+
tableData={MOCK_DATA}
|
|
239
|
+
{...props}
|
|
240
|
+
/>
|
|
51
241
|
</div>
|
|
52
242
|
)
|
|
53
243
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
|
-
- background_light:
|
|
4
|
+
- background_light: Light
|
|
5
5
|
- background_white: White
|
|
6
6
|
- background_gradient: Gradient
|
|
7
7
|
- background_image: Image
|
|
@@ -11,7 +11,7 @@ examples:
|
|
|
11
11
|
- background_size: Size
|
|
12
12
|
|
|
13
13
|
react:
|
|
14
|
-
- background_light:
|
|
14
|
+
- background_light: Light
|
|
15
15
|
- background_white: White
|
|
16
16
|
- background_gradient: Gradient
|
|
17
17
|
- background_image: Image
|
|
@@ -1,24 +1,3 @@
|
|
|
1
|
-
<%
|
|
2
|
-
options = [
|
|
3
|
-
{
|
|
4
|
-
label: "United States",
|
|
5
|
-
value: "unitedStates",
|
|
6
|
-
id: "us"
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
label: "United Kingdom",
|
|
10
|
-
value: "unitedKingdom",
|
|
11
|
-
id: "gb"
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
label: "Pakistan",
|
|
15
|
-
value: "pakistan",
|
|
16
|
-
id: "pk"
|
|
17
|
-
}
|
|
18
|
-
]
|
|
19
|
-
%>
|
|
20
|
-
|
|
21
|
-
|
|
22
1
|
<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
|
|
23
2
|
|
|
24
3
|
<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
|
|
@@ -31,16 +10,6 @@
|
|
|
31
10
|
<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
|
|
32
11
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
33
12
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
34
|
-
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
|
35
|
-
<%= pb_rails("typeahead", props: {
|
|
36
|
-
id: "typeahead-default",
|
|
37
|
-
placeholder: "Select one...",
|
|
38
|
-
options: options,
|
|
39
|
-
name: :foo,
|
|
40
|
-
margin_top: "sm",
|
|
41
|
-
is_multi: false
|
|
42
|
-
})
|
|
43
|
-
%>
|
|
44
13
|
|
|
45
14
|
<% end %>
|
|
46
15
|
<%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
|
|
@@ -5,12 +5,11 @@ examples:
|
|
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
|
7
7
|
- draggable_with_table: Draggable with Table
|
|
8
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
8
9
|
- draggable_drop_zones: Draggable Drop Zones
|
|
9
10
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
|
10
11
|
- draggable_drop_zones_line: Draggable Drop Zones Line
|
|
11
12
|
- draggable_event_listeners: Draggable Event Listeners
|
|
12
|
-
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
13
|
-
- draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
|
|
14
13
|
|
|
15
14
|
rails:
|
|
16
15
|
- draggable_default: Default
|
|
@@ -18,8 +17,8 @@ examples:
|
|
|
18
17
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
19
18
|
- draggable_with_cards: Draggable with Cards
|
|
20
19
|
- draggable_with_table: Draggable with Table
|
|
20
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
21
21
|
- draggable_drop_zones: Draggable Drop Zones
|
|
22
22
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
|
23
23
|
- draggable_drop_zones_line: Draggable Drop Zones Line
|
|
24
24
|
- draggable_event_listeners: Draggable Event Listeners
|
|
25
|
-
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
@@ -7,5 +7,4 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
|
|
|
7
7
|
export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
|
|
8
8
|
export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
|
|
9
9
|
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
|
10
|
-
export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
|
|
11
|
-
export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'
|
|
10
|
+
export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
|
|
2
2
|
export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
|
|
3
3
|
export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
|
|
4
|
-
export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
CHANGED
|
@@ -1,42 +1,12 @@
|
|
|
1
1
|
<form id="example-form-validation" action="" method="get">
|
|
2
|
-
<%= pb_rails("phone_number_input", props: {
|
|
3
|
-
id: "validation",
|
|
4
|
-
initial_country: "af",
|
|
5
|
-
value: "",
|
|
6
|
-
required: true
|
|
7
|
-
}) %>
|
|
2
|
+
<%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
|
|
8
3
|
<%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
|
|
9
4
|
</form>
|
|
10
5
|
|
|
11
6
|
<%= javascript_tag do %>
|
|
12
7
|
document.addEventListener('DOMContentLoaded', function () {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
function waitForComponent() {
|
|
17
|
-
const phoneInput = form.querySelector('#validation');
|
|
18
|
-
|
|
19
|
-
if (!phoneInput) {
|
|
20
|
-
setTimeout(waitForComponent, 100);
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Wait for intl-tel-input to initialize, then focus and blur to trigger validation
|
|
25
|
-
setTimeout(function() {
|
|
26
|
-
phoneInput.focus({ preventScroll: true });
|
|
27
|
-
setTimeout(function() {
|
|
28
|
-
phoneInput.blur();
|
|
29
|
-
}, 100);
|
|
30
|
-
}, 500);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
waitForComponent();
|
|
34
|
-
|
|
35
|
-
// Prevent form submission if there are validation errors
|
|
36
|
-
form.addEventListener('submit', function (e) {
|
|
37
|
-
if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
|
|
38
|
-
e.preventDefault();
|
|
39
|
-
}
|
|
40
|
-
});
|
|
8
|
+
document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
|
|
9
|
+
if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
|
|
10
|
+
})
|
|
41
11
|
})
|
|
42
12
|
<% end %>
|
|
@@ -10,19 +10,8 @@ const PhoneNumberInputValidation = (props) => {
|
|
|
10
10
|
const [showFormErrors, setShowFormErrors] = useState(false);
|
|
11
11
|
const [phoneNumber, setPhoneNumber] = useState("");
|
|
12
12
|
const [countryCode, setCountryCode] = useState("af");
|
|
13
|
-
const [isValid, setIsValid] = useState(false);
|
|
14
|
-
const [hasInteracted, setHasInteracted] = useState(false);
|
|
15
|
-
|
|
16
|
-
// Start with initial error - will be cleared on blur if valid
|
|
17
|
-
const initialError = (
|
|
18
|
-
<>
|
|
19
|
-
<Icon icon="warning" /> Missing phone number.
|
|
20
|
-
</>
|
|
21
|
-
);
|
|
22
13
|
|
|
23
14
|
const handleOnValidate = (valid) => {
|
|
24
|
-
setIsValid(valid);
|
|
25
|
-
setHasInteracted(true);
|
|
26
15
|
setFormErrors(
|
|
27
16
|
valid ? "" : "Please correct the fields below and try again."
|
|
28
17
|
);
|
|
@@ -34,16 +23,18 @@ const PhoneNumberInputValidation = (props) => {
|
|
|
34
23
|
};
|
|
35
24
|
|
|
36
25
|
const handleOnSubmit = (e) => {
|
|
37
|
-
if (
|
|
26
|
+
if (showFormErrors) e.preventDefault()
|
|
38
27
|
}
|
|
39
28
|
|
|
40
29
|
useEffect(() => {
|
|
41
30
|
setShowFormErrors(formErrors.length > 0);
|
|
42
31
|
}, [formErrors]);
|
|
43
32
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
33
|
+
const error = (
|
|
34
|
+
<>
|
|
35
|
+
<Icon icon="warning" /> Missing phone number.
|
|
36
|
+
</>
|
|
37
|
+
)
|
|
47
38
|
|
|
48
39
|
return (
|
|
49
40
|
<form
|
|
@@ -59,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
|
|
|
59
50
|
/>
|
|
60
51
|
)}
|
|
61
52
|
<PhoneNumberInput
|
|
62
|
-
error={
|
|
53
|
+
error={error}
|
|
63
54
|
id="validation"
|
|
64
55
|
initialCountry={countryCode}
|
|
65
56
|
onChange={handleOnChange}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Error shows that the radio option must be selected or is invalid (
|
|
1
|
+
Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Select w/ Error shows that
|
|
1
|
+
Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Text Input w/ Error shows that the
|
|
1
|
+
Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Textarea w/ Error shows that the
|
|
1
|
+
Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
|
|
@@ -5,7 +5,6 @@ examples:
|
|
|
5
5
|
- typeahead_default_options: With Default Options
|
|
6
6
|
- typeahead_with_context: With Context
|
|
7
7
|
- typeahead_with_pills: With Pills
|
|
8
|
-
- typeahead_input_display: Input Display
|
|
9
8
|
- typeahead_without_pills: Without Pills (Single Select)
|
|
10
9
|
- typeahead_with_pills_async: With Pills (Async Data)
|
|
11
10
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
|
@@ -27,7 +26,6 @@ examples:
|
|
|
27
26
|
- typeahead_react_hook: React Hook
|
|
28
27
|
- typeahead_with_highlight: With Highlight
|
|
29
28
|
- typeahead_with_pills: With Pills
|
|
30
|
-
- typeahead_input_display: Input Display
|
|
31
29
|
- typeahead_with_pills_async: With Pills (Async Data)
|
|
32
30
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
|
33
31
|
- typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
|
|
@@ -17,5 +17,4 @@ 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
19
|
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|
|
20
|
-
export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
|
|
21
|
-
export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'
|
|
20
|
+
export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
|
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: 15.6.0.pre.
|
|
4
|
+
version: 15.6.0.pre.rc.0
|
|
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: 2025-
|
|
12
|
+
date: 2025-11-24 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -220,7 +220,6 @@ files:
|
|
|
220
220
|
- app/pb_kits/playbook/pb_background/docs/_background_image.md
|
|
221
221
|
- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
|
|
222
222
|
- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
|
|
223
|
-
- app/pb_kits/playbook/pb_background/docs/_background_light.md
|
|
224
223
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
|
|
225
224
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
|
|
226
225
|
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
|
@@ -856,8 +855,6 @@ files:
|
|
|
856
855
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
|
|
857
856
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
|
858
857
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
|
859
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
|
|
860
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md
|
|
861
858
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
|
|
862
859
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
|
|
863
860
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
|
|
@@ -1527,8 +1524,6 @@ files:
|
|
|
1527
1524
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
|
1528
1525
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
|
1529
1526
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
|
|
1530
|
-
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
|
|
1531
|
-
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
|
|
1532
1527
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
|
1533
1528
|
- app/pb_kits/playbook/pb_multiple_users/docs/index.js
|
|
1534
1529
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md
|
|
@@ -2579,9 +2574,6 @@ files:
|
|
|
2579
2574
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
|
|
2580
2575
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
|
|
2581
2576
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
|
|
2582
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb
|
|
2583
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx
|
|
2584
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md
|
|
2585
2577
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
|
|
2586
2578
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
|
2587
2579
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
By default, the Background kit sets background color to 'light' as seen here.
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
|
|
3
|
-
import Flex from '../../pb_flex/_flex'
|
|
4
|
-
import Draggable from '../../pb_draggable/_draggable'
|
|
5
|
-
import { DraggableProvider } from '../../pb_draggable/context'
|
|
6
|
-
import Badge from '../../pb_badge/_badge'
|
|
7
|
-
import Title from '../../pb_title/_title'
|
|
8
|
-
import Caption from '../../pb_caption/_caption'
|
|
9
|
-
import Card from '../../pb_card/_card'
|
|
10
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
|
11
|
-
import Avatar from '../../pb_avatar/_avatar'
|
|
12
|
-
import Body from '../../pb_body/_body'
|
|
13
|
-
|
|
14
|
-
// Initial groups to drag between
|
|
15
|
-
const containers = ["To Do", "In Progress", "Done"];
|
|
16
|
-
|
|
17
|
-
// Initial items to be dragged
|
|
18
|
-
const data = [
|
|
19
|
-
{
|
|
20
|
-
id: "11",
|
|
21
|
-
container: "To Do",
|
|
22
|
-
title: "Task 1",
|
|
23
|
-
description: "Bug fixes",
|
|
24
|
-
assignee_name: "Terry Miles",
|
|
25
|
-
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
id: "12",
|
|
29
|
-
container: "To Do",
|
|
30
|
-
title: "Task 2",
|
|
31
|
-
description: "Documentation",
|
|
32
|
-
assignee_name: "Sophia Miles",
|
|
33
|
-
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
id: "13",
|
|
37
|
-
container: "In Progress",
|
|
38
|
-
title: "Task 3",
|
|
39
|
-
description: "Add a variant",
|
|
40
|
-
assignee_name: "Alice Jones",
|
|
41
|
-
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
id: "14",
|
|
45
|
-
container: "To Do",
|
|
46
|
-
title: "Task 4",
|
|
47
|
-
description: "Add jest tests",
|
|
48
|
-
assignee_name: "Mike James",
|
|
49
|
-
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
id: "15",
|
|
53
|
-
container: "Done",
|
|
54
|
-
title: "Task 5",
|
|
55
|
-
description: "Alpha testing",
|
|
56
|
-
assignee_name: "James Guy",
|
|
57
|
-
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
id: "16",
|
|
61
|
-
container: "In Progress",
|
|
62
|
-
title: "Task 6",
|
|
63
|
-
description: "Release",
|
|
64
|
-
assignee_name: "Sally Jones",
|
|
65
|
-
assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
|
|
66
|
-
},
|
|
67
|
-
];
|
|
68
|
-
|
|
69
|
-
const DraggableMultipleContainersDropzone = (props) => {
|
|
70
|
-
const [initialState, setInitialState] = useState(data);
|
|
71
|
-
|
|
72
|
-
const badgeProperties = (container) => {
|
|
73
|
-
switch (container) {
|
|
74
|
-
case "To Do":
|
|
75
|
-
return { text: "queue", color: "warning" };
|
|
76
|
-
case "In Progress":
|
|
77
|
-
return { text: "progress", color: "primary" };
|
|
78
|
-
default:
|
|
79
|
-
return { text: "done", color: "success" };
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
return (
|
|
84
|
-
<DraggableProvider
|
|
85
|
-
dropZone={{type: "outline"}}
|
|
86
|
-
enableCrossContainerPreview
|
|
87
|
-
initialItems={data}
|
|
88
|
-
onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
|
|
89
|
-
console.log(`Dragged Item ID: ${draggedItemId}`);
|
|
90
|
-
console.log(`Final Container: ${finalContainer}`);
|
|
91
|
-
console.log(`Original Container: ${originalContainer}`);
|
|
92
|
-
console.log('Item Above:', itemAbove);
|
|
93
|
-
console.log('Item Below:', itemBelow);
|
|
94
|
-
}}
|
|
95
|
-
onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
|
|
96
|
-
console.log(`Dragged Item ID: ${draggedItemId}`);
|
|
97
|
-
console.log(`Dropped Container: ${droppedContainer}`);
|
|
98
|
-
console.log(`Original Container: ${originalContainer}`);
|
|
99
|
-
console.log('Dropped Item:', item);
|
|
100
|
-
console.log('Item Above:', itemAbove);
|
|
101
|
-
console.log('Item Below:', itemBelow);
|
|
102
|
-
}}
|
|
103
|
-
onReorder={(items) => setInitialState(items)}
|
|
104
|
-
>
|
|
105
|
-
<Flex
|
|
106
|
-
justifyContent="center"
|
|
107
|
-
{...props}
|
|
108
|
-
>
|
|
109
|
-
{containers?.map((container) => (
|
|
110
|
-
<Draggable.Container
|
|
111
|
-
container={container}
|
|
112
|
-
htmlOptions={{style:{ width: "200px", height: "70vh"}}}
|
|
113
|
-
key={container}
|
|
114
|
-
padding="sm"
|
|
115
|
-
>
|
|
116
|
-
<Caption textAlign="center">{container}</Caption>
|
|
117
|
-
<Flex
|
|
118
|
-
alignItems="stretch"
|
|
119
|
-
gap="sm"
|
|
120
|
-
orientation="column"
|
|
121
|
-
>
|
|
122
|
-
{initialState
|
|
123
|
-
.filter((item) => item.container === container)
|
|
124
|
-
.map(
|
|
125
|
-
({
|
|
126
|
-
assignee_img,
|
|
127
|
-
assignee_name,
|
|
128
|
-
description,
|
|
129
|
-
id,
|
|
130
|
-
title,
|
|
131
|
-
}) => (
|
|
132
|
-
<Draggable.Item
|
|
133
|
-
container={container}
|
|
134
|
-
dragId={id}
|
|
135
|
-
key={id}
|
|
136
|
-
>
|
|
137
|
-
<Card
|
|
138
|
-
padding="sm"
|
|
139
|
-
{...props}
|
|
140
|
-
>
|
|
141
|
-
<Flex justify="between">
|
|
142
|
-
<FlexItem>
|
|
143
|
-
<Flex>
|
|
144
|
-
<Avatar
|
|
145
|
-
imageUrl={assignee_img}
|
|
146
|
-
name={assignee_name}
|
|
147
|
-
size="xxs"
|
|
148
|
-
/>
|
|
149
|
-
<Title paddingLeft="xs"
|
|
150
|
-
size={4}
|
|
151
|
-
text={title}
|
|
152
|
-
{...props}
|
|
153
|
-
/>
|
|
154
|
-
</Flex>
|
|
155
|
-
</FlexItem>
|
|
156
|
-
<Badge
|
|
157
|
-
marginLeft="sm"
|
|
158
|
-
rounded
|
|
159
|
-
text={badgeProperties(container).text}
|
|
160
|
-
variant={badgeProperties(container).color}
|
|
161
|
-
{...props}
|
|
162
|
-
/>
|
|
163
|
-
</Flex>
|
|
164
|
-
<Body paddingTop="xs"
|
|
165
|
-
text={description}
|
|
166
|
-
{...props}
|
|
167
|
-
/>
|
|
168
|
-
</Card>
|
|
169
|
-
</Draggable.Item>
|
|
170
|
-
)
|
|
171
|
-
)}
|
|
172
|
-
</Flex>
|
|
173
|
-
</Draggable.Container>
|
|
174
|
-
))}
|
|
175
|
-
</Flex>
|
|
176
|
-
</DraggableProvider>
|
|
177
|
-
);
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
export default DraggableMultipleContainersDropzone;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
The multiple container functionality also supports customized dropzone styling as shown here.
|
|
2
|
-
|
|
3
|
-
In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging.
|
|
4
|
-
|
|
5
|
-
With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
|
|
6
|
-
|
|
7
|
-
The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
|
|
8
|
-
|
|
9
|
-
- `draggedItemId` - The ID of the item that was dragged
|
|
10
|
-
- `droppedContainer` - The container where the item was dropped
|
|
11
|
-
- `originalContainer` - The container where the drag started
|
|
12
|
-
- `item` - The complete item object with all properties (including the updated container)
|
|
13
|
-
- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
|
|
14
|
-
- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
|
|
15
|
-
|
|
16
|
-
The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
|
|
17
|
-
|
|
18
|
-
- `draggedItemId` - The ID of the item that was dragged
|
|
19
|
-
- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
|
|
20
|
-
- `originalContainer` - The container where the drag started
|
|
21
|
-
- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
|
|
22
|
-
- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import MultipleUsers from '../../pb_multiple_users/_multiple_users'
|
|
3
|
-
|
|
4
|
-
const MultipleUsersWithTooltip = (props) => {
|
|
5
|
-
return (
|
|
6
|
-
<div>
|
|
7
|
-
<MultipleUsers
|
|
8
|
-
users={[
|
|
9
|
-
{
|
|
10
|
-
name: 'Patrick Welch',
|
|
11
|
-
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
|
|
12
|
-
tooltip: "Patrick Welch - Online"
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
name: 'Lucille Sanchez',
|
|
16
|
-
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
|
|
17
|
-
tooltip: "Lucille Sanchez - Offline"
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
name: 'Beverly Reyes',
|
|
21
|
-
imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
|
|
22
|
-
tooltip: "Beverly Reyes - Online"
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: 'Keith Craig',
|
|
26
|
-
imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
|
|
27
|
-
tooltip: "Keith Craig - Away"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
name: 'Alicia Cooper',
|
|
31
|
-
imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
|
|
32
|
-
tooltip: "Alicia Cooper - Busy"
|
|
33
|
-
},
|
|
34
|
-
]}
|
|
35
|
-
withTooltip
|
|
36
|
-
{...props}
|
|
37
|
-
/>
|
|
38
|
-
</div>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
``
|
|
42
|
-
export default MultipleUsersWithTooltip
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
options = [
|
|
3
|
-
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
-
{ label: 'Red', value: '#FF0000' },
|
|
5
|
-
{ label: 'Green', value: '#00FF00' },
|
|
6
|
-
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
-
{ label: 'Yellow', value: '#FFFF00' },
|
|
8
|
-
{ label: 'Purple', value: '#800080' },
|
|
9
|
-
{ label: 'Cyan', value: '#00FFFF' },
|
|
10
|
-
{ label: 'Magenta', value: '#FF00FF' }
|
|
11
|
-
]
|
|
12
|
-
%>
|
|
13
|
-
|
|
14
|
-
<%= pb_rails("typeahead", props: {
|
|
15
|
-
id: "typeahead-input-display-none",
|
|
16
|
-
label: "With Input Display None",
|
|
17
|
-
options: options,
|
|
18
|
-
name: :foo,
|
|
19
|
-
input_display: "none",
|
|
20
|
-
})
|
|
21
|
-
%>
|
|
22
|
-
<br/>
|
|
23
|
-
<%= pb_rails("typeahead", props: {
|
|
24
|
-
id: "typeahead-input-display-pills",
|
|
25
|
-
label: "With Input Display Pills (Default)",
|
|
26
|
-
options: options,
|
|
27
|
-
name: :foo,
|
|
28
|
-
pills: true,
|
|
29
|
-
})
|
|
30
|
-
%>
|
|
@@ -1,37 +0,0 @@
|
|
|
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: '#00FF00' },
|
|
9
|
-
{ label: 'Blue', value: '#0000FF' },
|
|
10
|
-
{ label: 'Yellow', value: '#FFFF00' },
|
|
11
|
-
{ label: 'Purple', value: '#800080' },
|
|
12
|
-
{ label: 'Cyan', value: '#00FFFF' },
|
|
13
|
-
{ label: 'Magenta', value: '#FF00FF' }
|
|
14
|
-
]
|
|
15
|
-
|
|
16
|
-
const TypeaheadInputDisplay = (props) => {
|
|
17
|
-
return (
|
|
18
|
-
<>
|
|
19
|
-
<Typeahead
|
|
20
|
-
inputDisplay="none"
|
|
21
|
-
isMulti
|
|
22
|
-
label="With Input Display None"
|
|
23
|
-
options={options}
|
|
24
|
-
{...props}
|
|
25
|
-
/>
|
|
26
|
-
<br/>
|
|
27
|
-
<Typeahead
|
|
28
|
-
isMulti
|
|
29
|
-
label="With Input Display Pills (Default)"
|
|
30
|
-
options={options}
|
|
31
|
-
{...props}
|
|
32
|
-
/>
|
|
33
|
-
</>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export default TypeaheadInputDisplay
|