Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CustomDragLayer component for enabling Drag & Drop ghost row
In order to enable this you need to define the `draggableNode` prop on the `<WithDrag>` component. For example: ``` class DraggableItems extends React.Component { render() { return ( <DraggableContext onDrag={ onItemMoved }> <ol> { items.map((item, index) => { return ( <WithDrop key={ index } index={ index }> <DraggableItem /> </WithDrop> ); }); } </ol> </DraggableContext> ); } } ... class DraggableItem extends React.Component { render() { return ( <li ref={ (node) => { this._listItem = node; } } > <WithDrag draggableNode={ () => { return this._listItem; } }> <span>{ item.content }</span> </WithDrag> </li> ); } } ``` Note that the `draggableNode` is passed as a function because the ref `_listItem` is undefined until the component is mounted.
- Loading branch information
Paul Sturgess
committed
Aug 21, 2017
1 parent
10b49d4
commit 19b052b
Showing
19 changed files
with
683 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
src/components/drag-and-drop/custom-drag-layer/__definition__.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import CustomDragLayer from './'; | ||
import Definition from './../../../../demo/utils/definition'; | ||
|
||
const definition = new Definition('custom-drag-layer', CustomDragLayer, { | ||
props: ['className'], | ||
propTypes: { | ||
className: 'String' | ||
}, | ||
propDescriptions: { | ||
className: 'Custom classes to apply to the component' | ||
} | ||
}); | ||
|
||
export default definition; |
Oops, something went wrong.