From 5b109eb1d383c21a2ed62a0f3fa7a4343b95057d Mon Sep 17 00:00:00 2001 From: Christopher Patty Date: Fri, 22 Dec 2017 15:46:37 -0700 Subject: [PATCH] Added additional state property for whether or not the user is currently hovering a droppable that will accept the draggable --- README.md | 38 +++++++++++++++++++-------------- src/DragComponent.js | 50 ++++++++++++++++++++++++-------------------- src/Droppable.js | 21 +++++++++++++------ 3 files changed, 64 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index d09d1d4..cb01491 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ var DragComponent = dnd.DragComponent; This defines a draggable zone. At a minimum, spread the events over the element that should be draggable (usually the root element). - `id`: An id which will be used in the draggable zone's target `` -- `type`: A string type used to limit which droppable zones will accept ``'s attached to this draggable. +- `type`: A string, or array of strings, used to limit which droppable zones will accept ``'s attached to this draggable. - `data`: Data of any type which will be passed to the `onDrop` function of any `` which accepts this ``'s type. - `onDragStart`: A function which will be called when the `` zone is activated (The user started dragging). - `onDragEnd`: A function which will be called when the `` zone is deactivated (The user stopped dragging). @@ -57,15 +57,15 @@ class DraggableZone extends React.Component{ return( { - dragState => ( -
- I'm a draggable zone -
- ) - } + dragState => ( +
+ I'm a draggable zone +
+ ) + } ) } @@ -110,6 +110,10 @@ By default, children passed to this component will only render if the user is cu - `for`: A string corresponding to the `id` property of the `` zone that should trigger this component to start rendering. - `onDrag`: A function which will be called every time a user drags. +Properties available from `dragState`: +- All the properties listed in the dragState section. +- `isOverAccepted`: a boolean representing whether the user is currently hovering a `` that accepts the `type` of the currently active `` + ```jsx class DragComponent extends React.Component{ render(){ @@ -120,14 +124,14 @@ class DragComponent extends React.Component{ { dragState => (
- I will render when my Draggable zone is activated -
+ style={{ + position: 'fixed', + left: dragState.x, + top: dragState.y + }} + > + I will render when my Draggable zone is activated + ) } @@ -146,6 +150,7 @@ All components imported from `react-dragtastic` have access the global dragState - `isDragging`: A boolean representing whether the user is currently dragging. - `currentlyDraggingId`: The id of the currently dragging element. - `currentlyHoveredDroppableId`: The id of the `` currently being hovered. +- `currentlyHoveredDroppableAccepts`: The `accepts` property of the `` currently being hovered. - `data`: Data from the `data` property of the `` which is currently active. `null` if not dragging. - `type`: The type of the component being currently dragged. `null` if not dragging. @@ -154,6 +159,7 @@ All components imported from `react-dragtastic` have access the global dragState - A project website with live examples. - Screencast showing basic implementation examples. - Improved mobile support. +- Additional event hooks ## Contributing diff --git a/src/DragComponent.js b/src/DragComponent.js index 092a258..6ef339e 100644 --- a/src/DragComponent.js +++ b/src/DragComponent.js @@ -2,27 +2,31 @@ import React from 'react' import store from './store' import shortid from 'shortid' -export default class DragComponent extends React.Component{ - dragId = shortid.generate() - static defaultProps = { - for: '' - } - componentDidMount = () => { - this.unsubscribe = store.subscribe(this.dragId, ()=>{ - this.forceUpdate() - }) - } - componentWillUnmount = () => { - this.unsubscribe() - } - render(){ - const state = store.getState() - console.log(state.currentlyDraggingId, this.props.for) - return( - state.isDragging && state.currentlyDraggingId === this.props.for && - this.props.children({ - ...state - }) - ) - } +export default class DragComponent extends React.Component { + dragId = shortid.generate() + static defaultProps = { + for: '' + } + componentDidMount = () => { + this.unsubscribe = store.subscribe(this.dragId, () => { + this.forceUpdate() + }) + } + componentWillUnmount = () => { + this.unsubscribe() + } + render() { + const state = store.getState() + console.log(state.currentlyDraggingId, this.props.for) + return ( + state.isDragging && + state.currentlyDraggingId === this.props.for && + this.props.children({ + ...state, + isOverAccepted: Array.isArray(this.currentlyHoveredDroppableAccepts) + ? this.currentlyHoveredDroppableAccepts.find(state.type) + : state.type === this.currentlyHoveredDroppableAccepts + }) + ) + } } diff --git a/src/Droppable.js b/src/Droppable.js index 2e9986c..39d138c 100644 --- a/src/Droppable.js +++ b/src/Droppable.js @@ -5,7 +5,8 @@ import shortid from 'shortid' export default class Droppable extends React.Component { dragId = shortid.generate() static defaultProps = { - onDrop: () => {} + onDrop: () => {}, + accepts: null } componentDidMount = () => { this.unsubscribe = store.subscribe(this.dragId, () => { @@ -18,22 +19,30 @@ export default class Droppable extends React.Component { setOver = () => { if (store.getState().isDragging) { store.update({ - currentlyHoveredDroppableId: this.dragId + currentlyHoveredDroppableId: this.dragId, + currentlyHoveredDroppableAccepts: this.accepts }) } } setOut = () => { if (store.getState().isDragging) { store.update({ - currentlyHoveredDroppableId: null + currentlyHoveredDroppableId: null, + currentlyHoveredDroppableAccepts: null }) } } onDrop = () => { const{ data, type, isDragging } = store.getState() - if(isDragging && type === this.props.accepts){ - this.props.onDrop(data) - } + if(isDragging){ + if(Array.isArray(this.props.accepts)){ + if(this.props.accepts.find(type)) + }else{ + if(type === this.props.accepts){ + this.props.onDrop(data) + } + } + } } render() { const state = store.getState()