playbook_ui_docs 14.16.0.pre.rc.0 → 14.16.0.pre.rc.2
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_editing.jsx +102 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.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/playbook-doc.js +1 -1
- metadata +9 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 772529d63fd7a2bab3d1cc810c1b20b5b94043a84833ff4e650bb4f459179f48
|
|
4
|
+
data.tar.gz: d2a43100853d291f5e5bf0b6e0b5af025176d0f992a9ef732853a4616e057f4e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 66749f23af5453b1547b98a941fa45688c213f972e26529aefda4832ee15b7bb1439ad8dc338b747ec5621a5806fb0b299cb5922fa119f406513346765791577
|
|
7
|
+
data.tar.gz: aea449b9e4e1b9b8fb24cf81d5ae31ce114c0e99b19bbb98aaf88bfd25d5a8609e97b18fb4bb92bd7019baabc90eeca8b94f12e8fdf9dc6e674c2c36748db70d
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { AdvancedTable, TextInput, Body } from "playbook-ui";
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json";
|
|
4
|
+
|
|
5
|
+
const AdvancedTableInlineEditing = (props) => {
|
|
6
|
+
const [editedValues, setEditedValues] = useState({});
|
|
7
|
+
|
|
8
|
+
const EditableCell = ({ rowId, originalValue, onSave }) => {
|
|
9
|
+
const [localValue, setLocalValue] = useState(originalValue);
|
|
10
|
+
|
|
11
|
+
const handleChange = (e) => setLocalValue(e.target.value);
|
|
12
|
+
|
|
13
|
+
const handleBlur = () => {
|
|
14
|
+
originalValue !== localValue && onSave(rowId, localValue);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<TextInput inline
|
|
19
|
+
marginBottom="none"
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<input
|
|
23
|
+
onBlur={handleBlur}
|
|
24
|
+
onChange={handleChange}
|
|
25
|
+
onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
|
|
26
|
+
value={localValue}
|
|
27
|
+
/>
|
|
28
|
+
</TextInput>
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const columnDefinitions = [
|
|
33
|
+
{
|
|
34
|
+
accessor: "year",
|
|
35
|
+
label: "Year",
|
|
36
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
accessor: "newEnrollments",
|
|
40
|
+
label: "New Enrollments",
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
accessor: "scheduledMeetings",
|
|
44
|
+
label: "Scheduled Meetings",
|
|
45
|
+
editable: true,
|
|
46
|
+
customRenderer: (row) => {
|
|
47
|
+
return (
|
|
48
|
+
<EditableCell
|
|
49
|
+
onSave={(id, val) => {
|
|
50
|
+
setEditedValues((prev) => ({ ...prev, [id]: val }));
|
|
51
|
+
}}
|
|
52
|
+
originalValue={
|
|
53
|
+
editedValues[row.id] ?? row.original.scheduledMeetings
|
|
54
|
+
}
|
|
55
|
+
rowId={row.id}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
accessor: "attendanceRate",
|
|
62
|
+
label: "Attendance Rate",
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
accessor: "completedClasses",
|
|
66
|
+
label: "Completed Classes",
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
accessor: "classCompletionRate",
|
|
70
|
+
label: "Class Completion Rate",
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
accessor: "graduatedStudents",
|
|
74
|
+
label: "Graduated Students",
|
|
75
|
+
},
|
|
76
|
+
];
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<div className="App">
|
|
80
|
+
<AdvancedTable
|
|
81
|
+
columnDefinitions={columnDefinitions}
|
|
82
|
+
tableData={MOCK_DATA}
|
|
83
|
+
{...props}
|
|
84
|
+
/>
|
|
85
|
+
{
|
|
86
|
+
editedValues && Object.keys(editedValues).length > 0 && (
|
|
87
|
+
<>
|
|
88
|
+
<Body
|
|
89
|
+
marginTop="md"
|
|
90
|
+
{...props}
|
|
91
|
+
>
|
|
92
|
+
Edited Values by Row Id:
|
|
93
|
+
</Body>
|
|
94
|
+
<pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
|
|
95
|
+
</>
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
export default AdvancedTableInlineEditing;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions.
|
|
2
|
+
|
|
3
|
+
Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
|
|
4
|
+
See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.
|
|
@@ -36,4 +36,5 @@ examples:
|
|
|
36
36
|
- advanced_table_selectable_rows: Selectable Rows
|
|
37
37
|
- advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
|
|
38
38
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
|
39
|
-
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
|
39
|
+
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
|
40
|
+
- advanced_table_inline_editing: Inline Cell Editing
|
|
@@ -20,4 +20,5 @@ export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.
|
|
|
20
20
|
export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
|
|
21
21
|
export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
|
|
22
22
|
export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
|
|
23
|
-
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
|
23
|
+
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
|
24
|
+
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select"
|
|
3
|
+
import { useForm } from "react-hook-form"
|
|
4
|
+
|
|
5
|
+
const treeData = [
|
|
6
|
+
{
|
|
7
|
+
label: "Power Home Remodeling",
|
|
8
|
+
value: "Power Home Remodeling",
|
|
9
|
+
id: "powerhome1",
|
|
10
|
+
expanded: true,
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
label: "People",
|
|
14
|
+
value: "People",
|
|
15
|
+
id: "people1",
|
|
16
|
+
expanded: true,
|
|
17
|
+
children: [
|
|
18
|
+
{
|
|
19
|
+
label: "Talent Acquisition",
|
|
20
|
+
value: "Talent Acquisition",
|
|
21
|
+
id: "talent1",
|
|
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
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "Learning & Development",
|
|
35
|
+
value: "Learning & Development",
|
|
36
|
+
id: "development1",
|
|
37
|
+
},
|
|
38
|
+
],
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "People Experience",
|
|
42
|
+
value: "People Experience",
|
|
43
|
+
id: "experience1",
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "Contact Center",
|
|
49
|
+
value: "Contact Center",
|
|
50
|
+
id: "contact1",
|
|
51
|
+
children: [
|
|
52
|
+
{
|
|
53
|
+
label: "Appointment Management",
|
|
54
|
+
value: "Appointment Management",
|
|
55
|
+
id: "appointment1",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Customer Service",
|
|
59
|
+
value: "Customer Service",
|
|
60
|
+
id: "customer1",
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
label: "Energy",
|
|
64
|
+
value: "Energy",
|
|
65
|
+
id: "energy1",
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
]
|
|
72
|
+
|
|
73
|
+
const MultiLevelSelectReactHook = (props) => {
|
|
74
|
+
const { register, watch } = useForm()
|
|
75
|
+
const selectedItems = watch("departments")
|
|
76
|
+
selectedItems && console.log("Selected Items", selectedItems)
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<div>
|
|
80
|
+
<MultiLevelSelect
|
|
81
|
+
id="multiselect-default"
|
|
82
|
+
marginBottom="md"
|
|
83
|
+
treeData={treeData}
|
|
84
|
+
{...register("departments")}
|
|
85
|
+
{...props}
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
)
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export default MultiLevelSelectReactHook
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.
|
|
@@ -12,6 +12,7 @@ examples:
|
|
|
12
12
|
|
|
13
13
|
react:
|
|
14
14
|
- multi_level_select_default: Default
|
|
15
|
+
- multi_level_select_react_hook: React Hook
|
|
15
16
|
- multi_level_select_single: Single Select
|
|
16
17
|
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
17
18
|
- multi_level_select_return_all_selected: Return All Selected
|
|
@@ -7,3 +7,4 @@ export { default as MultiLevelSelectColor } from './_multi_level_select_color.js
|
|
|
7
7
|
export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
|
|
8
8
|
export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
|
|
9
9
|
export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
|
|
10
|
+
export { default as MultiLevelSelectReactHook } from './_multi_level_select_react_hook.jsx'
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
|
|
2
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
|
|
3
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
|
|
4
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
|
5
|
+
Send Email
|
|
6
|
+
<% end %>
|
|
7
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
|
|
8
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
|
|
9
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
|
10
|
+
Send Email
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
|
|
13
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
|
|
14
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
|
15
|
+
Send Email
|
|
16
|
+
<% end %>
|
|
17
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
|
|
18
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
|
|
19
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
|
20
|
+
Send Email
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
@@ -4,6 +4,7 @@ examples:
|
|
|
4
4
|
- tooltip_default: Default
|
|
5
5
|
- tooltip_interaction: Content Interaction
|
|
6
6
|
- tooltip_selectors: Using Common Selectors
|
|
7
|
+
- tooltip_icon_rails: Tooltip with Icon
|
|
7
8
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
|
8
9
|
- tooltip_delay_rails: Delay
|
|
9
10
|
- tooltip_show_tooltip: Show Tooltip
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import { Typeahead, Title } from 'playbook-ui'
|
|
4
|
+
import { useForm } from 'react-hook-form'
|
|
5
|
+
|
|
6
|
+
const languages = [
|
|
7
|
+
{ label: 'JavaScript', value: '1995', category: 'Web Development' },
|
|
8
|
+
{ label: 'Python', value: '1991', category: 'General Purpose' },
|
|
9
|
+
{ label: 'Java', value: '1995', category: 'Enterprise' },
|
|
10
|
+
{ label: 'C++', value: '1985', category: 'Systems Programming' },
|
|
11
|
+
{ label: 'Go', value: '2009', category: 'Systems Programming' },
|
|
12
|
+
{ label: 'Rust', value: '2010', category: 'Systems Programming' },
|
|
13
|
+
{ label: 'Swift', value: '2014', category: 'Mobile Development' },
|
|
14
|
+
{ label: 'Kotlin', value: '2011', category: 'Mobile Development' },
|
|
15
|
+
{ label: 'Ruby', value: '1995', category: 'General Purpose' },
|
|
16
|
+
{ label: 'PHP', value: '1995', category: 'Web Development' },
|
|
17
|
+
]
|
|
18
|
+
|
|
19
|
+
const colors = [
|
|
20
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
21
|
+
{ label: 'Red', value: '#FF0000' },
|
|
22
|
+
{ label: 'Green', value: '#00FF00' },
|
|
23
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
const TypeaheadReactHook = (props) => {
|
|
27
|
+
const { register, watch } = useForm()
|
|
28
|
+
|
|
29
|
+
const selectedLanguages = watch('languages')
|
|
30
|
+
const selectedColor = watch('color')
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<Typeahead
|
|
35
|
+
isMulti
|
|
36
|
+
label="Multi Select Languages"
|
|
37
|
+
multiKit="language"
|
|
38
|
+
options={languages}
|
|
39
|
+
{...props}
|
|
40
|
+
{...register('languages')}
|
|
41
|
+
/>
|
|
42
|
+
<Title
|
|
43
|
+
size={4}
|
|
44
|
+
text='Selected Languages'
|
|
45
|
+
/>
|
|
46
|
+
{selectedLanguages && selectedLanguages.map(language => (
|
|
47
|
+
<p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
|
|
48
|
+
))}
|
|
49
|
+
|
|
50
|
+
<Typeahead
|
|
51
|
+
label="Colors"
|
|
52
|
+
marginTop="lg"
|
|
53
|
+
options={colors}
|
|
54
|
+
{...props}
|
|
55
|
+
{...register('color')}
|
|
56
|
+
/>
|
|
57
|
+
<Title
|
|
58
|
+
size={4}
|
|
59
|
+
text='Selected Color'
|
|
60
|
+
/>
|
|
61
|
+
<p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
|
|
62
|
+
</>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export default TypeaheadReactHook
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
You can pass `react-hook-form` props to the Typeahead kit.
|
|
@@ -49,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
|
|
|
49
49
|
* @summary - for doc example purposes only
|
|
50
50
|
*/
|
|
51
51
|
const handleOnMultiValueClick = (value) => {
|
|
52
|
-
alert(`You
|
|
52
|
+
alert(`You added the user: "${value.label}"`)
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
return (
|
|
@@ -56,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
|
|
|
56
56
|
* @summary - for doc example purposes only
|
|
57
57
|
*/
|
|
58
58
|
const handleOnMultiValueClick = (value) => {
|
|
59
|
-
alert(`You
|
|
59
|
+
alert(`You added the user: "${value.label}"`)
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
return (
|
|
@@ -13,3 +13,4 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
|
|
|
13
13
|
export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
|
|
14
14
|
export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
|
|
15
15
|
export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
|
|
16
|
+
export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|