[change] TextInput uses DOM elements

This patch changes TextInput to use DOM inputs directly, rather than trying to reimplement 'placeholder'. Removes support for 'placeholderTextColor'. Fix #54 Fix #224 Fix #229 Fix #235 Fix #253
necolas · Nov 22, 2016 · 89f5a13 · 89f5a13
1 parent 4005f9d
commit 89f5a13
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 181 deletions.
diff --git a/docs/components/TextInput.md b/docs/components/TextInput.md
@@ -6,12 +6,10 @@ such as auto-complete, auto-focus, placeholder text, and event callbacks.
 Note: some props are exclusive to or excluded from `multiline`.
 
 Unsupported React Native props:
-`autoCapitalize`,
-`autoCorrect`,
 `onEndEditing`,
-`onSubmitEditing`,
 `clearButtonMode` (ios),
 `enablesReturnKeyAutomatically` (ios),
+`placeholderTextColor`,
 `returnKeyType` (ios),
 `selectionState` (ios),
 `underlineColorAndroid` (android)
@@ -128,10 +126,6 @@ Callback that is called when the keyboard's submit button is pressed.
 The string that will be rendered in an empty `TextInput` before text has been
 entered.
 
-**placeholderTextColor**: string
-
-The text color of the placeholder string.
-
 **secureTextEntry**: bool = false
 
 If true, the text input obscures the text entered so that sensitive text like

diff --git a/examples/components/TextInput/TextInputExample.js b/examples/components/TextInput/TextInputExample.js
@@ -210,25 +210,16 @@ class TokenizedTextExample extends React.Component {
     }
     parts.push(_text);
 
-    //highlight hashtags
-    parts = parts.map((text) => {
-      if (/^#/.test(text)) {
-        return <Text key={text} style={styles.hashtag}>{text}</Text>;
-      } else {
-        return text;
-      }
-    });
-
     return (
       <View>
         <TextInput
+          value={parts.join('')}
           multiline={true}
           style={styles.multiline}
           onChangeText={(text) => {
             this.setState({text});
-          }}>
-          <Text>{parts}</Text>
-        </TextInput>
+          }}
+        />
       </View>
     );
   }
@@ -279,7 +270,7 @@ class BlurOnSubmitExample extends React.Component {
         <TextInput
           ref="5"
           style={styles.default}
-          keyboardType="numbers-and-punctuation"
+          keyboardType="numeric"
           placeholder="blurOnSubmit = true"
           returnKeyType="done"
         />
@@ -519,15 +510,15 @@ const examples = [
     render: function() {
       var keyboardTypes = [
         'default',
-        'ascii-capable',
-        'numbers-and-punctuation',
+        //'ascii-capable',
+        //'numbers-and-punctuation',
         'url',
         'number-pad',
         'phone-pad',
-        'name-phone-pad',
+        //'name-phone-pad',
         'email-address',
-        'decimal-pad',
-        'twitter',
+        //'decimal-pad',
+        //'twitter',
         'web-search',
         'numeric',
       ];
@@ -776,14 +767,6 @@ const examples = [
             style={styles.multiline}
             dataDetectorTypes="phoneNumber"
           />
-          <TextInput
-            placeholder="multiline with children"
-            multiline={true}
-            enablesReturnKeyAutomatically={true}
-            returnKeyType="go"
-            style={styles.multiline}>
-            <View style={styles.multilineChild}/>
-          </TextInput>
         </View>
       );
     }

diff --git a/src/components/TextInput/__tests__/index-test.js b/src/components/TextInput/__tests__/index-test.js
@@ -1,15 +1,12 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import StyleSheet from '../../../apis/StyleSheet';
 import TextareaAutosize from 'react-textarea-autosize';
 import TextInput from '..';
 import { mount, shallow } from 'enzyme';
 
-const placeholderText = 'placeholderText';
 const findNativeInput = (wrapper) => wrapper.find('input');
 const findNativeTextarea = (wrapper) => wrapper.find(TextareaAutosize);
-const findPlaceholder = (wrapper) => wrapper.find({ children: placeholderText });
 
 const testIfDocumentIsFocused = (message, fn) => {
   if (document.hasFocus && document.hasFocus()) {
@@ -184,24 +181,6 @@ describe('components/TextInput', () => {
     }
   });
 
-  test('prop "placeholder"', () => {
-    let textInput = shallow(<TextInput />);
-    expect(findPlaceholder(textInput).length).toEqual(0);
-
-    textInput = shallow(<TextInput placeholder={placeholderText} />);
-    expect(findPlaceholder(textInput).length).toEqual(1);
-  });
-
-  test('prop "placeholderTextColor"', () => {
-    let placeholderElement = findPlaceholder(shallow(<TextInput placeholder={placeholderText} />));
-    expect(StyleSheet.flatten(placeholderElement.prop('style')).color).toEqual('darkgray');
-
-    placeholderElement = findPlaceholder(
-      shallow(<TextInput placeholder={placeholderText} placeholderTextColor='red' />)
-    );
-    expect(StyleSheet.flatten(placeholderElement.prop('style')).color).toEqual('red');
-  });
-
   test('prop "secureTextEntry"', () => {
     let input = findNativeInput(shallow(<TextInput secureTextEntry />));
     expect(input.prop('type')).toEqual('password');
@@ -224,20 +203,6 @@ describe('components/TextInput', () => {
     // assert.equal(input.node.selectionStart, 0)
   });
 
-  test('prop "style"', () => {
-    const styles = StyleSheet.create({
-      root: {
-        borderWidth: 1,
-        textAlign: 'center'
-      }
-    });
-    const textInput = shallow(<TextInput style={styles.root} />);
-    const input = findNativeInput(textInput);
-    const borderWidth = StyleSheet.flatten(textInput.prop('style')).borderWidth;
-    expect(borderWidth).toEqual(1);
-    expect(input.prop('style').textAlign).toEqual('center');
-  });
-
   test('prop "value"', () => {
     const value = 'value';
     const input = findNativeInput(shallow(<TextInput value={value} />));