toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix overflow of searchbar for iOS in Landscape (#4312)

Browse source
This commit is contained in:
Elias Nahum 2020-05-20 23:34:16 -04:00 committed by GitHub
parent a9763c7480
commit a91e257f55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 562 additions and 533 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
View file

@ -17,54 +17,55 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
> >
<View <View
style={ style={
Array [ Object {
Object { "backgroundColor": "rgba(61,60,64,0.2)",
"backgroundColor": "rgba(61,60,64,0.2)", "height": 50,
"height": 50, "paddingLeft": 8,
"paddingLeft": 8, "paddingVertical": 5,
"paddingVertical": 5, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "#ffffff", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 13, Object {
"backgroundColor": "#ffffff",
"color": "#3d3c40",
"fontSize": 13,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onAnimationComplete={[Function]}
onAnimationComplete={[Function]} onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.8)"
tintColorSearch="rgba(61,60,64,0.8)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<View <View
style={ style={

40
app/components/emoji_picker/emoji_picker.ios.js
View file

@ -47,25 +47,27 @@ export default class EmojiPicker extends EmojiPickerBase {
keyboardVerticalOffset={keyboardOffset} keyboardVerticalOffset={keyboardOffset}
style={styles.flex} style={styles.flex}
> >
<View style={[styles.searchBar, padding(isLandscape)]}> <View style={styles.searchBar}>
<SearchBar <View style={padding(isLandscape)}>
ref={this.setSearchBarRef} <SearchBar
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})} ref={this.setSearchBarRef}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
backgroundColor='transparent' cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
inputHeight={33} backgroundColor='transparent'
inputStyle={searchBarInput} inputHeight={33}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)} inputStyle={searchBarInput}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)} placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)} tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
titleCancelColor={theme.centerChannelColor} tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
onChangeText={this.changeSearchTerm} titleCancelColor={theme.centerChannelColor}
onCancelButtonPress={this.cancelSearch} onChangeText={this.changeSearchTerm}
autoCapitalize='none' onCancelButtonPress={this.cancelSearch}
value={searchTerm} autoCapitalize='none'
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)} value={searchTerm}
onAnimationComplete={this.setRebuiltEmojis} keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
/> onAnimationComplete={this.setRebuiltEmojis}
/>
</View>
</View> </View>
<View style={[styles.container]}> <View style={[styles.container]}>
{this.renderListComponent(shorten)} {this.renderListComponent(shorten)}

5
app/components/search_bar/index.js
View file

@ -38,6 +38,7 @@ export default class Search extends PureComponent {
tintColorDelete: PropTypes.string, tintColorDelete: PropTypes.string,
selectionColor: PropTypes.string, selectionColor: PropTypes.string,
inputStyle: CustomPropTypes.Style, inputStyle: CustomPropTypes.Style,
containerStyle: CustomPropTypes.Style,
cancelButtonStyle: CustomPropTypes.Style, cancelButtonStyle: CustomPropTypes.Style,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
placeholder: PropTypes.string, placeholder: PropTypes.string,
@ -285,7 +286,7 @@ export default class Search extends PureComponent {
} }
return ( return (
<View style={searchBarStyle.container}> <View style={[searchBarStyle.container, this.props.containerStyle]}>
{((this.props.leftComponent) ? {((this.props.leftComponent) ?
<Animated.View <Animated.View
style={{ style={{
@ -385,7 +386,7 @@ const getSearchBarStyle = memoizeResult((
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center', alignItems: 'center',
height: containerHeight, height: containerHeight,
flex: 1, overflow: 'hidden',
}, },
clearIconColorIos: tintColorDelete || styles.defaultColor.color, clearIconColorIos: tintColorDelete || styles.defaultColor.color,
clearIconColorAndroid: titleCancelColor || placeholderTextColor, clearIconColorAndroid: titleCancelColor || placeholderTextColor,

4
app/components/sidebars/main/channels_list/channels_list.js
View file

@ -135,6 +135,7 @@ export default class ChannelsList extends PureComponent {
backgroundColor='transparent' backgroundColor='transparent'
inputHeight={33} inputHeight={33}
inputStyle={searchBarInput} inputStyle={searchBarInput}
containerStyle={styles.flex}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
@ -172,6 +173,9 @@ export default class ChannelsList extends PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => { const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return { return {
flex: {
flex: 1,
},
above: { above: {
backgroundColor: theme.mentionBg, backgroundColor: theme.mentionBg,
top: 40, top: 40,

40
app/screens/channel_add_members/channel_add_members.js
View file

@ -334,25 +334,27 @@ export default class ChannelAddMembers extends PureComponent {
return ( return (
<KeyboardLayout> <KeyboardLayout>
<StatusBar/> <StatusBar/>
<View style={[style.searchBar, padding(isLandscape)]}> <View style={style.searchBar}>
<SearchBar <View style={padding(isLandscape)}>
ref={this.setSearchBarRef} <SearchBar
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})} ref={this.setSearchBarRef}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
backgroundColor='transparent' cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
inputHeight={33} backgroundColor='transparent'
inputStyle={searchBarInput} inputHeight={33}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)} inputStyle={searchBarInput}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)} placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)} tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor} tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
onChangeText={this.onSearch} titleCancelColor={theme.centerChannelColor}
onSearchButtonPress={this.onSearch} onChangeText={this.onSearch}
onCancelButtonPress={this.clearSearch} onSearchButtonPress={this.onSearch}
autoCapitalize='none' onCancelButtonPress={this.clearSearch}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)} autoCapitalize='none'
value={term} keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
/> value={term}
/>
</View>
</View> </View>
<CustomList <CustomList
data={data} data={data}

89
app/screens/channel_members/__snapshots__/channel_members.test.js.snap
View file

@ -5,53 +5,54 @@ exports[`ChannelMembers should match snapshot 1`] = `
<Connect(StatusBar) /> <Connect(StatusBar) />
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<CustomList <CustomList
canRefresh={true} canRefresh={true}

40
app/screens/channel_members/channel_members.js
View file

@ -363,25 +363,27 @@ export default class ChannelMembers extends PureComponent {
return ( return (
<KeyboardLayout> <KeyboardLayout>
<StatusBar/> <StatusBar/>
<View style={[style.searchBar, padding(isLandscape)]}> <View style={style.searchBar}>
<SearchBar <View style={padding(isLandscape)}>
ref={this.setSearchBarRef} <SearchBar
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})} ref={this.setSearchBarRef}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
backgroundColor='transparent' cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
inputHeight={33} backgroundColor='transparent'
inputStyle={searchBarInput} inputHeight={33}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)} inputStyle={searchBarInput}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)} placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)} tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor} tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
onChangeText={this.onSearch} titleCancelColor={theme.centerChannelColor}
onSearchButtonPress={this.onSearch} onChangeText={this.onSearch}
onCancelButtonPress={this.clearSearch} onSearchButtonPress={this.onSearch}
autoCapitalize='none' onCancelButtonPress={this.clearSearch}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)} autoCapitalize='none'
value={term} keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
/> value={term}
/>
</View>
</View> </View>
<CustomList <CustomList
data={data} data={data}

85
app/screens/more_channels/__snapshots__/more_channels.test.js.snap
View file

@ -6,51 +6,52 @@ exports[`MoreChannels should match snapshot 1`] = `
<React.Fragment> <React.Fragment>
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
containerHeight={40} backArrowSize={24}
deleteIconSize={20} backgroundColor="transparent"
editable={true} blurOnSubmit={false}
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<View <View
style={ style={

40
app/screens/more_channels/more_channels.js
View file

@ -452,25 +452,27 @@ export default class MoreChannels extends PureComponent {
content = ( content = (
<React.Fragment> <React.Fragment>
<View style={[style.searchBar, padding(isLandscape)]}> <View style={style.searchBar}>
<SearchBar <View style={padding(isLandscape)}>
ref={this.setSearchBarRef} <SearchBar
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})} ref={this.setSearchBarRef}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
backgroundColor='transparent' cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
inputHeight={33} backgroundColor='transparent'
inputStyle={searchBarInput} inputHeight={33}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)} inputStyle={searchBarInput}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)} placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)} tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor} tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
onChangeText={this.searchChannels} titleCancelColor={theme.centerChannelColor}
onSearchButtonPress={this.searchChannels} onChangeText={this.searchChannels}
onCancelButtonPress={this.cancelSearch} onSearchButtonPress={this.searchChannels}
autoCapitalize='none' onCancelButtonPress={this.cancelSearch}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)} autoCapitalize='none'
value={term} keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
/> value={term}
/>
</View>
</View> </View>
{channelDropdown} {channelDropdown}
<CustomList <CustomList

43
app/screens/more_dms/more_dms.js
View file

@ -52,7 +52,7 @@ export default class MoreDirectMessages extends PureComponent {
currentDisplayName: PropTypes.string, currentDisplayName: PropTypes.string,
currentTeamId: PropTypes.string.isRequired, currentTeamId: PropTypes.string.isRequired,
currentUserId: PropTypes.string.isRequired, currentUserId: PropTypes.string.isRequired,
isGuest: PropTypes.object.isRequired, isGuest: PropTypes.bool,
restrictDirectMessage: PropTypes.bool.isRequired, restrictDirectMessage: PropTypes.bool.isRequired,
teammateNameDisplay: PropTypes.string, teammateNameDisplay: PropTypes.string,
theme: PropTypes.object.isRequired, theme: PropTypes.object.isRequired,
@ -472,25 +472,27 @@ export default class MoreDirectMessages extends PureComponent {
return ( return (
<KeyboardLayout> <KeyboardLayout>
<StatusBar/> <StatusBar/>
<View style={[style.searchBar, padding(isLandscape)]}> <View style={style.searchBar}>
<SearchBar <View style={padding(isLandscape)}>
ref={this.setSearchBarRef} <SearchBar
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})} ref={this.setSearchBarRef}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
backgroundColor='transparent' cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
inputHeight={33} backgroundColor='transparent'
inputStyle={searchBarInput} inputHeight={33}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)} inputStyle={searchBarInput}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)} placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)} tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor} tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
onChangeText={this.onSearch} titleCancelColor={theme.centerChannelColor}
onSearchButtonPress={this.onSearch} onChangeText={this.onSearch}
onCancelButtonPress={this.clearSearch} onSearchButtonPress={this.onSearch}
autoCapitalize='none' onCancelButtonPress={this.clearSearch}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)} autoCapitalize='none'
value={term} keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
/> value={term}
/>
</View>
</View> </View>
<SelectedUsers <SelectedUsers
selectedIds={this.state.selectedIds} selectedIds={this.state.selectedIds}
@ -501,6 +503,7 @@ export default class MoreDirectMessages extends PureComponent {
<CustomList <CustomList
data={data} data={data}
extraData={selectedIds} extraData={selectedIds}
isLandscape={isLandscape}
key='custom_list' key='custom_list'
listType={listType} listType={listType}
loading={loading} loading={loading}

2
app/screens/search/search.js
View file

@ -713,7 +713,7 @@ export default class Search extends PureComponent {
paddingRes.paddingLeft = null; paddingRes.paddingLeft = null;
if (isLandscape) { if (isLandscape) {
paddingRes.paddingTop = 10; paddingRes.paddingTop = 5;
} }
} }

534
app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
View file

@ -11,53 +11,54 @@ exports[`SelectorScreen should match snapshot for channels 1`] = `
<Connect(StatusBar) /> <Connect(StatusBar) />
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<CustomList <CustomList
canRefresh={true} canRefresh={true}
@ -116,53 +117,54 @@ exports[`SelectorScreen should match snapshot for channels 2`] = `
<Connect(StatusBar) /> <Connect(StatusBar) />
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<CustomList <CustomList
canRefresh={true} canRefresh={true}
@ -221,53 +223,54 @@ exports[`SelectorScreen should match snapshot for explicit options 1`] = `
<Connect(StatusBar) /> <Connect(StatusBar) />
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<CustomList <CustomList
canRefresh={true} canRefresh={true}
@ -333,53 +336,54 @@ exports[`SelectorScreen should match snapshot for searching 1`] = `
<Connect(StatusBar) /> <Connect(StatusBar) />
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value="name2"
value="name2" />
/> </View>
</View> </View>
<CustomList <CustomList
canRefresh={true} canRefresh={true}
@ -438,53 +442,54 @@ exports[`SelectorScreen should match snapshot for users 1`] = `
<Connect(StatusBar) /> <Connect(StatusBar) />
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<CustomList <CustomList
canRefresh={true} canRefresh={true}
@ -543,53 +548,54 @@ exports[`SelectorScreen should match snapshot for users 2`] = `
<Connect(StatusBar) /> <Connect(StatusBar) />
<View <View
style={ style={
Array [ Object {
Object { "height": 38,
"height": 38, "marginVertical": 5,
"marginVertical": 5, "paddingLeft": 8,
"paddingLeft": 8, }
},
null,
]
} }
> >
<Search <View
autoCapitalize="none" style={null}
backArrowSize={24} >
backgroundColor="transparent" <Search
blurOnSubmit={false} autoCapitalize="none"
cancelTitle="Cancel" backArrowSize={24}
containerHeight={40} backgroundColor="transparent"
deleteIconSize={20} blurOnSubmit={false}
editable={true} cancelTitle="Cancel"
inputHeight={33} containerHeight={40}
inputStyle={ deleteIconSize={20}
Object { editable={true}
"backgroundColor": "rgba(61,60,64,0.2)", inputHeight={33}
"color": "#3d3c40", inputStyle={
"fontSize": 15, Object {
"backgroundColor": "rgba(61,60,64,0.2)",
"color": "#3d3c40",
"fontSize": 15,
}
} }
} keyboardAppearance="light"
keyboardAppearance="light" keyboardShouldPersist={false}
keyboardShouldPersist={false} keyboardType="default"
keyboardType="default" onBlur={[Function]}
onBlur={[Function]} onCancelButtonPress={[Function]}
onCancelButtonPress={[Function]} onChangeText={[Function]}
onChangeText={[Function]} onSearchButtonPress={[Function]}
onSearchButtonPress={[Function]} onSelectionChange={[Function]}
onSelectionChange={[Function]} placeholder="Search"
placeholder="Search" placeholderTextColor="rgba(61,60,64,0.5)"
placeholderTextColor="rgba(61,60,64,0.5)" returnKeyType="search"
returnKeyType="search" searchBarRightMargin={0}
searchBarRightMargin={0} searchIconSize={24}
searchIconSize={24} showArrow={false}
showArrow={false} showCancel={true}
showCancel={true} tintColorDelete="rgba(61,60,64,0.5)"
tintColorDelete="rgba(61,60,64,0.5)" tintColorSearch="rgba(61,60,64,0.5)"
tintColorSearch="rgba(61,60,64,0.5)" titleCancelColor="#3d3c40"
titleCancelColor="#3d3c40" value=""
value="" />
/> </View>
</View> </View>
<CustomList <CustomList
canRefresh={true} canRefresh={true}

40
app/screens/selector_screen/selector_screen.js
View file

@ -316,25 +316,27 @@ export default class SelectorScreen extends PureComponent {
return ( return (
<View style={style.container}> <View style={style.container}>
<StatusBar/> <StatusBar/>
<View style={[style.searchBar, padding(isLandscape)]}> <View style={style.searchBar}>
<SearchBar <View style={padding(isLandscape)}>
ref={this.setSearchBarRef} <SearchBar
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})} ref={this.setSearchBarRef}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
backgroundColor='transparent' cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
inputHeight={33} backgroundColor='transparent'
inputStyle={searchBarInput} inputHeight={33}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)} inputStyle={searchBarInput}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)} placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)} tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor} tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
onChangeText={this.onSearch} titleCancelColor={theme.centerChannelColor}
onSearchButtonPress={this.onSearch} onChangeText={this.onSearch}
onCancelButtonPress={this.clearSearch} onSearchButtonPress={this.onSearch}
autoCapitalize='none' onCancelButtonPress={this.clearSearch}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)} autoCapitalize='none'
value={term} keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
/> value={term}
/>
</View>
</View> </View>
<CustomList <CustomList
data={data} data={data}

42
app/screens/settings/timezone/select_timezone/select_timezone.js
View file

@ -112,26 +112,28 @@ export default class Timezone extends PureComponent {
return ( return (
<View style={style.container}> <View style={style.container}>
<StatusBar/> <StatusBar/>
<View style={[style.header, padding(isLandscape)]}> <View style={style.header}>
<SearchBar <View style={padding(isLandscape)}>
ref={this.setSearchBarRef} <SearchBar
placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})} ref={this.setSearchBarRef}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
backgroundColor='transparent' cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
inputHeight={Platform.OS === 'ios' ? 33 : 46} backgroundColor='transparent'
inputStyle={searchBarInput} inputHeight={Platform.OS === 'ios' ? 33 : 46}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} inputStyle={searchBarInput}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor} tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
onChangeText={this.handleTextChanged} titleCancelColor={theme.sidebarHeaderTextColor}
autoCapitalize='none' onChangeText={this.handleTextChanged}
value={value} autoCapitalize='none'
containerStyle={style.searchBarContainer} value={value}
showArrow={false} containerStyle={style.searchBarContainer}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)} showArrow={false}
/> keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
/>
</View>
</View> </View>
<FlatList <FlatList
data={this.filteredTimezones(value)} data={this.filteredTimezones(value)}