v1.4.0 dependency updates

- Changes our `componentWillUpdate` call to `componentDidUpdate` to eliminate a React 16.3 StrictMode warning - Migration to [react-transition-group](https://github.com/reactjs/react-transition-group) v2 - Switches from lodash 3 to lodash 4 - Changes demo to use React 16.3 Also, removes `react-tween-state` because it was contributing to a potential memory leak in the demo. Fixes #237, fixes #236, fixes #235, fixes #229, fixes #222, fixes #224 Closes #233
google-fabric · Apr 12, 2018 · ec4b692 · ec4b692
1 parent 0b97a15
commit ec4b692
Show file tree

Hide file tree

Showing 12 changed files with 1,648 additions and 1,477 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+### v1.4.0 (2018-04-12):
+
+Dependency upgrades! No new features.
+
+ - Changes our `componentWillUpdate` call to `componentDidUpdate` to eliminate a
+   React 16.3 StrictMode warning
+ - Migration to [react-transition-group](https://github.com/reactjs/react-transition-group) v2
+ - Switches from lodash 3 to lodash 4
+ - Changes demo to use React 16.3
+
+There still are StrictMode warnings due to `react-transition-group` still using
+the older APIs.
+
 ### v1.3.3 (2017-05-19):
 
 Fixes incorrect timer clearing. (Thanks, @dmeiz1)

diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ details about why and how we built this.
 
 See the [live demo](http://google-fabric.github.io/velocity-react/).
 
-**Latest version:** v1.3.3 fixes timer clearing bug on unmount of VelocityTransitionGroup
+**Latest version:** v1.4.0 Removes some React 16.3 deprecations and warnings
 
 *Note: v1.1.0 and later require React 0.14.x*
 *Note: v1.3.0 and later require React 15.3.x and should work with React 16*

diff --git a/demo/examples/scrolling-group.jsx b/demo/examples/scrolling-group.jsx
@@ -7,55 +7,83 @@ var Box = require('../components/box');
 var EmojiSpan = require('../components/emoji-span');
 
 var CATS = ['😸', '😹', '😺', '😻', '😼', '😽', '😾', '😿', '🙀'];
-var FOODS = ['🍅', '🍆', '🍇', '🍈', '🍉', '🍊', '🍌', '🍍', '🍎', '🍏', '🍑', '🍒', '🍓', '🍔', '🍕', '🍖', '🍗'];
-
+var FOODS = [
+  '🍅',
+  '🍆',
+  '🍇',
+  '🍈',
+  '🍉',
+  '🍊',
+  '🍌',
+  '🍍',
+  '🍎',
+  '🍏',
+  '🍑',
+  '🍒',
+  '🍓',
+  '🍔',
+  '🍕',
+  '🍖',
+  '🍗',
+];
 
 var Animations = {
   // Register these with UI Pack so that we can use stagger later.
   In: velocityHelpers.registerEffect({
     calls: [
-      [{
-        transformPerspective: [ 800, 800 ],
-        transformOriginX: [ '50%', '50%' ],
-        transformOriginY: [ '100%', '100%' ],
-        marginBottom: 0,
-        opacity: 1,
-        rotateX: [0, 130],
-      }, 1, {
-        easing: 'ease-out',
-        display: 'block',
-      }]
+      [
+        {
+          transformPerspective: [800, 800],
+          transformOriginX: ['50%', '50%'],
+          transformOriginY: ['100%', '100%'],
+          marginBottom: 0,
+          opacity: 1,
+          rotateX: [0, 130],
+        },
+        1,
+        {
+          easing: 'ease-out',
+          display: 'block',
+        },
+      ],
     ],
   }),
 
   Out: velocityHelpers.registerEffect({
     calls: [
-      [{
-        transformPerspective: [ 800, 800 ],
-        transformOriginX: [ '50%', '50%' ],
-        transformOriginY: [ '0%', '0%' ],
-        marginBottom: -30,
-        opacity: 0,
-        rotateX: -70,
-      }, 1, {
-        easing: 'ease-out',
-        display: 'block',
-      }]
+      [
+        {
+          transformPerspective: [800, 800],
+          transformOriginX: ['50%', '50%'],
+          transformOriginY: ['0%', '0%'],
+          marginBottom: -30,
+          opacity: 0,
+          rotateX: -70,
+        },
+        1,
+        {
+          easing: 'ease-out',
+          display: 'block',
+        },
+      ],
     ],
   }),
 };
 
+const newItem = i => {
+  return {
+    title: [_.sample(CATS)].concat(_.sample(FOODS, _.random(1, 4))).join(' '),
+    i,
+  };
+};
+
 class ScrollingGroup extends React.Component {
   state = {
-    itemCount: 0,
-    items: [],
+    itemCount: 1,
+    items: [newItem(0)],
     duration: 500,
   };
 
-  componentWillMount() {
-    this.whenAddButtonClicked();
-  }
-
   whenAddButtonClicked = () => {
     this.addRows(1);
   };
@@ -64,19 +92,15 @@ class ScrollingGroup extends React.Component {
     this.addRows(5);
   };
 
-  whenOptionClicked = (event) => {
+  whenOptionClicked = event => {
     this.setState({ duration: parseInt(event.target.value) });
   };
 
-  addRows = (count) => {
+  addRows = count => {
     var items = this.state.items;
 
     for (var i = 0; i < count; ++i) {
-      var item = {
-        title: [_.sample(CATS)].concat(_.sample(FOODS, _.random(1, 4))).join(' '),
-        i: this.state.itemCount + i,
-      };
-
+      var item = newItem(i + this.state.itemCount);
       items = [item].concat(items);
     }
 
@@ -87,15 +111,20 @@ class ScrollingGroup extends React.Component {
   };
 
   render() {
-    var rows = this.state.items.map(function (item, i, arr) {
+    var rows = this.state.items.map(function(item, i, arr) {
       var itemStyle = {
         width: 150,
         padding: '0 10px',
         lineHeight: '30px',
-        backgroundColor: (item.i % 2 == 0) ? Box.COLORS.backColor : Box.COLORS.underneathColor,
+        backgroundColor:
+          item.i % 2 == 0 ? Box.COLORS.backColor : Box.COLORS.underneathColor,
       };
 
-      return (<div key={item.i} style={itemStyle}><EmojiSpan>{item.title}</EmojiSpan></div>);
+      return (
+        <div key={item.i} style={itemStyle}>
+          <EmojiSpan>{item.title}</EmojiSpan>
+        </div>
+      );
     });
 
     var groupStyle = {
@@ -129,17 +158,37 @@ class ScrollingGroup extends React.Component {
           <button onClick={this.whenAdd5ButtonClicked}>Add 5 Rows</button>
         </div>
 
-        <VelocityTransitionGroup component="div" className="flex-1" style={groupStyle} enter={enterAnimation} leave={leaveAnimation}>
+        <VelocityTransitionGroup
+          component="div"
+          className="flex-1"
+          style={groupStyle}
+          enter={enterAnimation}
+          leave={leaveAnimation}
+        >
           {rows}
         </VelocityTransitionGroup>
 
-        <form style={{fontSize: 12}}>
+        <form style={{ fontSize: 12 }}>
           <label>
-            <input type="radio" name="speed" value={500} checked={this.state.duration === 500} onChange={this.whenOptionClicked}/> Fast
+            <input
+              type="radio"
+              name="speed"
+              value={500}
+              checked={this.state.duration === 500}
+              onChange={this.whenOptionClicked}
+            />{' '}
+            Fast
           </label>
           &nbsp;
           <label>
-            <input type="radio" name="speed" value={2000} checked={this.state.duration === 2000} onChange={this.whenOptionClicked}/> Slow
+            <input
+              type="radio"
+              name="speed"
+              value={2000}
+              checked={this.state.duration === 2000}
+              onChange={this.whenOptionClicked}
+            />{' '}
+            Slow
           </label>
         </form>
       </div>