From 82ac55fcd148c222f87ea950c963728c54aa07a1 Mon Sep 17 00:00:00 2001
From: Eli White <eliwhite@fb.com>
Date: Thu, 21 Nov 2019 12:38:55 -0800
Subject: [PATCH] Refactor platform common TextInput tests

Summary:
Android and iOS have different RNTester examples even though they should be mostly the same. Pull out the common ones into their own file. This should also be useful for other platforms.

Changelog:
[Internal]

(Note: this ignores all push blocking failures!)

Reviewed By: JoshuaGross

Differential Revision: D18628890

fbshipit-source-id: 6f1312973aebcfc687fdd8807bf942e48172f216
---
 .../TextInput/TextInputExample.android.js     | 123 +--------
 .../TextInput/TextInputExample.ios.js         | 193 +-------------
 .../TextInput/TextInputSharedExamples.js      | 246 ++++++++++++++++++
 3 files changed, 260 insertions(+), 302 deletions(-)
 create mode 100644 RNTester/js/examples/TextInput/TextInputSharedExamples.js

diff --git a/RNTester/js/examples/TextInput/TextInputExample.android.js b/RNTester/js/examples/TextInput/TextInputExample.android.js
index e08b07630f9..28a3e535922 100644
--- a/RNTester/js/examples/TextInput/TextInputExample.android.js
+++ b/RNTester/js/examples/TextInput/TextInputExample.android.js
@@ -21,6 +21,10 @@ const {
   Switch,
 } = require('react-native');
 
+const TextInputSharedExamples = require('./TextInputSharedExamples.js');
+
+import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+
 class TextEventsExample extends React.Component<{...}, $FlowFixMeState> {
   state = {
     curText: '<No Event>',
@@ -82,41 +86,6 @@ class TextEventsExample extends React.Component<{...}, $FlowFixMeState> {
   }
 }
 
-class RewriteExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
-  constructor(props) {
-    super(props);
-    this.state = {text: ''};
-  }
-  render() {
-    const limit = 20;
-    const remainder = limit - this.state.text.length;
-    const remainderColor = remainder > 5 ? 'blue' : 'red';
-    return (
-      /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-       * when making Flow check .android.js files. */
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          multiline={false}
-          maxLength={limit}
-          onChangeText={text => {
-            text = text.replace(/ /g, '_');
-            this.setState({text});
-          }}
-          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */
-          style={styles.default}
-          value={this.state.text}
-        />
-        {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-         * found when making Flow check .android.js files. */}
-        <Text style={[styles.remainder, {color: remainderColor}]}>
-          {remainder}
-        </Text>
-      </View>
-    );
-  }
-}
-
 class TokenizedTextExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
@@ -443,86 +412,8 @@ const styles = StyleSheet.create({
 
 exports.title = '<TextInput>';
 exports.description = 'Single and multi-line text inputs.';
-exports.examples = [
-  {
-    title: 'Auto-focus',
-    render: function(): React.Node {
-      return (
-        <TextInput
-          autoFocus={true}
-          multiline={true}
-          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */
-          style={styles.input}
-          accessibilityLabel="I am the accessibility label for text input"
-        />
-      );
-    },
-  },
-  {
-    title: "Live Re-Write (<sp>  ->  '_')",
-    render: function(): React.Node {
-      return <RewriteExample />;
-    },
-  },
-  {
-    title: 'Auto-capitalize',
-    render: function(): React.Node {
-      const autoCapitalizeTypes = ['none', 'sentences', 'words', 'characters'];
-      const examples = autoCapitalizeTypes.map(type => {
-        return (
-          <TextInput
-            key={type}
-            autoCapitalize={type}
-            placeholder={'autoCapitalize: ' + type}
-            style={styles.singleLine}
-          />
-        );
-      });
-      return <View>{examples}</View>;
-    },
-  },
-  {
-    title: 'Auto-correct',
-    render: function(): React.Node {
-      return (
-        <View>
-          <TextInput
-            autoCorrect={true}
-            placeholder="This has autoCorrect"
-            style={styles.singleLine}
-          />
-          <TextInput
-            autoCorrect={false}
-            placeholder="This does not have autoCorrect"
-            style={styles.singleLine}
-          />
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Keyboard types',
-    render: function(): React.Node {
-      const keyboardTypes = [
-        'default',
-        'email-address',
-        'numeric',
-        'phone-pad',
-      ];
-      const examples = keyboardTypes.map(type => {
-        return (
-          <TextInput
-            key={type}
-            keyboardType={type}
-            placeholder={'keyboardType: ' + type}
-            style={styles.singleLine}
-          />
-        );
-      });
-      return <View>{examples}</View>;
-    },
-  },
+exports.examples = ([
+  ...TextInputSharedExamples,
   {
     title: 'Blur on submit',
     render: function(): React.Element<any> {
@@ -873,4 +764,4 @@ exports.examples = [
       );
     },
   },
-];
+]: Array<RNTesterExampleModuleItem>);
diff --git a/RNTester/js/examples/TextInput/TextInputExample.ios.js b/RNTester/js/examples/TextInput/TextInputExample.ios.js
index 7854bb3c122..da8c9848797 100644
--- a/RNTester/js/examples/TextInput/TextInputExample.ios.js
+++ b/RNTester/js/examples/TextInput/TextInputExample.ios.js
@@ -24,6 +24,10 @@ const {
   Alert,
 } = require('react-native');
 
+const TextInputSharedExamples = require('./TextInputSharedExamples.js');
+
+import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+
 class WithLabel extends React.Component<$FlowFixMeProps> {
   render() {
     return (
@@ -128,96 +132,6 @@ class TextInputAccessoryViewExample extends React.Component<{...}, *> {
   }
 }
 
-class RewriteExample extends React.Component<$FlowFixMeProps, any> {
-  constructor(props) {
-    super(props);
-    this.state = {text: ''};
-  }
-  render() {
-    const limit = 20;
-    const remainder = limit - this.state.text.length;
-    const remainderColor = remainder > 5 ? 'blue' : 'red';
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          multiline={false}
-          maxLength={limit}
-          onChangeText={text => {
-            text = text.replace(/ /g, '_');
-            this.setState({text});
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-        <Text style={[styles.remainder, {color: remainderColor}]}>
-          {remainder}
-        </Text>
-      </View>
-    );
-  }
-}
-
-class RewriteExampleInvalidCharacters extends React.Component<
-  $FlowFixMeProps,
-  any,
-> {
-  constructor(props) {
-    super(props);
-    this.state = {text: ''};
-  }
-  render() {
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          multiline={false}
-          onChangeText={text => {
-            this.setState({text: text.replace(/\s/g, '')});
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-      </View>
-    );
-  }
-}
-
-class RewriteInvalidCharactersAndClearExample extends React.Component<
-  $FlowFixMeProps,
-  any,
-> {
-  inputRef: ?React.ElementRef<typeof TextInput> = null;
-
-  constructor(props) {
-    super(props);
-    this.state = {text: ''};
-  }
-  render() {
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          ref={ref => {
-            this.inputRef = ref;
-          }}
-          multiline={false}
-          onChangeText={text => {
-            this.setState({text: text.replace(/\s/g, '')});
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-        <Button
-          onPress={() => {
-            if (this.inputRef != null) {
-              this.inputRef.clear();
-            }
-          }}
-          title="Clear"
-        />
-      </View>
-    );
-  }
-}
-
 class RewriteExampleKana extends React.Component<$FlowFixMeProps, any> {
   constructor(props) {
     super(props);
@@ -610,37 +524,8 @@ const styles = StyleSheet.create({
 exports.displayName = (undefined: ?string);
 exports.title = '<TextInput>';
 exports.description = 'Single and multi-line text inputs.';
-exports.examples = [
-  {
-    title: 'Auto-focus',
-    render: function(): React.Node {
-      return (
-        <TextInput
-          autoFocus={true}
-          style={styles.default}
-          accessibilityLabel="I am the accessibility label for text input"
-        />
-      );
-    },
-  },
-  {
-    title: "Live Re-Write (<sp>  ->  '_') + maxLength",
-    render: function(): React.Node {
-      return <RewriteExample />;
-    },
-  },
-  {
-    title: 'Live Re-Write (no spaces allowed)',
-    render: function(): React.Node {
-      return <RewriteExampleInvalidCharacters />;
-    },
-  },
-  {
-    title: 'Rewrite (no spaces allowed) and clear',
-    render: function(): React.Node {
-      return <RewriteInvalidCharactersAndClearExample />;
-    },
-  },
+exports.examples = ([
+  ...TextInputSharedExamples,
   {
     title: 'Live Re-Write (ひ -> 日)',
     render: function(): React.Node {
@@ -653,42 +538,6 @@ exports.examples = [
       return <TextInputAccessoryViewExample />;
     },
   },
-  {
-    title: 'Auto-capitalize',
-    render: function(): React.Node {
-      return (
-        <View>
-          <WithLabel label="none">
-            <TextInput autoCapitalize="none" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="sentences">
-            <TextInput autoCapitalize="sentences" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="words">
-            <TextInput autoCapitalize="words" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="characters">
-            <TextInput autoCapitalize="characters" style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Auto-correct',
-    render: function(): React.Node {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput autoCorrect={true} style={styles.default} />
-          </WithLabel>
-          <WithLabel label="false">
-            <TextInput autoCorrect={false} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    },
-  },
   {
     title: 'Nested content and `value` property',
     render: function(): React.Node {
@@ -715,34 +564,6 @@ exports.examples = [
       );
     },
   },
-  {
-    title: 'Keyboard types',
-    render: function(): React.Node {
-      const keyboardTypes = [
-        'default',
-        'ascii-capable',
-        'numbers-and-punctuation',
-        'url',
-        'number-pad',
-        'phone-pad',
-        'name-phone-pad',
-        'email-address',
-        'decimal-pad',
-        'twitter',
-        'web-search',
-        'ascii-capable-number-pad',
-        'numeric',
-      ];
-      const examples = keyboardTypes.map(type => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput keyboardType={type} style={styles.default} />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    },
-  },
   {
     title: 'Keyboard appearance',
     render: function(): React.Node {
@@ -1221,4 +1042,4 @@ exports.examples = [
       );
     },
   },
-];
+]: Array<RNTesterExampleModuleItem>);
diff --git a/RNTester/js/examples/TextInput/TextInputSharedExamples.js b/RNTester/js/examples/TextInput/TextInputSharedExamples.js
new file mode 100644
index 00000000000..34edd703d54
--- /dev/null
+++ b/RNTester/js/examples/TextInput/TextInputSharedExamples.js
@@ -0,0 +1,246 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+const React = require('react');
+
+const {Button, Text, TextInput, View, StyleSheet} = require('react-native');
+
+import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+
+const styles = StyleSheet.create({
+  default: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#0f0f0f',
+    flex: 1,
+    fontSize: 13,
+    padding: 4,
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    marginVertical: 2,
+    flex: 1,
+  },
+  label: {
+    width: 115,
+    alignItems: 'flex-end',
+    marginRight: 10,
+    paddingTop: 2,
+  },
+  rewriteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  remainder: {
+    textAlign: 'right',
+    width: 24,
+  },
+});
+
+class WithLabel extends React.Component<$FlowFixMeProps> {
+  render() {
+    return (
+      <View style={styles.labelContainer}>
+        <View style={styles.label}>
+          <Text>{this.props.label}</Text>
+        </View>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+class RewriteExample extends React.Component<$FlowFixMeProps, any> {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    const limit = 20;
+    const remainder = limit - this.state.text.length;
+    const remainderColor = remainder > 5 ? 'blue' : 'red';
+    return (
+      <View style={styles.rewriteContainer}>
+        <TextInput
+          multiline={false}
+          maxLength={limit}
+          onChangeText={text => {
+            text = text.replace(/ /g, '_');
+            this.setState({text});
+          }}
+          style={styles.default}
+          value={this.state.text}
+        />
+        <Text style={[styles.remainder, {color: remainderColor}]}>
+          {remainder}
+        </Text>
+      </View>
+    );
+  }
+}
+
+class RewriteExampleInvalidCharacters extends React.Component<
+  $FlowFixMeProps,
+  any,
+> {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    return (
+      <View style={styles.rewriteContainer}>
+        <TextInput
+          multiline={false}
+          onChangeText={text => {
+            this.setState({text: text.replace(/\s/g, '')});
+          }}
+          style={styles.default}
+          value={this.state.text}
+        />
+      </View>
+    );
+  }
+}
+
+class RewriteInvalidCharactersAndClearExample extends React.Component<
+  $FlowFixMeProps,
+  any,
+> {
+  inputRef: ?React.ElementRef<typeof TextInput> = null;
+
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    return (
+      <View style={styles.rewriteContainer}>
+        <TextInput
+          ref={ref => {
+            this.inputRef = ref;
+          }}
+          multiline={false}
+          onChangeText={text => {
+            this.setState({text: text.replace(/\s/g, '')});
+          }}
+          style={styles.default}
+          value={this.state.text}
+        />
+        <Button
+          onPress={() => {
+            if (this.inputRef != null) {
+              this.inputRef.clear();
+            }
+          }}
+          title="Clear"
+        />
+      </View>
+    );
+  }
+}
+
+module.exports = ([
+  {
+    title: 'Auto-focus',
+    render: function(): React.Node {
+      return (
+        <TextInput
+          autoFocus={true}
+          style={styles.default}
+          accessibilityLabel="I am the accessibility label for text input"
+        />
+      );
+    },
+  },
+  {
+    title: "Live Re-Write (<sp>  ->  '_') + maxLength",
+    render: function(): React.Node {
+      return <RewriteExample />;
+    },
+  },
+  {
+    title: 'Live Re-Write (no spaces allowed)',
+    render: function(): React.Node {
+      return <RewriteExampleInvalidCharacters />;
+    },
+  },
+  {
+    title: 'Live Re-Write (no spaces allowed) and clear',
+    render: function(): React.Node {
+      return <RewriteInvalidCharactersAndClearExample />;
+    },
+  },
+  {
+    title: 'Auto-capitalize',
+    render: function(): React.Node {
+      return (
+        <View>
+          <WithLabel label="none">
+            <TextInput autoCapitalize="none" style={styles.default} />
+          </WithLabel>
+          <WithLabel label="sentences">
+            <TextInput autoCapitalize="sentences" style={styles.default} />
+          </WithLabel>
+          <WithLabel label="words">
+            <TextInput autoCapitalize="words" style={styles.default} />
+          </WithLabel>
+          <WithLabel label="characters">
+            <TextInput autoCapitalize="characters" style={styles.default} />
+          </WithLabel>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Auto-correct',
+    render: function(): React.Node {
+      return (
+        <View>
+          <WithLabel label="true">
+            <TextInput autoCorrect={true} style={styles.default} />
+          </WithLabel>
+          <WithLabel label="false">
+            <TextInput autoCorrect={false} style={styles.default} />
+          </WithLabel>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Keyboard types',
+    render: function(): React.Node {
+      const keyboardTypes = [
+        'default',
+        'ascii-capable',
+        'numbers-and-punctuation',
+        'url',
+        'number-pad',
+        'phone-pad',
+        'name-phone-pad',
+        'email-address',
+        'decimal-pad',
+        'twitter',
+        'web-search',
+        'ascii-capable-number-pad',
+        'numeric',
+      ];
+      const examples = keyboardTypes.map(type => {
+        return (
+          <WithLabel key={type} label={type}>
+            <TextInput keyboardType={type} style={styles.default} />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    },
+  },
+]: Array<RNTesterExampleModuleItem>);