Use ES6 class style for creating react components

demos/demo0-simple-transition/Demo.jsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import {Motion, spring} from '../../src/react-motion';
 
-const Demo = createReactClass({
-  getInitialState() {
-    return {open: false};
-  },
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {open: false};
+  };
 
-  handleMouseDown() {
+  handleMouseDown = () => {
     this.setState({open: !this.state.open});
-  },
+  };
 
-  handleTouchStart(e) {
+  handleTouchStart = (e) => {
     e.preventDefault();
     this.handleMouseDown();
-  },
+  };
 
   render() {
     return (
@@ -39,7 +39,5 @@ const Demo = createReactClass({
         </Motion>
       </div>
     );
-  },
-});
-
-export default Demo;
+  };
+}

demos/demo1-chat-heads/Demo.jsx

@@ -1,38 +1,38 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import {StaggeredMotion, spring, presets} from '../../src/react-motion';
 import range from 'lodash.range';
 
-const Demo = createReactClass({
-  getInitialState() {
-    return {x: 250, y: 300};
-  },
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {x: 250, y: 300};
+  };
 
   componentDidMount() {
     window.addEventListener('mousemove', this.handleMouseMove);
     window.addEventListener('touchmove', this.handleTouchMove);
-  },
+  };
 
-  handleMouseMove({pageX: x, pageY: y}) {
+  handleMouseMove = ({pageX: x, pageY: y}) => {
     this.setState({x, y});
-  },
+  };
 
-  handleTouchMove({touches}) {
+  handleTouchMove = ({touches}) => {
     this.handleMouseMove(touches[0]);
-  },
+  };
 
-  getStyles(prevStyles) {
+  getStyles = (prevStyles) => {
     // `prevStyles` is the interpolated value of the last tick
     const endValue = prevStyles.map((_, i) => {
       return i === 0
         ? this.state
         : {
-            x: spring(prevStyles[i - 1].x, presets.gentle),
-            y: spring(prevStyles[i - 1].y, presets.gentle),
-          };
+          x: spring(prevStyles[i - 1].x, presets.gentle),
+          y: spring(prevStyles[i - 1].y, presets.gentle),
+        };
     });
     return endValue;
-  },
+  };
 
   render() {
     return (
@@ -55,7 +55,5 @@ const Demo = createReactClass({
         }
       </StaggeredMotion>
     );
-  },
-});
-
-export default Demo;
+  };
+}

demos/demo2-draggable-balls/Demo.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import {Motion, spring} from '../../src/react-motion';
 import range from 'lodash.range';
 
@@ -29,34 +28,35 @@ const layout = range(count).map(n => {
   return [width * col, height * row];
 });
 
-const Demo = createReactClass({
-  getInitialState() {
-    return {
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       mouseXY: [0, 0],
       mouseCircleDelta: [0, 0], // difference between mouse and circle pos for x + y coords, for dragging
       lastPress: null, // key of the last pressed component
       isPressed: false,
       order: range(count), // index: visual position. value: component key/id
     };
-  },
+  };
 
   componentDidMount() {
     window.addEventListener('touchmove', this.handleTouchMove);
     window.addEventListener('touchend', this.handleMouseUp);
     window.addEventListener('mousemove', this.handleMouseMove);
     window.addEventListener('mouseup', this.handleMouseUp);
-  },
+  };
 
-  handleTouchStart(key, pressLocation, e) {
+  handleTouchStart = (key, pressLocation, e) => {
     this.handleMouseDown(key, pressLocation, e.touches[0]);
-  },
+  };
 
-  handleTouchMove(e) {
+  handleTouchMove = (e) => {
     e.preventDefault();
     this.handleMouseMove(e.touches[0]);
-  },
+  };
 
-  handleMouseMove({pageX, pageY}) {
+  handleMouseMove = ({pageX, pageY}) => {
     const {order, lastPress, isPressed, mouseCircleDelta: [dx, dy]} = this.state;
     if (isPressed) {
       const mouseXY = [pageX - dx, pageY - dy];
@@ -66,20 +66,20 @@ const Demo = createReactClass({
       const newOrder = reinsert(order, order.indexOf(lastPress), index);
       this.setState({mouseXY, order: newOrder});
     }
-  },
+  };
 
-  handleMouseDown(key, [pressX, pressY], {pageX, pageY}) {
+  handleMouseDown = (key, [pressX, pressY], {pageX, pageY}) => {
     this.setState({
       lastPress: key,
       isPressed: true,
       mouseCircleDelta: [pageX - pressX, pageY - pressY],
       mouseXY: [pressX, pressY],
     });
-  },
+  };
 
-  handleMouseUp() {
+  handleMouseUp = () => {
     this.setState({isPressed: false, mouseCircleDelta: [0, 0]});
-  },
+  };
 
   render() {
     const {order, lastPress, isPressed, mouseXY} = this.state;
@@ -128,7 +128,5 @@ const Demo = createReactClass({
         })}
       </div>
     );
-  },
-});
-
-export default Demo;
+  };
+}

demos/demo3-todomvc-list-transition/Demo.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import {TransitionMotion, spring, presets} from '../../src/react-motion';
 
-const Demo = createReactClass({
-  getInitialState() {
-    return {
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       todos: [
         // key is creation date
         {key: 't1', data: {text: 'Board the plane', isDone: false}},
@@ -22,24 +22,24 @@ const Demo = createReactClass({
       value: '',
       selected: 'all',
     };
-  },
+  };
 
   // logic from todo, unrelated to animation
-  handleChange({target: {value}}) {
+  handleChange = ({target: {value}}) => {
     this.setState({value});
-  },
+  };
 
-  handleSubmit(e) {
+  handleSubmit = (e) => {
     e.preventDefault();
     const newItem = {
       key: 't' + Date.now(),
       data: {text: this.state.value, isDone: false},
     };
     // append at head
     this.setState({todos: [newItem].concat(this.state.todos)});
-  },
+  };
 
-  handleDone(doneKey) {
+  handleDone = (doneKey) => {
     this.setState({
       todos: this.state.todos.map(todo => {
         const {key, data: {text, isDone}} = todo;
@@ -48,35 +48,35 @@ const Demo = createReactClass({
           : todo;
       }),
     });
-  },
+  };
 
-  handleToggleAll() {
+  handleToggleAll = () => {
     const allNotDone = this.state.todos.every(({data}) => data.isDone);
     this.setState({
       todos: this.state.todos.map(({key, data: {text, isDone}}) => (
         {key: key, data: {text: text, isDone: !allNotDone}}
       )),
     });
-  },
+  };
 
-  handleSelect(selected) {
+  handleSelect = (selected) => {
     this.setState({selected});
-  },
+  };
 
-  handleClearCompleted() {
+  handleClearCompleted = () => {
     this.setState({todos: this.state.todos.filter(({data}) => !data.isDone)});
-  },
+  };
 
-  handleDestroy(date) {
+  handleDestroy = (date) => {
     this.setState({todos: this.state.todos.filter(({key}) => key !== date)});
-  },
+  };
 
   // actual animation-related logic
-  getDefaultStyles() {
+  getDefaultStyles = () => {
     return this.state.todos.map(todo => ({...todo, style: {height: 0, opacity: 1}}));
-  },
+  };
 
-  getStyles() {
+  getStyles = () => {
     const {todos, value, selected} = this.state;
     return todos.filter(({data: {isDone, text}}) => {
       return text.toUpperCase().indexOf(value.toUpperCase()) >= 0 &&
@@ -93,21 +93,21 @@ const Demo = createReactClass({
         }
       };
     });
-  },
+  };
 
   willEnter() {
     return {
       height: 0,
       opacity: 1,
     };
-  },
+  };
 
   willLeave() {
     return {
       height: spring(0),
       opacity: spring(0),
     };
-  },
+  };
 
   render() {
     const {todos, value, selected} = this.state;
@@ -195,7 +195,5 @@ const Demo = createReactClass({
         </footer>
       </section>
     );
-  },
-});
-
-export default Demo;
+  };
+}

demos/demo4-photo-gallery/Demo.jsx

@@ -1,32 +1,32 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import {Motion, spring} from '../../src/react-motion';
 
 const springSettings = {stiffness: 170, damping: 26};
 const NEXT = 'show-next';
 
-const Demo = createReactClass({
-  getInitialState() {
-    return {
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       photos: [[500, 350], [800, 600], [800, 400], [700, 500], [200, 650], [600, 600]],
       currPhoto: 0,
     };
-  },
+  };
 
-  handleChange({target: {value}}) {
+  handleChange = ({target: {value}}) => {
     this.setState({currPhoto: value});
-  },
+  };
 
-  clickHandler(btn){
-    var photoIndex = btn === NEXT ? this.state.currPhoto+1 : this.state.currPhoto-1;
+  clickHandler = (btn) => {
+    let photoIndex = btn === NEXT ? this.state.currPhoto+1 : this.state.currPhoto-1;
 
     photoIndex = photoIndex >= 0 ? photoIndex : this.state.photos.length - 1;
     photoIndex = photoIndex >= this.state.photos.length ? 0 : photoIndex;
 
     this.setState({
       currPhoto: photoIndex
     })
-  },
+  };
 
   render() {
     const {photos, currPhoto} = this.state;
@@ -76,7 +76,5 @@ const Demo = createReactClass({
         </div>
       </div>
     );
-  },
-});
-
-export default Demo;
+  };
+}