playbook_ui_docs 14.18.1.pre.rc.0 → 14.19.0.pre.alpha.PLAY20937693
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_beta.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -2
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -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 +2 -2
- metadata +36 -14
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_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: 669cb194f03944fd3956f123686a61f7c37dd29daaa218e2179afed2e159c273
|
4
|
+
data.tar.gz: abfd077653a7cb0d71bab3acbc2ab6676dcd6e1b4cac87ae31be525b46ba9a73
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 19426a06cd7e20a24506c5a6873f0450ef16c35eb1fd508d25539fb88a801b1a95413e954537ca59a78be7f0f31b0296976f84d1920288735ee1fdf5344dab79
|
7
|
+
data.tar.gz: 4c622302dc81278aa47d0a80ca8452e5a37fdfdb8ff9991870c680941788195b3ba152ef687e7d49e5a163dfc8666f3e5bfb263935fec3099504c2cc00d856df
|
@@ -1,9 +1,3 @@
|
|
1
|
-
**BETA VERSION**
|
2
|
-
This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
|
3
|
-
<br />
|
4
|
-
<br />
|
5
|
-
<br />
|
6
|
-
|
7
1
|
The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
|
8
2
|
|
9
3
|
### table_data
|
@@ -0,0 +1,80 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
+
|
5
|
+
const AdvancedTableColumnBorderColors = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
11
|
+
},
|
12
|
+
{
|
13
|
+
label: "Enrollment Data",
|
14
|
+
columns: [
|
15
|
+
{
|
16
|
+
label: "Enrollment Stats",
|
17
|
+
columns: [
|
18
|
+
{
|
19
|
+
accessor: "newEnrollments",
|
20
|
+
label: "New Enrollments",
|
21
|
+
},
|
22
|
+
{
|
23
|
+
accessor: "scheduledMeetings",
|
24
|
+
label: "Scheduled Meetings",
|
25
|
+
},
|
26
|
+
],
|
27
|
+
},
|
28
|
+
],
|
29
|
+
},
|
30
|
+
{
|
31
|
+
label: "Performance Data",
|
32
|
+
columns: [
|
33
|
+
{
|
34
|
+
label: "Completion Metrics",
|
35
|
+
columns: [
|
36
|
+
{
|
37
|
+
accessor: "completedClasses",
|
38
|
+
label: "Completed Classes",
|
39
|
+
},
|
40
|
+
{
|
41
|
+
accessor: "classCompletionRate",
|
42
|
+
label: "Class Completion Rate",
|
43
|
+
},
|
44
|
+
],
|
45
|
+
},
|
46
|
+
{
|
47
|
+
label: "Attendance",
|
48
|
+
columns: [
|
49
|
+
{
|
50
|
+
accessor: "attendanceRate",
|
51
|
+
label: "Attendance Rate",
|
52
|
+
},
|
53
|
+
{
|
54
|
+
accessor: "scheduledMeetings",
|
55
|
+
label: "Scheduled Meetings",
|
56
|
+
},
|
57
|
+
],
|
58
|
+
},
|
59
|
+
],
|
60
|
+
},
|
61
|
+
];
|
62
|
+
|
63
|
+
const tableProps = {
|
64
|
+
verticalBorder: true
|
65
|
+
}
|
66
|
+
|
67
|
+
return (
|
68
|
+
<>
|
69
|
+
<AdvancedTable
|
70
|
+
columnDefinitions={columnDefinitions}
|
71
|
+
columnGroupBorderColor="text_lt_default"
|
72
|
+
tableData={MOCK_DATA}
|
73
|
+
tableProps={tableProps}
|
74
|
+
{...props}
|
75
|
+
/>
|
76
|
+
</>
|
77
|
+
)
|
78
|
+
}
|
79
|
+
|
80
|
+
export default AdvancedTableColumnBorderColors
|
@@ -0,0 +1,3 @@
|
|
1
|
+
The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop. In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
|
2
|
+
|
3
|
+
The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb
ADDED
@@ -0,0 +1,58 @@
|
|
1
|
+
<% column_definitions = [
|
2
|
+
{
|
3
|
+
accessor: "year",
|
4
|
+
label: "Year",
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
6
|
+
},
|
7
|
+
{
|
8
|
+
label: "Enrollment Data",
|
9
|
+
columns: [
|
10
|
+
{
|
11
|
+
label: "Enrollment Stats",
|
12
|
+
columns: [
|
13
|
+
{
|
14
|
+
accessor: "newEnrollments",
|
15
|
+
label: "New Enrollments",
|
16
|
+
},
|
17
|
+
{
|
18
|
+
accessor: "scheduledMeetings",
|
19
|
+
label: "Scheduled Meetings",
|
20
|
+
},
|
21
|
+
],
|
22
|
+
},
|
23
|
+
],
|
24
|
+
},
|
25
|
+
{
|
26
|
+
label: "Performance Data",
|
27
|
+
columns: [
|
28
|
+
{
|
29
|
+
label: "Completion Metrics",
|
30
|
+
columns: [
|
31
|
+
{
|
32
|
+
accessor: "completedClasses",
|
33
|
+
label: "Completed Classes",
|
34
|
+
},
|
35
|
+
{
|
36
|
+
accessor: "classCompletionRate",
|
37
|
+
label: "Class Completion Rate",
|
38
|
+
},
|
39
|
+
],
|
40
|
+
},
|
41
|
+
{
|
42
|
+
label: "Attendance",
|
43
|
+
columns: [
|
44
|
+
{
|
45
|
+
accessor: "attendanceRate",
|
46
|
+
label: "Attendance Rate",
|
47
|
+
},
|
48
|
+
{
|
49
|
+
accessor: "scheduledMeetings",
|
50
|
+
label: "Scheduled Meetings",
|
51
|
+
},
|
52
|
+
],
|
53
|
+
},
|
54
|
+
],
|
55
|
+
},
|
56
|
+
] %>
|
57
|
+
|
58
|
+
<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
|
2
|
+
|
3
|
+
The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md
CHANGED
@@ -1 +1,5 @@
|
|
1
|
-
`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
|
1
|
+
`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
|
2
|
+
|
3
|
+
The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection.
|
4
|
+
|
5
|
+
__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
@@ -2,7 +2,7 @@ import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
3
|
import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
|
4
4
|
|
5
|
-
const
|
5
|
+
const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
|
6
6
|
const columnDefinitions = [
|
7
7
|
{
|
8
8
|
accessor: "year",
|
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrows = (props) => {
|
|
49
49
|
)
|
50
50
|
}
|
51
51
|
|
52
|
-
export default
|
52
|
+
export default AdvancedTableSelectableRowsNoSubrowsReact
|
@@ -2,5 +2,6 @@
|
|
2
2
|
|
3
3
|
When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well.
|
4
4
|
|
5
|
-
|
6
|
-
|
5
|
+
The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection.
|
6
|
+
|
7
|
+
__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
@@ -12,9 +12,9 @@ examples:
|
|
12
12
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
13
13
|
- advanced_table_column_headers: Multi-Header Columns
|
14
14
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
15
|
-
|
16
|
-
|
17
|
-
|
15
|
+
- advanced_table_column_border_color_rails: Column Group Border Color
|
16
|
+
- advanced_table_selectable_rows_rails: Selectable Rows
|
17
|
+
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
18
18
|
|
19
19
|
react:
|
20
20
|
- advanced_table_default: Default (Required Props)
|
@@ -39,10 +39,11 @@ examples:
|
|
39
39
|
- advanced_table_column_headers: Multi-Header Columns
|
40
40
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
41
41
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
42
|
+
- advanced_table_column_border_color: Column Group Border Color
|
42
43
|
# - advanced_table_no_subrows: Table with No Subrows
|
43
44
|
- advanced_table_selectable_rows: Selectable Rows
|
44
|
-
-
|
45
|
+
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
45
46
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
46
47
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
47
48
|
- advanced_table_inline_editing: Inline Cell Editing
|
48
|
-
- advanced_table_fullscreen: Fullscreen
|
49
|
+
- advanced_table_fullscreen: Fullscreen
|
@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
|
|
15
15
|
export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
|
16
16
|
export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
|
17
17
|
export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
|
18
|
-
export { default as
|
18
|
+
export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
|
19
19
|
export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
|
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'
|
@@ -26,4 +26,5 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
|
|
26
26
|
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
27
27
|
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
28
28
|
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
29
|
-
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
29
|
+
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
30
|
+
export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Avatar from '../../pb_avatar/_avatar'
|
3
|
+
|
4
|
+
const AvatarGrayscale = (props) => {
|
5
|
+
return (
|
6
|
+
<Avatar
|
7
|
+
grayscale
|
8
|
+
imageAlt="Terry Johnson Standing"
|
9
|
+
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
10
|
+
name="Terry Johnson"
|
11
|
+
{...props}
|
12
|
+
/>
|
13
|
+
)
|
14
|
+
}
|
15
|
+
|
16
|
+
export default AvatarGrayscale
|
@@ -6,6 +6,7 @@ examples:
|
|
6
6
|
- avatar_status: Status
|
7
7
|
- avatar_circle_icon_component_overlay: Icon Circle Component Overlay
|
8
8
|
- avatar_badge_component_overlay: Badge Component Overlay
|
9
|
+
- avatar_grayscale: Grayscale
|
9
10
|
react:
|
10
11
|
- avatar_default: Default
|
11
12
|
- avatar_monogram: Monogram
|
@@ -13,6 +14,7 @@ examples:
|
|
13
14
|
- avatar_status: Status
|
14
15
|
- avatar_circle_icon_component_overlay: Icon Circle Component Overlay
|
15
16
|
- avatar_badge_component_overlay: Badge Component Overlay
|
17
|
+
- avatar_grayscale: Grayscale
|
16
18
|
swift:
|
17
19
|
- avatar_default_swift: Default
|
18
20
|
- avatar_monogram_swift: Monogram
|
@@ -4,3 +4,4 @@ export { default as AvatarStatus } from './_avatar_status.jsx'
|
|
4
4
|
export { default as AvatarNoImage } from './_avatar_no_image.jsx'
|
5
5
|
export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
|
6
6
|
export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.jsx'
|
7
|
+
export { default as AvatarGrayscale } from './_avatar_grayscale.jsx'
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_rails("date_picker", props: {
|
2
|
-
error: "Invalid date. Please pick a valid date.",
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
|
3
3
|
picker_id: "date-picker-error"
|
4
4
|
}) %>
|
@@ -10,7 +10,13 @@
|
|
10
10
|
{ id: "63", text: "Task 3" }
|
11
11
|
] %>
|
12
12
|
|
13
|
-
|
13
|
+
<% data_line = [
|
14
|
+
{ id: "71", text: "Task 1" },
|
15
|
+
{ id: "72", text: "Task 2" },
|
16
|
+
{ id: "73", text: "Task 3" }
|
17
|
+
] %>
|
18
|
+
|
19
|
+
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
14
20
|
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
15
21
|
<%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
|
16
22
|
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
|
@@ -40,4 +46,19 @@
|
|
40
46
|
<% end %>
|
41
47
|
<% end %>
|
42
48
|
<% end %>
|
49
|
+
|
50
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
51
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "line", initial_items: data_line }) do %>
|
52
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Line", text_align: "center" }) %>
|
53
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical", html_options: { style: { width: "200px" } } }) do %>
|
54
|
+
<% data_line.each do |item| %>
|
55
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl", drop_zone_line_color: "primary" }) do %>
|
56
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
57
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
58
|
+
<% end %>
|
59
|
+
<% end %>
|
60
|
+
<% end %>
|
61
|
+
<% end %>
|
62
|
+
<% end %>
|
63
|
+
<% end %>
|
43
64
|
<% end %>
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "211",
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "212",
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "213",
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% next_init_items = [
|
17
|
+
{
|
18
|
+
id: "2111",
|
19
|
+
url: "https://unsplash.it/500/400/?image=633",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
id: "2112",
|
23
|
+
url: "https://unsplash.it/500/400/?image=634",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
id: "2113",
|
27
|
+
url: "https://unsplash.it/500/400/?image=637",
|
28
|
+
},
|
29
|
+
] %>
|
30
|
+
|
31
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
|
32
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
|
33
|
+
<%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
|
34
|
+
<% initial_items.each do |item| %>
|
35
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
|
36
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
|
46
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
|
47
|
+
<%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
|
48
|
+
<% initial_items.each do |item| %>
|
49
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
|
50
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
|
2
|
+
|
3
|
+
The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
|
4
|
+
|
5
|
+
Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
|
2
|
+
|
3
|
+
By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
|
4
|
+
|
5
|
+
When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
|
3
|
+
import Flex from '../../pb_flex/_flex'
|
4
|
+
import Image from '../../pb_image/_image'
|
5
|
+
import Draggable from '../../pb_draggable/_draggable'
|
6
|
+
import { DraggableProvider } from '../../pb_draggable/context'
|
7
|
+
|
8
|
+
const data = [
|
9
|
+
{
|
10
|
+
id: "100",
|
11
|
+
url: "https://unsplash.it/500/400/?image=638",
|
12
|
+
},
|
13
|
+
{
|
14
|
+
id: "200",
|
15
|
+
url: "https://unsplash.it/500/400/?image=639",
|
16
|
+
},
|
17
|
+
{
|
18
|
+
id: "300",
|
19
|
+
url: "https://unsplash.it/500/400/?image=640",
|
20
|
+
},
|
21
|
+
];
|
22
|
+
|
23
|
+
const DraggableDefault = (props) => {
|
24
|
+
const [initialState, setInitialState] = useState(data);
|
25
|
+
|
26
|
+
return (
|
27
|
+
<>
|
28
|
+
<DraggableProvider initialItems={data}
|
29
|
+
onReorder={(items) => setInitialState(items)}
|
30
|
+
>
|
31
|
+
<Draggable.Container {...props}>
|
32
|
+
<Flex>
|
33
|
+
{initialState.map(({ id, url }) => (
|
34
|
+
<Draggable.Item dragId={id}
|
35
|
+
key={id}
|
36
|
+
onDrag={() => console.log(`${id} drag!`)}
|
37
|
+
onDragEnd={() => console.log(`${id} drag end!`)}
|
38
|
+
onDragEnter={() => console.log(`${id} drag enter!`)}
|
39
|
+
onDragLeave={() => console.log(`${id} drag leave!`)}
|
40
|
+
onDragOver={() => console.log(`${id} drag over!`)}
|
41
|
+
onDragStart={() => console.log(`${id} drag start!`)}
|
42
|
+
onDrop={() => console.log(`${id} drop!`)}
|
43
|
+
>
|
44
|
+
<Image alt={id}
|
45
|
+
margin="xs"
|
46
|
+
size="md"
|
47
|
+
url={url}
|
48
|
+
/>
|
49
|
+
</Draggable.Item>
|
50
|
+
))}
|
51
|
+
</Flex>
|
52
|
+
</Draggable.Container>
|
53
|
+
</DraggableProvider>
|
54
|
+
</>
|
55
|
+
|
56
|
+
);
|
57
|
+
};
|
58
|
+
|
59
|
+
export default DraggableDefault;
|
@@ -0,0 +1 @@
|
|
1
|
+
You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.
|
@@ -9,6 +9,7 @@ examples:
|
|
9
9
|
- draggable_drop_zones: Draggable Drop Zones
|
10
10
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
11
11
|
- draggable_drop_zones_line: Draggable Drop Zones Line
|
12
|
+
- draggable_event_listeners: Draggable Event Listeners
|
12
13
|
|
13
14
|
rails:
|
14
15
|
- draggable_default: Default
|
@@ -19,4 +20,5 @@ examples:
|
|
19
20
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
20
21
|
- draggable_drop_zones: Draggable Drop Zones
|
21
22
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
23
|
+
- draggable_drop_zones_line: Draggable Drop Zones Line
|
22
24
|
- draggable_event_listeners: Draggable Event Listeners
|
@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
|
|
6
6
|
export { default as DraggableWithTable } from './_draggable_with_table.jsx'
|
7
7
|
export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
|
8
8
|
export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
|
9
|
-
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
9
|
+
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
10
|
+
export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%
|
1
|
+
<%
|
2
2
|
options = [
|
3
3
|
{ label: 'United States', value: 'United States', id: 'us' },
|
4
4
|
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
@@ -6,4 +6,7 @@
|
|
6
6
|
]
|
7
7
|
%>
|
8
8
|
|
9
|
-
<%= pb_rails("dropdown", props: {
|
9
|
+
<%= pb_rails("dropdown", props: {
|
10
|
+
error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
|
11
|
+
options: options
|
12
|
+
}) %>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "United States",
|
5
|
+
value: "United States",
|
6
|
+
areaCode: "+1",
|
7
|
+
icon: "🇺🇸",
|
8
|
+
id: "us"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "United Kingdom",
|
12
|
+
value: "United Kingdom",
|
13
|
+
areaCode: "+44",
|
14
|
+
icon: "🇬🇧",
|
15
|
+
id: "gb"
|
16
|
+
},
|
17
|
+
{
|
18
|
+
label: "Pakistan",
|
19
|
+
value: "Pakistan",
|
20
|
+
areaCode: "+92",
|
21
|
+
icon: "🇵🇰",
|
22
|
+
id: "pk"
|
23
|
+
}
|
24
|
+
]
|
25
|
+
|
26
|
+
%>
|
27
|
+
|
28
|
+
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
@@ -1,86 +1,39 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
3
|
import Dropdown from '../../pb_dropdown/_dropdown'
|
4
|
-
import Badge from '../../pb_badge/_badge'
|
5
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
6
|
-
import User from '../../pb_user/_user'
|
7
4
|
|
8
5
|
const DropdownWithAutocomplete = (props) => {
|
9
6
|
|
10
7
|
const options = [
|
11
8
|
{
|
12
|
-
label: "
|
13
|
-
value: "
|
14
|
-
|
15
|
-
|
16
|
-
id: "
|
17
|
-
status: "Offline"
|
9
|
+
label: "United States",
|
10
|
+
value: "United States",
|
11
|
+
areaCode: "+1",
|
12
|
+
icon: "🇺🇸",
|
13
|
+
id: "us"
|
18
14
|
},
|
19
15
|
{
|
20
|
-
label: "
|
21
|
-
value: "
|
22
|
-
|
23
|
-
|
24
|
-
id: "
|
25
|
-
status: "Away"
|
16
|
+
label: "United Kingdom",
|
17
|
+
value: "United Kingdom",
|
18
|
+
areaCode: "+44",
|
19
|
+
icon: "🇬🇧",
|
20
|
+
id: "gb"
|
26
21
|
},
|
27
22
|
{
|
28
|
-
label: "
|
29
|
-
value: "
|
30
|
-
|
31
|
-
|
32
|
-
id: "
|
33
|
-
status: "Online"
|
34
|
-
},
|
35
|
-
{
|
36
|
-
label: "Courtney Long",
|
37
|
-
value: "Courtney Long",
|
38
|
-
territory: "PHL",
|
39
|
-
title: "Lead UX Designer",
|
40
|
-
id: "courtney-long",
|
41
|
-
status: "Online"
|
23
|
+
label: "Pakistan",
|
24
|
+
value: "Pakistan",
|
25
|
+
areaCode: "+92",
|
26
|
+
icon: "🇵🇰",
|
27
|
+
id: "pk"
|
42
28
|
}
|
43
|
-
]
|
44
|
-
|
29
|
+
]
|
45
30
|
|
46
31
|
return (
|
47
32
|
<div>
|
48
33
|
<Dropdown autocomplete
|
49
34
|
options={options}
|
50
35
|
{...props}
|
51
|
-
|
52
|
-
{options.map((option) => (
|
53
|
-
<Dropdown.Option key={option.id}
|
54
|
-
option={option}
|
55
|
-
>
|
56
|
-
<>
|
57
|
-
<FlexItem>
|
58
|
-
<User
|
59
|
-
align="left"
|
60
|
-
avatar
|
61
|
-
name={option.label}
|
62
|
-
orientation="horizontal"
|
63
|
-
territory={option.territory}
|
64
|
-
title={option.title}
|
65
|
-
/>
|
66
|
-
</FlexItem>
|
67
|
-
<FlexItem>
|
68
|
-
<Badge
|
69
|
-
rounded
|
70
|
-
text={option.status}
|
71
|
-
variant={`${
|
72
|
-
option.status === "Offline"
|
73
|
-
? "neutral"
|
74
|
-
: option.status === "Online"
|
75
|
-
? "success"
|
76
|
-
: "warning"
|
77
|
-
}`}
|
78
|
-
/>
|
79
|
-
</FlexItem>
|
80
|
-
</>
|
81
|
-
</Dropdown.Option>
|
82
|
-
))}
|
83
|
-
</Dropdown>
|
36
|
+
/>
|
84
37
|
</div>
|
85
38
|
)
|
86
39
|
}
|