RNTester LayoutAnimation example: add more options

Summary:
Add more options to the LayoutAnimation example so it's easier to test more features of LayoutAnimations.

1) Add an option to animate reordering of views
2) Make animations slower, so it's easier to see what's going on and easier to trigger race conditions
3) Add options to mutate without animation, to test interrupting existing animations

Changelog: [Internal] Updated Catalyst RNTester LayoutAnimation example with additional options

Reviewed By: mdvacca

Differential Revision: D21050309

fbshipit-source-id: 1daba4fd487693c34a2d40eb39a68c7d03c24f93

RNTester/js/examples/Layout/LayoutAnimationExample.js

@@ -19,43 +19,124 @@ const {
   TouchableOpacity,
 } = require('react-native');
 
-class AddRemoveExample extends React.Component<{...}, $FlowFixMeState> {
+type ExampleViewSpec = {|
+  key: number,
+|};
+
+type AddRemoveExampleState = {|
+  views: Array<ExampleViewSpec>,
+  nextKey: number,
+|};
+
+function shuffleArray(array: Array<ExampleViewSpec>) {
+  var currentIndex: number = array.length,
+    temporaryValue: ExampleViewSpec,
+    randomIndex: number;
+
+  // While there remain elements to shuffle...
+  while (currentIndex !== 0) {
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    // And swap it with the current element.
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+
+  return array;
+}
+
+class AddRemoveExample extends React.Component<{...}, AddRemoveExampleState> {
   state = {
     views: [],
+    nextKey: 1,
   };
 
-  UNSAFE_componentWillUpdate() {
-    LayoutAnimation.easeInEaseOut(args =>
-      console.log('AddRemoveExample completed', args),
+  configureNextAnimation() {
+    LayoutAnimation.configureNext(
+      {
+        duration: 1000,
+        create: {type: 'easeInEaseOut', property: 'opacity'},
+        update: {type: 'easeInEaseOut', property: 'opacity'},
+        delete: {type: 'easeInEaseOut', property: 'opacity'},
+      },
+      args => console.log('AddRemoveExample completed', args),
     );
   }
 
+  _onPressAddViewAnimated = () => {
+    this.configureNextAnimation();
+    this._onPressAddView();
+  };
+
+  _onPressRemoveViewAnimated = () => {
+    this.configureNextAnimation();
+    this._onPressRemoveView();
+  };
+
+  _onPressReorderViewsAnimated = () => {
+    this.configureNextAnimation();
+    this._onPressReorderViews();
+  };
+
   _onPressAddView = () => {
-    this.setState(state => ({views: [...state.views, {}]}));
+    this.setState(state => ({
+      views: [...state.views, {key: state.nextKey}],
+      nextKey: state.nextKey + 1,
+    }));
   };
 
   _onPressRemoveView = () => {
     this.setState(state => ({views: state.views.slice(0, -1)}));
   };
 
+  _onPressReorderViews = () => {
+    this.setState(state => ({views: shuffleArray(state.views)}));
+  };
+
   render() {
-    const views = this.state.views.map((view, i) => (
-      <View key={i} style={styles.view}>
-        <Text>{i}</Text>
+    const views = this.state.views.map(({key}) => (
+      <View
+        key={key}
+        style={styles.view}
+        onLayout={evt => console.log('Box onLayout')}>
+        <Text>{key}</Text>
       </View>
     ));
     return (
       <View style={styles.container}>
-        <TouchableOpacity onPress={this._onPressAddView}>
+        <TouchableOpacity onPress={this._onPressAddViewAnimated}>
           <View style={styles.button}>
             <Text>Add view</Text>
           </View>
         </TouchableOpacity>
-        <TouchableOpacity onPress={this._onPressRemoveView}>
+        <TouchableOpacity onPress={this._onPressRemoveViewAnimated}>
           <View style={styles.button}>
             <Text>Remove view</Text>
           </View>
         </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressReorderViewsAnimated}>
+          <View style={styles.button}>
+            <Text>Reorder Views</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressAddView}>
+          <View style={styles.button}>
+            <Text>Add view (no animation)</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressRemoveView}>
+          <View style={styles.button}>
+            <Text>Remove view (no animation)</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressReorderViews}>
+          <View style={styles.button}>
+            <Text>Reorder Views (no animation)</Text>
+          </View>
+        </TouchableOpacity>
         <View style={styles.viewContainer}>{views}</View>
       </View>
     );
@@ -74,7 +155,11 @@ const BlueSquare = () => (
   </View>
 );
 
-class CrossFadeExample extends React.Component<{...}, $FlowFixMeState> {
+type CrossFadeExampleState = {|
+  toggled: boolean,
+|};
+
+class CrossFadeExample extends React.Component<{...}, CrossFadeExampleState> {
   state = {
     toggled: false,
   };
@@ -102,7 +187,15 @@ class CrossFadeExample extends React.Component<{...}, $FlowFixMeState> {
   }
 }
 
-class LayoutUpdateExample extends React.Component<{...}, $FlowFixMeState> {
+type LayoutUpdateExampleState = {|
+  width: number,
+  height: number,
+|};
+
+class LayoutUpdateExample extends React.Component<
+  {...},
+  LayoutUpdateExampleState,
+> {
   state = {
     width: 200,
     height: 100,