Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added placeholderTextColor property for TextInput class #997

Closed
wants to merge 5 commits into from
Closed

Added placeholderTextColor property for TextInput class #997

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a204eb2
Added to gitignore IDEA AppCode
bimawa Apr 24, 2015
a622012
Created placeholderTextColor feature for issue #294
bimawa Apr 24, 2015
be93e91
Edited by Code-review #997
bimawa Apr 24, 2015
5f6b460
Correct indent to 2
bimawa Apr 24, 2015
30125d2
Merge remote-tracking branch 'upstream/master'
bimawa Apr 26, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,15 @@ project.xcworkspace

# Node
node_modules

# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion

*.iml

## Directory-based project format:
.idea/
# if you remove the above rule, at least ignore the following:

## File-based project format:
*.ipr
*.iws
1 change: 1 addition & 0 deletions Examples/UIExplorer/UIExplorerList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ class UIExplorerList extends React.Component {
clearButtonMode="always"
onChangeText={this._search.bind(this)}
placeholder="Search..."
placeholderTextColor="red"
style={styles.searchTextInput}
/>
</View>
Expand Down
1 change: 1 addition & 0 deletions Libraries/Components/TextInput/TextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions React/Views/RCTTextField.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
23 changes: 23 additions & 0 deletions React/Views/RCTTextField.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,29 @@ - (void)setText:(NSString *)text
}
}

- (void)_setupPlaceholder {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bimawa - what happens here if the placeholder is set and then removed by setting the prop to null / empty string? Will the attributedPlaceholder stick around?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should disappear, but it doesn't really matter if it's set to nil or an empty string. Whatever's easiest to implement.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, that's what should happen - I believe in the current implementation it would continue to show the previous placeholder value, which is incorrect.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicklockwood - agreed, that's what I thought might be happening so I just wanted to make sure

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@brentvatne i tested it. Working fine. I think its related with pointer on a placeholder property, i testing it. i setup null dynamicaly on placeholder from JS then setup to new value and all changes working as I expected. I testing on TestInputExample.js file with next code:

<View>
    <TextInput autoCapitalize="none" placeholder={this.state.curText=="null" ?null:this.state.curText} 
    autoCorrect={false} 
    onFocus={()=> this.updateText('onFocus')} onBlur={() => this.updateText('onBlur')} 
    onChange={(event) => this.updateText( event.nativeEvent.text )} 
    onEndEditing={(event) => this.updateText( 'onEndEditing text: ' + event.nativeEvent.text )} 
    onSubmitEditing={(event) => this.updateText( 'onSubmitEditing text: ' + event.nativeEvent.text )} 
    style={styles.default} />

        <TextInput style={styles.default} onChange={(event)=> this.updateText( event.nativeEvent.text )}/>
            <Text style={styles.eventLabel}>
                {this.state.curText}{'\n'} (prev: {this.state.prevText})
            </Text>
</View>

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

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;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

if (self.placeholder.length > 0 && self.placeholderTextColor) {
  self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder
                                                               attributes:@{
                                                                            NSForegroundColorAttributeName: self.placeholderTextColor
                                                                           }];
}

}

- (void)setPlaceholderTextColor:(UIColor *)placeholderTextColor {
_placeholderTextColor = placeholderTextColor;
[self _setupPlaceholder];
}

- (void)setPlaceholder:(NSString *)placeholder {
[super setPlaceholder:[placeholder mutableCopy]];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

super.placeholder = placeholder;

[self _setupPlaceholder];
}

- (NSArray *)reactSubviews
{
// TODO: do we support subviews of textfield in React?
Expand Down
2 changes: 1 addition & 1 deletion React/Views/RCTTextFieldManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
#import "RCTTextFieldManager.h"

#import "RCTBridge.h"
#import "RCTConvert.h"
#import "RCTShadowView.h"
#import "RCTSparseArray.h"
#import "RCTTextField.h"
Expand All @@ -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)
Expand Down