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

RN-519: Expands search results list height. (#1225)

Browse source 
* RN-519: Expands AtMentions and ChannelMentions searches to use entire device height.

* RN-519: Fix for ~ and @ search list heights.

* RN-519: Optimization.
This commit is contained in:
Martin Kraft 2017-11-29 17:08:51 -05:00 committed by enahum
parent 19e6d66979
commit 159507891c
4 changed files with 51 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/components/autocomplete/at_mention/at_mention.js
View file

@ -25,6 +25,7 @@ export default class AtMention extends PureComponent {
defaultChannel: PropTypes.object,
inChannel: PropTypes.array,
isSearch: PropTypes.bool,
listHeight: PropTypes.number,
matchTerm: PropTypes.string,
onChangeText: PropTypes.func.isRequired,
onResultCountChange: PropTypes.func.isRequired,
@ -202,7 +203,7 @@ export default class AtMention extends PureComponent {
};
render() {
const {isSearch, theme} = this.props;
const {isSearch, listHeight, theme} = this.props;
const {mentionComplete, sections} = this.state;
if (sections.length === 0 || mentionComplete) {
@ -217,7 +218,7 @@ export default class AtMention extends PureComponent {
<SectionList
keyboardShouldPersistTaps='always'
keyExtractor={this.keyExtractor}
style={[style.listView, isSearch ? style.search : null]}
style={[style.listView, isSearch ? [style.search, {height: listHeight}] : null]}
sections={sections}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
@ -234,8 +235,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
backgroundColor: theme.centerChannelBg
},
search: {
minHeight: 125,
maxHeight: 250
minHeight: 125
}
};
});

43
app/components/autocomplete/autocomplete.js
View file

@ -3,7 +3,12 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Platform, View} from 'react-native';
import {
Keyboard,
Platform,
View
} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@ -14,6 +19,7 @@ import SlashSuggestion from './slash_suggestion';
export default class Autocomplete extends PureComponent {
static propTypes = {
deviceHeight: PropTypes.number,
onChangeText: PropTypes.func.isRequired,
rootId: PropTypes.string,
isSearch: PropTypes.bool,
@ -30,7 +36,8 @@ export default class Autocomplete extends PureComponent {
atMentionCount: 0,
channelMentionCount: 0,
emojiCount: 0,
commandCount: 0
commandCount: 0,
keyboardOffset: 0
};
handleSelectionChange = (event) => {
@ -55,6 +62,33 @@ export default class Autocomplete extends PureComponent {
this.setState({commandCount});
};
componentWillMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardDidShow = (e) => {
const {height} = e.endCoordinates;
this.setState({keyboardOffset: height});
}
keyboardDidHide = () => {
this.setState({keyboardOffset: 0});
}
listHeight() {
let offset = Platform.select({ios: 65, android: 75});
if (DeviceInfo.getModel() === 'iPhone X') {
offset = 90;
}
return this.props.deviceHeight - offset - this.state.keyboardOffset;
}
render() {
const style = getStyleFromTheme(this.props.theme);
@ -76,16 +110,18 @@ export default class Autocomplete extends PureComponent {
containerStyle.push(style.borders);
}
}
const listHeight = this.listHeight();
return (
<View style={wrapperStyle}>
<View style={containerStyle}>
<AtMention
listHeight={listHeight}
cursorPosition={this.state.cursorPosition}
onResultCountChange={this.handleAtMentionCountChange}
{...this.props}
/>
<ChannelMention
listHeight={listHeight}
cursorPosition={this.state.cursorPosition}
onResultCountChange={this.handleChannelMentionCountChange}
{...this.props}
@ -131,7 +167,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
},
searchContainer: {
flex: 1,
maxHeight: 250,
...Platform.select({
android: {
top: 46

8
app/components/autocomplete/channel_mention/channel_mention.js
View file

@ -21,6 +21,7 @@ export default class ChannelMention extends PureComponent {
currentTeamId: PropTypes.string.isRequired,
cursorPosition: PropTypes.number.isRequired,
isSearch: PropTypes.bool,
listHeight: PropTypes.number,
matchTerm: PropTypes.string,
myChannels: PropTypes.array,
otherChannels: PropTypes.array,
@ -166,7 +167,7 @@ export default class ChannelMention extends PureComponent {
};
render() {
const {isSearch, theme} = this.props;
const {isSearch, listHeight, theme} = this.props;
const {mentionComplete, sections} = this.state;
if (sections.length === 0 || mentionComplete) {
@ -181,7 +182,7 @@ export default class ChannelMention extends PureComponent {
<SectionList
keyboardShouldPersistTaps='always'
keyExtractor={this.keyExtractor}
style={[style.listView, isSearch ? style.search : null]}
style={[style.listView, isSearch ? [style.search, {height: listHeight}] : null]}
sections={sections}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
@ -198,8 +199,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
backgroundColor: theme.centerChannelBg
},
search: {
minHeight: 125,
maxHeight: 250
minHeight: 125
}
};
});

4
app/components/autocomplete/index.js
View file

@ -5,10 +5,14 @@ import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getDimensions} from 'app/selectors/device';
import Autocomplete from './autocomplete';
function mapStateToProps(state) {
const {deviceHeight} = getDimensions(state);
return {
deviceHeight,
theme: getTheme(state)
};
}