Use ES6 classes in example

react-dnd · Mar 13, 2015 · c2d8b0a · c2d8b0a
1 parent 9f2598e
commit c2d8b0a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 38 deletions.
diff --git a/examples/_dustbin-simple/Container.js b/examples/_dustbin-simple/Container.js
@@ -1,14 +1,14 @@
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 import Dustbin from './Dustbin';
 import Item from './Item';
 import { HTML5Backend } from 'react-dnd';
 import { DragDropManager } from 'dnd-core';
 
 const manager = new DragDropManager(HTML5Backend);
 
-const Container = React.createClass({
+export default class Container extends Component {
   render() {
     return (
       <div>
@@ -21,6 +21,4 @@ const Container = React.createClass({
       </div>
     );
   }
-});
-
-export default Container;
+}
diff --git a/examples/_dustbin-simple/Dustbin.js b/examples/_dustbin-simple/Dustbin.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 import ItemTypes from './ItemTypes';
 import { DropTarget} from 'dnd-core';
 
@@ -18,35 +18,37 @@ const style = {
   textAlign: 'center'
 };
 
-const Dustbin = React.createClass({
-  getInitialState() {
-   return this.getDropState();
-  },
+export default class Dustbin extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getDropState();
+  }
 
   getDropState() {
     const context = this.props.manager.getContext();
     return {
       isHovering: this.targetHandle && context.isOver(this.targetHandle),
       isDragging: context.isDragging()
     };
-  },
+  }
 
   componentWillMount() {
+    console.log('test')
     this.targetHandle = this.props.manager.getRegistry().addTarget(ItemTypes.ITEM, new ItemDropTarget());
-  },
+  }
 
   componentDidMount() {
-    this.props.manager.getContext().addChangeListener(this.handleDragContextChange);
-  },
+    this._changeListener = this.props.manager.getContext().addChangeListener(() => this.handleDragContextChange());
+  }
 
   componentWillUnmount() {
     this.props.manager.getRegistry().removeTarget(this.targetHandle);
-    this.props.manager.getContext().removeChangeListener(this.handleDragContextChange);
-  },
+    this.props.manager.getContext().removeChangeListener(this._changeListener);
+  }
 
   handleDragContextChange() {
     this.setState(this.getDropState());
-  },
+  }
 
   render() {
     let backgroundColor = '#222';
@@ -70,6 +72,4 @@ const Dustbin = React.createClass({
       </div>
     );
   }
-});
-
-export default Dustbin;
+}
diff --git a/examples/_dustbin-simple/Item.js b/examples/_dustbin-simple/Item.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import ItemTypes from './ItemTypes';
 import { DragSource } from 'dnd-core';
 
@@ -33,37 +33,34 @@ const style = {
   maxWidth: 80
 };
 
-const Item = React.createClass({
-  propTypes: {
-    name: PropTypes.string.isRequired
-  },
-
-  getInitialState() {
-   return this.getDragState();
-  },
+export default class Item extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getDragState();
+  }
 
   getDragState() {
     return {
       isDraggingItem: this.sourceHandle && this.props.manager.getContext().isDragging(this.sourceHandle)
     };
-  },
+  }
 
   componentWillMount() {
     this.sourceHandle = this.props.manager.getRegistry().addSource(ItemTypes.ITEM, new ItemDragSource(this));
-  },
+  }
 
   componentDidMount() {
-    this.props.manager.getContext().addChangeListener(this.handleDragContextChange);
-  },
+    this._changeListener = this.props.manager.getContext().addChangeListener(() => this.handleDragContextChange());
+  }
 
   componentWillUnmount() {
     this.props.manager.getRegistry().removeSource(this.sourceHandle);
-    this.props.manager.getContext().removeChangeListener(this.handleDragContextChange);
-  },
+    this.props.manager.getContext().removeChangeListener(this._changeListener);
+  }
 
   handleDragContextChange() {
     this.setState(this.getDragState());
-  },
+  }
 
   render() {
     const { name } = this.props;
@@ -80,6 +77,8 @@ const Item = React.createClass({
       </div>
     );
   }
-});
+}
 
-export default Item;
+Item.PropTypes = {
+  name: PropTypes.string.isRequired
+};