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

Fix edit post input text selection (#4647)

Browse source
This commit is contained in:
Elias Nahum 2020-08-06 16:46:23 -04:00 committed by GitHub
parent 9773e321c1
commit 4c8e2e8ea4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import {
Keyboard,
Platform,
View,
ViewPropTypes,
} from 'react-native';
import EventEmitter from '@mm-redux/utils/event_emitter';
@ -37,6 +38,7 @@ export default class Autocomplete extends PureComponent {
nestedScrollEnabled: PropTypes.bool,
expandDown: PropTypes.bool,
onVisible: PropTypes.func,
style: ViewPropTypes.style,
};
static defaultProps = {
@ -194,6 +196,10 @@ export default class Autocomplete extends PureComponent {
}
}
if (this.props.style) {
containerStyles.push(this.props.style);
}
const maxListHeight = this.maxListHeight();
return (

43
app/components/autocomplete/emoji_suggestion/__snapshots__/emoji_suggestion.test.js.snap
View file

@ -1,45 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/autocomplete/emoji_suggestion should match snapshot 1`] = `
<FlatList
ItemSeparatorComponent={[Function]}
data={Array []}
disableVirtualization={false}
extraData={
Object {
"active": false,
"dataSource": Array [],
}
}
horizontal={false}
initialListSize={10}
initialNumToRender={10}
keyExtractor={[Function]}
keyboardShouldPersistTaps="always"
maxToRenderPerBatch={10}
nestedScrollEnabled={false}
numColumns={1}
onEndReachedThreshold={2}
pageSize={10}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
style={
Array [
Object {
"backgroundColor": "#ffffff",
"flex": 1,
},
Object {
"height": 0,
"maxHeight": undefined,
},
]
}
updateCellsBatchingPeriod={50}
windowSize={21}
/>
`;
exports[`components/autocomplete/emoji_suggestion should match snapshot 1`] = `null`;
exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
<FlatList
@ -3083,10 +3044,8 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
Array [
Object {
"backgroundColor": "#ffffff",
"flex": 1,
},
Object {
"height": undefined,
"maxHeight": undefined,
},
]

13
app/components/autocomplete/emoji_suggestion/emoji_suggestion.js
View file

@ -65,7 +65,6 @@ export default class EmojiSuggestion extends PureComponent {
super(props);
this.matchTerm = '';
this.listRef = React.createRef();
fuse = new Fuse(props.emojis, FUSE_OPTIONS);
}
@ -216,23 +215,16 @@ export default class EmojiSuggestion extends PureComponent {
render() {
const {maxListHeight, theme, nestedScrollEnabled} = this.props;
let height;
if (!this.state.active) {
// If we are not in an active state set a height of 0 so nothing is rendered
// and other components are not blocked.
height = 0;
if (this.listRef.current) {
this.listRef.current.scrollToOffset({offset: 0});
}
return null;
}
const style = getStyleFromTheme(theme);
return (
<FlatList
ref={this.listRef}
keyboardShouldPersistTaps='always'
style={[style.listView, {maxHeight: maxListHeight, height}]}
style={[style.listView, {maxHeight: maxListHeight}]}
extraData={this.state}
data={this.state.dataSource}
keyExtractor={this.keyExtractor}
@ -260,7 +252,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
fontWeight: 'bold',
},
listView: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
row: {

5
app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap
View file

@ -321,6 +321,11 @@ exports[`EditChannelInfo should match snapshot 1`] = `
maxHeight={200}
nestedScrollEnabled={true}
onChangeText={[Function]}
style={
Object {
"position": undefined,
}
}
value="header"
/>
</KeyboardTrackingView>

4
app/components/edit_channel_info/edit_channel_info.js
View file

@ -361,6 +361,7 @@ export default class EditChannelInfo extends PureComponent {
onChangeText={this.onHeaderChangeText}
value={header}
nestedScrollEnabled={true}
style={style.autocomplete}
/>
</KeyboardTrackingView>
</React.Fragment>
@ -370,6 +371,9 @@ export default class EditChannelInfo extends PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
autocomplete: {
position: undefined,
},
autocompleteContainer: {
justifyContent: 'flex-end',
},

99
app/screens/edit_post/__snapshots__/edit_post.test.js.snap
View file

@ -1,71 +1,73 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EditPost should match snapshot 1`] = `
<View
style={
Object {
"flex": 1,
}
}
>
<Connect(StatusBar) />
<React.Fragment>
<View
style={
Object {
"backgroundColor": "rgba(61,60,64,0.03)",
"flex": 1,
}
}
>
<Connect(StatusBar) />
<View
style={
Array [
Object {
"backgroundColor": "#ffffff",
"borderBottomColor": "rgba(61,60,64,0.1)",
"borderBottomWidth": 1,
"borderTopColor": "rgba(61,60,64,0.1)",
"borderTopWidth": 1,
"marginTop": 2,
},
null,
Object {
"height": NaN,
},
]
Object {
"backgroundColor": "rgba(61,60,64,0.03)",
"flex": 1,
}
}
>
<TextInputWithLocalizedPlaceholder
blurOnSubmit={false}
disableFullscreenUI={true}
keyboardAppearance="light"
keyboardType="default"
multiline={true}
numberOfLines={10}
onChangeText={[Function]}
onSelectionChange={[Function]}
placeholder={
Object {
"defaultMessage": "Edit the post...",
"id": "edit_post.editPost",
}
}
placeholderTextColor="rgba(61,60,64,0.4)"
<View
style={
Array [
Object {
"color": "#3d3c40",
"fontSize": 14,
"padding": 15,
"textAlignVertical": "top",
"backgroundColor": "#ffffff",
"borderBottomColor": "rgba(61,60,64,0.1)",
"borderBottomWidth": 1,
"borderTopColor": "rgba(61,60,64,0.1)",
"borderTopWidth": 1,
"marginTop": 2,
},
null,
Object {
"height": NaN,
},
]
}
underlineColorAndroid="transparent"
/>
>
<TextInputWithLocalizedPlaceholder
blurOnSubmit={false}
disableFullscreenUI={true}
keyboardAppearance="light"
keyboardType="default"
multiline={true}
numberOfLines={10}
onChangeText={[Function]}
onSelectionChange={[Function]}
placeholder={
Object {
"defaultMessage": "Edit the post...",
"id": "edit_post.editPost",
}
}
placeholderTextColor="rgba(61,60,64,0.4)"
style={
Array [
Object {
"color": "#3d3c40",
"fontSize": 14,
"padding": 15,
"textAlignVertical": "top",
},
Object {
"height": NaN,
},
]
}
underlineColorAndroid="transparent"
/>
</View>
</View>
</View>
<KeyboardTrackingView
@ -87,7 +89,12 @@ exports[`EditPost should match snapshot 1`] = `
nestedScrollEnabled={true}
onChangeText={[Function]}
onVisible={[Function]}
style={
Object {
"position": undefined,
}
}
/>
</KeyboardTrackingView>
</View>
</React.Fragment>
`;

50
app/screens/edit_post/edit_post.js
View file

@ -248,27 +248,29 @@ export default class EditPost extends PureComponent {
];
return (
<View style={style.container}>
<StatusBar/>
<View style={style.scrollView}>
{displayError}
<View style={[inputContainerStyle, padding(isLandscape), {height}]}>
<TextInputWithLocalizedPlaceholder
ref={this.messageRef}
value={message}
blurOnSubmit={false}
onChangeText={this.onPostChangeText}
multiline={true}
numberOfLines={10}
style={[style.input, {height}]}
placeholder={{id: t('edit_post.editPost'), defaultMessage: 'Edit the post...'}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
underlineColorAndroid='transparent'
disableFullscreenUI={true}
keyboardAppearance={getKeyboardAppearanceFromTheme(this.props.theme)}
onSelectionChange={this.handleOnSelectionChange}
keyboardType={this.state.keyboardType}
/>
<>
<View style={style.container}>
<StatusBar/>
<View style={style.scrollView}>
{displayError}
<View style={[inputContainerStyle, padding(isLandscape), {height}]}>
<TextInputWithLocalizedPlaceholder
ref={this.messageRef}
value={message}
blurOnSubmit={false}
onChangeText={this.onPostChangeText}
multiline={true}
numberOfLines={10}
style={[style.input, {height}]}
placeholder={{id: t('edit_post.editPost'), defaultMessage: 'Edit the post...'}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
underlineColorAndroid='transparent'
disableFullscreenUI={true}
keyboardAppearance={getKeyboardAppearanceFromTheme(this.props.theme)}
onSelectionChange={this.handleOnSelectionChange}
keyboardType={this.state.keyboardType}
/>
</View>
</View>
</View>
<KeyboardTrackingView style={autocompleteStyles}>
@ -279,15 +281,19 @@ export default class EditPost extends PureComponent {
value={message}
nestedScrollEnabled={true}
onVisible={this.onAutocompleteVisible}
style={style.autocomplete}
/>
</KeyboardTrackingView>
</View>
</>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
autocomplete: {
position: undefined,
},
container: {
flex: 1,
},

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

@ -363,7 +363,7 @@ export default class PostOptions extends PureComponent {
closeButton: source,
};
this.closeWithAnimation(() => showModal(screen, title, passProps));
this.closeWithAnimation(() => showModal(screen, title, passProps, {modal: {swipeToDismiss: false}}));
});
};