From 343541974aa7a83eb5679daea40ca9d2f10eda7a Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 17 Feb 2015 20:09:32 +0300 Subject: [PATCH] registerType => register --- README.md | 30 ++++++++++---------- examples/_drag-around-custom/Container.js | 4 +-- examples/_drag-around-custom/DraggableBox.js | 4 +-- examples/_drag-around-naive/Box.js | 4 +-- examples/_drag-around-naive/Container.js | 4 +-- examples/_dustbin-interesting/makeDustbin.js | 4 +-- examples/_dustbin-interesting/makeItem.js | 4 +-- examples/_dustbin-simple/Dustbin.js | 4 +-- examples/_dustbin-simple/Item.js | 4 +-- examples/_sortable-simple/Card.js | 4 +-- modules/utils/createDragDropMixin.js | 2 +- 11 files changed, 34 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index b0f61956bd..688da99d7e 100644 --- a/README.md +++ b/README.md @@ -105,11 +105,11 @@ var Image = React.createClass({ mixins: [DragDropMixin], statics: { - configureDragDrop(registerType) { + configureDragDrop(register) { - // Specify all supported types by calling registerType(type, { dragSource?, dropTarget? }) + // Specify all supported types by calling register(type, { dragSource?, dropTarget? }) - registerType(ItemTypes.IMAGE, { + register(ItemTypes.IMAGE, { // dragSource, when specified, is { // beginDrag(component), @@ -151,7 +151,7 @@ var Image = React.createClass({ By specifying `configureDragDrop` in `statics`, we tell `DragDropMixin` the drag-drop behavior of this component. Both draggable and droppable components use the same mixin. -Inside `configureDragDrop`, we need to call `registerType` for each of our custom `ItemTypes` that component supports. For example, there might be several representations of images in your app, and each would provide a `dragSource` for `ItemTypes.IMAGE`. +Inside `configureDragDrop`, we need to call `register` for each of our custom `ItemTypes` that component supports. For example, there might be several representations of images in your app, and each would provide a `dragSource` for `ItemTypes.IMAGE`. A `dragSource` is just an object specifying how the drag source works. You must implement `beginDrag(component)` to return `item` that represents the data you're dragging and, optionally, a few options that adjust the dragging UI. You can optionally `canDrag(component)` to forbid dragging, or `endDrag(component, dropEffect)` to execute some logic when the drop has (or has not) occured. And you can share this logic between components by letting a shared mixins generate `dragSource` for them. @@ -159,7 +159,7 @@ Finally, you must use `{...this.dragSourceFor(itemType)}` on some (one or more) ### Simple Drop Target -Let's say we want `ImageBlock` to be a drop target for `IMAGE`s. It's pretty much the same, except that we need to give `registerType` a `dropTarget` implementation: +Let's say we want `ImageBlock` to be a drop target for `IMAGE`s. It's pretty much the same, except that we need to give `register` a `dropTarget` implementation: ```javascript var { DragDropMixin } = require('react-dnd'), @@ -169,8 +169,8 @@ var ImageBlock = React.createClass({ mixins: [DragDropMixin], statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.IMAGE, { + configureDragDrop(register) { + register(ItemTypes.IMAGE, { // dropTarget, when specified, is { // acceptDrop(component, item)?, @@ -218,8 +218,8 @@ var ImageBlock = React.createClass({ mixins: [DragDropMixin], statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.IMAGE, { + configureDragDrop(register) { + register(ItemTypes.IMAGE, { // Add a drag source that only works when ImageBlock has an image: @@ -272,8 +272,8 @@ var ImageUploader = React.createClass({ mixins: [DragDropMixin], statics: { - configureDragDrop(registerType) { - registerType(NativeDragItemTypes.FILE, { + configureDragDrop(register) { + register(NativeDragItemTypes.FILE, { dropTarget: { acceptDrop(component, item) { // Do something with files @@ -317,12 +317,12 @@ I have not covered everything but it's possible to use this API in a few more wa ### `require('react-dnd').DragDropMixin` -`statics.configureDragDrop(registerType)` +`statics.configureDragDrop(register)` Gives you a chance to configure drag and drop on your component. Components with `DragDropMixin` will have this method. -`registerType(type, { dragSource?, dropTarget? })` +`register(type, { dragSource?, dropTarget? })` Call this method to specify component behavior as drag source or drop target for given type. This method is passed as a parameter to `configureDragDrop`. @@ -394,8 +394,8 @@ getImageUrlsToPreload() { // You can now use `this.hasPreloadedImage(url)` and `this.getPreloadedImage(url)` in your `dragSource`: statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.MY_ITEM, { + configureDragDrop(register) { + register(ItemTypes.MY_ITEM, { dragSource: { canDrag(component) { return component.hasPreloadedImage('some-img-url1'); diff --git a/examples/_drag-around-custom/Container.js b/examples/_drag-around-custom/Container.js index e1bd64fdf9..b4065f3113 100644 --- a/examples/_drag-around-custom/Container.js +++ b/examples/_drag-around-custom/Container.js @@ -34,8 +34,8 @@ var Container = React.createClass({ }, statics: { - configureDragDrop(registerHandler, context) { - registerHandler(ItemTypes.BOX, { + configureDragDrop(register, context) { + register(ItemTypes.BOX, { dropTarget: { acceptDrop(component, item, e) { var delta = context.getCurrentOffsetDelta(), diff --git a/examples/_drag-around-custom/DraggableBox.js b/examples/_drag-around-custom/DraggableBox.js index c151099007..b0b6f468d1 100644 --- a/examples/_drag-around-custom/DraggableBox.js +++ b/examples/_drag-around-custom/DraggableBox.js @@ -31,8 +31,8 @@ var DraggableBox = React.createClass({ }, statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.BOX, { + configureDragDrop(register) { + register(ItemTypes.BOX, { dragSource: { beginDrag(component, e) { return { diff --git a/examples/_drag-around-naive/Box.js b/examples/_drag-around-naive/Box.js index 6cf38e17da..a398eb2974 100644 --- a/examples/_drag-around-naive/Box.js +++ b/examples/_drag-around-naive/Box.js @@ -16,8 +16,8 @@ var Box = React.createClass({ }, statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.BOX, { + configureDragDrop(register) { + register(ItemTypes.BOX, { dragSource: { beginDrag(component, e) { return { diff --git a/examples/_drag-around-naive/Container.js b/examples/_drag-around-naive/Container.js index 1af88d327d..850a71d27e 100644 --- a/examples/_drag-around-naive/Container.js +++ b/examples/_drag-around-naive/Container.js @@ -24,8 +24,8 @@ var Container = React.createClass({ }, statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.BOX, { + configureDragDrop(register) { + register(ItemTypes.BOX, { dropTarget: { acceptDrop(component, item, e) { var left = Math.round(item.startLeft + (e.pageX - item.startPageX)), diff --git a/examples/_dustbin-interesting/makeDustbin.js b/examples/_dustbin-interesting/makeDustbin.js index a8ecabbe89..82a1357b09 100644 --- a/examples/_dustbin-interesting/makeDustbin.js +++ b/examples/_dustbin-interesting/makeDustbin.js @@ -16,7 +16,7 @@ function makeDustbin(accepts) { }, statics: { - configureDragDrop(registerType) { + configureDragDrop(register) { var dropTarget = { acceptDrop(component, item) { component.setState({ @@ -26,7 +26,7 @@ function makeDustbin(accepts) { }; accepts.forEach(itemType => { - registerType(itemType, { + register(itemType, { dropTarget: dropTarget }); }); diff --git a/examples/_dustbin-interesting/makeItem.js b/examples/_dustbin-interesting/makeItem.js index f735885ab7..cc9313b059 100644 --- a/examples/_dustbin-interesting/makeItem.js +++ b/examples/_dustbin-interesting/makeItem.js @@ -20,8 +20,8 @@ function makeItem(dropType) { }, statics: { - configureDragDrop(registerType) { - registerType(dropType, { + configureDragDrop(register) { + register(dropType, { dragSource: { beginDrag(component) { return { diff --git a/examples/_dustbin-simple/Dustbin.js b/examples/_dustbin-simple/Dustbin.js index 6ee9528cf6..95c369f9b8 100644 --- a/examples/_dustbin-simple/Dustbin.js +++ b/examples/_dustbin-simple/Dustbin.js @@ -8,8 +8,8 @@ var Dustbin = React.createClass({ mixins: [DragDropMixin], statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.ITEM, { + configureDragDrop(register) { + register(ItemTypes.ITEM, { dropTarget: { acceptDrop(component, item) { window.alert('You dropped ' + item.name + '!'); diff --git a/examples/_dustbin-simple/Item.js b/examples/_dustbin-simple/Item.js index 20865382dc..8ed06d43d4 100644 --- a/examples/_dustbin-simple/Item.js +++ b/examples/_dustbin-simple/Item.js @@ -13,8 +13,8 @@ var Item = React.createClass({ }, statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.ITEM, { + configureDragDrop(register) { + register(ItemTypes.ITEM, { dragSource: { beginDrag(component) { return { diff --git a/examples/_sortable-simple/Card.js b/examples/_sortable-simple/Card.js index c8bc415925..2e1c81ee95 100644 --- a/examples/_sortable-simple/Card.js +++ b/examples/_sortable-simple/Card.js @@ -15,8 +15,8 @@ var Card = React.createClass({ }, statics: { - configureDragDrop(registerType) { - registerType(ItemTypes.CARD, { + configureDragDrop(register) { + register(ItemTypes.CARD, { dragSource: { beginDrag(component) { return { diff --git a/modules/utils/createDragDropMixin.js b/modules/utils/createDragDropMixin.js index 0ee28d2140..da62bc1bcc 100644 --- a/modules/utils/createDragDropMixin.js +++ b/modules/utils/createDragDropMixin.js @@ -160,7 +160,7 @@ function createDragDropMixin(backend) { } else { invariant( this.constructor.configureDragDrop, - '%s must implement static configureDragDrop(registerType) to use DragDropMixin', + '%s must implement static configureDragDrop(register, context) to use DragDropMixin', this.constructor.displayName ); }