minor tweak
This commit is contained in:
parent
9cb719658c
commit
cad724f36a
|
@ -4,7 +4,7 @@ import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useR
|
||||||
import { Keyboard } from 'react-native';
|
import { Keyboard } from 'react-native';
|
||||||
import { Easing } from 'react-native-reanimated';
|
import { Easing } from 'react-native-reanimated';
|
||||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
|
import BottomSheet, { BottomSheetBackdrop, BottomSheetProps } from '@gorhom/bottom-sheet';
|
||||||
|
|
||||||
import { useDimensions, useOrientation } from '../../dimensions';
|
import { useDimensions, useOrientation } from '../../dimensions';
|
||||||
import { useTheme } from '../../theme';
|
import { useTheme } from '../../theme';
|
||||||
|
@ -125,9 +125,11 @@ const ActionSheet = React.memo(
|
||||||
// when is android tablet and the input text is focused
|
// when is android tablet and the input text is focused
|
||||||
const androidTablet: any = isTablet && isLandscape && !isIOS ? { android_keyboardInputMode: 'adjustResize' } : {};
|
const androidTablet: any = isTablet && isLandscape && !isIOS ? { android_keyboardInputMode: 'adjustResize' } : {};
|
||||||
|
|
||||||
const handleOnChange = (index: number) => {
|
const handleOnChange: BottomSheetProps['onChange'] = index => {
|
||||||
onChange(index);
|
onChange(index);
|
||||||
index === -1 && onClose();
|
if (index === -1) {
|
||||||
|
return onClose();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -27,13 +27,13 @@ export type TActionSheetOptions = {
|
||||||
export interface IActionSheetProvider {
|
export interface IActionSheetProvider {
|
||||||
showActionSheet: (item: TActionSheetOptions) => void;
|
showActionSheet: (item: TActionSheetOptions) => void;
|
||||||
hideActionSheet: () => void;
|
hideActionSheet: () => void;
|
||||||
indexPosition: number;
|
actionSheetSnapIndex: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const context = React.createContext<IActionSheetProvider>({
|
const context = React.createContext<IActionSheetProvider>({
|
||||||
showActionSheet: () => {},
|
showActionSheet: () => {},
|
||||||
hideActionSheet: () => {},
|
hideActionSheet: () => {},
|
||||||
indexPosition: -1
|
actionSheetSnapIndex: -1
|
||||||
});
|
});
|
||||||
|
|
||||||
export const useActionSheet = () => useContext(context);
|
export const useActionSheet = () => useContext(context);
|
||||||
|
@ -50,10 +50,10 @@ export const withActionSheet = (Component: React.ComponentType<any>): typeof Com
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ActionSheetProvider = React.memo(({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
|
export const ActionSheetProvider = React.memo(({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
|
||||||
const [indexPosition, setIndexPosition] = useState(-1);
|
const [actionSheetSnapIndex, setActionSheetSnapIndex] = useState(-1);
|
||||||
const ref: ForwardedRef<IActionSheetProvider> = useRef(null);
|
const ref: ForwardedRef<IActionSheetProvider> = useRef(null);
|
||||||
|
|
||||||
const onChange = (index: number) => setIndexPosition(index);
|
const onChange = (index: number) => setActionSheetSnapIndex(index);
|
||||||
|
|
||||||
const getContext = () => ({
|
const getContext = () => ({
|
||||||
showActionSheet: (options: TActionSheetOptions) => {
|
showActionSheet: (options: TActionSheetOptions) => {
|
||||||
|
@ -62,7 +62,7 @@ export const ActionSheetProvider = React.memo(({ children }: { children: React.R
|
||||||
hideActionSheet: () => {
|
hideActionSheet: () => {
|
||||||
ref.current?.hideActionSheet();
|
ref.current?.hideActionSheet();
|
||||||
},
|
},
|
||||||
indexPosition
|
actionSheetSnapIndex
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -66,13 +66,13 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
|
||||||
const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): React.ReactElement => {
|
const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): React.ReactElement => {
|
||||||
const { height } = useWindowDimensions();
|
const { height } = useWindowDimensions();
|
||||||
const paddingBottom = calculatePadding(height);
|
const paddingBottom = calculatePadding(height);
|
||||||
const { indexPosition } = useActionSheet();
|
const { actionSheetSnapIndex } = useActionSheet();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.allTabContainer} testID='reactionsListAllTab'>
|
<View style={styles.allTabContainer} testID='reactionsListAllTab'>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={reactions}
|
data={reactions}
|
||||||
contentContainerStyle={[styles.listContainer, indexPosition === 0 && { paddingBottom }]}
|
contentContainerStyle={[styles.listContainer, actionSheetSnapIndex === 0 && { paddingBottom }]}
|
||||||
renderItem={({ item }) => <AllReactionsListItem item={item} getCustomEmoji={getCustomEmoji} />}
|
renderItem={({ item }) => <AllReactionsListItem item={item} getCustomEmoji={getCustomEmoji} />}
|
||||||
keyExtractor={item => item.emoji}
|
keyExtractor={item => item.emoji}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -12,7 +12,7 @@ import { calculatePadding } from './calculatePadding';
|
||||||
const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement => {
|
const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement => {
|
||||||
const { colors } = useTheme();
|
const { colors } = useTheme();
|
||||||
const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);
|
const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);
|
||||||
const { indexPosition } = useActionSheet();
|
const { actionSheetSnapIndex } = useActionSheet();
|
||||||
const { height } = useWindowDimensions();
|
const { height } = useWindowDimensions();
|
||||||
const paddingBottom = calculatePadding(height);
|
const paddingBottom = calculatePadding(height);
|
||||||
|
|
||||||
|
@ -25,7 +25,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
|
||||||
return (
|
return (
|
||||||
<FlatList
|
<FlatList
|
||||||
data={users}
|
data={users}
|
||||||
contentContainerStyle={[styles.listContainer, indexPosition === 0 && { paddingBottom }]}
|
contentContainerStyle={[styles.listContainer, actionSheetSnapIndex === 0 && { paddingBottom }]}
|
||||||
ListHeaderComponent={
|
ListHeaderComponent={
|
||||||
<View style={styles.emojiNameContainer}>
|
<View style={styles.emojiNameContainer}>
|
||||||
<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'>
|
<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'>
|
||||||
|
|
Loading…
Reference in New Issue