playbook_ui_docs 16.10.0.pre.alpha.play3040dropdownkitdisableoptions17375 → 16.10.0.pre.alpha.play300617388
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_dropdown/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +2 -2
- metadata +2 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb +0 -93
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.jsx +0 -127
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.jsx +0 -37
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.jsx +0 -37
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 66f4bb276b9aca92f6b0c80a22bae7bbae2e21a65229d7fcc09f3302ce9ee087
|
|
4
|
+
data.tar.gz: a1fcc890d7f54b2994f92c5f0bedc611f7537fa11c34b11adeb46685eb86b280
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b01f9c56f2481e355194813005b3f4ffd78b6ff8bbb66902da967c3fce03f7df0743f3b2fb85439feae199f3870b2296a07372e49977f0ce64ba378eb98f86ae
|
|
7
|
+
data.tar.gz: 5f468725d173972b0fd9c59e8b4143e60bb3994285280c1fb3eff56d9c40d082f5916ef71dbf3a52cb8dfe000e8af0780f46a3a253330c5a32c1f5e763e205d5
|
|
@@ -6,14 +6,12 @@ examples:
|
|
|
6
6
|
- dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
|
|
7
7
|
- dropdown_multi_select_display_rails: Multi Select with Form Pill Props
|
|
8
8
|
- dropdown_subtle_variant: Subtle Variant
|
|
9
|
-
- dropdown_disabled_option: Disabled Option
|
|
10
9
|
- dropdown_subcomponent_structure_rails: Subcomponent Structure
|
|
11
10
|
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
|
12
11
|
- dropdown_with_label: With Label
|
|
13
12
|
- dropdown_with_custom_options_rails: Custom Options
|
|
14
13
|
- dropdown_multi_select_with_custom_options: Multi Select with Custom Options
|
|
15
14
|
- dropdown_with_custom_display_rails: Custom Display
|
|
16
|
-
- dropdown_custom_display_disabled_option: Custom Display Disabled Option
|
|
17
15
|
- dropdown_with_custom_trigger_rails: Custom Trigger
|
|
18
16
|
- dropdown_with_search_rails: Custom Trigger Dropdown with Search
|
|
19
17
|
- dropdown_with_custom_padding: Custom Option Padding
|
|
@@ -35,7 +33,6 @@ examples:
|
|
|
35
33
|
- dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
|
|
36
34
|
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
37
35
|
- dropdown_required_indicator: Required Indicator
|
|
38
|
-
- dropdown_disabled: Disabled Input
|
|
39
36
|
- dropdown_custom_event_type: Custom Event Type
|
|
40
37
|
|
|
41
38
|
react:
|
|
@@ -45,12 +42,10 @@ examples:
|
|
|
45
42
|
- dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
|
|
46
43
|
- dropdown_multi_select_display: Multi Select with Form Pill Props
|
|
47
44
|
- dropdown_subtle_variant: Subtle Variant
|
|
48
|
-
- dropdown_disabled_option: Disabled Option
|
|
49
45
|
- dropdown_subcomponent_structure: Subcomponent Structure
|
|
50
46
|
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
|
51
47
|
- dropdown_with_label: With Label
|
|
52
48
|
- dropdown_with_custom_options: Custom Options
|
|
53
|
-
- dropdown_custom_display_disabled_option: Custom Display Disabled Option
|
|
54
49
|
- dropdown_multi_select_with_custom_options: Multi Select with Custom Options
|
|
55
50
|
- dropdown_with_custom_display: Custom Display
|
|
56
51
|
- dropdown_with_custom_trigger: Custom Trigger
|
|
@@ -76,4 +71,3 @@ examples:
|
|
|
76
71
|
- dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
|
|
77
72
|
- dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
|
|
78
73
|
- dropdown_required_indicator: Required Indicator
|
|
79
|
-
- dropdown_disabled: Disabled Input
|
|
@@ -33,6 +33,3 @@ export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx
|
|
|
33
33
|
export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
|
|
34
34
|
export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
|
|
35
35
|
export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
|
|
36
|
-
export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.jsx";
|
|
37
|
-
export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
|
|
38
|
-
export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
popoverButton.onclick = () => {
|
|
29
29
|
buttonClicked = !buttonClicked
|
|
30
30
|
if (buttonClicked) {
|
|
31
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg"
|
|
31
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
|
|
32
32
|
} else {
|
|
33
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg"
|
|
33
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
</script>
|
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.10.0.pre.alpha.
|
|
4
|
+
version: 16.10.0.pre.alpha.play300617388
|
|
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-06-
|
|
12
|
+
date: 2026-06-30 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -946,9 +946,6 @@ files:
|
|
|
946
946
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
|
|
947
947
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb
|
|
948
948
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md
|
|
949
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb
|
|
950
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.jsx
|
|
951
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.md
|
|
952
949
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb
|
|
953
950
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md
|
|
954
951
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
|
@@ -957,11 +954,6 @@ files:
|
|
|
957
954
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md
|
|
958
955
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb
|
|
959
956
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx
|
|
960
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.html.erb
|
|
961
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.jsx
|
|
962
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.html.erb
|
|
963
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.jsx
|
|
964
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md
|
|
965
957
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
|
|
966
958
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
|
|
967
959
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb
DELETED
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
options = [
|
|
3
|
-
{
|
|
4
|
-
label: "Jasper Furniss",
|
|
5
|
-
value: "jasperFurniss",
|
|
6
|
-
territory: "PHL",
|
|
7
|
-
title: "Lead UX Engineer",
|
|
8
|
-
id: "jasper-furniss",
|
|
9
|
-
status: "Offline"
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
label: "Ramon Ruiz",
|
|
13
|
-
value: "ramonRuiz",
|
|
14
|
-
territory: "PHL",
|
|
15
|
-
title: "Senior UX Designer",
|
|
16
|
-
id: "ramon-ruiz",
|
|
17
|
-
status: "Unavailable",
|
|
18
|
-
disabled: true
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
label: "Carlos Lima",
|
|
22
|
-
value: "carlosLima",
|
|
23
|
-
territory: "PHL",
|
|
24
|
-
title: "Nitro Developer",
|
|
25
|
-
id: "carlos-lima",
|
|
26
|
-
status: "Online"
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
label: "Courtney Long",
|
|
30
|
-
value: "courtneyLong",
|
|
31
|
-
territory: "PHL",
|
|
32
|
-
title: "Lead UX Designer",
|
|
33
|
-
id: "courtney-long",
|
|
34
|
-
status: "Online"
|
|
35
|
-
}
|
|
36
|
-
]
|
|
37
|
-
%>
|
|
38
|
-
|
|
39
|
-
<%
|
|
40
|
-
custom_display = capture do
|
|
41
|
-
pb_rails("flex", props: { align: "center" }) do
|
|
42
|
-
concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
|
|
43
|
-
concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
|
|
44
|
-
concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
|
|
45
|
-
end
|
|
46
|
-
end
|
|
47
|
-
%>
|
|
48
|
-
|
|
49
|
-
<%= pb_rails("dropdown", props: { id: "user-dropdown-disabled-options", options: options }) do %>
|
|
50
|
-
<%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display }) %>
|
|
51
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
52
|
-
<% options.each do |option| %>
|
|
53
|
-
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
|
|
54
|
-
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
|
55
|
-
<%= pb_rails("flex/flex_item") do %>
|
|
56
|
-
<%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal", territory: option[:territory], title: option[:title] }) %>
|
|
57
|
-
<% end %>
|
|
58
|
-
<%= pb_rails("flex/flex_item") do %>
|
|
59
|
-
<%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
|
60
|
-
<% end %>
|
|
61
|
-
<% end %>
|
|
62
|
-
<% end %>
|
|
63
|
-
<% end %>
|
|
64
|
-
<% end %>
|
|
65
|
-
<% end %>
|
|
66
|
-
|
|
67
|
-
<script>
|
|
68
|
-
document.addEventListener("pb:dropdown:selected", (e) => {
|
|
69
|
-
if (e.target.id !== "user-dropdown-disabled-options") return;
|
|
70
|
-
|
|
71
|
-
const option = e.detail;
|
|
72
|
-
const dropdown = e.target;
|
|
73
|
-
const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
|
|
74
|
-
if (!display) return;
|
|
75
|
-
|
|
76
|
-
const nameEl = display.querySelector("#dropdown-avatar-name");
|
|
77
|
-
if (nameEl) nameEl.textContent = option.label;
|
|
78
|
-
|
|
79
|
-
const avatarWrapper = display.querySelector("#dropdown-avatar .avatar_wrapper");
|
|
80
|
-
if (avatarWrapper) {
|
|
81
|
-
const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
|
|
82
|
-
avatarWrapper.dataset.name = option.label;
|
|
83
|
-
avatarWrapper.setAttribute("data-initials", initials);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
const badgeEl = display.querySelector("#dropdown-avatar-status");
|
|
87
|
-
const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
|
|
88
|
-
if (badgeEl) {
|
|
89
|
-
badgeEl.querySelector("span").textContent = option.status;
|
|
90
|
-
badgeEl.className = `pb_badge_kit_${variant}`;
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
</script>
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
|
|
3
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
4
|
-
import Badge from '../../pb_badge/_badge'
|
|
5
|
-
import Flex from '../../pb_flex/_flex'
|
|
6
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
|
7
|
-
import Avatar from '../../pb_avatar/_avatar'
|
|
8
|
-
import User from '../../pb_user/_user'
|
|
9
|
-
import Body from '../../pb_body/_body'
|
|
10
|
-
|
|
11
|
-
const DropdownCustomDisplayDisabledOption = (props) => {
|
|
12
|
-
const [selectedOption, setSelectedOption] = useState();
|
|
13
|
-
|
|
14
|
-
const options = [
|
|
15
|
-
{
|
|
16
|
-
label: "Jasper Furniss",
|
|
17
|
-
value: "jasperFurniss",
|
|
18
|
-
territory: "PHL",
|
|
19
|
-
title: "Lead UX Engineer",
|
|
20
|
-
id: "jasper-furniss",
|
|
21
|
-
status: "Offline"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
label: "Ramon Ruiz",
|
|
25
|
-
value: "ramonRuiz",
|
|
26
|
-
territory: "PHL",
|
|
27
|
-
title: "Senior UX Designer",
|
|
28
|
-
id: "ramon-ruiz",
|
|
29
|
-
status: "Unavailable",
|
|
30
|
-
disabled: true
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
label: "Carlos Lima",
|
|
34
|
-
value: "carlosLima",
|
|
35
|
-
territory: "PHL",
|
|
36
|
-
title: "Nitro Developer",
|
|
37
|
-
id: "carlos-lima",
|
|
38
|
-
status: "Online"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
label: "Courtney Long",
|
|
42
|
-
value: "courtneyLong",
|
|
43
|
-
territory: "PHL",
|
|
44
|
-
title: "Lead UX Designer",
|
|
45
|
-
id: "courtney-long",
|
|
46
|
-
status: "Online"
|
|
47
|
-
}
|
|
48
|
-
];
|
|
49
|
-
|
|
50
|
-
const CustomDisplay = () => {
|
|
51
|
-
return (
|
|
52
|
-
<>
|
|
53
|
-
{
|
|
54
|
-
selectedOption && (
|
|
55
|
-
<Flex align="center">
|
|
56
|
-
<Avatar
|
|
57
|
-
name={selectedOption.label}
|
|
58
|
-
size="xs"
|
|
59
|
-
/>
|
|
60
|
-
<Body
|
|
61
|
-
marginX="xs"
|
|
62
|
-
text={selectedOption.label}
|
|
63
|
-
/>
|
|
64
|
-
<Badge
|
|
65
|
-
text={selectedOption.status}
|
|
66
|
-
variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
|
|
67
|
-
/>
|
|
68
|
-
</Flex>
|
|
69
|
-
)
|
|
70
|
-
}
|
|
71
|
-
</>
|
|
72
|
-
)
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return (
|
|
77
|
-
<div>
|
|
78
|
-
<Dropdown
|
|
79
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
80
|
-
options={options}
|
|
81
|
-
{...props}
|
|
82
|
-
>
|
|
83
|
-
<Dropdown.Trigger customDisplay={<CustomDisplay/>}
|
|
84
|
-
placeholder="Select a User"
|
|
85
|
-
/>
|
|
86
|
-
{options.map((option) => (
|
|
87
|
-
<Dropdown.Option key={option.id}
|
|
88
|
-
option={option}
|
|
89
|
-
>
|
|
90
|
-
<Flex
|
|
91
|
-
align="center"
|
|
92
|
-
justify="between"
|
|
93
|
-
>
|
|
94
|
-
<FlexItem>
|
|
95
|
-
<User
|
|
96
|
-
align="left"
|
|
97
|
-
avatar
|
|
98
|
-
name={option.label}
|
|
99
|
-
orientation="horizontal"
|
|
100
|
-
territory={option.territory}
|
|
101
|
-
title={option.title}
|
|
102
|
-
/>
|
|
103
|
-
</FlexItem>
|
|
104
|
-
<FlexItem>
|
|
105
|
-
<Badge dark
|
|
106
|
-
rounded
|
|
107
|
-
text={option.status}
|
|
108
|
-
variant={`${
|
|
109
|
-
option.status === "Offline"
|
|
110
|
-
? "neutral"
|
|
111
|
-
: option.status === "Unavailable"
|
|
112
|
-
? "warning"
|
|
113
|
-
: option.status === "Online"
|
|
114
|
-
? "success"
|
|
115
|
-
: "warning"
|
|
116
|
-
}`}
|
|
117
|
-
/>
|
|
118
|
-
</FlexItem>
|
|
119
|
-
</Flex>
|
|
120
|
-
</Dropdown.Option>
|
|
121
|
-
))}
|
|
122
|
-
</Dropdown>
|
|
123
|
-
</div>
|
|
124
|
-
)
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
export default DropdownCustomDisplayDisabledOption
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
options = [
|
|
3
|
-
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
-
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
-
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
|
-
]
|
|
7
|
-
|
|
8
|
-
%>
|
|
9
|
-
|
|
10
|
-
<%= pb_rails("dropdown", props: {id: "dropdown-disabled", disabled: true,label: "Default Dropdown", options: options}) %>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Dropdown from '../_dropdown'
|
|
3
|
-
|
|
4
|
-
const DropdownDisabled = (props) => {
|
|
5
|
-
|
|
6
|
-
const options = [
|
|
7
|
-
{
|
|
8
|
-
label: "United States",
|
|
9
|
-
value: "unitedStates",
|
|
10
|
-
id: "us"
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
label: "Canada",
|
|
14
|
-
value: "canada",
|
|
15
|
-
id: "ca"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
label: "Pakistan",
|
|
19
|
-
value: "pakistan",
|
|
20
|
-
id: "pk"
|
|
21
|
-
}
|
|
22
|
-
];
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<div>
|
|
27
|
-
<Dropdown
|
|
28
|
-
disabled
|
|
29
|
-
label="Default Dropdown"
|
|
30
|
-
options={options}
|
|
31
|
-
{...props}
|
|
32
|
-
/>
|
|
33
|
-
</div>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export default DropdownDisabled
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
options = [
|
|
3
|
-
{ label: "Available Option", value: "available", id: "available-option" },
|
|
4
|
-
{ label: "Coming Soon", value: "coming-soon", id: "coming-soon", disabled: true },
|
|
5
|
-
{ label: "Another Available", value: "another-available", id: "another-available" },
|
|
6
|
-
{ label: "Locked Feature", value: "locked-feature", id: "locked-feature", disabled: true },
|
|
7
|
-
]
|
|
8
|
-
%>
|
|
9
|
-
|
|
10
|
-
<%= pb_rails("dropdown", props: { label: "Disabled Options", options: options }) %>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
|
|
3
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
4
|
-
import Caption from '../../pb_caption/_caption'
|
|
5
|
-
|
|
6
|
-
const DropdownDisabledOption = (props) => {
|
|
7
|
-
const [selectedOption, setSelectedOption] = useState()
|
|
8
|
-
|
|
9
|
-
const options = [
|
|
10
|
-
{ label: 'Available Option', value: 'available', id: 'available-option' },
|
|
11
|
-
{ label: 'Coming Soon', value: 'coming-soon', id: 'coming-soon', disabled: true },
|
|
12
|
-
{ label: 'Another Available', value: 'another-available', id: 'another-available' },
|
|
13
|
-
{ label: 'Locked Feature', value: 'locked-feature', id: 'locked-feature', disabled: true },
|
|
14
|
-
]
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<div>
|
|
18
|
-
<Caption
|
|
19
|
-
text="Select an option. Disabled options remain visible but cannot be selected."
|
|
20
|
-
/>
|
|
21
|
-
<Dropdown
|
|
22
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
23
|
-
options={options}
|
|
24
|
-
placeholder="Choose an option"
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
{selectedOption && (
|
|
28
|
-
<Caption
|
|
29
|
-
marginTop="xs"
|
|
30
|
-
text={`Selected: ${selectedOption.label}`}
|
|
31
|
-
/>
|
|
32
|
-
)}
|
|
33
|
-
</div>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export default DropdownDisabledOption
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.
|