Fixing Transition state update bug

docs/js/components/DemoControl.js

@@ -1,60 +1,58 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { Component } from 'react';
-import Slider from 'rc-slider';
-import { easings, transitions } from '../../../src/';
+import React, { Component } from "react";
+import Slider from "rc-slider";
+import { easings, transitions } from "../../../src/";
 
-const selectEasingOptions = Object.keys(easings).map(k => ({
+const selectEasingOptions = Object.keys(easings).map((k) => ({
   label: k,
   value: easings[k],
 }));
 
-const selectTransitionOptions = Object.keys(transitions).map(k => ({
+const selectTransitionOptions = Object.keys(transitions).map((k) => ({
   label: k,
   value: k,
 }));
-
-
 export default class DemoControl extends Component {
   handleShuffle = () => {
     this.props.onShuffle();
-  }
+  };
 
   handlePrepend = () => {
     this.props.onPrepend();
-  }
+  };
 
   handleAppend = () => {
     this.props.onAppend();
-  }
+  };
 
   handleMultipleAppend = () => {
     this.props.onMultipleAppend();
-  }
+  };
 
   handleDurationChange = (value) => {
     this.props.onDurationChange(value);
-  }
+  };
 
   handleColumnWidthChange = (value) => {
     this.props.onColumnWidthChange(value);
-  }
+  };
 
   handleGutterChange = (value) => {
     this.props.onGutterChange(value);
-  }
+  };
 
   handleEasingChange = (e) => {
     this.props.onEasingChange(e.target.value);
-  }
+  };
 
   handleTransitionChange = (e) => {
     this.props.onTransitionChange(e.target.value);
-  }
+  };
 
   handleRTLChange = (e) => {
     this.props.onRTLChange(e.target.checked);
-  }
+  };
 
   render() {
     const {
@@ -69,21 +67,29 @@ export default class DemoControl extends Component {
     return (
       <div className="demo-control">
         <div>
-          <button className="btn" onClick={this.handleShuffle}>Shuffle</button>
+          <button className="btn" onClick={this.handleShuffle}>
+            Shuffle
+          </button>
         </div>
 
         <div />
 
         <div>
-          <button className="btn" onClick={this.handlePrepend}>Prepend</button>
+          <button className="btn" onClick={this.handlePrepend}>
+            Prepend
+          </button>
         </div>
 
         <div>
-          <button className="btn" onClick={this.handleAppend}>Append</button>
+          <button className="btn" onClick={this.handleAppend}>
+            Append
+          </button>
         </div>
 
         <div>
-          <button className="btn" onClick={this.handleMultipleAppend}>Multiple Append</button>
+          <button className="btn" onClick={this.handleMultipleAppend}>
+            Multiple Append
+          </button>
         </div>
 
         <div />
@@ -123,18 +129,22 @@ export default class DemoControl extends Component {
         <div>
           <label>Easing</label>
           <select value={easing} onChange={this.handleEasingChange}>
-            {selectEasingOptions.map(o =>
-              <option key={o.value} value={o.value}>{o.label}</option>
-            )}
+            {selectEasingOptions.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
           </select>
         </div>
 
         <div>
           <label>Transition</label>
           <select value={transition} onChange={this.handleTransitionChange}>
-            {selectTransitionOptions.map(o =>
-              <option key={o.value} value={o.value}>{o.label}</option>
-            )}
+            {selectTransitionOptions.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
           </select>
         </div>
 

docs/js/pages/Home.js

@@ -2,20 +2,20 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { Component } from 'react';
-import StackGrid, { transitions, easings } from '../../../src/';
-import DemoControl from '../components/DemoControl';
+import React, { Component } from "react";
+import StackGrid, { transitions, easings } from "../../../src/";
+import DemoControl from "../components/DemoControl";
 
 const itemModifier = [
-  'pattern1',
-  'pattern2',
-  'pattern3',
-  'gray',
-  'gray-light',
-  'gray-dark',
-  'yellow',
-  'pink',
-  'purple',
+  "pattern1",
+  "pattern2",
+  "pattern3",
+  "gray",
+  "gray-light",
+  "gray-dark",
+  "yellow",
+  "pink",
+  "purple",
 ];
 
 export default class Home extends Component {
@@ -34,15 +34,16 @@ export default class Home extends Component {
       columnWidth: 150,
       gutter: 5,
       easing: easings.quartOut,
-      transition: 'fadeDown',
+      transition: "fadeDown",
       rtl: false,
     };
   }
 
   createItem() {
     const id = Math.random().toString(36).substr(2, 9);
-    const height = Math.floor((Math.random() * (300 - 80)) + 80);
-    const modifier = itemModifier[Math.floor(Math.random() * itemModifier.length)];
+    const height = Math.floor(Math.random() * (300 - 80) + 80);
+    const modifier =
+      itemModifier[Math.floor(Math.random() * itemModifier.length)];
 
     return { id, height, modifier };
   }
@@ -59,19 +60,19 @@ export default class Home extends Component {
     }
 
     this.setState({ items: newItems });
-  }
+  };
 
   prependItem = () => {
     this.setState({
       items: [this.createItem(), ...this.state.items],
     });
-  }
+  };
 
   appendItem = () => {
     this.setState({
       items: [...this.state.items, this.createItem()],
     });
-  }
+  };
 
   multipleAppendItem = () => {
     const newItems = [];
@@ -83,37 +84,39 @@ export default class Home extends Component {
     this.setState({
       items: [...this.state.items, ...newItems],
     });
-  }
+  };
 
   removeItem = (id) => {
     this.setState({
-      items: this.state.items.filter(o => o.id !== id),
+      items: this.state.items.filter((o) => o.id !== id),
     });
-  }
+  };
 
   handleDurationChange = (duration) => {
     this.setState({ duration });
-  }
+  };
 
   handleColumnWidthChange = (columnWidth) => {
     this.setState({ columnWidth });
-  }
+  };
 
   handleGutterChange = (gutter) => {
     this.setState({ gutter });
-  }
+  };
 
   handleEasingChange = (easing) => {
     this.setState({ easing });
-  }
+  };
 
   handleTransitionChange = (transition) => {
+
     this.setState({ transition });
-  }
+
+  };
 
   handleRTLChange = (rtl) => {
     this.setState({ rtl });
-  }
+  };
 
   render() {
     const {
@@ -122,11 +125,10 @@ export default class Home extends Component {
       columnWidth,
       gutter,
       easing,
-      transition: transitionSelect,
+      transition,
       rtl,
     } = this.state;
 
-    const transition = transitions[transitionSelect];
     return (
       <div>
         <DemoControl
@@ -161,17 +163,17 @@ export default class Home extends Component {
           leaved={transition.leaved}
           rtl={rtl}
           onLayout={() => {
-            console.log('[DEMO] `onLayout()` has been called.'); // eslint-disable-line
+             // eslint-disable-line
           }}
         >
-          {items.map(item =>
-            (<div
+          {items.map((item) => (
+            <div
               key={item.id}
               className={`item item--${item.modifier}`}
               style={{ height: item.height }}
               onClick={() => this.removeItem(item.id)}
-            />)
-          )}
+            />
+          ))}
         </StackGrid>
       </div>
     );