playbook_ui_docs 15.3.0 → 15.4.0.pre.rc.1
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_inline_row_loading.jsx +28 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +11 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js +42 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +68 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb +64 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx +70 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb +67 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx +68 -6
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -1
- data/dist/playbook-doc.js +2 -2
- metadata +9 -3
- /data/app/pb_kits/playbook/pb_popover/docs/{_popover_append_to.md → _popover_append_to_rails.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: 7ac55085fcb750ce81b4b65727f8d5109e4a0a66e314be044e1b22ccf557c916
|
|
4
|
+
data.tar.gz: 817b5503d03bf7690938f2a8a382bb66e90bc39f79c027ef53360baa2f94d2f3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 74df73e915b69736c26ddcb09781e62b636fea5bd5a386b17fd84a457a0e0cc1cc8e5ec98198ae82c61b34792f7b1358f2dd00e60b95c9ddeb1e4cbc8c163d18
|
|
7
|
+
data.tar.gz: cf4d0bc977064a325ef399fa5ffe5b258a329e3b756c75f17e52b1d7b6fa4aedac074d3b604dba4c9295ac38a787df2df49011d211cb970f799636dce666d9d1
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
+
import Caption from '../../pb_caption/_caption'
|
|
3
4
|
import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
|
|
5
|
+
import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
|
|
4
6
|
|
|
5
7
|
const AdvancedTableInlineRowLoading = (props) => {
|
|
6
8
|
const columnDefinitions = [
|
|
@@ -41,16 +43,42 @@ const AdvancedTableInlineRowLoading = (props) => {
|
|
|
41
43
|
|
|
42
44
|
return (
|
|
43
45
|
<div>
|
|
46
|
+
<Caption text="Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" />
|
|
44
47
|
<AdvancedTable
|
|
45
48
|
columnDefinitions={columnDefinitions}
|
|
46
49
|
enableToggleExpansion="all"
|
|
47
50
|
inlineRowLoading
|
|
51
|
+
marginBottom="md"
|
|
48
52
|
tableData={MOCK_DATA_INLINE_LOADING}
|
|
49
53
|
{...props}
|
|
50
54
|
>
|
|
51
55
|
<AdvancedTable.Header />
|
|
52
56
|
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
53
57
|
</AdvancedTable>
|
|
58
|
+
<Caption text="Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" />
|
|
59
|
+
<AdvancedTable
|
|
60
|
+
columnDefinitions={columnDefinitions}
|
|
61
|
+
enableToggleExpansion="all"
|
|
62
|
+
inlineRowLoading
|
|
63
|
+
marginBottom="md"
|
|
64
|
+
tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
|
|
65
|
+
{...props}
|
|
66
|
+
>
|
|
67
|
+
<AdvancedTable.Header />
|
|
68
|
+
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
69
|
+
</AdvancedTable>
|
|
70
|
+
<Caption text="Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" />
|
|
71
|
+
<AdvancedTable
|
|
72
|
+
columnDefinitions={columnDefinitions}
|
|
73
|
+
enableToggleExpansion="all"
|
|
74
|
+
inlineRowLoading
|
|
75
|
+
persistToggleExpansionButton
|
|
76
|
+
tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
|
|
77
|
+
{...props}
|
|
78
|
+
>
|
|
79
|
+
<AdvancedTable.Header />
|
|
80
|
+
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
81
|
+
</AdvancedTable>
|
|
54
82
|
</div>
|
|
55
83
|
)
|
|
56
84
|
}
|
|
@@ -1,5 +1,14 @@
|
|
|
1
|
+
### inlineRowLoading
|
|
1
2
|
As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
|
|
2
3
|
|
|
3
|
-
In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
|
|
4
|
+
In the first Advanced Table in this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
|
|
4
5
|
|
|
5
|
-
This prop is set to `false` by default.
|
|
6
|
+
This prop is set to `false` by default.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### persistToggleExpansion
|
|
10
|
+
The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
11
|
+
|
|
12
|
+
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`.
|
|
13
|
+
|
|
14
|
+
This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with
|
|
1
|
+
`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with the following optional items:
|
|
2
2
|
|
|
3
3
|
- `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
|
|
4
4
|
- `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
|
|
5
|
-
- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
|
|
5
|
+
- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
|
|
6
|
+
- `onPageChange`: A callback function that gives to access to the current page index.
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
|
|
2
|
+
{
|
|
3
|
+
year: "2021",
|
|
4
|
+
quarter: null,
|
|
5
|
+
month: null,
|
|
6
|
+
day: null,
|
|
7
|
+
newEnrollments: "20",
|
|
8
|
+
scheduledMeetings: "10",
|
|
9
|
+
attendanceRate: "51%",
|
|
10
|
+
completedClasses: "3",
|
|
11
|
+
classCompletionRate: "33%",
|
|
12
|
+
graduatedStudents: "19",
|
|
13
|
+
children: [],
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
year: "2022",
|
|
17
|
+
quarter: null,
|
|
18
|
+
month: null,
|
|
19
|
+
day: null,
|
|
20
|
+
newEnrollments: "25",
|
|
21
|
+
scheduledMeetings: "17",
|
|
22
|
+
attendanceRate: "75%",
|
|
23
|
+
completedClasses: "5",
|
|
24
|
+
classCompletionRate: "45%",
|
|
25
|
+
graduatedStudents: "32",
|
|
26
|
+
children: [],
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
year: "2023",
|
|
30
|
+
quarter: null,
|
|
31
|
+
month: null,
|
|
32
|
+
day: null,
|
|
33
|
+
newEnrollments: "10",
|
|
34
|
+
scheduledMeetings: "15",
|
|
35
|
+
attendanceRate: "65%",
|
|
36
|
+
completedClasses: "4",
|
|
37
|
+
classCompletionRate: "49%",
|
|
38
|
+
graduatedStudents: "29",
|
|
39
|
+
children: [],
|
|
40
|
+
},
|
|
41
|
+
]
|
|
42
|
+
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
if (submitButton) {
|
|
20
20
|
let currentClass = submitButton.className;
|
|
21
|
-
let newClass = currentClass.replace("
|
|
21
|
+
let newClass = currentClass.replace("pb_button_disabled pb_button_loading", "pb_button_enabled");
|
|
22
22
|
|
|
23
23
|
let cancelClass = cancelButton ? cancelButton.className : "";
|
|
24
24
|
let newCancelClass = cancelClass.replace("_disabled", "_enabled");
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
|
|
3
|
+
|
|
4
|
+
const PopoverAppendTo = (props) => {
|
|
5
|
+
const [showParentPopover, setShowParentPopover] = useState(false);
|
|
6
|
+
const [showSelectorPopover, setShowSelectorPopover] = useState(false);
|
|
7
|
+
|
|
8
|
+
const parentPopoverReference = (
|
|
9
|
+
<CircleIconButton
|
|
10
|
+
icon="info"
|
|
11
|
+
onClick={() => setShowParentPopover(!showParentPopover)}
|
|
12
|
+
variant="secondary"
|
|
13
|
+
/>
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
const selectorPopoverReference = (
|
|
17
|
+
<CircleIconButton
|
|
18
|
+
icon="info"
|
|
19
|
+
onClick={() => setShowSelectorPopover(!showSelectorPopover)}
|
|
20
|
+
variant="secondary"
|
|
21
|
+
/>
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<>
|
|
26
|
+
<Flex
|
|
27
|
+
marginBottom="md"
|
|
28
|
+
orientation="row"
|
|
29
|
+
vertical="center"
|
|
30
|
+
{...props}
|
|
31
|
+
>
|
|
32
|
+
<Body text="Click info for more details" />
|
|
33
|
+
|
|
34
|
+
<PbReactPopover
|
|
35
|
+
appendTo="parent"
|
|
36
|
+
offset
|
|
37
|
+
placement="top"
|
|
38
|
+
reference={parentPopoverReference}
|
|
39
|
+
show={showParentPopover}
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
{'I\'m a popover. I have been appended to my parent element.'}
|
|
43
|
+
</PbReactPopover>
|
|
44
|
+
</Flex>
|
|
45
|
+
|
|
46
|
+
<Flex
|
|
47
|
+
orientation="row"
|
|
48
|
+
vertical="center"
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
<Body text="Click info for more details" />
|
|
52
|
+
|
|
53
|
+
<PbReactPopover
|
|
54
|
+
appendTo=".kit-show-wrapper"
|
|
55
|
+
offset
|
|
56
|
+
placement="top"
|
|
57
|
+
reference={selectorPopoverReference}
|
|
58
|
+
show={showSelectorPopover}
|
|
59
|
+
{...props}
|
|
60
|
+
>
|
|
61
|
+
{'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
|
|
62
|
+
</PbReactPopover>
|
|
63
|
+
</Flex>
|
|
64
|
+
</>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export default PopoverAppendTo;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
|
|
@@ -4,3 +4,4 @@ export { default as PopoverClose } from './_popover_close.jsx'
|
|
|
4
4
|
export { default as PopoverZIndex } from './_popover_z_index.jsx'
|
|
5
5
|
export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
|
|
6
6
|
export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
|
|
7
|
+
export { default as PopoverAppendTo } from './_popover_append_to.jsx'
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<%
|
|
2
|
+
grouped_options = [
|
|
3
|
+
{
|
|
4
|
+
label: "Warm Colors",
|
|
5
|
+
options: [
|
|
6
|
+
{ label: "Red", value: "#FF0000" },
|
|
7
|
+
{ label: "Orange", value: "#FFA500" },
|
|
8
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
9
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
10
|
+
{ label: "Gold", value: "#FFD700" }
|
|
11
|
+
]
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Cool Colors",
|
|
15
|
+
options: [
|
|
16
|
+
{ label: "Blue", value: "#0000FF" },
|
|
17
|
+
{ label: "Teal", value: "#008080" },
|
|
18
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
19
|
+
{ label: "Navy", value: "#000080" },
|
|
20
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Neutrals",
|
|
25
|
+
options: [
|
|
26
|
+
{ label: "White", value: "#FFFFFF" },
|
|
27
|
+
{ label: "Black", value: "#000000" },
|
|
28
|
+
{ label: "Gray", value: "#808080" },
|
|
29
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
30
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "Earth Tones",
|
|
35
|
+
options: [
|
|
36
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
37
|
+
{ label: "Olive", value: "#808000" },
|
|
38
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
39
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
40
|
+
{ label: "Maroon", value: "#800000" }
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: "Fun Shades",
|
|
45
|
+
options: [
|
|
46
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
47
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
48
|
+
{ label: "Lime", value: "#00FF00" },
|
|
49
|
+
{ label: "Purple", value: "#800080" },
|
|
50
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
%>
|
|
55
|
+
<br />
|
|
56
|
+
<%= pb_rails("typeahead", props: {
|
|
57
|
+
id: "typeahead-custom-options",
|
|
58
|
+
options: grouped_options,
|
|
59
|
+
label: "Colors",
|
|
60
|
+
name: :foo,
|
|
61
|
+
placeholder: "Select a Color...",
|
|
62
|
+
is_multi: false
|
|
63
|
+
})
|
|
64
|
+
%>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Typeahead from '../_typeahead'
|
|
4
|
+
|
|
5
|
+
const groupedOptions = [
|
|
6
|
+
{
|
|
7
|
+
label: "Warm Colors",
|
|
8
|
+
options: [
|
|
9
|
+
{ label: "Red", value: "#FF0000" },
|
|
10
|
+
{ label: "Orange", value: "#FFA500" },
|
|
11
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
12
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
13
|
+
{ label: "Gold", value: "#FFD700" }
|
|
14
|
+
]
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Cool Colors",
|
|
18
|
+
options: [
|
|
19
|
+
{ label: "Blue", value: "#0000FF" },
|
|
20
|
+
{ label: "Teal", value: "#008080" },
|
|
21
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
22
|
+
{ label: "Navy", value: "#000080" },
|
|
23
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
label: "Neutrals",
|
|
28
|
+
options: [
|
|
29
|
+
{ label: "White", value: "#FFFFFF" },
|
|
30
|
+
{ label: "Black", value: "#000000" },
|
|
31
|
+
{ label: "Gray", value: "#808080" },
|
|
32
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
33
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: "Earth Tones",
|
|
38
|
+
options: [
|
|
39
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
40
|
+
{ label: "Olive", value: "#808000" },
|
|
41
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
42
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
43
|
+
{ label: "Maroon", value: "#800000" }
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Fun Shades",
|
|
48
|
+
options: [
|
|
49
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
50
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
51
|
+
{ label: "Lime", value: "#00FF00" },
|
|
52
|
+
{ label: "Purple", value: "#800080" },
|
|
53
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
|
|
58
|
+
const TypeaheadCustomOptions = (props) => {
|
|
59
|
+
return (
|
|
60
|
+
<Typeahead
|
|
61
|
+
label="Colors"
|
|
62
|
+
options={groupedOptions}
|
|
63
|
+
placeholder="Select a Color..."
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
)
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export default TypeaheadCustomOptions
|
|
70
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Grouped options can be rendered via structuring the options in the way shown in the code snippet below.
|
|
@@ -25,11 +25,77 @@
|
|
|
25
25
|
]
|
|
26
26
|
%>
|
|
27
27
|
|
|
28
|
+
<%
|
|
29
|
+
grouped_options = [
|
|
30
|
+
{
|
|
31
|
+
label: "Warm Colors",
|
|
32
|
+
options: [
|
|
33
|
+
{ label: "Red", value: "#FF0000" },
|
|
34
|
+
{ label: "Orange", value: "#FFA500" },
|
|
35
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
36
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
37
|
+
{ label: "Gold", value: "#FFD700" }
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "Cool Colors",
|
|
42
|
+
options: [
|
|
43
|
+
{ label: "Blue", value: "#0000FF" },
|
|
44
|
+
{ label: "Teal", value: "#008080" },
|
|
45
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
46
|
+
{ label: "Navy", value: "#000080" },
|
|
47
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
label: "Neutrals",
|
|
52
|
+
options: [
|
|
53
|
+
{ label: "White", value: "#FFFFFF" },
|
|
54
|
+
{ label: "Black", value: "#000000" },
|
|
55
|
+
{ label: "Gray", value: "#808080" },
|
|
56
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
57
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
label: "Earth Tones",
|
|
62
|
+
options: [
|
|
63
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
64
|
+
{ label: "Olive", value: "#808000" },
|
|
65
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
66
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
67
|
+
{ label: "Maroon", value: "#800000" }
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
label: "Fun Shades",
|
|
72
|
+
options: [
|
|
73
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
74
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
75
|
+
{ label: "Lime", value: "#00FF00" },
|
|
76
|
+
{ label: "Purple", value: "#800080" },
|
|
77
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
%>
|
|
82
|
+
|
|
83
|
+
|
|
28
84
|
<%= pb_rails("typeahead", props: {
|
|
29
85
|
default_options: [{ label: 'Gray', value: '#808080' }],
|
|
30
86
|
id: "typeahead-default-value",
|
|
31
87
|
options: options,
|
|
32
|
-
label: "
|
|
88
|
+
label: "Default Value with basic options",
|
|
89
|
+
name: :foo,
|
|
90
|
+
is_multi: false
|
|
91
|
+
})
|
|
92
|
+
%>
|
|
93
|
+
|
|
94
|
+
<%= pb_rails("typeahead", props: {
|
|
95
|
+
default_options:[{ label: "Pink", value: "#FFC0CB" }],
|
|
96
|
+
id: "typeahead-default-value-grouped-options",
|
|
97
|
+
options: grouped_options,
|
|
98
|
+
label: "Default Value with grouped options",
|
|
33
99
|
name: :foo,
|
|
34
100
|
is_multi: false
|
|
35
101
|
})
|
|
@@ -27,14 +27,76 @@ const options = [
|
|
|
27
27
|
{ label: 'Coral', value: '#FF7F50' }
|
|
28
28
|
]
|
|
29
29
|
|
|
30
|
+
const groupedOptions = [
|
|
31
|
+
{
|
|
32
|
+
label: "Warm Colors",
|
|
33
|
+
options: [
|
|
34
|
+
{ label: "Red", value: "#FF0000" },
|
|
35
|
+
{ label: "Orange", value: "#FFA500" },
|
|
36
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
37
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
38
|
+
{ label: "Gold", value: "#FFD700" }
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "Cool Colors",
|
|
43
|
+
options: [
|
|
44
|
+
{ label: "Blue", value: "#0000FF" },
|
|
45
|
+
{ label: "Teal", value: "#008080" },
|
|
46
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
47
|
+
{ label: "Navy", value: "#000080" },
|
|
48
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: "Neutrals",
|
|
53
|
+
options: [
|
|
54
|
+
{ label: "White", value: "#FFFFFF" },
|
|
55
|
+
{ label: "Black", value: "#000000" },
|
|
56
|
+
{ label: "Gray", value: "#808080" },
|
|
57
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
58
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Earth Tones",
|
|
63
|
+
options: [
|
|
64
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
65
|
+
{ label: "Olive", value: "#808000" },
|
|
66
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
67
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
68
|
+
{ label: "Maroon", value: "#800000" }
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: "Fun Shades",
|
|
73
|
+
options: [
|
|
74
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
75
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
76
|
+
{ label: "Lime", value: "#00FF00" },
|
|
77
|
+
{ label: "Purple", value: "#800080" },
|
|
78
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
|
|
30
83
|
const TypeaheadDefaultValue = (props) => {
|
|
31
84
|
return (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
85
|
+
<>
|
|
86
|
+
<Typeahead
|
|
87
|
+
defaultValue={options[10]}
|
|
88
|
+
label="Default Value with basic options"
|
|
89
|
+
options={options}
|
|
90
|
+
{...props}
|
|
91
|
+
/>
|
|
92
|
+
<br />
|
|
93
|
+
<Typeahead
|
|
94
|
+
defaultValue={{ label: "Pink", value: "#FFC0CB" }}
|
|
95
|
+
label="Default Value with grouped options"
|
|
96
|
+
options={groupedOptions}
|
|
97
|
+
{...props}
|
|
98
|
+
/>
|
|
99
|
+
</>
|
|
38
100
|
)
|
|
39
101
|
}
|
|
40
102
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- typeahead_default: Default
|
|
4
|
+
- typeahead_custom_options: With Grouped Options
|
|
4
5
|
- typeahead_default_options: With Default Options
|
|
5
6
|
- typeahead_with_context: With Context
|
|
6
7
|
- typeahead_with_pills: With Pills
|
|
@@ -20,6 +21,7 @@ examples:
|
|
|
20
21
|
|
|
21
22
|
react:
|
|
22
23
|
- typeahead_default: Default
|
|
24
|
+
- typeahead_custom_options: With Grouped Options
|
|
23
25
|
- typeahead_default_value: With Default Value
|
|
24
26
|
- typeahead_react_hook: React Hook
|
|
25
27
|
- typeahead_with_highlight: With Highlight
|
|
@@ -16,4 +16,5 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
|
|
|
16
16
|
export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|
|
17
17
|
export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
|
|
18
18
|
export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
|
|
19
|
-
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|
|
19
|
+
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|
|
20
|
+
export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
|