playbook_ui_docs 13.24.0 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713
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_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +50 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +102 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +66 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +77 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/menu.yml +5 -1
- data/dist/playbook-doc.js +10 -10
- metadata +21 -6
- /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md → _dialog_props_swift.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 79167a3d16d25909c9f4110866ef74784797313510baf6574c8a9dcc7f145e5d
|
|
4
|
+
data.tar.gz: b3adb21e79b1da5706208b838fc26fb04e29444fdd2b341fed054ec9e27d5d8d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fb61c3f801e0ccebb9fe280a588095cd14499955d22de09030a3bd8449d810a273d1ac1498e8a8e2a8f3d39907d817c1c675f54254a0e31e3c99ef4f74eea90b
|
|
7
|
+
data.tar.gz: a2ce5f891a1340dfed230be9b76e61fd91f3f71e96566921a27dcb958012bf0ed3916b23a050f38de9bd8bea8e194fd2d3806ed85e16c38ccd3e7b73c419dcfa
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Installation',
|
|
3
|
+
data: [-475, 400, -1000, 354, -856],
|
|
4
|
+
threshold: 0
|
|
5
|
+
}, {
|
|
6
|
+
name: 'Manufacturing',
|
|
7
|
+
data: [1475, 200, 1000, 654, -656],
|
|
8
|
+
threshold: 0
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: 'Sales & Distribution',
|
|
12
|
+
data: [1270, 100, -1200, 554, 756],
|
|
13
|
+
threshold: 0
|
|
14
|
+
}] %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("bar_graph", props: {
|
|
17
|
+
axis_title: 'Number of Employees',
|
|
18
|
+
chart_data: data,
|
|
19
|
+
id: "bar-default",
|
|
20
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
|
21
|
+
title: 'Bar Graph with Negative Numbers',
|
|
22
|
+
legend: true,
|
|
23
|
+
}) %>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
4
|
+
|
|
5
|
+
const chartData = [{
|
|
6
|
+
name: 'Installation',
|
|
7
|
+
data: [-475, 400, -1000, 354, -856],
|
|
8
|
+
threshold: 0
|
|
9
|
+
}, {
|
|
10
|
+
name: 'Manufacturing',
|
|
11
|
+
data: [1475, 200, 1000, 654, -656],
|
|
12
|
+
threshold: 0
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: 'Sales & Distribution',
|
|
16
|
+
data: [1270, 100, -1200, 554, 756],
|
|
17
|
+
threshold: 0
|
|
18
|
+
}]
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
const BarGraphStacked = (props) => (
|
|
22
|
+
<div>
|
|
23
|
+
<BarGraph
|
|
24
|
+
axisTitle="Number of Employees"
|
|
25
|
+
chartData={chartData}
|
|
26
|
+
id="bar-default"
|
|
27
|
+
legend
|
|
28
|
+
title="Bar Graph with Negative Numbers"
|
|
29
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
30
|
+
{...props}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
)
|
|
34
|
+
|
|
35
|
+
export default BarGraphStacked
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Number of Installations',
|
|
3
|
+
data: [1475,200,3000,654,656]
|
|
4
|
+
}, {
|
|
5
|
+
type: 'spline',
|
|
6
|
+
name: 'Percentage',
|
|
7
|
+
data: [48, 70, 25, 55, 72],
|
|
8
|
+
color: '#F9BB00',
|
|
9
|
+
yAxis: 1
|
|
10
|
+
}] %>
|
|
11
|
+
|
|
12
|
+
<% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
|
|
13
|
+
|
|
14
|
+
<% axis_formats = [{format: ""}, {format: "{value}%"}] %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("bar_graph", props: {
|
|
17
|
+
axis_format: axis_formats,
|
|
18
|
+
axis_title: axis_titles,
|
|
19
|
+
chart_data: data,
|
|
20
|
+
id: "bar-spline",
|
|
21
|
+
y_axis_min: 0,
|
|
22
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
|
23
|
+
subtitle: 'Source: thesolarfoundation.com',
|
|
24
|
+
title: 'Bar Graph with Secondary Y-axis',
|
|
25
|
+
legend: true,
|
|
26
|
+
}) %>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
4
|
+
|
|
5
|
+
const chartData = [{
|
|
6
|
+
name: 'Number of Installations',
|
|
7
|
+
data: [1475, 200, 3000, 654, 656],
|
|
8
|
+
}, {
|
|
9
|
+
type: 'spline',
|
|
10
|
+
name: 'Percentage',
|
|
11
|
+
data: [48, 70, 25, 55, 72],
|
|
12
|
+
color: '#F9BB00',
|
|
13
|
+
yAxis: 1
|
|
14
|
+
}]
|
|
15
|
+
|
|
16
|
+
const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
|
|
17
|
+
|
|
18
|
+
const axisFormats = [{format: ""}, {format: "{value}%"}]
|
|
19
|
+
|
|
20
|
+
const BarGraphSecondaryYAxis= (props) => (
|
|
21
|
+
<div>
|
|
22
|
+
<BarGraph
|
|
23
|
+
axisFormat={axisFormats}
|
|
24
|
+
axisTitle={axisTitles}
|
|
25
|
+
chartData={chartData}
|
|
26
|
+
id="bar-spline"
|
|
27
|
+
legend
|
|
28
|
+
title="Bar Graph with Secondary Y-axis"
|
|
29
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
30
|
+
yAxisMin={0}
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
</div>
|
|
34
|
+
)
|
|
35
|
+
|
|
36
|
+
export default BarGraphSecondaryYAxis
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array.
|
|
2
|
+
|
|
3
|
+
To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Installation',
|
|
3
|
+
data: [1475, 200, 3000, 654, 656],
|
|
4
|
+
},
|
|
5
|
+
{
|
|
6
|
+
name: 'Manufacturing',
|
|
7
|
+
data: [1270, 800, 200, 454, 956],
|
|
8
|
+
}, {
|
|
9
|
+
name: 'Sales & Distribution',
|
|
10
|
+
data: [975, 1600, 1500, 924, 500],
|
|
11
|
+
}] %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("bar_graph", props: {
|
|
14
|
+
axis_title: 'Number of Employees',
|
|
15
|
+
chart_data: data,
|
|
16
|
+
id: "bar-default",
|
|
17
|
+
y_axis_min: 0,
|
|
18
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
|
19
|
+
stacking: "normal",
|
|
20
|
+
title: 'Bar Graph with Stacked Columns',
|
|
21
|
+
legend: true,
|
|
22
|
+
}) %>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
4
|
+
|
|
5
|
+
const chartData = [{
|
|
6
|
+
name: 'Installation',
|
|
7
|
+
data: [1475, 200, 3000, 654, 656],
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: 'Manufacturing',
|
|
11
|
+
data: [1270, 800, 200, 454, 956],
|
|
12
|
+
}, {
|
|
13
|
+
name: 'Sales & Distribution',
|
|
14
|
+
data: [975, 1600, 1500, 924, 500],
|
|
15
|
+
}]
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
const BarGraphStacked = (props) => (
|
|
19
|
+
<div>
|
|
20
|
+
<BarGraph
|
|
21
|
+
axisTitle="Number Of Employees"
|
|
22
|
+
chartData={chartData}
|
|
23
|
+
id="bar-default"
|
|
24
|
+
legend
|
|
25
|
+
stacking="normal"
|
|
26
|
+
title="Bar Graph with Stacked Columns"
|
|
27
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
28
|
+
yAxisMin={0}
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
</div>
|
|
32
|
+
)
|
|
33
|
+
|
|
34
|
+
export default BarGraphStacked
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options.
|
|
@@ -9,6 +9,9 @@ examples:
|
|
|
9
9
|
- bar_graph_spline: Spline
|
|
10
10
|
- bar_graph_colors: Color Overrides
|
|
11
11
|
- bar_graph_custom: Custom Overrides
|
|
12
|
+
- bar_graph_stacked: Stacked
|
|
13
|
+
- bar_graph_negative_numbers: Negative Numbers
|
|
14
|
+
- bar_graph_secondary_y_axis: Secondary Y-Axis
|
|
12
15
|
|
|
13
16
|
|
|
14
17
|
react:
|
|
@@ -20,3 +23,6 @@ examples:
|
|
|
20
23
|
- bar_graph_spline: Spline
|
|
21
24
|
- bar_graph_colors: Color Overrides
|
|
22
25
|
- bar_graph_custom: Custom Overrides
|
|
26
|
+
- bar_graph_stacked: Stacked
|
|
27
|
+
- bar_graph_negative_numbers: Negative Numbers
|
|
28
|
+
- bar_graph_secondary_y_axis: Secondary Y-Axis
|
|
@@ -6,3 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
|
|
|
6
6
|
export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
|
|
7
7
|
export { default as BarGraphColors } from './_bar_graph_colors.jsx'
|
|
8
8
|
export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
|
|
9
|
+
export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
|
|
10
|
+
export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
|
|
11
|
+
export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown } from '../../'
|
|
3
|
+
|
|
4
|
+
const DropdownDefault = (props) => {
|
|
5
|
+
// eslint-disable-next-line no-unused-vars
|
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
7
|
+
|
|
8
|
+
const options = [
|
|
9
|
+
{
|
|
10
|
+
label: "United States",
|
|
11
|
+
value: "United States",
|
|
12
|
+
areaCode: "+1",
|
|
13
|
+
icon: "🇺🇸",
|
|
14
|
+
id: "United-states"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ukraine",
|
|
18
|
+
value: "Ukraine",
|
|
19
|
+
areaCode: "+380",
|
|
20
|
+
icon: "🇺🇦",
|
|
21
|
+
id: "ukraine"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Pakistan",
|
|
25
|
+
value: "Pakistan",
|
|
26
|
+
areaCode: "+92",
|
|
27
|
+
icon: "🇵🇰",
|
|
28
|
+
id: "pakistan"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<Dropdown
|
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
37
|
+
options={options}
|
|
38
|
+
{...props}
|
|
39
|
+
>
|
|
40
|
+
{options.map((option) => (
|
|
41
|
+
<Dropdown.Option key={option.id}
|
|
42
|
+
option={option}
|
|
43
|
+
/>
|
|
44
|
+
))}
|
|
45
|
+
</Dropdown>
|
|
46
|
+
</div>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default DropdownDefault
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
|
|
3
|
+
|
|
4
|
+
const DropdownWithCustomDisplay = (props) => {
|
|
5
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
6
|
+
|
|
7
|
+
const options = [
|
|
8
|
+
{
|
|
9
|
+
label: "Jasper Furniss",
|
|
10
|
+
value: "Jasper Furniss",
|
|
11
|
+
territory: "PHL",
|
|
12
|
+
title: "Senior UX Engineer",
|
|
13
|
+
id: "jasper-furniss",
|
|
14
|
+
status: "Offline"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ramon Ruiz",
|
|
18
|
+
value: "Ramon Ruiz",
|
|
19
|
+
territory: "PHL",
|
|
20
|
+
title: "Senior UX Desinger",
|
|
21
|
+
id: "ramon-ruiz",
|
|
22
|
+
status: "Away"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
label: "Jason Cypret",
|
|
26
|
+
value: "Jason Cypret",
|
|
27
|
+
territory: "PHL",
|
|
28
|
+
title: "VP of User Experience",
|
|
29
|
+
id: "jason-cypret",
|
|
30
|
+
status: "Online"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Courtney Long",
|
|
34
|
+
value: "Courtney Long",
|
|
35
|
+
territory: "PHL",
|
|
36
|
+
title: "UX Design Mentor",
|
|
37
|
+
id: "courtney-long",
|
|
38
|
+
status: "Online"
|
|
39
|
+
}
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
const customDisplay = () => {
|
|
43
|
+
return (
|
|
44
|
+
<>
|
|
45
|
+
{
|
|
46
|
+
selectedOption && (
|
|
47
|
+
<Avatar
|
|
48
|
+
name={selectedOption.label}
|
|
49
|
+
size="xs"
|
|
50
|
+
/>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
</>
|
|
54
|
+
)
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<div>
|
|
60
|
+
<Dropdown
|
|
61
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
62
|
+
options={options}
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<Dropdown.Trigger customDisplay={customDisplay()}/>
|
|
66
|
+
{options.map((option) => (
|
|
67
|
+
<Dropdown.Option key={option.id}
|
|
68
|
+
option={option}
|
|
69
|
+
>
|
|
70
|
+
<>
|
|
71
|
+
<FlexItem>
|
|
72
|
+
<User
|
|
73
|
+
align="left"
|
|
74
|
+
avatar
|
|
75
|
+
name={option.label}
|
|
76
|
+
orientation="horizontal"
|
|
77
|
+
territory={option.territory}
|
|
78
|
+
title={option.title}
|
|
79
|
+
/>
|
|
80
|
+
</FlexItem>
|
|
81
|
+
<FlexItem>
|
|
82
|
+
<Badge
|
|
83
|
+
rounded
|
|
84
|
+
text={option.status}
|
|
85
|
+
variant={`${
|
|
86
|
+
option.status === "Offline"
|
|
87
|
+
? "neutral"
|
|
88
|
+
: option.status === "Online"
|
|
89
|
+
? "success"
|
|
90
|
+
: "warning"
|
|
91
|
+
}`}
|
|
92
|
+
/>
|
|
93
|
+
</FlexItem>
|
|
94
|
+
</>
|
|
95
|
+
</Dropdown.Option>
|
|
96
|
+
))}
|
|
97
|
+
</Dropdown>
|
|
98
|
+
</div>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export default DropdownWithCustomDisplay
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
|
|
3
|
+
|
|
4
|
+
const DropdownWithCustomOptions = (props) => {
|
|
5
|
+
// eslint-disable-next-line no-unused-vars
|
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
7
|
+
|
|
8
|
+
const options = [
|
|
9
|
+
{
|
|
10
|
+
label: "United States",
|
|
11
|
+
value: "United States",
|
|
12
|
+
areaCode: "+1",
|
|
13
|
+
icon: "🇺🇸",
|
|
14
|
+
id: "United-states"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ukraine",
|
|
18
|
+
value: "Ukraine",
|
|
19
|
+
areaCode: "+380",
|
|
20
|
+
icon: "🇺🇦",
|
|
21
|
+
id: "ukraine"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Pakistan",
|
|
25
|
+
value: "Pakistan",
|
|
26
|
+
areaCode: "+92",
|
|
27
|
+
icon: "🇵🇰",
|
|
28
|
+
id: "pakistan"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<Dropdown
|
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
37
|
+
options={options}
|
|
38
|
+
{...props}
|
|
39
|
+
>
|
|
40
|
+
{options.map((option) => (
|
|
41
|
+
<Dropdown.Option key={option.id}
|
|
42
|
+
option={option}
|
|
43
|
+
>
|
|
44
|
+
<>
|
|
45
|
+
<FlexItem>
|
|
46
|
+
<Flex>
|
|
47
|
+
<Icon icon={option.icon}
|
|
48
|
+
paddingRight="xs"
|
|
49
|
+
/>
|
|
50
|
+
<Body text={option.label} />
|
|
51
|
+
</Flex>
|
|
52
|
+
</FlexItem>
|
|
53
|
+
<FlexItem>
|
|
54
|
+
<Body color="light"
|
|
55
|
+
text={option.areaCode}
|
|
56
|
+
/>
|
|
57
|
+
</FlexItem>
|
|
58
|
+
</>
|
|
59
|
+
</Dropdown.Option>
|
|
60
|
+
))}
|
|
61
|
+
</Dropdown>
|
|
62
|
+
</div>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export default DropdownWithCustomOptions
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
|
|
3
|
+
|
|
4
|
+
const DropdownWithCustomTrigger = (props) => {
|
|
5
|
+
|
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
7
|
+
|
|
8
|
+
const options = [
|
|
9
|
+
{
|
|
10
|
+
label: "United States",
|
|
11
|
+
value: "United States",
|
|
12
|
+
areaCode: "+1",
|
|
13
|
+
icon: "🇺🇸",
|
|
14
|
+
id: "United-states"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ukraine",
|
|
18
|
+
value: "Ukraine",
|
|
19
|
+
areaCode: "+380",
|
|
20
|
+
icon: "🇺🇦",
|
|
21
|
+
id: "ukraine"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Pakistan",
|
|
25
|
+
value: "Pakistan",
|
|
26
|
+
areaCode: "+92",
|
|
27
|
+
icon: "🇵🇰",
|
|
28
|
+
id: "pakistan"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<Dropdown
|
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
37
|
+
options={options}
|
|
38
|
+
{...props}
|
|
39
|
+
>
|
|
40
|
+
<Dropdown.Trigger>
|
|
41
|
+
<div key={selectedOption ? selectedOption.icon : "flag"}>
|
|
42
|
+
<IconCircle
|
|
43
|
+
cursor="pointer"
|
|
44
|
+
icon={selectedOption ? selectedOption.icon : "flag"}
|
|
45
|
+
variant="royal"
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
</Dropdown.Trigger>
|
|
49
|
+
<Dropdown.Container maxWidth="xs">
|
|
50
|
+
{options.map((option) => (
|
|
51
|
+
<Dropdown.Option key={option.id}
|
|
52
|
+
option={option}
|
|
53
|
+
>
|
|
54
|
+
<>
|
|
55
|
+
<FlexItem>
|
|
56
|
+
<Flex>
|
|
57
|
+
<Icon icon={option.icon}
|
|
58
|
+
paddingRight="xs"
|
|
59
|
+
/>
|
|
60
|
+
<Body text={option.label} />
|
|
61
|
+
</Flex>
|
|
62
|
+
</FlexItem>
|
|
63
|
+
<FlexItem>
|
|
64
|
+
<Body color="light"
|
|
65
|
+
text={option.areaCode}
|
|
66
|
+
/>
|
|
67
|
+
</FlexItem>
|
|
68
|
+
</>
|
|
69
|
+
</Dropdown.Option>
|
|
70
|
+
))}
|
|
71
|
+
</Dropdown.Container>
|
|
72
|
+
</Dropdown>
|
|
73
|
+
</div>
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export default DropdownWithCustomTrigger
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { default as DropdownDefault } from './_dropdown_default.jsx'
|
|
2
|
+
export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
|
|
3
|
+
export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
|
|
4
|
+
export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
Button,
|
|
5
|
+
} from '../..'
|
|
6
|
+
|
|
7
|
+
import Typeahead from '../_typeahead'
|
|
8
|
+
|
|
9
|
+
const options = [
|
|
10
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
11
|
+
{ label: 'Red', value: '#FF0000' },
|
|
12
|
+
{ label: 'Green', value: '#00FF00' },
|
|
13
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
14
|
+
{ label: 'Amaranth', value: '#9F2B68' },
|
|
15
|
+
{ label: 'Key Lime', value: '#DAF7A6' },
|
|
16
|
+
{ label: 'Turquois', value: '#00FFD0' },
|
|
17
|
+
]
|
|
18
|
+
|
|
19
|
+
const TypeaheadCustomMenuList = (props) => {
|
|
20
|
+
const defaultColorOptions = options.slice(0, 3)
|
|
21
|
+
const [colorOptions, setColorOptions] = useState(defaultColorOptions)
|
|
22
|
+
|
|
23
|
+
const moreToLoad = colorOptions.length == defaultColorOptions.length
|
|
24
|
+
const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
|
|
25
|
+
|
|
26
|
+
const menuListProps = {
|
|
27
|
+
footer: (<Button
|
|
28
|
+
margin="sm"
|
|
29
|
+
onClick={loadColors}
|
|
30
|
+
text={`Load ${moreToLoad ? "More" : "Less"}`}
|
|
31
|
+
/>)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const MenuList = (props) => (
|
|
35
|
+
<Typeahead.MenuList
|
|
36
|
+
{...menuListProps}
|
|
37
|
+
{...props}
|
|
38
|
+
/>
|
|
39
|
+
)
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<Typeahead
|
|
43
|
+
components={{ MenuList }}
|
|
44
|
+
label="Colors"
|
|
45
|
+
options={colorOptions}
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export default TypeaheadCustomMenuList
|
|
@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
|
|
|
9
9
|
export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
|
|
10
10
|
export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
|
|
11
11
|
export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
|
|
12
|
+
export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
|
data/dist/menu.yml
CHANGED
|
@@ -254,6 +254,10 @@ kits:
|
|
|
254
254
|
platforms: *web
|
|
255
255
|
description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
|
|
256
256
|
status: "stable"
|
|
257
|
+
- name: dropdown
|
|
258
|
+
platforms: *react_only
|
|
259
|
+
description: ""
|
|
260
|
+
status: "beta"
|
|
257
261
|
- name: "multi_level_select"
|
|
258
262
|
platforms: *web
|
|
259
263
|
description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
|
|
@@ -460,4 +464,4 @@ kits:
|
|
|
460
464
|
- name: "user"
|
|
461
465
|
platforms: *web
|
|
462
466
|
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
|
463
|
-
status: "stable"
|
|
467
|
+
status: "stable"
|