playbook_ui_docs 14.16.0.pre.rc.5 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7192
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_fullscreen.jsx +90 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.html.erb +39 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +0 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx +0 -7
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +181 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +99 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +9 -6
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +3 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +67 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +67 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +10 -4
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +49 -24
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx +13 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +190 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +76 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +94 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +75 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +75 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +74 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +92 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +72 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +97 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +71 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +14 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx +50 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx +59 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb +19 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb +22 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +40 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md +5 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md +5 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +58 -16
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.md → _advanced_table_selectable_rows_no_subrows_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.md → _advanced_table_selectable_rows_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Layout from '../../pb_layout/_layout'
|
|
4
|
+
import Flex from '../../pb_flex/_flex'
|
|
5
|
+
import Body from '../../pb_body/_body'
|
|
6
|
+
import Caption from '../../pb_caption/_caption'
|
|
7
|
+
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
|
8
|
+
|
|
9
|
+
const LayoutBracket = () => {
|
|
10
|
+
return (
|
|
11
|
+
<div>
|
|
12
|
+
<Layout
|
|
13
|
+
layout="bracket"
|
|
14
|
+
>
|
|
15
|
+
<Layout.RoundLabel>
|
|
16
|
+
<Caption>Wild Card</Caption>
|
|
17
|
+
<SectionSeparator marginY="sm"/>
|
|
18
|
+
</Layout.RoundLabel>
|
|
19
|
+
<Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
|
|
20
|
+
<Layout.Game>
|
|
21
|
+
<Flex justify="between">
|
|
22
|
+
<Body>Packers</Body>
|
|
23
|
+
<Body>10</Body>
|
|
24
|
+
</Flex>
|
|
25
|
+
<Flex justify="between">
|
|
26
|
+
<Body><strong>Eagles</strong></Body>
|
|
27
|
+
<Body>22</Body>
|
|
28
|
+
</Flex>
|
|
29
|
+
</Layout.Game>
|
|
30
|
+
<Layout.Game>
|
|
31
|
+
<Flex justify="between">
|
|
32
|
+
<Body>Vikings</Body>
|
|
33
|
+
<Body>9</Body>
|
|
34
|
+
</Flex>
|
|
35
|
+
<Flex justify="between">
|
|
36
|
+
<Body><strong>Rams</strong></Body>
|
|
37
|
+
<Body>27</Body>
|
|
38
|
+
</Flex>
|
|
39
|
+
</Layout.Game>
|
|
40
|
+
<Layout.Game>
|
|
41
|
+
<Flex justify="between">
|
|
42
|
+
<Body><strong>Lions</strong></Body>
|
|
43
|
+
</Flex>
|
|
44
|
+
<Flex justify="between">
|
|
45
|
+
<Body>BYE</Body>
|
|
46
|
+
</Flex>
|
|
47
|
+
</Layout.Game>
|
|
48
|
+
<Layout.Game>
|
|
49
|
+
<Flex justify="between">
|
|
50
|
+
<Body><strong>Commanders</strong></Body>
|
|
51
|
+
<Body>23</Body>
|
|
52
|
+
</Flex>
|
|
53
|
+
<Flex justify="between">
|
|
54
|
+
<Body>Buccaneers</Body>
|
|
55
|
+
<Body>20</Body>
|
|
56
|
+
</Flex>
|
|
57
|
+
</Layout.Game>
|
|
58
|
+
<Layout.Game>
|
|
59
|
+
<Flex justify="between">
|
|
60
|
+
<Body><strong>Chiefs</strong></Body>
|
|
61
|
+
</Flex>
|
|
62
|
+
<Flex justify="between">
|
|
63
|
+
<Body>BYE</Body>
|
|
64
|
+
</Flex>
|
|
65
|
+
</Layout.Game>
|
|
66
|
+
<Layout.Game>
|
|
67
|
+
<Flex justify="between">
|
|
68
|
+
<Body>Chargers</Body>
|
|
69
|
+
<Body>12</Body>
|
|
70
|
+
</Flex>
|
|
71
|
+
<Flex justify="between">
|
|
72
|
+
<Body><strong>Texans</strong></Body>
|
|
73
|
+
<Body>32</Body>
|
|
74
|
+
</Flex>
|
|
75
|
+
</Layout.Game>
|
|
76
|
+
<Layout.Game>
|
|
77
|
+
<Flex justify="between">
|
|
78
|
+
<Body>Broncos</Body>
|
|
79
|
+
<Body>7</Body>
|
|
80
|
+
</Flex>
|
|
81
|
+
<Flex justify="between">
|
|
82
|
+
<Body><strong>Bills</strong></Body>
|
|
83
|
+
<Body>31</Body>
|
|
84
|
+
</Flex>
|
|
85
|
+
</Layout.Game>
|
|
86
|
+
<Layout.Game>
|
|
87
|
+
<Flex justify="between">
|
|
88
|
+
<Body>Steelers</Body>
|
|
89
|
+
<Body>14</Body>
|
|
90
|
+
</Flex>
|
|
91
|
+
<Flex justify="between">
|
|
92
|
+
<Body><strong>Ravens</strong></Body>
|
|
93
|
+
<Body>28</Body>
|
|
94
|
+
</Flex>
|
|
95
|
+
</Layout.Game>
|
|
96
|
+
</Layout.Round>
|
|
97
|
+
<Layout.RoundLabel>
|
|
98
|
+
<Caption>Divisional</Caption>
|
|
99
|
+
<SectionSeparator marginY="sm"/>
|
|
100
|
+
</Layout.RoundLabel>
|
|
101
|
+
<Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
|
|
102
|
+
<Layout.Game>
|
|
103
|
+
<Flex justify="between">
|
|
104
|
+
<Body>Rams</Body>
|
|
105
|
+
<Body>22</Body>
|
|
106
|
+
</Flex>
|
|
107
|
+
<Flex justify="between">
|
|
108
|
+
<Body><strong>Eagles</strong></Body>
|
|
109
|
+
<Body>28</Body>
|
|
110
|
+
</Flex>
|
|
111
|
+
</Layout.Game>
|
|
112
|
+
<Layout.Game>
|
|
113
|
+
<Flex justify="between">
|
|
114
|
+
<Body><strong>Commanders</strong></Body>
|
|
115
|
+
<Body>45</Body>
|
|
116
|
+
</Flex>
|
|
117
|
+
<Flex justify="between">
|
|
118
|
+
<Body>Lions</Body>
|
|
119
|
+
<Body>31</Body>
|
|
120
|
+
</Flex>
|
|
121
|
+
</Layout.Game>
|
|
122
|
+
<Layout.Game>
|
|
123
|
+
<Flex justify="between">
|
|
124
|
+
<Body>Texans</Body>
|
|
125
|
+
<Body>14</Body>
|
|
126
|
+
</Flex>
|
|
127
|
+
<Flex justify="between">
|
|
128
|
+
<Body><strong>Chiefs</strong></Body>
|
|
129
|
+
<Body>23</Body>
|
|
130
|
+
</Flex>
|
|
131
|
+
</Layout.Game>
|
|
132
|
+
<Layout.Game>
|
|
133
|
+
<Flex justify="between">
|
|
134
|
+
<Body>Ravens</Body>
|
|
135
|
+
<Body>25</Body>
|
|
136
|
+
</Flex>
|
|
137
|
+
<Flex justify="between">
|
|
138
|
+
<Body><strong>Bills</strong></Body>
|
|
139
|
+
<Body>27</Body>
|
|
140
|
+
</Flex>
|
|
141
|
+
</Layout.Game>
|
|
142
|
+
</Layout.Round>
|
|
143
|
+
<Layout.RoundLabel>
|
|
144
|
+
<Caption>Conference</Caption>
|
|
145
|
+
<SectionSeparator marginY="sm"/>
|
|
146
|
+
</Layout.RoundLabel>
|
|
147
|
+
<Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
|
|
148
|
+
<Layout.Game>
|
|
149
|
+
<Flex justify="between">
|
|
150
|
+
<Body>Commanders</Body>
|
|
151
|
+
<Body>23</Body>
|
|
152
|
+
</Flex>
|
|
153
|
+
<Flex justify="between">
|
|
154
|
+
<Body><strong>Eagles</strong></Body>
|
|
155
|
+
<Body>55</Body>
|
|
156
|
+
</Flex>
|
|
157
|
+
</Layout.Game>
|
|
158
|
+
<Layout.Game>
|
|
159
|
+
<Flex justify="between">
|
|
160
|
+
<Body>Bills</Body>
|
|
161
|
+
<Body>29</Body>
|
|
162
|
+
</Flex>
|
|
163
|
+
<Flex justify="between">
|
|
164
|
+
<Body><strong>Chiefs</strong></Body>
|
|
165
|
+
<Body>32</Body>
|
|
166
|
+
</Flex>
|
|
167
|
+
</Layout.Game>
|
|
168
|
+
</Layout.Round>
|
|
169
|
+
<Layout.RoundLabel>
|
|
170
|
+
<Caption>Super Bowl</Caption>
|
|
171
|
+
<SectionSeparator marginY="sm"/>
|
|
172
|
+
</Layout.RoundLabel>
|
|
173
|
+
<Layout.Round>
|
|
174
|
+
<Layout.Game>
|
|
175
|
+
<Flex justify="between">
|
|
176
|
+
<Body>Chiefs</Body>
|
|
177
|
+
<Body>22</Body>
|
|
178
|
+
</Flex>
|
|
179
|
+
<Flex justify="between">
|
|
180
|
+
<Body><strong>Eagles</strong></Body>
|
|
181
|
+
<Body>40</Body>
|
|
182
|
+
</Flex>
|
|
183
|
+
</Layout.Game>
|
|
184
|
+
</Layout.Round>
|
|
185
|
+
</Layout>
|
|
186
|
+
</div>
|
|
187
|
+
)
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
export default LayoutBracket
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
|
|
2
|
+
|
|
3
|
+
On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
|
|
4
|
+
|
|
5
|
+
Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.
|
|
@@ -7,4 +7,5 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
|
|
|
7
7
|
export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
|
|
8
8
|
export { default as LayoutContent } from './_layout_content.jsx'
|
|
9
9
|
export { default as LayoutMasonry } from './_layout_masonry.jsx'
|
|
10
|
+
export { default as LayoutBracket } from './_layout_bracket.jsx'
|
|
10
11
|
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "powerhome1",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "people1",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "talent1",
|
|
17
|
+
disabled: true,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Business Affairs",
|
|
21
|
+
value: "Business Affairs",
|
|
22
|
+
id: "business1",
|
|
23
|
+
children: [
|
|
24
|
+
{
|
|
25
|
+
label: "Initiatives",
|
|
26
|
+
value: "Initiatives",
|
|
27
|
+
id: "initiative1",
|
|
28
|
+
disabled: true,
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "Learning & Development",
|
|
32
|
+
value: "Learning & Development",
|
|
33
|
+
id: "development1",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "People Experience",
|
|
39
|
+
value: "People Experience",
|
|
40
|
+
id: "experience1",
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Contact Center",
|
|
46
|
+
value: "Contact Center",
|
|
47
|
+
id: "contact1",
|
|
48
|
+
children: [
|
|
49
|
+
{
|
|
50
|
+
label: "Appointment Management",
|
|
51
|
+
value: "Appointment Management",
|
|
52
|
+
id: "appointment1",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Customer Service",
|
|
56
|
+
value: "Customer Service",
|
|
57
|
+
id: "customer1",
|
|
58
|
+
disabled: true,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
label: "Energy",
|
|
62
|
+
value: "Energy",
|
|
63
|
+
id: "energy1",
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
}] %>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<%= pb_rails("multi_level_select", props: {
|
|
72
|
+
id: "multi-level-select-disabled-options-rails",
|
|
73
|
+
name: "disabled_options",
|
|
74
|
+
return_all_selected: true,
|
|
75
|
+
tree_data: treeData
|
|
76
|
+
}) %>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome1",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people1",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent1",
|
|
21
|
+
disabled: true,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Business Affairs",
|
|
25
|
+
value: "Business Affairs",
|
|
26
|
+
id: "business1",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
label: "Initiatives",
|
|
30
|
+
value: "Initiatives",
|
|
31
|
+
id: "initiative1",
|
|
32
|
+
disabled: true,
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Learning & Development",
|
|
36
|
+
value: "Learning & Development",
|
|
37
|
+
id: "development1",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "People Experience",
|
|
43
|
+
value: "People Experience",
|
|
44
|
+
id: "experience1",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Contact Center",
|
|
50
|
+
value: "Contact Center",
|
|
51
|
+
id: "contact1",
|
|
52
|
+
children: [
|
|
53
|
+
{
|
|
54
|
+
label: "Appointment Management",
|
|
55
|
+
value: "Appointment Management",
|
|
56
|
+
id: "appointment1",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Customer Service",
|
|
60
|
+
value: "Customer Service",
|
|
61
|
+
id: "customer1",
|
|
62
|
+
disabled: true,
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
label: "Energy",
|
|
66
|
+
value: "Energy",
|
|
67
|
+
id: "energy1",
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
},
|
|
73
|
+
];
|
|
74
|
+
|
|
75
|
+
const MultiLevelSelectDisabledOptions = (props) => {
|
|
76
|
+
return (
|
|
77
|
+
<div>
|
|
78
|
+
<MultiLevelSelect
|
|
79
|
+
id='multiselect-disabled-options'
|
|
80
|
+
onSelect={(selectedNodes) =>
|
|
81
|
+
console.log(
|
|
82
|
+
"Selected Items",
|
|
83
|
+
selectedNodes
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
returnAllSelected
|
|
87
|
+
treeData={treeData}
|
|
88
|
+
{...props}
|
|
89
|
+
/>
|
|
90
|
+
</div>
|
|
91
|
+
)
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export default MultiLevelSelectDisabledOptions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "powerhome1",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "people1",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "talent1",
|
|
17
|
+
disabled: true,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Business Affairs",
|
|
21
|
+
value: "Business Affairs",
|
|
22
|
+
id: "business1",
|
|
23
|
+
children: [
|
|
24
|
+
{
|
|
25
|
+
label: "Initiatives",
|
|
26
|
+
value: "Initiatives",
|
|
27
|
+
id: "initiative1",
|
|
28
|
+
disabled: true,
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "Learning & Development",
|
|
32
|
+
value: "Learning & Development",
|
|
33
|
+
id: "development1",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "People Experience",
|
|
39
|
+
value: "People Experience",
|
|
40
|
+
id: "experience1",
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Contact Center",
|
|
46
|
+
value: "Contact Center",
|
|
47
|
+
id: "contact1",
|
|
48
|
+
children: [
|
|
49
|
+
{
|
|
50
|
+
label: "Appointment Management",
|
|
51
|
+
value: "Appointment Management",
|
|
52
|
+
id: "appointment1",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Customer Service",
|
|
56
|
+
value: "Customer Service",
|
|
57
|
+
id: "customer1",
|
|
58
|
+
disabled: true,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
label: "Energy",
|
|
62
|
+
value: "Energy",
|
|
63
|
+
id: "energy1",
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
}] %>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<%= pb_rails("multi_level_select", props: {
|
|
72
|
+
id: "multi-level-select-disabled-options-default-rails",
|
|
73
|
+
name: "disabled_options_default",
|
|
74
|
+
tree_data: treeData
|
|
75
|
+
}) %>
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome1",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people1",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent1",
|
|
21
|
+
disabled: true,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Business Affairs",
|
|
25
|
+
value: "Business Affairs",
|
|
26
|
+
id: "business1",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
label: "Initiatives",
|
|
30
|
+
value: "Initiatives",
|
|
31
|
+
id: "initiative1",
|
|
32
|
+
disabled: true,
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Learning & Development",
|
|
36
|
+
value: "Learning & Development",
|
|
37
|
+
id: "development1",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "People Experience",
|
|
43
|
+
value: "People Experience",
|
|
44
|
+
id: "experience1",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Contact Center",
|
|
50
|
+
value: "Contact Center",
|
|
51
|
+
id: "contact1",
|
|
52
|
+
children: [
|
|
53
|
+
{
|
|
54
|
+
label: "Appointment Management",
|
|
55
|
+
value: "Appointment Management",
|
|
56
|
+
id: "appointment1",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Customer Service",
|
|
60
|
+
value: "Customer Service",
|
|
61
|
+
id: "customer1",
|
|
62
|
+
disabled: true,
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
label: "Energy",
|
|
66
|
+
value: "Energy",
|
|
67
|
+
id: "energy1",
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
},
|
|
73
|
+
];
|
|
74
|
+
|
|
75
|
+
const MultiLevelSelectDisabledOptionsDefault = (props) => {
|
|
76
|
+
return (
|
|
77
|
+
<div>
|
|
78
|
+
<MultiLevelSelect
|
|
79
|
+
id='multiselect-disabled-options-default'
|
|
80
|
+
onSelect={(selectedNodes) =>
|
|
81
|
+
console.log(
|
|
82
|
+
"Selected Items",
|
|
83
|
+
selectedNodes
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
treeData={treeData}
|
|
87
|
+
{...props}
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
90
|
+
)
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export default MultiLevelSelectDisabledOptionsDefault;
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.md
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To disable individual items in the treeData, include `disabled:true` within the object on the treeData that you want disabled. See the code snippet below for an example of how to do this.
|
|
2
|
+
|
|
3
|
+
If a parent is selected, the parent will be returned in the selected items list, even if it has disabled children.
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "powerhome1",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "people1",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "talent1",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "business1",
|
|
22
|
+
expanded: true,
|
|
23
|
+
disabled: true,
|
|
24
|
+
children: [
|
|
25
|
+
{
|
|
26
|
+
label: "Initiatives",
|
|
27
|
+
value: "Initiatives",
|
|
28
|
+
id: "initiative1",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "Learning & Development",
|
|
32
|
+
value: "Learning & Development",
|
|
33
|
+
id: "development1",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "People Experience",
|
|
39
|
+
value: "People Experience",
|
|
40
|
+
id: "experience1",
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Contact Center",
|
|
46
|
+
value: "Contact Center",
|
|
47
|
+
id: "contact1",
|
|
48
|
+
children: [
|
|
49
|
+
{
|
|
50
|
+
label: "Appointment Management",
|
|
51
|
+
value: "Appointment Management",
|
|
52
|
+
id: "appointment1",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Customer Service",
|
|
56
|
+
value: "Customer Service",
|
|
57
|
+
id: "customer1",
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: "Energy",
|
|
61
|
+
value: "Energy",
|
|
62
|
+
id: "energy1",
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
}] %>
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
<%= pb_rails("multi_level_select", props: {
|
|
71
|
+
id: "mls-disabled-options-parent-rails",
|
|
72
|
+
name: "disabled_options_parent",
|
|
73
|
+
return_all_selected: true,
|
|
74
|
+
tree_data: treeData
|
|
75
|
+
}) %>
|