atlassian / react-beautiful-dnd Goto Github PK
View Code? Open in Web Editor NEWBeautiful and accessible drag and drop for lists with React
Home Page: https://react-beautiful-dnd.netlify.com
License: Other
Beautiful and accessible drag and drop for lists with React
Home Page: https://react-beautiful-dnd.netlify.com
License: Other
Add the ability to provide your own key bindings.
Still unsure if this is the right thing to do given that it is really easy to do the wrong thing by the browser - but we will investigate it!
@atlaskit/css-reset is currently listed as a dependency instead of devDep, but it's only used inside storybooks.
https://github.com/atlassian/react-beautiful-dnd/search?q=css-reset
Are there any plans to support serverside rendering of this library? Currently when rendered on the server an error is printed out.
Hi everyone,
Very soon I will be going on leave for six weeks to help look after our soon to be born second child. Exciting times! While I am away a number of my colleges from Atlassian will be continuing to move this library forward. I will still be around occasionally but they will be the primary contributors for that time.
Cheers
Right now when you hover over a foreign list the original draggable placeholder remains. This is to avoid the list collapsing. However, I think it would be better to enable the Droppable
placeholder for the home list to avoid collapsing but to avoid having a gap in the list.
Draggable
placeholderDraggable
placeholderDroppable
placeholder in both the home and foreign Droppable
.Bug
When releasing her finger from the trackpad, the card should remain to the list; it should not remain sticked to the cursor
See video https://www.youtube.com/watch?v=-gWQ9hkjUj8
The radar effect happens when the user releases the card.
Even though the user releases the card, she can still move things around.
This bug manifests itself on all the example pages.
See https://www.youtube.com/watch?v=-gWQ9hkjUj8
You probably need a magic trackpad instead of a mouse.
Isssue manifests itself in the recent Mac OS, at the very least.
I suspect, but I haven’t time to dig in, that it might be related to “force touch”.
Here is a video with pointer events recorded, to help you:
bug
destination index should be a positive integer
it is a negative integer
Example provided.
It makes sense to cancel a current drag if the page looses focus or visibility (page visiblity api)
Support the dragging of multiple Draggables. There are still a lot of open questions about this one.
Draggable
. What would this look like to support 'select' - is this handled by the library - or is it a pattern?onDragStart
and onDragEnd
look like?Currently there is a DIMENSION_COLLECTING
phase before a drag where we request the dimensions for all of the Droppable
and Draggable
components. This is quite expensive as it calls .getBoundingClientRect
and window.getComputedStyle
on all the nodes. We need to think more about how we could improve the performance of this. Some options off the top of my head:
There are some flow
types in the system that would be worth exporting. At a minimum flow should know that react-beautiful-dnd
contains three exports (DragDropContext
, Droppable
and Draggable
). But it would be good to also expose the types that are documented in README.md
so that people using flow
can type their code correctly.
I am not sure what the best practice is for this.
My thought is to import all the types I want to export into src/index.js
and then export them from there. However, I am not sure what to do from there - should we just copy an index.js.flow
into the generated /lib
folder - is that enough?
The path we choose should not expose every type in the system. There are some types such as State
which are not public API and purely for internal use.
Hi @alexreardon, this library looks great - thank you for putting it out! I have a usecase where on drop, I'd like to distinguish between if the item was dropped between two items or on top of an item.
So, I am wondering if you foresee the API supporting that, and/or boundaries within a target (that helps determine intent of drop - like middle 50% is considered dropping on the target)?
Thank you!
@bobrovnik found a missing piece of functionality in #89: we need to support the use case whether some drag and drop components sit within a larger scroll container (such as at the root level).
The first pass will need to ensure that things work when non-scrollable containers sit inside a shared scrollable parent. This will also include intercating with otherDroppables
including:
Droppables
without a scroll containerDroppables
with a scroll containerThe second pass will need to ensure that the above works with the addition of:
Droppable
inside a scroll container inside a shared parent scroll containerFun times
When dragging a card item, it would be great to have an option to have the card only follow the mouse's y value so it stays within its container.
We are evaluating D&D libraries and we found that some, like React Sortable have virtualization features or, work with libraries such as React Virtualized.
Is rendering virtualization support part of the current plans?
Bug
Click on input inside Draggable element make the input focused.
Click on input element is ignored, but I can still focus the input with rightclick or tab button.
See the demo with Basic usage example.
Chrome Version 61.0.3163.91 (Official Build) (64-bit)
I was playing with this library on a toy side-project, and I noticed I cannot dynamically change hooks, especially after the first render.
The gist of the code I had is as follows:
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { compose, withState } from "recompose";
// fake data generator
const getItems = count =>
Array.from({ length: count }, (v, k) => k).map(k => ({
id: `item-${k}`,
content: `item ${k}`,
type: generateType(k)
}));
// ...
const onDragEnd = setCards => result => {
// dropped outside the list
if (!result.destination) {
return;
}
setCards(prevCards => {
const nextCards = reorder(
prevCards,
result.source.index,
result.destination.index
);
return nextCards;
});
};
const Board = props => {
const { cards, setCards } = props;
return (
// NOTE: unable to replace onDragEnd after first render
<DragDropContext onDragEnd={onDragEnd(setCards)}>
<Droppable droppableId="droppable">
{generateBoard(cards)}
</Droppable>
</DragDropContext>
);
};
const cardsState = withState("cards", "setCards", getItems(10));
export default compose(cardsState)(Board);
Even though the drag and drop (which is awesome by the way) appears to work fine, after the first render, the generated function from onDragEnd(setCards)
is not replaced within DragDropContext
.
This is likely to do with the fact there is no componentWillReceiveProps()
(or similar) at
react-beautiful-dnd/src/view/drag-drop-context/drag-drop-context.jsx
Lines 17 to 46 in 0f557e0
Even though the above example uses recompose
, one may refactor the above to use redux
and friends (e.g. react-redux
), whereby the developer can pass dispatch
(or a binded dispatch
) to onDragEnd()
. You cannot really assume dispatch
won't change after the first render.
This will allow some interesting drag and drop patterns. I want to investigate some use cases - but i'll keep this here as an 'idea' for now
You did an amazing library. But to use it is not very convenient. Let me propose my own version:
When element is't selected:
tab - move focus to next element
shift + tab - move focus to previous element
space - for select element
When element is selected:
tab to move selected element to next position
tab + tab to move selected element to previous position
esc or space - to remove selection from element
It seems to me more convenient and intuitive.
Do you plan to add a customization to shortcuts?
Details:
https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627
/cc @thejameskyle how would this change play with your prop type generator?
Firstly, thanks for this component, it's great.
Why this component has strict peerDependency react 15.6.1
?
Have you real causes for it?
Could it be changed to somthing like >=15.4.0
?
We cannot use your component if we have other react version.
We very disappointed about it.
Thanks.
Once a drag has started there is no way to cancel it except through user input. There may be a scenario where the application wants to clear any current drag
If the users device is struggling then we should disable as much animation as possible.
There are a few different approaches we could purse - either in combination or in isolation. They are:
(answer here)
Current mitigation: use your trackpack or mouse to scroll while you are dragging. There was actually a lot of work done to make sure scroll is being listened to directly
Currently when dragging with a mouse the window will not automatically scroll. Nor will scroll containers automatically scroll. We could support this behaviour.
A few things to consider:
Scroll containers
Right now when I want to bump I version I just:
🙃 I know.
I wanted to keep it crazy simple to start and build from there. It would be worth setting up travis to do this for us.
Will react-beautiful-dnd support for other libraries? For example: Vue or angular?
Because the license of React has changed as BSD+Patents, my company is on discussing to change our Front-end library to others.
In addition, Is there any idea of the license issue in Atlassian?
The window doesn't scroll down like you need it to while holding a card. Good luck!
Currently the library only supports keyboard and mouse dragging. It would useful to add touch support so that it can be used on touch devices (eg phones and tablets)
Bug
grab
.grabbing
.Cursor is changing to grab
as expected when mouse is moved over a draggable.
Cursor changes to default
when a draggable is being dragged -- as opposed to exepcted grabbing
.
Add the following to the object returned by the getItemStyle
function in the basic example (https://www.webpackbin.com/bins/-KuZVBLKLMq2RG9M5jkK)
cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
grab
.default
.Chrome Version 60.0.3112.113 (Official Build) (64-bit)
Add the following to the object returned by the getItemStyle
function in the basic example (https://www.webpackbin.com/bins/-KuZVBLKLMq2RG9M5jkK)
cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
To add the provided.placeholder
for a table row the tr
and provided.placeholder
need to be wrapped in a div but this messes up the rows format. Any recommendations on what to do here?
<tbody>
rowList.map((key) => (
<Draggable
key={key}
draggableId={key}
>
{(provided, snapshot) => (
<div> // need to wrap in div to add the placeholder
<tr>...</tr>
{provided.placeholder}
</div>
))}
</Draggable>
)
</tbody>
Bug
I should be able to use styled components as draggable and droppable elements.
Console error: Uncaught TypeError: el.getBoundingClientRect is not a function
<Draggable key={key} draggableId={key}>
{(dprovided, snapshot) =>
<StyledComponent
ref={dprovided.innerRef}
style={dprovided.draggableStyle}
{...dprovided.dragHandleProps}
>
It would be worth auditing how well this library works with screen readers and if there are any improvements that can be made
Currently to decide which item should go on top when dragging an item from one list to another, we compare the centre positions. However, this often ends up punishing large items and they almost always move below their target. Perhaps we should change the comparison to check the start edge rather than the centre position to see which goes on top. This would therefore not take the size of the item into account and would not punish large items
Your thoughts @jaredcrowe ?
I am not sure if we need this - but I thought I would raise it anyway
Generally I am quite against browser tests. However, I think it could be worthwhile having one smoke test that runs in a real browser. I am fairly keen to use puppeteer for this one. It would not need to run in all browsers. This is purely just a small smoke test.
Criteria
https://unpkg.com/[email protected]/
Some of the files that are published but (probably) not needed on npm are:
Can be removed from npm publish by settings files
setting in package.json
<Droppable droppableId="droppable-1">
{(provided, snapshot) => (
<div ref={provided.innerRef}>
Good to go
</div>
)}
</Droppable>
Proposed change: rather that requiring the consumer to bind the ref - use ReactDOM.find(this) to get the DOM node.
New usage
<Droppable droppableId="droppable-1">
{(provided, snapshot) => (
<div>
Good to go
</div>
)}
</Droppable>
<Draggable draggableId="draggable-1">
{(provided, snapshot) => (
<div>
<div
ref={provided.innerRef}
style={provided.draggableStyle}
{...provided.dragHandleProps}
>
Drag me!
</div>
{provided.placeholder}
</div>
)}
</Draggable>
```js
Again, rather than the user needing to manually return the ref - just use ReactDOM to get it.
Also - placeholder will be come a dynamically added sibling to the root node rather than needing to be put into the react tree by the consumer. However, this needs to wait until we upgrade to React 16 so that we can return siblings without a wrapping element.
**new usage:**
```js
<Draggable draggableId="draggable-1">
{(provided, snapshot) => (
<div
style={provided.draggableStyle}
{...provided.dragHandleProps}
>
Drag me!
</div>
)}
</Draggable>
First of all, I'm super noob so maybe this error is obvious.
I tried to use this in an React-Native app I'm developing. But It shows this error.
Unknown plugin
transform-runtime' `
then I tried to fix using
npm install babel-plugin-transform-runtime
then it turns to this
`TransformError: /Users/Adalbert/project/QuestLog - todolist/build/QUESTLOG/node_modules/react-beautiful-dnd/lib/index.js: [BABEL] /Users/Adalbert/project/QuestLog - todolist/build/QUESTLOG/node_modules/react-beautiful-dnd/lib/index.js: Unknown option: /Users/Adalbert/project/QuestLog - todolist/build/QUESTLOG/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
{ presets: [{option: value}] }
Valid:
{ presets: [['presetName', {option: value}]] }
For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/Users/Adalbert/project/QuestLog - todolist/build/QUESTLOG/node_modules/react/index.js")
ABI19_0_0RCTFatal
ABI19_0_0RCTSetFatalHandler
ABI19_0_0RCTSetFatalHandler
_dispatch_main_queue_callback_4CF
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
Exponent
`
I'm quite sure this error is an noob error but I couldn't find answer anywhere that can solve it.
So I hope someone here can help? Really appreciate your helping.
Also thanks for sharing this awesome package. Love to see more of it soon.
Demo: http://g.recordit.co/Ep9vM3PPeq.gif
Drag&Drop for cards from the last column does not work correctly. Seems scroll is not taken into account
Drag&Drop should work in same way with or without scroll
Drag&Drop for cards which exceed initially scrollable screen is working incorrectly. Gif shows this behavior http://g.recordit.co/Ep9vM3PPeq.gif
Bug
When I reorder a list with different sized items with a keyboard it should reorder correctly.
If the item dragging is more that double the height of the next item then:
Feature Request/Help wanted
Basically, as the title says. When there is a combo box inside a draggable element, it can not be expanded. Same goes for input elements - those can not be focused.
https://codesandbox.io/s/n4krm8x0y0
Any workaround for this behaviour?
Thanks!
Currently we only support Draggables
to have the same type
as their parent Droppable
. However, we do not log this error until the user starts dragging. We could do this in advance by putting the Droppables type on the context as well as its id which is already there
When transitioning between lists there is some snapping that occurs:
The goal is to have both of these scenarios animated. However, in order to ship #2 it was decided that this feature was not critical enough to hold up the release. The interaction still feels really nice - it would just be even better with animated placeholders.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.