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

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>);

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>);

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>);