From 1ee8c0c2c01186d1e7f85a592b558235596d51be Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshuagross@fb.com>
Date: Thu, 16 Apr 2020 16:14:50 -0700
Subject: [PATCH] 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
---
 .../examples/Layout/LayoutAnimationExample.js | 117 ++++++++++++++++--
 1 file changed, 105 insertions(+), 12 deletions(-)

diff --git a/RNTester/js/examples/Layout/LayoutAnimationExample.js b/RNTester/js/examples/Layout/LayoutAnimationExample.js
index 4a0eac9fc5..163a8b8c8e 100644
--- a/RNTester/js/examples/Layout/LayoutAnimationExample.js
+++ b/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,