From cec5360f1bb37ef1cec626ae8ec1ff09174426e6 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Wed, 22 Jul 2015 14:03:32 -0700
Subject: [PATCH] [RN] Introduce initialValue prop to fix TextInputExamples

Summary:
Some of the examples relied on the fact that TextInput wasn't a controlled
component before.  This introduces a new `initialValue` prop which behaves the
way the `value` prop used to - that is, you could type without updating it and
it wouldn't get reset, thus acting as just an initial value - and switches the
examples to use it where appropriate.
---
 Examples/UIExplorer/TextInputExample.js     | 10 +++++-----
 Libraries/Components/TextInput/TextInput.js | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/Examples/UIExplorer/TextInputExample.js b/Examples/UIExplorer/TextInputExample.js
index 3369b41fb..b2a42ffeb 100644
--- a/Examples/UIExplorer/TextInputExample.js
+++ b/Examples/UIExplorer/TextInputExample.js
@@ -315,7 +315,7 @@ exports.examples = [
       return (
         <View>
           <WithLabel label="true">
-            <TextInput password={true} style={styles.default} value="abc" />
+            <TextInput password={true} style={styles.default} defaultValue="abc" />
           </WithLabel>
         </View>
       );
@@ -332,11 +332,11 @@ exports.examples = [
         <View>
           <TextInput
             style={[styles.default, {color: 'blue'}]}
-            value="Blue"
+            defaultValue="Blue"
           />
           <TextInput
             style={[styles.default, {color: 'green'}]}
-            value="Green"
+            defaultValue="Green"
           />
         </View>
       );
@@ -383,7 +383,7 @@ exports.examples = [
           <WithLabel label="clearTextOnFocus">
             <TextInput
               placeholder="text is cleared on focus"
-              value="text is cleared on focus"
+              defaultValue="text is cleared on focus"
               style={styles.default}
               clearTextOnFocus={true}
             />
@@ -391,7 +391,7 @@ exports.examples = [
           <WithLabel label="selectTextOnFocus">
             <TextInput
               placeholder="text is selected on focus"
-              value="text is selected on focus"
+              defaultValue="text is selected on focus"
               style={styles.default}
               selectTextOnFocus={true}
             />
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index d89291c37..01d6dbbfb 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -245,6 +245,12 @@ var TextInput = React.createClass({
      * unwanted edits without flicker.
      */
     value: PropTypes.string,
+    /**
+     * Provides an initial value that will change when the user starts typing.
+     * Useful for simple use-cases where you don't want to deal with listening
+     * to events and updating the value prop to keep the controlled state in sync.
+     */
+    defaultValue: PropTypes.string,
     /**
      * When the clear button should appear on the right side of the text view
      */
@@ -348,12 +354,17 @@ var TextInput = React.createClass({
     }
   },
 
+  _getText: function(): ?string {
+    return typeof this.props.value === 'string' ?
+      this.props.value :
+      this.props.defaultValue;
+  },
+
   _renderIOS: function() {
     var textContainer;
 
     var props = Object.assign({}, this.props);
     props.style = [styles.input, this.props.style];
-
     if (!props.multiline) {
       for (var propKey in onlyMultiline) {
         if (props[propKey]) {
@@ -370,7 +381,7 @@ var TextInput = React.createClass({
           onBlur={this._onBlur}
           onChange={this._onChange}
           onSelectionChangeShouldSetResponder={() => true}
-          text={this.props.value}
+          text={this._getText()}
           mostRecentEventCount={this.state.mostRecentEventCount}
         />;
     } else {
@@ -407,7 +418,7 @@ var TextInput = React.createClass({
           onSelectionChange={this._onSelectionChange}
           onTextInput={this._onTextInput}
           onSelectionChangeShouldSetResponder={emptyFunction.thatReturnsTrue}
-          text={this.props.value}
+          text={this._getText()}
         />;
     }
 
@@ -457,7 +468,7 @@ var TextInput = React.createClass({
         password={this.props.password || this.props.secureTextEntry}
         placeholder={this.props.placeholder}
         placeholderTextColor={this.props.placeholderTextColor}
-        text={this.props.value}
+        text={this._getText()}
         underlineColorAndroid={this.props.underlineColorAndroid}
         children={children}
       />;