Fixed TextInput Examples

facebook · Oct 10, 2024 · f8ed5b7 · f8ed5b7
1 parent 319a28f
commit f8ed5b7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 90 deletions.
diff --git a/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js b/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js
@@ -10,86 +10,41 @@
  */
 
 import {RNTesterThemeContext} from '../../components/RNTesterTheme';
-import React, {forwardRef, useContext, useState} from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  Button,
-  Text,
-  TouchableOpacity,
-  Clipboard,
-  Alert,
-} from 'react-native';
+import React, {forwardRef, useContext} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
 
 const ExampleTextInput: React.AbstractComponent<
   React.ElementConfig<typeof TextInput>,
   $ReadOnly<{|
     ...React.ElementRef<typeof TextInput>,
   |}>,
 > = forwardRef((props, ref) => {
-  const [inputText, setInputText] = useState('');
-  const [displayText, setDisplayText] = useState('');
-
-  const handleSend = () => {
-    setDisplayText(inputText);
-    setInputText('');
-  };
-
-  const handleLongPress = () => {
-    Clipboard.setString(displayText);
-    Alert.alert('Copied to Clipboard', displayText);
-  };
+  const theme = useContext(RNTesterThemeContext);
 
   return (
-    <View style={styles.container}>
-      <TextInput
-        style={styles.input}
-        value={inputText}
-        multiline={true}
-        onChangeText={setInputText}
-      />
-      <Button title="Send" onPress={handleSend} />
-      <TouchableOpacity onLongPress={handleLongPress}>
-        <Text style={styles.displayText}>{displayText}</Text>
-      </TouchableOpacity>
-    </View>
+    <TextInput
+      ref={ref}
+      {...props}
+      style={[
+        {
+          color: theme.LabelColor,
+          backgroundColor: theme.SecondaryGroupedBackgroundColor,
+          borderColor: theme.QuaternaryLabelColor,
+        },
+        styles.input,
+        props.style,
+      ]}
+    />
   );
 });
 
 const styles = StyleSheet.create({
-  input2: {
-    borderWidth: 1,
-    fontSize: 13,
-    flexGrow: 1,
-    flexShrink: 1,
-    padding: 4,
-  },
-  container: {
-    padding: 20,
-    backgroundColor: '#fff',
-    flex: 1,
-    justifyContent: 'center',
-  },
   input: {
-    borderColor: '#ccc',
     borderWidth: 1,
-    marginBottom: 20,
-    paddingHorizontal: 10,
     fontSize: 13,
     flexGrow: 1,
     flexShrink: 1,
-    borderRadius: 5,
-  },
-  displayText: {
-    marginTop: 20,
-    fontSize: 16,
-    color: '#333',
-    padding: 10,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    borderRadius: 5,
-    textAlign: 'center',
+    padding: 4,
   },
 });
 

diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
@@ -263,28 +263,6 @@ class AutogrowingTextInputExample extends React.Component<
   }
 }
 
-class RewriteDoubleSpaceExample extends React.Component<$FlowFixMeProps, any> {
-  constructor(props: any | void) {
-    super(props);
-    this.state = {text: ''};
-  }
-  render(): React.Node {
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          testID="rewrite_double_space"
-          multiline={false}
-          onChangeText={text => {
-            this.setState({text});
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-      </View>
-    );
-  }
-}
-
 const styles = StyleSheet.create({
   multiline: {
     height: 50,
@@ -332,12 +310,6 @@ const styles = StyleSheet.create({
 
 const textInputExamples: Array<RNTesterModuleExample> = [
   ...TextInputSharedExamples,
-  {
-    title: 'Live Re-Write (double space to period)',
-    render: function (): React.Node {
-      return <RewriteDoubleSpaceExample />;
-    },
-  },
   {
     title: 'Live Re-Write (ひ -> 日)',
     render: function (): React.Node {