How to use the react-dnd.DropTarget function in react-dnd

To help you get started, we’ve selected a few react-dnd examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github flow-typed / flow-typed / definitions / npm / react-dnd_v2.x.x / flow_v0.53.x- / test_react-dnd-v2.js View on Github external
style={{
          position: "relative",
          width: "100%",
          height: "100%"
        }}
      >
        
        {isOver && !canDrop && this.renderOverlay("red")}
        {!isOver && canDrop && this.renderOverlay("yellow")}
        {isOver && canDrop && this.renderOverlay("green")}
      
    );
  }
}

const DndBoardSquare = DropTarget(
  "boardsquare",
  boardSquareTarget,
  boardSquareCollect
)(BoardSquare);

(DndBoardSquare.DecoratedComponent: typeof BoardSquare);

// $ExpectError: Missing required prop
(: React.Element);

(: React.Element);

// $ExpectError: Invalid required prop
(: React.Element);

(: React.Element);
github choerodon / agile-service-old / react / routes / StoryMap / StoryMapHome / components / StoryMapBody / StoryArea / StoryColumn.js View on Github external
style={{ background: isOver ? 'rgb(240,240,240)' : 'white', position: 'relative' }}
      >
        <div style="{{">
          {storys &amp;&amp; storys.map((story, index) =&gt; )}
          {!StoryMapStore.isFullScreen &amp;&amp; }
        </div>
      
    );
  }
}

StoryColumn.propTypes = {

};

export default DropTarget(
  'story',
  {
    drop: props =&gt; ({ epic: props.epic, feature: props.feature, version: props.version }),
  },
  (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    // canDrop: monitor.canDrop(), //去掉可以优化性能
  }),
)(StoryColumn);
github metasfresh / metasfresh-webui-frontend / src / components / board / Card.js View on Github external
&gt;
        {targetIndicator &amp;&amp; (
          
        )}
        {this.renderCard()}
      
    );
  }
}

export default DragSource(ItemTypes.CARD, cardSource, collect)(
  DropTarget(ItemTypes.CARD, cardTarget, connect)(Card)
);
github TryStarboard / Starboard / source / client / components / Repo.js View on Github external
return connectDropTarget(
      <div>
        <div>
          <a href="{html_url}">
            <span>{repoName}</span>
            <span> / {authorName}</span>
          </a>
        </div>
        {tagsSection}
        <div>{description}</div>
      </div>
    );
  }
}

export default createObserveComponent(DropTarget(
  'TAG',
  {
    canDrop(props, monitor) {
      const {tagId} = monitor.getItem();
      return props.repo.tags.indexOf(tagId) === -1;
    },
    drop(props, monitor) {
      const {tagId} = monitor.getItem();
      applyTagToRepo(tagId, props.id);
    }
  },
  (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.canDrop() &amp;&amp; monitor.isOver(),
  })
)(Repo));
github edtr-io / edtr-io / packages / plugin-rows / src / editor / dnd-hoc.ts View on Github external
export function connectDnD(
  Comp: React.ComponentType
) {
  return DropTarget&lt;
    {
      index: number
      moveRow: (from: number, to: number) =&gt; void
      insert: (index: number, data: DocumentState) =&gt; void
      plugins: Record
    },
    TargetProps
  &gt;(
    ['row', NativeTypes.FILE, NativeTypes.URL],
    {
      hover(props, monitor, component) {
        if (!component) {
          return null
        }
        const node = component.getNode()
        if (!node) {
github RESTEDClient / RESTED / src / components / Collections / Request.js View on Github external
,
    ));
  }
}

const mapStateToProps = (state, props) =&gt; ({
  isEditing: getEditingRequest(state)
    ? getEditingRequest(state).id === props.request.id
    : false,
  defaultCompact: isDefaultCompact(state),
});

export default flow(
  DropTarget(Type.Request, requestTarget, connector =&gt; ({
    connectDropTarget: connector.dropTarget(),
  })),
  DragSource(Type.Request, requestSource, (connector, monitor) =&gt; ({
    connectDragSource: connector.dragSource(),
    isDragging: monitor.isDragging(),
  })),
  connect(mapStateToProps, {
    ...CollectionActions,
    ...RequestActions,
    ...ConfigActions,
  }),
)(Request);
github inooid / react-redux-card-game / src / containers / TargetableMinion / TargetableMinion.js View on Github external
const sourceMinion = monitor.getItem().card;

    props.attackMinion({
      sourceMinion,
      source: 'PLAYER',
      targetMinion: props.card,
      target: 'OPPONENT',
    });
  },
};

function collect(connect) {
  return { connectDropTarget: connect.dropTarget() };
}

export default dropTarget('MINION', minionTarget, collect)(TargetableMinion);
github jiayihu / react-kanban / src / containers / Lane.jsx View on Github external
dispatch(notesActions.updateNote(updatedNote));
  },

  onMoveNote(sourceId, targetId) {
    dispatch(lanesActions.move('note', sourceId, targetId));
  },

  attachToLane(laneId, noteId) {
    dispatch(lanesActions.attachToLane(laneId, noteId));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(
  DragSource(itemTypes.LANE, laneSource, collectDragSource)(
    DropTarget([itemTypes.NOTE, itemTypes.LANE], laneTarget, collectDropTarget)(Lane)
  )
);
github nscozzaro / physics-is-beautiful / courses / static / courses / js / containers / StudioViews / EditorsViews / containers / LessonWorkSpace / Codesandbox / app / components / Preview / DevTools / Tabs / Tab / index.tsx View on Github external
const entrySource = {
  canDrag: (props: TabProps) => props.canDrag,
  beginDrag: (props: TabProps) => ({
    index: props.index,
    devToolIndex: props.devToolIndex,
  }),
};

const collectSource = (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
});

export const PREVIEW_TAB_ID = 'PREVIEW_TAB';

export const DraggableTab = DropTarget(
  PREVIEW_TAB_ID,
  entryTarget,
  collectTarget
)(DragSource(PREVIEW_TAB_ID, entrySource, collectSource)(PaneTab));
github davidalekna / react-data-browser / src / __temp / TableDraggable / TableRow.js View on Github external
),
      )
    );
  }
}

export default compose(
  DragSource(
    'card',
    rowSource,
    (connect = DragSourceConnector, monitor = DragSourceMonitor) => ({
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging(),
    }),
  ),
  DropTarget('card', rowTarget, (connect = DropTargetConnector) => ({
    connectDropTarget: connect.dropTarget(),
  })),
)(TableRow);