Created placeholderTextColor feature for issue facebook#294

bimawa · Apr 24, 2015 · a622012 · a622012
1 parent a204eb2
commit a622012
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 1 deletion.
diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js
@@ -126,6 +126,7 @@ class UIExplorerList extends React.Component {
             clearButtonMode="always"
             onChangeText={this._search.bind(this)}
             placeholder="Search..."
+            placeholderTextColor="red"
             style={styles.searchTextInput}
           />
         </View>

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -442,6 +442,7 @@ var TextInput = React.createClass({
           onSubmitEditing={this.props.onSubmitEditing}
           onSelectionChangeShouldSetResponder={() => true}
           placeholder={this.props.placeholder}
+          placeholderTextColor={this.props.placeholderTextColor}
           text={this.state.bufferedValue}
           autoCapitalize={autoCapitalize}
           autoCorrect={this.props.autoCorrect}

diff --git a/React/Views/RCTTextField.h b/React/Views/RCTTextField.h
@@ -17,6 +17,7 @@
 @property (nonatomic, assign) BOOL autoCorrect;
 @property (nonatomic, assign) BOOL selectTextOnFocus;
 @property (nonatomic, assign) UIEdgeInsets contentInset;
+@property (nonatomic, strong) UIColor *placeholderTextColor;
 
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
 

diff --git a/React/Views/RCTTextField.m b/React/Views/RCTTextField.m
@@ -42,6 +42,29 @@ - (void)setText:(NSString *)text
   }
 }
 
+- (void)_setupPlaceholder {
+    NSAttributedString *placeholderAttributedString = nil;
+    if (self.placeholder && self.placeholder.length > 0) {
+        if (self.placeholderTextColor) {
+            placeholderAttributedString = [[NSAttributedString alloc] initWithString:self.placeholder attributes:@{NSForegroundColorAttributeName : self.placeholderTextColor}];
+        }
+    }
+
+    if (placeholderAttributedString)
+        self.attributedPlaceholder = placeholderAttributedString;
+
+}
+
+- (void)setPlaceholderTextColor:(UIColor *)placeholderTextColor {
+    _placeholderTextColor = placeholderTextColor;
+    [self _setupPlaceholder];
+}
+
+- (void)setPlaceholder:(NSString *)placeholder {
+    [super setPlaceholder:[placeholder mutableCopy]];
+    [self _setupPlaceholder];
+}
+
 - (NSArray *)reactSubviews
 {
   // TODO: do we support subviews of textfield in React?

diff --git a/React/Views/RCTTextFieldManager.m b/React/Views/RCTTextFieldManager.m
@@ -10,7 +10,6 @@
 #import "RCTTextFieldManager.h"
 
 #import "RCTBridge.h"
-#import "RCTConvert.h"
 #import "RCTShadowView.h"
 #import "RCTSparseArray.h"
 #import "RCTTextField.h"
@@ -28,6 +27,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(autoCorrect, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
+RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(text, NSString)
 RCT_EXPORT_VIEW_PROPERTY(clearButtonMode, UITextFieldViewMode)
 RCT_REMAP_VIEW_PROPERTY(clearTextOnFocus, clearsOnBeginEditing, BOOL)