playbook_ui_docs 15.5.0 → 15.6.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_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +180 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +22 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4987902f89518c468e20c702133d617e50d86901c73846e7fdea9b1f6f4f525e
|
|
4
|
+
data.tar.gz: 18eae8474a957ab83ef997c20f8a3d39ff85523aa66763c05b0cbf40b7952cbc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: be65a3fa636a65d0fbc7b9a40833a64e1e61dbd054db607c78cd8281ef7d3eda2d8115f17e164c21f521ec3fabe74487e0d9c380f252c68fe111db83898223a9
|
|
7
|
+
data.tar.gz: 2d650e15339c3532f55c2fcbe747c0bab4082169c6cf635bf0309ffd49165156a940ab3f5da249ed5cc0f1416a7d568e5d181656e3d5a564f24d3960bc961112
|
|
@@ -30,4 +30,4 @@
|
|
|
30
30
|
}
|
|
31
31
|
] %>
|
|
32
32
|
|
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
|
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
|
|
3
|
+
import Flex from '../../pb_flex/_flex'
|
|
4
|
+
import Draggable from '../../pb_draggable/_draggable'
|
|
5
|
+
import { DraggableProvider } from '../../pb_draggable/context'
|
|
6
|
+
import Badge from '../../pb_badge/_badge'
|
|
7
|
+
import Title from '../../pb_title/_title'
|
|
8
|
+
import Caption from '../../pb_caption/_caption'
|
|
9
|
+
import Card from '../../pb_card/_card'
|
|
10
|
+
import FlexItem from '../../pb_flex/_flex_item'
|
|
11
|
+
import Avatar from '../../pb_avatar/_avatar'
|
|
12
|
+
import Body from '../../pb_body/_body'
|
|
13
|
+
|
|
14
|
+
// Initial groups to drag between
|
|
15
|
+
const containers = ["To Do", "In Progress", "Done"];
|
|
16
|
+
|
|
17
|
+
// Initial items to be dragged
|
|
18
|
+
const data = [
|
|
19
|
+
{
|
|
20
|
+
id: "11",
|
|
21
|
+
container: "To Do",
|
|
22
|
+
title: "Task 1",
|
|
23
|
+
description: "Bug fixes",
|
|
24
|
+
assignee_name: "Terry Miles",
|
|
25
|
+
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
id: "12",
|
|
29
|
+
container: "To Do",
|
|
30
|
+
title: "Task 2",
|
|
31
|
+
description: "Documentation",
|
|
32
|
+
assignee_name: "Sophia Miles",
|
|
33
|
+
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
id: "13",
|
|
37
|
+
container: "In Progress",
|
|
38
|
+
title: "Task 3",
|
|
39
|
+
description: "Add a variant",
|
|
40
|
+
assignee_name: "Alice Jones",
|
|
41
|
+
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
id: "14",
|
|
45
|
+
container: "To Do",
|
|
46
|
+
title: "Task 4",
|
|
47
|
+
description: "Add jest tests",
|
|
48
|
+
assignee_name: "Mike James",
|
|
49
|
+
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: "15",
|
|
53
|
+
container: "Done",
|
|
54
|
+
title: "Task 5",
|
|
55
|
+
description: "Alpha testing",
|
|
56
|
+
assignee_name: "James Guy",
|
|
57
|
+
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
id: "16",
|
|
61
|
+
container: "In Progress",
|
|
62
|
+
title: "Task 6",
|
|
63
|
+
description: "Release",
|
|
64
|
+
assignee_name: "Sally Jones",
|
|
65
|
+
assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
|
|
66
|
+
},
|
|
67
|
+
];
|
|
68
|
+
|
|
69
|
+
const DraggableMultipleContainersDropzone = (props) => {
|
|
70
|
+
const [initialState, setInitialState] = useState(data);
|
|
71
|
+
|
|
72
|
+
const badgeProperties = (container) => {
|
|
73
|
+
switch (container) {
|
|
74
|
+
case "To Do":
|
|
75
|
+
return { text: "queue", color: "warning" };
|
|
76
|
+
case "In Progress":
|
|
77
|
+
return { text: "progress", color: "primary" };
|
|
78
|
+
default:
|
|
79
|
+
return { text: "done", color: "success" };
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
return (
|
|
84
|
+
<DraggableProvider
|
|
85
|
+
dropZone={{type: "outline"}}
|
|
86
|
+
enableCrossContainerPreview
|
|
87
|
+
initialItems={data}
|
|
88
|
+
onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
|
|
89
|
+
console.log(`Dragged Item ID: ${draggedItemId}`);
|
|
90
|
+
console.log(`Final Container: ${finalContainer}`);
|
|
91
|
+
console.log(`Original Container: ${originalContainer}`);
|
|
92
|
+
console.log('Item Above:', itemAbove);
|
|
93
|
+
console.log('Item Below:', itemBelow);
|
|
94
|
+
}}
|
|
95
|
+
onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
|
|
96
|
+
console.log(`Dragged Item ID: ${draggedItemId}`);
|
|
97
|
+
console.log(`Dropped Container: ${droppedContainer}`);
|
|
98
|
+
console.log(`Original Container: ${originalContainer}`);
|
|
99
|
+
console.log('Dropped Item:', item);
|
|
100
|
+
console.log('Item Above:', itemAbove);
|
|
101
|
+
console.log('Item Below:', itemBelow);
|
|
102
|
+
}}
|
|
103
|
+
onReorder={(items) => setInitialState(items)}
|
|
104
|
+
>
|
|
105
|
+
<Flex
|
|
106
|
+
justifyContent="center"
|
|
107
|
+
{...props}
|
|
108
|
+
>
|
|
109
|
+
{containers?.map((container) => (
|
|
110
|
+
<Draggable.Container
|
|
111
|
+
container={container}
|
|
112
|
+
htmlOptions={{style:{ width: "200px", height: "70vh"}}}
|
|
113
|
+
key={container}
|
|
114
|
+
padding="sm"
|
|
115
|
+
>
|
|
116
|
+
<Caption textAlign="center">{container}</Caption>
|
|
117
|
+
<Flex
|
|
118
|
+
alignItems="stretch"
|
|
119
|
+
gap="sm"
|
|
120
|
+
orientation="column"
|
|
121
|
+
>
|
|
122
|
+
{initialState
|
|
123
|
+
.filter((item) => item.container === container)
|
|
124
|
+
.map(
|
|
125
|
+
({
|
|
126
|
+
assignee_img,
|
|
127
|
+
assignee_name,
|
|
128
|
+
description,
|
|
129
|
+
id,
|
|
130
|
+
title,
|
|
131
|
+
}) => (
|
|
132
|
+
<Draggable.Item
|
|
133
|
+
container={container}
|
|
134
|
+
dragId={id}
|
|
135
|
+
key={id}
|
|
136
|
+
>
|
|
137
|
+
<Card
|
|
138
|
+
padding="sm"
|
|
139
|
+
{...props}
|
|
140
|
+
>
|
|
141
|
+
<Flex justify="between">
|
|
142
|
+
<FlexItem>
|
|
143
|
+
<Flex>
|
|
144
|
+
<Avatar
|
|
145
|
+
imageUrl={assignee_img}
|
|
146
|
+
name={assignee_name}
|
|
147
|
+
size="xxs"
|
|
148
|
+
/>
|
|
149
|
+
<Title paddingLeft="xs"
|
|
150
|
+
size={4}
|
|
151
|
+
text={title}
|
|
152
|
+
{...props}
|
|
153
|
+
/>
|
|
154
|
+
</Flex>
|
|
155
|
+
</FlexItem>
|
|
156
|
+
<Badge
|
|
157
|
+
marginLeft="sm"
|
|
158
|
+
rounded
|
|
159
|
+
text={badgeProperties(container).text}
|
|
160
|
+
variant={badgeProperties(container).color}
|
|
161
|
+
{...props}
|
|
162
|
+
/>
|
|
163
|
+
</Flex>
|
|
164
|
+
<Body paddingTop="xs"
|
|
165
|
+
text={description}
|
|
166
|
+
{...props}
|
|
167
|
+
/>
|
|
168
|
+
</Card>
|
|
169
|
+
</Draggable.Item>
|
|
170
|
+
)
|
|
171
|
+
)}
|
|
172
|
+
</Flex>
|
|
173
|
+
</Draggable.Container>
|
|
174
|
+
))}
|
|
175
|
+
</Flex>
|
|
176
|
+
</DraggableProvider>
|
|
177
|
+
);
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
export default DraggableMultipleContainersDropzone;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
The multiple container functionality also supports customized dropzone styling as shown here.
|
|
2
|
+
|
|
3
|
+
In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging.
|
|
4
|
+
|
|
5
|
+
With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
|
|
6
|
+
|
|
7
|
+
The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
|
|
8
|
+
|
|
9
|
+
- `draggedItemId` - The ID of the item that was dragged
|
|
10
|
+
- `droppedContainer` - The container where the item was dropped
|
|
11
|
+
- `originalContainer` - The container where the drag started
|
|
12
|
+
- `item` - The complete item object with all properties (including the updated container)
|
|
13
|
+
- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
|
|
14
|
+
- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
|
|
15
|
+
|
|
16
|
+
The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
|
|
17
|
+
|
|
18
|
+
- `draggedItemId` - The ID of the item that was dragged
|
|
19
|
+
- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
|
|
20
|
+
- `originalContainer` - The container where the drag started
|
|
21
|
+
- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
|
|
22
|
+
- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)
|
|
@@ -5,11 +5,12 @@ examples:
|
|
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
|
7
7
|
- draggable_with_table: Draggable with Table
|
|
8
|
-
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
9
8
|
- draggable_drop_zones: Draggable Drop Zones
|
|
10
9
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
|
11
10
|
- draggable_drop_zones_line: Draggable Drop Zones Line
|
|
12
11
|
- draggable_event_listeners: Draggable Event Listeners
|
|
12
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
13
|
+
- draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
|
|
13
14
|
|
|
14
15
|
rails:
|
|
15
16
|
- draggable_default: Default
|
|
@@ -17,8 +18,8 @@ examples:
|
|
|
17
18
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
18
19
|
- draggable_with_cards: Draggable with Cards
|
|
19
20
|
- draggable_with_table: Draggable with Table
|
|
20
|
-
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
21
21
|
- draggable_drop_zones: Draggable Drop Zones
|
|
22
22
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
|
23
23
|
- draggable_drop_zones_line: Draggable Drop Zones Line
|
|
24
24
|
- draggable_event_listeners: Draggable Event Listeners
|
|
25
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
@@ -7,4 +7,5 @@ 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
9
|
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
|
10
|
-
export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
|
|
10
|
+
export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
|
|
11
|
+
export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 15.
|
|
4
|
+
version: 15.6.0.pre.rc.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-11-
|
|
12
|
+
date: 2025-11-25 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -855,6 +855,8 @@ files:
|
|
|
855
855
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
|
|
856
856
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
|
857
857
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
|
858
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
|
|
859
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md
|
|
858
860
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
|
|
859
861
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
|
|
860
862
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
|