feat(grid): add an ability to drop elements from outside of a grid #980

daynin · 2019-08-15T09:15:18Z

add isDroppable flag for grids
add onDrop callback for getting an element position after dropping
add documentation
add an example

Relates to: #586

daynin · 2019-09-02T08:27:08Z

@n1ghtmare @josesaranda @mankinchi @jeremymlane hi! You said here #985 you want to help the project. So could you review this PR pls? And you can mention me in your PRs, I'll review them too

josesaranda

That is ok! Great!

josesaranda

I installed and tested your code. It's ok for me! Congrats!

n1ghtmare

Awesome feature, great job, really. I hope my comments are helpful. Let me know if you need my help.

lib/GridItem.jsx

lib/ReactGridLayout.jsx

test/examples/0-showcase.jsx

- add isDroppable flag for grids - add onDrop callback for getting an element position after dropping - add documentation - add an example

mankinchi · 2019-09-02T13:17:38Z

@n1ghtmare sorry I'm new to review code on github. Can you show me how?

n1ghtmare · 2019-09-02T13:23:19Z

@mankinchi Sure thing. First look at the top of this pull request. You will see several tabs, the first one being "Conversation" which is the one we're on now. The next one is "Commits", click on it and select the commit that you want to review (in this case it's just one). You'll now see the commit and the changes. Go through them (through the actual code) and leave a comment on any line that you feel needs a comment/clarification/suggestion or whatever. You might not have any comments of course. Once you're done, in the upper right corner you'll see "Review Changes". Click it and select the option you need. Approve accordingly.

I hope this helps. Let me know if you need more clarifications.

mankinchi · 2019-09-03T02:49:14Z

@n1ghtmare thanks. I am able to fetch and checkout this PR branch but couldn't get the server to run. I'm using npm run dev but it only return the showcase page. How can I check the example page? If I'm running npm run view-example, I got problem with /dist/xxx file not found. Can you show me how? I think we also need to provide a guide on how to start run/build the project locally

mankinchi · 2019-09-03T04:57:51Z

Ok figured out the reason why. I think this is out of the scope of this task but not sure whether we can address it here. The build-example is pumping out common.bundle.js but all of the example is looking for common.js, which causes the example to fail. Changing in template.ejs make it works

mankinchi

I think the code is quite nice. However, I'm having problem seeing onDragStart & onDragStop is being used when you drop the droppableItem. I mean it make senses to do it, but I think we would want to have a separate callback for it.

daynin · 2019-09-03T07:04:53Z

@mankinchi

I mean it make senses to do it, but I think we would want to have a separate callback for it.

Thank you for your comment! But I think it's ok to use the same method for doing the same thing. This code uses onDragStart for dragging simulation, that's why we need to reuse it here

daynin · 2019-09-05T08:50:54Z

@STRML check it pls. If it's ok, I'll merge it

lib/GridItem.jsx

STRML · 2019-09-07T08:20:21Z

lib/GridItem.jsx

+
+    if (!this.currentNode) {
+      // eslint-disable-next-line react/no-find-dom-node
+      this.currentNode = ((ReactDOM.findDOMNode(this): any): HTMLElement);


Any chance this won't exist?

@STRML no, I think it's impossible

STRML · 2019-09-07T08:20:40Z

lib/GridItem.jsx

+      this.currentNode = ((ReactDOM.findDOMNode(this): any): HTMLElement);
+    }
+
+    if (!dragging) {


Would be nice to refactor this out of CWRP

@STRML if you don't mind I'll refactor it here #990

STRML · 2019-09-07T08:35:22Z

test/examples/16-drag-from-outside.jsx

@@ -0,0 +1,134 @@
+import React from "react";


This should be numbered 15, not 16

@STRML fixed #993

STRML · 2019-09-09T15:39:59Z

See comments above - forgot to hit the "submit review" button :(

mankinchi · 2019-09-10T04:32:19Z

will this be pushed to npm soon or it requires the fixes for @STRML's comment first?

violabg · 2019-11-27T16:41:35Z

Hi I think you should update @types/react-grid-layout too, since is at 0.16.7 version and doesn't have any drop related typings.
Thank for this feature.

STRML · 2019-11-27T18:30:49Z

I don't maintain that package.

…

On Wed, Nov 27, 2019, 11:41 AM Paolo Bernardini ***@***.***> wrote: Hi I think you should update @types/react-grid-layout too, since is at 0.16.7 version and doesn't have any drop related typings. Thank for this feature. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#980>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJEKPZ5INWITEZSDEMR3NLQV2PMBANCNFSM4IL4PX6Q> .

mikefordweb · 2020-04-30T19:27:05Z

add isDroppable flag for grids

add onDrop callback for getting an element position after dropping

add documentation

add an example

Relates to: #586

How can I do this??

mathiastm · 2020-07-10T15:14:37Z

Hi,
Did someone can tell me where I can find this exemple please ?
I really need that...

kryptoscan · 2020-07-25T16:45:09Z

Anyway you can combine widgets into one widget with tabs?

josesaranda approved these changes Sep 2, 2019

View reviewed changes

n1ghtmare requested changes Sep 2, 2019

View reviewed changes

lib/GridItem.jsx Show resolved Hide resolved

lib/ReactGridLayout.jsx Outdated Show resolved Hide resolved

test/examples/0-showcase.jsx Outdated Show resolved Hide resolved

daynin force-pushed the droppable branch from c94b020 to 302773f Compare September 2, 2019 12:33

feat(grid): add an ability to drop elements from outside of a grid

1ff0ab0

- add isDroppable flag for grids - add onDrop callback for getting an element position after dropping - add documentation - add an example

daynin force-pushed the droppable branch from 302773f to 1ff0ab0 Compare September 2, 2019 13:11

n1ghtmare approved these changes Sep 2, 2019

View reviewed changes

mankinchi suggested changes Sep 3, 2019

View reviewed changes

daynin merged commit 56eb5c8 into react-grid-layout:master Sep 9, 2019

daynin deleted the droppable branch September 9, 2019 07:21

daynin mentioned this pull request Sep 9, 2019

Multiple grids #459

Closed

3 tasks

STRML reviewed Sep 9, 2019

View reviewed changes

STRML mentioned this pull request Sep 9, 2019

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate #990

Merged

daynin mentioned this pull request Sep 20, 2019

Added support for dragging from external sources #939

Closed

STRML added this to the 0.17.0 milestone Oct 22, 2019

AA9-YG mentioned this pull request Apr 25, 2020

Issue with dropping and adding different widgets on to the grid #1200

Closed

jonlepage mentioned this pull request Apr 26, 2020

Bug nested drop placeholder useCSSTransforms #1197

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(grid): add an ability to drop elements from outside of a grid #980

feat(grid): add an ability to drop elements from outside of a grid #980

daynin commented Aug 15, 2019 •

edited

Loading

daynin commented Sep 2, 2019 •

edited

Loading

josesaranda left a comment

josesaranda left a comment

n1ghtmare left a comment

mankinchi commented Sep 2, 2019

n1ghtmare commented Sep 2, 2019

mankinchi commented Sep 3, 2019

mankinchi commented Sep 3, 2019

mankinchi left a comment

daynin commented Sep 3, 2019 •

edited

Loading

daynin commented Sep 5, 2019

STRML Sep 7, 2019

daynin Sep 11, 2019

STRML Sep 7, 2019

daynin Sep 11, 2019

STRML Sep 7, 2019

daynin Sep 11, 2019

STRML commented Sep 9, 2019

mankinchi commented Sep 10, 2019

violabg commented Nov 27, 2019

STRML commented Nov 27, 2019 via email

mikefordweb commented Apr 30, 2020 •

edited

Loading

mathiastm commented Jul 10, 2020

kryptoscan commented Jul 25, 2020

feat(grid): add an ability to drop elements from outside of a grid #980

feat(grid): add an ability to drop elements from outside of a grid #980

Conversation

daynin commented Aug 15, 2019 • edited Loading

daynin commented Sep 2, 2019 • edited Loading

josesaranda left a comment

Choose a reason for hiding this comment

josesaranda left a comment

Choose a reason for hiding this comment

n1ghtmare left a comment

Choose a reason for hiding this comment

mankinchi commented Sep 2, 2019

n1ghtmare commented Sep 2, 2019

mankinchi commented Sep 3, 2019

mankinchi commented Sep 3, 2019

mankinchi left a comment

Choose a reason for hiding this comment

daynin commented Sep 3, 2019 • edited Loading

daynin commented Sep 5, 2019

STRML Sep 7, 2019

Choose a reason for hiding this comment

daynin Sep 11, 2019

Choose a reason for hiding this comment

STRML Sep 7, 2019

Choose a reason for hiding this comment

daynin Sep 11, 2019

Choose a reason for hiding this comment

STRML Sep 7, 2019

Choose a reason for hiding this comment

daynin Sep 11, 2019

Choose a reason for hiding this comment

STRML commented Sep 9, 2019

mankinchi commented Sep 10, 2019

violabg commented Nov 27, 2019

STRML commented Nov 27, 2019 via email

mikefordweb commented Apr 30, 2020 • edited Loading

mathiastm commented Jul 10, 2020

kryptoscan commented Jul 25, 2020

daynin commented Aug 15, 2019 •

edited

Loading

daynin commented Sep 2, 2019 •

edited

Loading

daynin commented Sep 3, 2019 •

edited

Loading

mikefordweb commented Apr 30, 2020 •

edited

Loading