playbook_ui_docs 14.18.0.pre.alpha.PLAY20397473 β 14.18.0.pre.alpha.dropdownautocomplete7493
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_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx β _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/dist/playbook-doc.js +1 -1
- metadata +15 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0ec07c6bfcd36226929cb0ee3f120e6f9b48b8d2374f6adf555b1cc645ed9bfd
|
|
4
|
+
data.tar.gz: 374ec7a1bca3a25c8f64e14bfe45b5350cea293d7656df5ed6d69d86d0053a9c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 70e5879e6a40ac29df0c935a5748ae3f03ebd85833128e32f5a0e6db561b19211316ecd16cc8e07b3873f7e221b51a0e235941f07c56cddf058d3f2447890674
|
|
7
|
+
data.tar.gz: cb448b898bfae20d42c8b9013ce05b131c2b0a258e22daead8380120e04b65f48b1cf97d3eb1d8b397ee9e182c348254275e4577a28a4e73d4f9f3146764beee
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableColumnBorderColors = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
label: "Enrollment Data",
|
|
14
|
+
columns: [
|
|
15
|
+
{
|
|
16
|
+
label: "Enrollment Stats",
|
|
17
|
+
columns: [
|
|
18
|
+
{
|
|
19
|
+
accessor: "newEnrollments",
|
|
20
|
+
label: "New Enrollments",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "scheduledMeetings",
|
|
24
|
+
label: "Scheduled Meetings",
|
|
25
|
+
},
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
],
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "Performance Data",
|
|
32
|
+
columns: [
|
|
33
|
+
{
|
|
34
|
+
label: "Completion Metrics",
|
|
35
|
+
columns: [
|
|
36
|
+
{
|
|
37
|
+
accessor: "completedClasses",
|
|
38
|
+
label: "Completed Classes",
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
accessor: "classCompletionRate",
|
|
42
|
+
label: "Class Completion Rate",
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Attendance",
|
|
48
|
+
columns: [
|
|
49
|
+
{
|
|
50
|
+
accessor: "attendanceRate",
|
|
51
|
+
label: "Attendance Rate",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
accessor: "scheduledMeetings",
|
|
55
|
+
label: "Scheduled Meetings",
|
|
56
|
+
},
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
},
|
|
61
|
+
];
|
|
62
|
+
|
|
63
|
+
const tableProps = {
|
|
64
|
+
verticalBorder: true
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return (
|
|
68
|
+
<>
|
|
69
|
+
<AdvancedTable
|
|
70
|
+
columnDefinitions={columnDefinitions}
|
|
71
|
+
columnGroupBorderColor="text_lt_default"
|
|
72
|
+
tableData={MOCK_DATA}
|
|
73
|
+
tableProps={tableProps}
|
|
74
|
+
{...props}
|
|
75
|
+
/>
|
|
76
|
+
</>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export default AdvancedTableColumnBorderColors
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop. In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
|
|
2
|
+
|
|
3
|
+
The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<% column_definitions = [
|
|
2
|
+
{
|
|
3
|
+
accessor: "year",
|
|
4
|
+
label: "Year",
|
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
label: "Enrollment Data",
|
|
9
|
+
columns: [
|
|
10
|
+
{
|
|
11
|
+
label: "Enrollment Stats",
|
|
12
|
+
columns: [
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
accessor: "scheduledMeetings",
|
|
19
|
+
label: "Scheduled Meetings",
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
],
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
label: "Performance Data",
|
|
27
|
+
columns: [
|
|
28
|
+
{
|
|
29
|
+
label: "Completion Metrics",
|
|
30
|
+
columns: [
|
|
31
|
+
{
|
|
32
|
+
accessor: "completedClasses",
|
|
33
|
+
label: "Completed Classes",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
accessor: "classCompletionRate",
|
|
37
|
+
label: "Class Completion Rate",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "Attendance",
|
|
43
|
+
columns: [
|
|
44
|
+
{
|
|
45
|
+
accessor: "attendanceRate",
|
|
46
|
+
label: "Attendance Rate",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
accessor: "scheduledMeetings",
|
|
50
|
+
label: "Scheduled Meetings",
|
|
51
|
+
},
|
|
52
|
+
],
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
] %>
|
|
57
|
+
|
|
58
|
+
<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
|
|
2
|
+
|
|
3
|
+
The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
|
|
@@ -12,10 +12,10 @@ examples:
|
|
|
12
12
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
|
13
13
|
- advanced_table_column_headers: Multi-Header Columns
|
|
14
14
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
|
15
|
+
- advanced_table_column_border_color_rails: Column Group Border Color
|
|
15
16
|
- advanced_table_selectable_rows_rails: Selectable Rows
|
|
16
17
|
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
|
17
18
|
|
|
18
|
-
|
|
19
19
|
react:
|
|
20
20
|
- advanced_table_default: Default (Required Props)
|
|
21
21
|
- advanced_table_loading: Loading State
|
|
@@ -39,10 +39,11 @@ examples:
|
|
|
39
39
|
- advanced_table_column_headers: Multi-Header Columns
|
|
40
40
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
|
41
41
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
|
42
|
+
- advanced_table_column_border_color: Column Group Border Color
|
|
42
43
|
# - advanced_table_no_subrows: Table with No Subrows
|
|
43
44
|
- advanced_table_selectable_rows: Selectable Rows
|
|
44
45
|
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
|
45
46
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
|
46
47
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
|
47
48
|
- advanced_table_inline_editing: Inline Cell Editing
|
|
48
|
-
- advanced_table_fullscreen: Fullscreen
|
|
49
|
+
- advanced_table_fullscreen: Fullscreen
|
|
@@ -26,4 +26,5 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
|
|
|
26
26
|
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
|
27
27
|
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
|
28
28
|
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
|
29
|
-
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
|
29
|
+
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
|
30
|
+
export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= pb_rails("date_picker", props: {
|
|
2
|
-
error: "Invalid date. Please pick a valid date.",
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
|
2
|
+
error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
|
|
3
3
|
picker_id: "date-picker-error"
|
|
4
4
|
}) %>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%
|
|
1
|
+
<%
|
|
2
2
|
options = [
|
|
3
3
|
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
4
|
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
@@ -6,4 +6,7 @@
|
|
|
6
6
|
]
|
|
7
7
|
%>
|
|
8
8
|
|
|
9
|
-
<%= pb_rails("dropdown", props: {
|
|
9
|
+
<%= pb_rails("dropdown", props: {
|
|
10
|
+
error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
|
|
11
|
+
options: options
|
|
12
|
+
}) %>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "πΊπΈ",
|
|
8
|
+
id: "us"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "United Kingdom",
|
|
12
|
+
value: "United Kingdom",
|
|
13
|
+
areaCode: "+44",
|
|
14
|
+
icon: "π¬π§",
|
|
15
|
+
id: "gb"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "π΅π°",
|
|
22
|
+
id: "pk"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
|
@@ -1,86 +1,39 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
3
|
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
4
|
-
import Badge from '../../pb_badge/_badge'
|
|
5
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
|
6
|
-
import User from '../../pb_user/_user'
|
|
7
4
|
|
|
8
5
|
const DropdownWithAutocomplete = (props) => {
|
|
9
6
|
|
|
10
7
|
const options = [
|
|
11
8
|
{
|
|
12
|
-
label: "
|
|
13
|
-
value: "
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
id: "
|
|
17
|
-
status: "Offline"
|
|
9
|
+
label: "United States",
|
|
10
|
+
value: "United States",
|
|
11
|
+
areaCode: "+1",
|
|
12
|
+
icon: "πΊπΈ",
|
|
13
|
+
id: "us"
|
|
18
14
|
},
|
|
19
15
|
{
|
|
20
|
-
label: "
|
|
21
|
-
value: "
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
id: "
|
|
25
|
-
status: "Away"
|
|
16
|
+
label: "United Kingdom",
|
|
17
|
+
value: "United Kingdom",
|
|
18
|
+
areaCode: "+44",
|
|
19
|
+
icon: "π¬π§",
|
|
20
|
+
id: "gb"
|
|
26
21
|
},
|
|
27
22
|
{
|
|
28
|
-
label: "
|
|
29
|
-
value: "
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
id: "
|
|
33
|
-
status: "Online"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
label: "Courtney Long",
|
|
37
|
-
value: "Courtney Long",
|
|
38
|
-
territory: "PHL",
|
|
39
|
-
title: "Lead UX Designer",
|
|
40
|
-
id: "courtney-long",
|
|
41
|
-
status: "Online"
|
|
23
|
+
label: "Pakistan",
|
|
24
|
+
value: "Pakistan",
|
|
25
|
+
areaCode: "+92",
|
|
26
|
+
icon: "π΅π°",
|
|
27
|
+
id: "pk"
|
|
42
28
|
}
|
|
43
|
-
]
|
|
44
|
-
|
|
29
|
+
]
|
|
45
30
|
|
|
46
31
|
return (
|
|
47
32
|
<div>
|
|
48
33
|
<Dropdown autocomplete
|
|
49
34
|
options={options}
|
|
50
35
|
{...props}
|
|
51
|
-
|
|
52
|
-
{options.map((option) => (
|
|
53
|
-
<Dropdown.Option key={option.id}
|
|
54
|
-
option={option}
|
|
55
|
-
>
|
|
56
|
-
<>
|
|
57
|
-
<FlexItem>
|
|
58
|
-
<User
|
|
59
|
-
align="left"
|
|
60
|
-
avatar
|
|
61
|
-
name={option.label}
|
|
62
|
-
orientation="horizontal"
|
|
63
|
-
territory={option.territory}
|
|
64
|
-
title={option.title}
|
|
65
|
-
/>
|
|
66
|
-
</FlexItem>
|
|
67
|
-
<FlexItem>
|
|
68
|
-
<Badge
|
|
69
|
-
rounded
|
|
70
|
-
text={option.status}
|
|
71
|
-
variant={`${
|
|
72
|
-
option.status === "Offline"
|
|
73
|
-
? "neutral"
|
|
74
|
-
: option.status === "Online"
|
|
75
|
-
? "success"
|
|
76
|
-
: "warning"
|
|
77
|
-
}`}
|
|
78
|
-
/>
|
|
79
|
-
</FlexItem>
|
|
80
|
-
</>
|
|
81
|
-
</Dropdown.Option>
|
|
82
|
-
))}
|
|
83
|
-
</Dropdown>
|
|
36
|
+
/>
|
|
84
37
|
</div>
|
|
85
38
|
)
|
|
86
39
|
}
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "Jasper Furniss",
|
|
5
|
+
value: "Jasper Furniss",
|
|
6
|
+
territory: "PHL",
|
|
7
|
+
title: "Lead UX Engineer",
|
|
8
|
+
id: "jasper-furniss",
|
|
9
|
+
status: "Offline"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: "Ramon Ruiz",
|
|
13
|
+
value: "Ramon Ruiz",
|
|
14
|
+
territory: "PHL",
|
|
15
|
+
title: "Senior UX Designer",
|
|
16
|
+
id: "ramon-ruiz",
|
|
17
|
+
status: "Away"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Carlos Lima",
|
|
21
|
+
value: "Carlos Lima",
|
|
22
|
+
territory: "PHL",
|
|
23
|
+
title: "Nitro Developer",
|
|
24
|
+
id: "carlos-lima",
|
|
25
|
+
status: "Online"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "Courtney Long",
|
|
29
|
+
value: "Courtney Long",
|
|
30
|
+
territory: "PHL",
|
|
31
|
+
title: "Lead UX Designer",
|
|
32
|
+
id: "courtney-long",
|
|
33
|
+
status: "Online"
|
|
34
|
+
}
|
|
35
|
+
];
|
|
36
|
+
|
|
37
|
+
%>
|
|
38
|
+
|
|
39
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
40
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
|
|
41
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
42
|
+
<% options.each do |option| %>
|
|
43
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
44
|
+
<%= pb_rails("flex", props: {
|
|
45
|
+
align: "center",
|
|
46
|
+
justify: "between",
|
|
47
|
+
}) do %>
|
|
48
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
49
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
52
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<% end %>
|
|
55
|
+
<% end %>
|
|
56
|
+
<% end %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
|
|
3
|
-
import Dropdown from '
|
|
3
|
+
import Dropdown from '../_dropdown'
|
|
4
4
|
import Badge from '../../pb_badge/_badge'
|
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
|
5
6
|
import FlexItem from '../../pb_flex/_flex_item'
|
|
6
|
-
import Avatar from '../../pb_avatar/_avatar'
|
|
7
7
|
import User from '../../pb_user/_user'
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
const
|
|
11
|
-
const [selectedOption, setSelectedOption] = useState();
|
|
12
|
-
|
|
10
|
+
const DropdownWithAutocompleteWithSubcomponents = (props) => {
|
|
13
11
|
const options = [
|
|
14
12
|
{
|
|
15
13
|
label: "Jasper Furniss",
|
|
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
|
45
43
|
}
|
|
46
44
|
];
|
|
47
45
|
|
|
48
|
-
const CustomDisplay = () => {
|
|
49
|
-
return (
|
|
50
|
-
<>
|
|
51
|
-
{
|
|
52
|
-
selectedOption && (
|
|
53
|
-
<Avatar
|
|
54
|
-
name={selectedOption.label}
|
|
55
|
-
size="xs"
|
|
56
|
-
/>
|
|
57
|
-
)
|
|
58
|
-
}
|
|
59
|
-
</>
|
|
60
|
-
)
|
|
61
|
-
};
|
|
62
46
|
|
|
63
47
|
return (
|
|
64
48
|
<div>
|
|
65
49
|
<Dropdown autocomplete
|
|
66
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
67
50
|
options={options}
|
|
68
51
|
{...props}
|
|
69
52
|
>
|
|
70
|
-
<Dropdown.Trigger customDisplay={<CustomDisplay/>} />
|
|
71
53
|
{options.map((option) => (
|
|
72
54
|
<Dropdown.Option key={option.id}
|
|
73
55
|
option={option}
|
|
74
56
|
>
|
|
75
|
-
|
|
57
|
+
<Flex
|
|
58
|
+
align="center"
|
|
59
|
+
justify="between"
|
|
60
|
+
>
|
|
76
61
|
<FlexItem>
|
|
77
62
|
<User
|
|
78
63
|
align="left"
|
|
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
|
85
70
|
</FlexItem>
|
|
86
71
|
<FlexItem>
|
|
87
72
|
<Badge
|
|
73
|
+
dark
|
|
88
74
|
rounded
|
|
89
75
|
text={option.status}
|
|
90
76
|
variant={`${
|
|
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
|
96
82
|
}`}
|
|
97
83
|
/>
|
|
98
84
|
</FlexItem>
|
|
99
|
-
|
|
85
|
+
</Flex>
|
|
100
86
|
</Dropdown.Option>
|
|
101
87
|
))}
|
|
102
88
|
</Dropdown>
|
|
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
|
104
90
|
)
|
|
105
91
|
}
|
|
106
92
|
|
|
107
|
-
export default
|
|
93
|
+
export default DropdownWithAutocompleteWithSubcomponents
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`autocomplete` prop can also be used in conjunction with the subcomponent structure.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown.
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
3
|
+
import IconCircle from '../../pb_icon_circle/_icon_circle';
|
|
4
|
+
|
|
5
|
+
const DropdownWithSearch = (props) => {
|
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
7
|
+
|
|
8
|
+
const options = [
|
|
9
|
+
{
|
|
10
|
+
label: "United States",
|
|
11
|
+
value: "United States",
|
|
12
|
+
icon: "πΊπΈ",
|
|
13
|
+
id: "United-states"
|
|
14
|
+
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "United Kingdom",
|
|
18
|
+
value: "United Kingdom",
|
|
19
|
+
icon: "π¬π§",
|
|
20
|
+
id: "united-kingdom"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Pakistan",
|
|
24
|
+
value: "Pakistan",
|
|
25
|
+
icon: "π΅π°",
|
|
26
|
+
id: "pakistan"
|
|
27
|
+
}
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<div>
|
|
33
|
+
<Dropdown
|
|
34
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
35
|
+
options={options}
|
|
36
|
+
{...props}
|
|
37
|
+
>
|
|
38
|
+
<Dropdown.Trigger>
|
|
39
|
+
<div key={selectedOption ? selectedOption.icon : "flag"}>
|
|
40
|
+
<IconCircle
|
|
41
|
+
cursor="pointer"
|
|
42
|
+
icon={selectedOption ? selectedOption.icon : "flag"}
|
|
43
|
+
variant="royal"
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
</Dropdown.Trigger>
|
|
47
|
+
<Dropdown.Container maxWidth="xs"
|
|
48
|
+
searchbar
|
|
49
|
+
>
|
|
50
|
+
{options.map((option) => (
|
|
51
|
+
<Dropdown.Option key={option.id}
|
|
52
|
+
option={option}
|
|
53
|
+
/>
|
|
54
|
+
))}
|
|
55
|
+
</Dropdown.Container>
|
|
56
|
+
</Dropdown>
|
|
57
|
+
</div>
|
|
58
|
+
)
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export default DropdownWithSearch
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "πΊπΈ",
|
|
8
|
+
id: "us"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "United Kingdom",
|
|
12
|
+
value: "United Kingdom",
|
|
13
|
+
areaCode: "+44",
|
|
14
|
+
icon: "π¬π§",
|
|
15
|
+
id: "gb"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "π΅π°",
|
|
22
|
+
id: "pk"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") do %>
|
|
30
|
+
<%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
|
|
33
|
+
<% options.each do |option| %>
|
|
34
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
35
|
+
<%= pb_rails("flex", props: {
|
|
36
|
+
align: "center",
|
|
37
|
+
justify: "between",
|
|
38
|
+
}) do %>
|
|
39
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
40
|
+
<%= pb_rails("flex") do %>
|
|
41
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
42
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
46
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
<% end %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- dropdown_default: Default
|
|
4
|
+
- dropdown_with_autocomplete: Autocomplete
|
|
4
5
|
- dropdown_subtle_variant: Subtle Variant
|
|
5
6
|
- dropdown_subcomponent_structure_rails: Subcomponent Structure
|
|
7
|
+
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
|
6
8
|
- dropdown_with_label: With Label
|
|
7
9
|
- dropdown_with_custom_options_rails: Custom Options
|
|
8
10
|
- dropdown_with_custom_display_rails: Custom Display
|
|
9
11
|
- dropdown_with_custom_trigger_rails: Custom Trigger
|
|
12
|
+
- dropdown_with_search_rails: Custom Trigger Dropdown with Search
|
|
10
13
|
- dropdown_with_custom_padding: Custom Option Padding
|
|
11
14
|
- dropdown_error: Dropdown with Error
|
|
12
15
|
- dropdown_default_value: Default Value
|
|
@@ -15,20 +18,20 @@ examples:
|
|
|
15
18
|
|
|
16
19
|
react:
|
|
17
20
|
- dropdown_default: Default
|
|
21
|
+
- dropdown_with_autocomplete: Autocomplete
|
|
18
22
|
- dropdown_subtle_variant: Subtle Variant
|
|
19
23
|
- dropdown_subcomponent_structure: Subcomponent Structure
|
|
24
|
+
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
|
20
25
|
- dropdown_with_label: With Label
|
|
21
26
|
- dropdown_with_custom_options: Custom Options
|
|
22
27
|
- dropdown_with_custom_display: Custom Display
|
|
23
28
|
- dropdown_with_custom_trigger: Custom Trigger
|
|
29
|
+
- dropdown_with_search: Custom Trigger Dropdown with Search
|
|
24
30
|
- dropdown_with_custom_padding: Custom Option Padding
|
|
25
31
|
- dropdown_error: Dropdown with Error
|
|
26
32
|
- dropdown_default_value: Default Value
|
|
27
33
|
- dropdown_blank_selection: Blank Selection
|
|
28
34
|
- dropdown_clear_selection: Clear Selection
|
|
29
35
|
- dropdown_separators_hidden: Separators Hidden
|
|
30
|
-
|
|
31
|
-
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
|
32
|
-
# - dropdown_with_external_control: useDropdown Hook
|
|
33
|
-
# - dropdown_with_hook: useDropdown Hook with Any Trigger
|
|
36
|
+
- dropdown_with_external_control: useDropdown Hook
|
|
34
37
|
|