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

Fix edit post input height and looks (#7366)

Browse source 
Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Daniel Espino García 2023-06-26 11:44:00 +02:00 committed by GitHub
parent 346c4424b0
commit 6929e7a676
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/screens/edit_post/edit_post.tsx
View file

@ -3,7 +3,7 @@
import React, {useCallback, useEffect, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {Alert, Keyboard, type LayoutChangeEvent, Platform, SafeAreaView, View} from 'react-native';
import {Alert, Keyboard, type LayoutChangeEvent, Platform, SafeAreaView, View, StyleSheet} from 'react-native';
import {deletePost, editPost} from '@actions/remote/post';
import Autocomplete from '@components/autocomplete';
@ -18,7 +18,6 @@ import {useInputPropagation} from '@hooks/input';
import useNavButtonPressed from '@hooks/navigation_button_pressed';
import PostError from '@screens/edit_post/post_error';
import {buildNavigationButton, dismissModal, setButtons} from '@screens/navigation';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import EditPostInput, {type EditPostInputRef} from './edit_post_input';
@ -27,21 +26,18 @@ import type {AvailableScreens} from '@typings/screens/navigation';
const AUTOCOMPLETE_SEPARATION = 8;
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
body: {
flex: 1,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.03),
},
container: {
flex: 1,
},
loader: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
};
const styles = StyleSheet.create({
body: {
flex: 1,
},
container: {
flex: 1,
},
loader: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
const RIGHT_BUTTON = buildNavigationButton('edit-post', 'edit_post.save.button');
@ -70,7 +66,6 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach
const theme = useTheme();
const intl = useIntl();
const serverUrl = useServerUrl();
const styles = getStyleSheet(theme);
useEffect(() => {
toggleSaveButton(false);
@ -202,6 +197,8 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach
const autocompletePosition = overlap + AUTOCOMPLETE_SEPARATION;
const autocompleteAvailableSpace = containerHeight - autocompletePosition;
const inputHeight = containerHeight - overlap;
const [animatedAutocompletePosition, animatedAutocompleteAvailableSpace] = useAutocompleteDefaultAnimatedValues(autocompletePosition, autocompleteAvailableSpace);
if (isUpdating) {
@ -230,6 +227,7 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach
/>
}
<EditPostInput
inputHeight={inputHeight}
hasError={Boolean(errorLine)}
message={postMessage}
onChangeText={onInputChangeText}

21
app/screens/edit_post/edit_post_input/index.tsx
View file

@ -5,7 +5,7 @@ import {useManagedConfig} from '@mattermost/react-native-emm';
import PasteInput, {type PasteInputRef} from '@mattermost/react-native-paste-input';
import React, {forwardRef, useCallback, useImperativeHandle, useMemo, useRef} from 'react';
import {useIntl} from 'react-intl';
import {type NativeSyntheticEvent, Platform, type TextInputSelectionChangeEventData, useWindowDimensions, View} from 'react-native';
import {type NativeSyntheticEvent, type TextInputSelectionChangeEventData, View} from 'react-native';
import {useTheme} from '@context/theme';
import {emptyFunction} from '@utils/general';
@ -25,13 +25,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({
},
}));
const HEIGHT_DIFF = Platform.select({android: 40, default: 30});
export type EditPostInputRef = {
focus: () => void;
}
type PostInputProps = {
inputHeight: number;
message: string;
hasError: boolean;
onTextSelectionChange: (curPos: number) => void;
@ -39,21 +38,23 @@ type PostInputProps = {
}
const EditPostInput = forwardRef<EditPostInputRef, PostInputProps>(({
message, onChangeText, onTextSelectionChange, hasError,
inputHeight,
message,
onChangeText,
onTextSelectionChange,
hasError,
}: PostInputProps, ref) => {
const intl = useIntl();
const theme = useTheme();
const styles = getStyleSheet(theme);
const {height} = useWindowDimensions();
const managedConfig = useManagedConfig<ManagedConfig>();
const textInputHeight = (height / 2) - HEIGHT_DIFF;
const disableCopyAndPaste = managedConfig.copyAndPasteProtection === 'true';
const inputRef = useRef<PasteInputRef>();
const inputStyle = useMemo(() => {
return [styles.input, {height: textInputHeight}];
}, [textInputHeight, styles]);
return [styles.input, {height: inputHeight}];
}, [inputHeight, styles]);
const onSelectionChange = useCallback((event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
const curPos = event.nativeEvent.selection.end;
@ -63,8 +64,8 @@ const EditPostInput = forwardRef<EditPostInputRef, PostInputProps>(({
const containerStyle = useMemo(() => [
styles.inputContainer,
hasError && {marginTop: 0},
{height: textInputHeight},
], [styles, textInputHeight]);
{height: inputHeight},
], [styles, inputHeight]);
useImperativeHandle(ref, () => ({
focus: () => inputRef.current?.focus(),