playbook_ui_docs 16.9.0.pre.alpha.touchdragmulticontainers17268 → 16.9.0.pre.alpha.touchdragmulticontainers17271
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_draggable/docs/_draggable_multiple_containers_react.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +0 -1
- metadata +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.jsx +0 -81
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_react.md +0 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c37988286914a2f25a086d402770d224ae1d9c7d21ec8e72ab5236e8b37f2dc4
|
|
4
|
+
data.tar.gz: dfaf4490ee81cd2320cb0a0ae7d0dfc4f7f870a7d5d0e767fb07946881362b21
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ca5ccd99e8131a556256e184e4be7574cef73ad1a33e9ac312147e563721b170b199f8fc664334e85a575ba1265894d756a552063b74c9da91f5000464378c1a
|
|
7
|
+
data.tar.gz: ae96fd5c96cd8f50ba7036b364db86b864f747191645e284eb562927ba4b688d5d81e711c49c03d91d4d32faade51986217d72fcb7a102637601fe3941dd2680
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure
|
|
2
|
-
|
|
3
|
-
For lists that should stay separate, see [Independent Draggable Containers](#draggable_independent_containers).
|
|
1
|
+
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
|
|
@@ -4,7 +4,6 @@ examples:
|
|
|
4
4
|
- draggable_with_list: Draggable with List Kit
|
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
|
7
|
-
- draggable_independent_containers: Independent Draggable Containers
|
|
8
7
|
- draggable_with_table: Draggable with Table
|
|
9
8
|
- draggable_drop_zones: Draggable Drop Zones
|
|
10
9
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export { default as DraggableDefault } from './_draggable_default.jsx'
|
|
2
2
|
export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
|
|
3
|
-
export { default as DraggableIndependentContainers } from './_draggable_independent_containers.jsx'
|
|
4
3
|
export { default as DraggableWithList } from './_draggable_with_list.jsx'
|
|
5
4
|
export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
|
|
6
5
|
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.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: 16.9.0.pre.alpha.
|
|
4
|
+
version: 16.9.0.pre.alpha.touchdragmulticontainers17271
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -911,9 +911,7 @@ files:
|
|
|
911
911
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_rails.md
|
|
912
912
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
|
|
913
913
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.html.erb
|
|
914
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.jsx
|
|
915
914
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_rails.md
|
|
916
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_react.md
|
|
917
915
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
|
918
916
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
|
919
917
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
|
|
3
|
-
import Body from "../../pb_body/_body";
|
|
4
|
-
import Caption from "../../pb_caption/_caption";
|
|
5
|
-
import Draggable from "../../pb_draggable/_draggable";
|
|
6
|
-
import { DraggableProvider } from "../../pb_draggable/context";
|
|
7
|
-
import Flex from "../../pb_flex/_flex";
|
|
8
|
-
import FlexItem from "../../pb_flex/_flex_item";
|
|
9
|
-
|
|
10
|
-
const lists = [
|
|
11
|
-
{
|
|
12
|
-
title: "Morning Crew",
|
|
13
|
-
items: [
|
|
14
|
-
{ id: "m1", name: "Alice Chen" },
|
|
15
|
-
{ id: "m2", name: "Ben Ortiz" },
|
|
16
|
-
{ id: "m3", name: "Cara Kim" },
|
|
17
|
-
],
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
title: "Afternoon Crew",
|
|
21
|
-
items: [
|
|
22
|
-
{ id: "a1", name: "Diana Patel" },
|
|
23
|
-
{ id: "a2", name: "Evan Brooks" },
|
|
24
|
-
{ id: "a3", name: "Fiona Lee" },
|
|
25
|
-
],
|
|
26
|
-
},
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
const initialListItems = lists.reduce((acc, list) => {
|
|
30
|
-
acc[list.title] = list.items;
|
|
31
|
-
return acc;
|
|
32
|
-
}, {});
|
|
33
|
-
|
|
34
|
-
const DraggableIndependentContainers = (props) => {
|
|
35
|
-
const [listItems, setListItems] = useState(initialListItems);
|
|
36
|
-
|
|
37
|
-
const handleReorder = (title, items) => {
|
|
38
|
-
setListItems((currentItems) => ({ ...currentItems, [title]: items }));
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
return (
|
|
42
|
-
<Flex gap="md"
|
|
43
|
-
justifyContent="center"
|
|
44
|
-
wrap
|
|
45
|
-
{...props}
|
|
46
|
-
>
|
|
47
|
-
{lists.map((list) => (
|
|
48
|
-
<FlexItem fixedSize="220px"
|
|
49
|
-
key={list.title}
|
|
50
|
-
>
|
|
51
|
-
<Caption marginBottom="xs"
|
|
52
|
-
text={list.title}
|
|
53
|
-
textAlign="center"
|
|
54
|
-
{...props}
|
|
55
|
-
/>
|
|
56
|
-
<DraggableProvider
|
|
57
|
-
initialItems={listItems[list.title]}
|
|
58
|
-
onReorder={(items) => handleReorder(list.title, items)}
|
|
59
|
-
>
|
|
60
|
-
<Draggable.Container padding="sm"
|
|
61
|
-
{...props}
|
|
62
|
-
>
|
|
63
|
-
{listItems[list.title].map(({ id, name }) => (
|
|
64
|
-
<Draggable.Item dragId={id}
|
|
65
|
-
key={id}
|
|
66
|
-
marginBottom="xs"
|
|
67
|
-
>
|
|
68
|
-
<Body text={name}
|
|
69
|
-
{...props}
|
|
70
|
-
/>
|
|
71
|
-
</Draggable.Item>
|
|
72
|
-
))}
|
|
73
|
-
</Draggable.Container>
|
|
74
|
-
</DraggableProvider>
|
|
75
|
-
</FlexItem>
|
|
76
|
-
))}
|
|
77
|
-
</Flex>
|
|
78
|
-
);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
export default DraggableIndependentContainers;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
Use a **separate** `DraggableProvider` for each list when items should reorder within their own column only.
|
|
2
|
-
|
|
3
|
-
Each provider creates its own drag boundary. Items stay inside that list on desktop and touch — they cannot be dropped into a neighboring list.
|
|
4
|
-
|
|
5
|
-
This is different from [Dragging Across Multiple Containers](#draggable_multiple_containers), which uses **one** `DraggableProvider` with multiple `Draggable.Container` components so items can move between columns.
|
|
6
|
-
|
|
7
|
-
On touch devices, drag from the grip handle. Swiping outside the handle scrolls as usual.
|
|
8
|
-
|