@helpdice/draggable 0.0.2 → 0.0.4
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.
- package/README.md +15 -15
- package/dist/draggable.cjs.js +2 -0
- package/dist/draggable.cjs.js.map +1 -1
- package/dist/draggable.esm.js +2 -0
- package/dist/draggable.esm.js.map +1 -1
- package/dist/types/view/droppable/droppable-types.d.ts +1 -1
- package/package.json +1 -1
- package/src/view/droppable/droppable-types.ts +1 -1
- package/src/view/droppable/droppable.tsx +2 -0
package/README.md
CHANGED
|
@@ -10,9 +10,9 @@ We recommend that you don’t raise issues or pull requests, as they will not be
|
|
|
10
10
|
---
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
<img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="
|
|
13
|
+
<img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="draggable logo" />
|
|
14
14
|
</p>
|
|
15
|
-
<h1 align="center">
|
|
15
|
+
<h1 align="center">draggable <small><sup>(rbd)</sup></small></h1>
|
|
16
16
|
|
|
17
17
|
<div align="center">
|
|
18
18
|
|
|
@@ -32,9 +32,9 @@ We recommend that you don’t raise issues or pull requests, as they will not be
|
|
|
32
32
|
|
|
33
33
|
## Get started 👩🏫
|
|
34
34
|
|
|
35
|
-
We have created [a free course on `egghead.io` 🥚](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with
|
|
35
|
+
We have created [a free course on `egghead.io` 🥚](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-@helpdice/draggable) to help you get started with `@helpdice/draggable` as quickly as possible.
|
|
36
36
|
|
|
37
|
-
[](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with
|
|
37
|
+
[](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-@helpdice/draggable)
|
|
38
38
|
|
|
39
39
|
## Currently supported feature set ✅
|
|
40
40
|
|
|
@@ -64,14 +64,14 @@ We have created [a free course on `egghead.io` 🥚](https://egghead.io/courses/
|
|
|
64
64
|
|
|
65
65
|
## Motivation 🤔
|
|
66
66
|
|
|
67
|
-
`
|
|
67
|
+
`@helpdice/draggable` exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:
|
|
68
68
|
|
|
69
69
|
- 📖 [Rethinking drag and drop](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b)
|
|
70
70
|
- 🎧 [React podcast: fast, accessible and beautiful drag and drop](https://reactpodcast.simplecast.fm/17)
|
|
71
71
|
|
|
72
72
|
## Not for everyone ✌️
|
|
73
73
|
|
|
74
|
-
There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [`react-dnd`](https://github.com/react-dnd/react-dnd). It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) html5 drag and drop feature. `
|
|
74
|
+
There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [`react-dnd`](https://github.com/react-dnd/react-dnd). It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) html5 drag and drop feature. `@helpdice/draggable` is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality `@helpdice/draggable` offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by `react-dnd`. So `@helpdice/draggable` might not be for you depending on what your use case is.
|
|
75
75
|
|
|
76
76
|
## Documentation 📖
|
|
77
77
|
|
|
@@ -79,7 +79,7 @@ There are a lot of libraries out there that allow for drag and drop interactions
|
|
|
79
79
|
|
|
80
80
|
- [Installation](/docs/about/installation.md)
|
|
81
81
|
- [Examples and samples](/docs/about/examples.md)
|
|
82
|
-
- [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-
|
|
82
|
+
- [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-draggable)
|
|
83
83
|
- [Design principles](/docs/about/design-principles.md)
|
|
84
84
|
- [Animations](/docs/about/animations.md)
|
|
85
85
|
- [Accessibility](/docs/about/accessibility.md)
|
|
@@ -121,7 +121,7 @@ There are a lot of libraries out there that allow for drag and drop interactions
|
|
|
121
121
|
- [Avoiding image flickering](/docs/guides/avoiding-image-flickering.md)
|
|
122
122
|
- [Non-visible preset styles](/docs/guides/preset-styles.md)
|
|
123
123
|
- [How we detect scroll containers](/docs/guides/how-we-detect-scroll-containers.md)
|
|
124
|
-
- [How we use dom events](/docs/guides/how-we-use-dom-events.md) - _Useful if you need to build on top of `
|
|
124
|
+
- [How we use dom events](/docs/guides/how-we-use-dom-events.md) - _Useful if you need to build on top of `@helpdice/draggable`_
|
|
125
125
|
- [Adding `<Draggable />`s during a drag (11.x behaviour)](/docs/guides/changes-while-dragging.md) - _⚠️ Advanced_
|
|
126
126
|
- [Setting up Content Security Policy](/docs/guides/content-security-policy.md)
|
|
127
127
|
|
|
@@ -136,18 +136,18 @@ There are a lot of libraries out there that allow for drag and drop interactions
|
|
|
136
136
|
|
|
137
137
|
- [Engineering health](/docs/support/engineering-health.md)
|
|
138
138
|
- [Community and addons](/docs/support/community-and-addons.md)
|
|
139
|
-
- [Release notes and changelog](https://github.com/atlassian/
|
|
139
|
+
- [Release notes and changelog](https://github.com/atlassian/@helpdice/draggable/releases)
|
|
140
140
|
- [Upgrading](/docs/support/upgrading.md)
|
|
141
|
-
- [Road map](https://github.com/atlassian/
|
|
141
|
+
- [Road map](https://github.com/atlassian/@helpdice/draggable/issues)
|
|
142
142
|
- [Media](/docs/support/media.md)
|
|
143
143
|
|
|
144
144
|
## Read this in other languages 🌎
|
|
145
145
|
|
|
146
|
-
- [ **한글/Korean**](https://github.com/LeeHyungGeun/
|
|
147
|
-
- [ **На русском/Russian**](https://github.com/vtereshyn/
|
|
148
|
-
- [ **Português/Portuguese**](https://github.com/dudestein/
|
|
149
|
-
- [ **Ελληνικά/Greek**](https://github.com/milvard/
|
|
150
|
-
- [ **日本語/Japanese**](https://github.com/eltociear/
|
|
146
|
+
- [ **한글/Korean**](https://github.com/LeeHyungGeun/@helpdice/draggable-kr)
|
|
147
|
+
- [ **На русском/Russian**](https://github.com/vtereshyn/@helpdice/draggable-ru)
|
|
148
|
+
- [ **Português/Portuguese**](https://github.com/dudestein/@helpdice/draggable-pt)
|
|
149
|
+
- [ **Ελληνικά/Greek**](https://github.com/milvard/@helpdice/draggable-gr)
|
|
150
|
+
- [ **日本語/Japanese**](https://github.com/eltociear/@helpdice/draggable-ja)
|
|
151
151
|
|
|
152
152
|
## Creator ✍️
|
|
153
153
|
|
package/dist/draggable.cjs.js
CHANGED
|
@@ -9758,6 +9758,8 @@ function Droppable(props) {
|
|
|
9758
9758
|
const node = (jsxRuntimeExports.jsx(PrivateDraggable, { draggableId: dragging.draggableId, index: dragging.source.index, isClone: true, isEnabled: true,
|
|
9759
9759
|
// not important as drag has already started
|
|
9760
9760
|
shouldRespectForcePress: false, canDragInteractiveElements: true, children: (draggableProvided, draggableSnapshot) => render(draggableProvided, draggableSnapshot, dragging) }));
|
|
9761
|
+
if (!getContainerForClone)
|
|
9762
|
+
return null;
|
|
9761
9763
|
return ReactDOM.createPortal(node, getContainerForClone());
|
|
9762
9764
|
}
|
|
9763
9765
|
return (jsxRuntimeExports.jsxs(DroppableContext.Provider, { value: droppableContext, children: [children(provided, snapshot), getClone()] }));
|