feat(RCTTextBox): TextInput functionality for UWP

This cleans up a lot of the behavior for TextInput, but not all of it. The properties that seem to be working are: * autoCorrect * keyboardType * maxLength * onFocus/onBlur * onSelectionChange * onEndEditing * onSubmitEditing * clearTextOnFocus * selectTextOnFocus * placeholder * selectionColor * editable The properties that are not working are: * numberOfLines * password * placeholderTextColor * autoCapitalize We do not yet support formatted children in the TextInput, which will likely require the use of RichEditBox and RTF. The multiline kind of works, but really only when you do some auto-resizing. The focus and blur methods are not working either. Fixes #96
microsoft · Apr 20, 2016 · e81ad07 · e81ad07
1 parent e1ac653
commit e81ad07
Show file tree

Hide file tree

Showing 27 changed files with 1,366 additions and 589 deletions.
diff --git a/Examples/UIExplorer/TextInputExample.windows.js b/Examples/UIExplorer/TextInputExample.windows.js
@@ -0,0 +1,334 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Text,
+  TextInput,
+  View,
+  StyleSheet,
+} = React;
+
+var TextEventsExample = React.createClass({
+  getInitialState: function() {
+    return {
+      curText: '<No Event>',
+      prevText: '<No Event>',
+      prev2Text: '<No Event>',
+    };
+  },
+
+  updateText: function(text) {
+    this.setState((state) => {
+      return {
+        curText: text,
+        prevText: state.curText,
+        prev2Text: state.prevText,
+      };
+    });
+  },
+
+  render: function() {
+    return (
+      <View>
+        <TextInput
+          autoCapitalize="none"
+          placeholder="Enter text to see events"
+          autoCorrect={false}
+          onFocus={() => this.updateText('onFocus')}
+          onBlur={() => this.updateText('onBlur')}
+          onChange={(event) => this.updateText(
+            'onChange text: ' + event.nativeEvent.text
+          )}
+          onEndEditing={(event) => this.updateText(
+            'onEndEditing text: ' + event.nativeEvent.text
+          )}
+          onSubmitEditing={(event) => this.updateText(
+            'onSubmitEditing text: ' + event.nativeEvent.text
+          )}
+          style={styles.singleLine}
+        />
+        <Text style={styles.eventLabel}>
+          {this.state.curText}{'\n'}
+          (prev: {this.state.prevText}){'\n'}
+          (prev2: {this.state.prev2Text})
+        </Text>
+      </View>
+    );
+  }
+});
+
+class AutoExpandingTextInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: '', height: 0};
+  }
+  render() {
+    return (
+      <TextInput
+        {...this.props}
+        multiline={true}
+        onChange={(event) => {
+          this.setState({
+            text: event.nativeEvent.text,
+            height: event.nativeEvent.contentSize.height,
+          });
+        }}
+        style={[styles.default, {height: Math.max(35, this.state.height)}]}
+        value={this.state.text}
+      />
+    );
+  }
+}
+
+class RewriteExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    var limit = 20;
+    var remainder = limit - this.state.text.length;
+    var 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 {
+  state: 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>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  multiline: {
+    height: 60,
+    fontSize: 16,
+    padding: 4,
+    marginBottom: 10,
+  },
+  eventLabel: {
+    margin: 3,
+    fontSize: 12,
+  },
+  singleLine: {
+    fontSize: 16,
+    padding: 4,
+  },
+  singleLineWithHeightTextInput: {
+    height: 30,
+  },
+  hashtag: {
+    color: 'blue',
+    fontWeight: 'bold',
+  },
+});
+
+exports.title = '<TextInput>';
+exports.description = 'Single and multi-line text inputs.';
+exports.examples = [
+  {
+    title: 'Auto-focus',
+    render: function() {
+      return (
+        <TextInput
+          autoFocus={true}
+          style={styles.singleLine}
+          accessibilityLabel="I am the accessibility label for text input"
+        />
+      );
+    }
+  },
+  {
+    title: "Live Re-Write (<sp>  ->  '_')",
+    render: function() {
+      return <RewriteExample />;
+    }
+  },
+  {
+    title: 'Live Re-Write (no spaces allowed)',
+    render: function() {
+      return <RewriteExampleInvalidCharacters />;
+    }
+  },
+  {
+    title: 'Auto-correct',
+    render: function() {
+      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() {
+      var keyboardTypes = [
+        'default',
+        'url',
+        'number-pad',
+        'phone-pad',
+        'name-phone-pad',
+        'email-address',
+        'decimal-pad',
+        'web-search',
+        'numeric',
+      ];
+      var examples = keyboardTypes.map((type) => {
+        return (
+          <TextInput
+            key={type}
+            keyboardType={type}
+            placeholder={'keyboardType: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Event handling',
+    render: function(): ReactElement { return <TextEventsExample />; },
+  },
+  {
+    title: 'Colored input text',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={[styles.default, {color: 'blue'}]}
+            defaultValue="Blue"
+          />
+          <TextInput
+            style={[styles.default, {color: 'green'}]}
+            defaultValue="Green"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Colored highlight/cursor for text input',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={styles.default}
+            selectionColor={"green"}
+            defaultValue="Highlight me"
+          />
+          <TextInput
+            style={styles.default}
+            selectionColor={"rgba(86, 76, 205, 1)"}
+            defaultValue="Highlight me"
+          />
+        </View>
+      );
+    }
+  },
+    {
+    title: 'Clear and select',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            placeholder="text is cleared on focus"
+            defaultValue="text is cleared on focus"
+            style={styles.default}
+            clearTextOnFocus={true}
+          />
+          <TextInput
+            placeholder="text is selected on focus"
+            defaultValue="text is selected on focus"
+            style={styles.default}
+            selectTextOnFocus={true}
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Editable',
+    render: function() {
+      return (
+        <TextInput
+           defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
+           editable={false}
+           style={styles.singleLine}
+         />
+      );
+    }
+  },
+  {
+    title: 'Auto-expanding',
+    render: function() {
+      return (
+        <View>
+          <AutoExpandingTextInput
+            placeholder="height increases with content"
+            enablesReturnKeyAutomatically={true}
+            returnKeyType="done"
+          />
+        </View>
+      );
+    }
+  },
+];
diff --git a/Examples/UIExplorer/UIExplorerList.windows.js b/Examples/UIExplorer/UIExplorerList.windows.js
@@ -21,6 +21,10 @@ export type UIExplorerExample = {
 };
 
 var ComponentExamples: Array<UIExplorerExample> = [
+  {
+    key: 'TextInputExample',
+    module: require('./TextInputExample'),
+  },
   {
     key: 'ViewExample',
     module: require('./ViewExample'),