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

Better handle cancel button internally #137

Merged
merged 2 commits into from
Jan 8, 2018
Merged

Better handle cancel button internally #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
789a8d1
feat: Handle cancel button behaviour on blur, cancel, search, and foc…
iRoachie Jan 8, 2018
41ca401
fix(onCancelButtonPress): Clear text in search bar
iRoachie Jan 8, 2018
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
4 changes: 2 additions & 2 deletions ios/RNSearchBarManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ + (BOOL)requiresMainQueueSetup
RCT_EXPORT_VIEW_PROPERTY(text, NSString)
RCT_CUSTOM_VIEW_PROPERTY(showsCancelButton, BOOL, RNSearchBar)
{
BOOL value = [RCTConvert BOOL:json];
view.showsCancelButton = value;
BOOL value = [RCTConvert BOOL:json];
view.showsCancelButton = value;
}
RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
Expand Down
41 changes: 34 additions & 7 deletions src/SearchBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ class SearchBar extends React.PureComponent {
searchBarStyle: PropTypes.oneOf(['default', 'prominent', 'minimal']),
editable: PropTypes.bool,
returnKeyType: PropTypes.string,
showsCancelButtonWhileEditing: PropTypes.bool,
}

static defaultProps = {
Expand All @@ -66,6 +67,7 @@ class SearchBar extends React.PureComponent {
autoCapitalize: 'sentences',
autoCorrect: false,
spellCheck: false,
showsCancelButtonWhileEditing: true,
onChange: () => null,
onChangeText: () => null,
onFocus: () => null,
Expand All @@ -80,9 +82,38 @@ class SearchBar extends React.PureComponent {
}

onSearchButtonPress = (e) => {
if (this.props.showsCancelButtonWhileEditing) {
NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), true)
}

this.props.onSearchButtonPress(e.nativeEvent.searchText)
}

onFocus = () => {
if (this.props.showsCancelButtonWhileEditing) {
NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), true)
}

this.props.onFocus()
}

onCancelButtonPress = () => {
if (this.props.showsCancelButtonWhileEditing) {
NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), false)
}

this.props.onChangeText('')
this.props.onCancelButtonPress()
}

onBlur = () => {
if (this.props.showsCancelButtonWhileEditing) {
NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), false)
}

this.props.onBlur()
}

blur() {
return NativeModules.RNSearchBarManager.blur(findNodeHandle(this))
}
Expand All @@ -98,12 +129,6 @@ class SearchBar extends React.PureComponent {
unFocus() {
return NativeModules.RNSearchBarManager.unFocus(findNodeHandle(this))
}

componentDidUpdate (prevProps) {
if (prevProps.showsCancelButton !== this.props.showsCancelButton) {
NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), this.props.showsCancelButton);
}
}

render() {
return (
Expand All @@ -112,8 +137,10 @@ class SearchBar extends React.PureComponent {
{...this.props}
onChange={this.onChange}
onPress={this.onPress}
onFocus={this.onFocus}
onBlur={this.onBlur}
onSearchButtonPress={this.onSearchButtonPress}
onCancelButtonPress={this.props.onCancelButtonPress}
onCancelButtonPress={this.onCancelButtonPress}
/>
)
}
Expand Down
7 changes: 7 additions & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,13 @@ interface Props {
*/
showsCancelButton?: boolean

/**
* Only shows the cancel button while the search bar has focus
*
* Default is true
*/
showsCancelButtonWhileEditing?: boolean

/**
* Indicates whether the Return key is automatically enabled when the user is entering text.
*
Expand Down