From dd7b67168ffa30fb9b38f7422c4de9a51aeb03e5 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@fb.com>
Date: Mon, 11 May 2020 08:58:36 -0700
Subject: [PATCH] Move SegmentedControl components to separate file and make
 them function based

Summary: Changelog: [Internal] Separate SegmentControl examples into separate file and make them functional based

Reviewed By: mdvacca

Differential Revision: D21475596

fbshipit-source-id: 19165232f2a8edefa66f122944621f93265ff704
---
 .../SegmentedControlExampleComponents.js      | 114 +++++++++++++++
 .../SegmentedControlIOSExample.js             | 136 ++----------------
 2 files changed, 122 insertions(+), 128 deletions(-)
 create mode 100644 RNTester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js

diff --git a/RNTester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js
new file mode 100644
index 00000000000..8b06f064fda
--- /dev/null
+++ b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import * as React from 'react';
+import {SegmentedControlIOS, Text, View, StyleSheet} from 'react-native';
+
+export function BasicSegmentedControlExample(): React.Node {
+  return (
+    <View>
+      <View style={{marginBottom: 10}}>
+        <SegmentedControlIOS values={['One', 'Two']} />
+      </View>
+      <View>
+        <SegmentedControlIOS values={['One', 'Two', 'Three', 'Four', 'Five']} />
+      </View>
+    </View>
+  );
+}
+
+export function PreSelectedSegmentedControlExample(): React.Node {
+  return (
+    <View>
+      <View>
+        <SegmentedControlIOS values={['One', 'Two']} selectedIndex={0} />
+      </View>
+    </View>
+  );
+}
+
+export function MomentarySegmentedControlExample(): React.Node {
+  return (
+    <View>
+      <View>
+        <SegmentedControlIOS values={['One', 'Two']} momentary={true} />
+      </View>
+    </View>
+  );
+}
+
+export function DisabledSegmentedControlExample(): React.Node {
+  return (
+    <View>
+      <View>
+        <SegmentedControlIOS
+          enabled={false}
+          values={['One', 'Two']}
+          selectedIndex={1}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function ColorSegmentedControlExample(): React.Node {
+  return (
+    <View>
+      <View style={{marginBottom: 10}}>
+        <SegmentedControlIOS
+          tintColor="#ff0000"
+          values={['One', 'Two', 'Three', 'Four']}
+          selectedIndex={0}
+        />
+      </View>
+      <View>
+        <SegmentedControlIOS
+          tintColor="#00ff00"
+          values={['One', 'Two', 'Three']}
+          selectedIndex={1}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function EventSegmentedControlExample(): React.Node {
+  const [selectedIndex, setSelectedIndex] = React.useState(undefined);
+  const [value, setValue] = React.useState('Not selected');
+  const values = ['One', 'Two', 'Three'];
+
+  return (
+    <View>
+      <Text style={styles.text}>Value: {value}</Text>
+      <Text style={styles.text}>Index: {selectedIndex}</Text>
+      <SegmentedControlIOS
+        values={values}
+        selectedIndex={selectedIndex}
+        onChange={event => {
+          setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
+        }}
+        onValueChange={changedValue => {
+          setValue(changedValue);
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
diff --git a/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
index 0c20da7b148..2824475b838 100644
--- a/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
+++ b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
@@ -11,134 +11,14 @@
 'use strict';
 
 const React = require('react');
-const {SegmentedControlIOS, Text, View, StyleSheet} = require('react-native');
-
-class BasicSegmentedControlExample extends React.Component<{...}> {
-  render() {
-    return (
-      <View>
-        <View style={{marginBottom: 10}}>
-          <SegmentedControlIOS values={['One', 'Two']} />
-        </View>
-        <View>
-          <SegmentedControlIOS
-            values={['One', 'Two', 'Three', 'Four', 'Five']}
-          />
-        </View>
-      </View>
-    );
-  }
-}
-
-class PreSelectedSegmentedControlExample extends React.Component<{...}> {
-  render() {
-    return (
-      <View>
-        <View>
-          <SegmentedControlIOS values={['One', 'Two']} selectedIndex={0} />
-        </View>
-      </View>
-    );
-  }
-}
-
-class MomentarySegmentedControlExample extends React.Component<{...}> {
-  render() {
-    return (
-      <View>
-        <View>
-          <SegmentedControlIOS values={['One', 'Two']} momentary={true} />
-        </View>
-      </View>
-    );
-  }
-}
-
-class DisabledSegmentedControlExample extends React.Component<{...}> {
-  render() {
-    return (
-      <View>
-        <View>
-          <SegmentedControlIOS
-            enabled={false}
-            values={['One', 'Two']}
-            selectedIndex={1}
-          />
-        </View>
-      </View>
-    );
-  }
-}
-
-class ColorSegmentedControlExample extends React.Component<{...}> {
-  render() {
-    return (
-      <View>
-        <View style={{marginBottom: 10}}>
-          <SegmentedControlIOS
-            tintColor="#ff0000"
-            values={['One', 'Two', 'Three', 'Four']}
-            selectedIndex={0}
-          />
-        </View>
-        <View>
-          <SegmentedControlIOS
-            tintColor="#00ff00"
-            values={['One', 'Two', 'Three']}
-            selectedIndex={1}
-          />
-        </View>
-      </View>
-    );
-  }
-}
-
-class EventSegmentedControlExample extends React.Component<
-  {...},
-  $FlowFixMeState,
-> {
-  state = {
-    values: ['One', 'Two', 'Three'],
-    value: 'Not selected',
-    selectedIndex: undefined,
-  };
-
-  render() {
-    return (
-      <View>
-        <Text style={styles.text}>Value: {this.state.value}</Text>
-        <Text style={styles.text}>Index: {this.state.selectedIndex}</Text>
-        <SegmentedControlIOS
-          values={this.state.values}
-          selectedIndex={this.state.selectedIndex}
-          onChange={this._onChange}
-          onValueChange={this._onValueChange}
-        />
-      </View>
-    );
-  }
-
-  _onChange = event => {
-    this.setState({
-      selectedIndex: event.nativeEvent.selectedSegmentIndex,
-    });
-  };
-
-  _onValueChange = value => {
-    this.setState({
-      value: value,
-    });
-  };
-}
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 14,
-    textAlign: 'center',
-    fontWeight: '500',
-    margin: 10,
-  },
-});
+const {
+  BasicSegmentedControlExample,
+  PreSelectedSegmentedControlExample,
+  MomentarySegmentedControlExample,
+  DisabledSegmentedControlExample,
+  ColorSegmentedControlExample,
+  EventSegmentedControlExample,
+} = require('./SegmentedControlExampleComponents');
 
 exports.title = '<SegmentedControlIOS>';
 exports.displayName = 'SegmentedControlExample';