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

Fix autocomplete position on tablets (#6264)

Browse source
This commit is contained in:
Daniel Espino García 2022-05-12 18:17:24 +02:00 committed by GitHub
parent 75d1c9d228
commit a8a13272ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/components/autocomplete/autocomplete.tsx
View file

@ -3,8 +3,9 @@
import React, {useMemo, useState} from 'react';
import {Platform, useWindowDimensions, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {LIST_BOTTOM, MAX_LIST_DIFF, MAX_LIST_HEIGHT, MAX_LIST_TABLET_DIFF, OFFSET_TABLET} from '@constants/autocomplete';
import {LIST_BOTTOM, MAX_LIST_DIFF, MAX_LIST_HEIGHT, MAX_LIST_TABLET_DIFF} from '@constants/autocomplete';
import {useTheme} from '@context/theme';
import {useIsTablet} from '@hooks/device';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@ -89,6 +90,7 @@ const Autocomplete = ({
const isTablet = useIsTablet();
const dimensions = useWindowDimensions();
const style = getStyleFromTheme(theme);
const insets = useSafeAreaInsets();
const [showingAtMention, setShowingAtMention] = useState(false);
const [showingChannelMention, setShowingChannelMention] = useState(false);
@ -107,14 +109,13 @@ const Autocomplete = ({
return maxHeightOverride;
}
const isLandscape = dimensions.width > dimensions.height;
const offset = isTablet && isLandscape ? OFFSET_TABLET : 0;
let postInputDiff = 0;
if (isTablet && postInputTop && isLandscape) {
postInputDiff = MAX_LIST_TABLET_DIFF;
} else if (postInputTop) {
postInputDiff = MAX_LIST_DIFF;
}
return MAX_LIST_HEIGHT - postInputDiff - offset;
return MAX_LIST_HEIGHT - postInputDiff;
}, [maxHeightOverride, postInputTop, isTablet, dimensions.width]);
const wrapperStyles = useMemo(() => {
@ -131,8 +132,8 @@ const Autocomplete = ({
const containerStyles = useMemo(() => {
const s = [];
if (!isSearch && !fixedBottomPosition) {
const offset = isTablet ? -OFFSET_TABLET : 0;
s.push(style.base, {bottom: postInputTop + LIST_BOTTOM + offset});
const iOSInsets = Platform.OS === 'ios' && (!isTablet || rootId) ? insets.bottom : 0;
s.push(style.base, {bottom: postInputTop + LIST_BOTTOM + iOSInsets});
} else if (fixedBottomPosition) {
s.push(style.base, {bottom: 0});
}

6
app/constants/autocomplete.ts
View file

@ -1,8 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {Platform} from 'react-native';
export const AT_MENTION_REGEX = /\B(@([^@\r\n]*))$/i;
export const AT_MENTION_REGEX_GLOBAL = /\B(@([^@\r\n]*))/gi;
@ -19,12 +17,11 @@ export const ALL_SEARCH_FLAGS_REGEX = /\b\w+:/g;
export const CODE_REGEX = /(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)| *(`{3,}|~{3,})[ .]*(\S+)? *\n([\s\S]*?\s*)\3 *(?:\n+|$)/g;
export const LIST_BOTTOM = Platform.select({ios: 30, default: -5});
export const LIST_BOTTOM = -5;
export const MAX_LIST_HEIGHT = 280;
export const MAX_LIST_DIFF = 50;
export const MAX_LIST_TABLET_DIFF = 140;
export const OFFSET_TABLET = 35;
export default {
ALL_SEARCH_FLAGS_REGEX,
@ -38,5 +35,4 @@ export default {
LIST_BOTTOM,
MAX_LIST_HEIGHT,
MAX_LIST_DIFF,
OFFSET_TABLET,
};