From 5617d413277ecf59068adafd2b68886c84a7974d Mon Sep 17 00:00:00 2001
From: Artyom Trityak <art.trityak@gmail.com>
Date: Tue, 2 Aug 2016 17:06:37 -0700
Subject: [PATCH] ActivityIndicator Example ES6 classes migration and
 TimerMixin removal

Summary:
**This is the first part of `React.createClass` -> ES2015 classes migration.
1. Rewritten UI Explorer ActivityIndicator example to ES2015 classes
2. Removed TimerMixin from example.

Motivation:

- ES2015 classes do not support mixins so due to the classes / pure functions as "best practices" it would be better to avoid mixins in examples.

- TimerMixin is covered later and is out of scope of current example.
Closes https://github.com/facebook/react-native/pull/8342

Differential Revision: D3659349

fbshipit-source-id: e1c6f1a3091d60c589303fe6da55b8d132adedc3
---
 .../UIExplorer/js/ActivityIndicatorExample.js | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/Examples/UIExplorer/js/ActivityIndicatorExample.js b/Examples/UIExplorer/js/ActivityIndicatorExample.js
index ae3edd72988..ed13fa61777 100644
--- a/Examples/UIExplorer/js/ActivityIndicatorExample.js
+++ b/Examples/UIExplorer/js/ActivityIndicatorExample.js
@@ -22,34 +22,43 @@
  */
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {
-  ActivityIndicator,
-  StyleSheet,
-  View,
-} = ReactNative;
-const TimerMixin = require('react-timer-mixin');
+import React, { Component } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 
-const ToggleAnimatingActivityIndicator = React.createClass({
-  mixins: [TimerMixin],
+/**
+ * Optional Flowtype state and timer types definition
+ */
+type State = { animating: boolean; };
+type Timer = number;
 
-  getInitialState() {
-    return {
+class ToggleAnimatingActivityIndicator extends Component {
+  /**
+   * Optional Flowtype state and timer types
+   */
+  state: State;
+  _timer: Timer;
+
+  constructor(props) {
+    super(props);
+    this.state = {
       animating: true,
     };
-  },
-
-  setToggleTimeout() {
-    this.setTimeout(() => {
-      this.setState({animating: !this.state.animating});
-      this.setToggleTimeout();
-    }, 2000);
-  },
+  }
 
   componentDidMount() {
     this.setToggleTimeout();
-  },
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._timer);
+  }
+
+  setToggleTimeout() {
+    this._timer = setTimeout(() => {
+      this.setState({animating: !this.state.animating});
+      this.setToggleTimeout();
+    }, 2000);
+  }
 
   render() {
     return (
@@ -60,7 +69,9 @@ const ToggleAnimatingActivityIndicator = React.createClass({
       />
     );
   }
-});
+}
+
+
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';