Compare commits

..

4 Commits

Author SHA1 Message Date
Gleidson Daniel Silva 4dfc9c70f3
[FIX] Keyboard not showing all emojis or showing cut emojis (#4919)
* fix the logic based on window width and make the keyboard dynamic

* fix var naming and math

* fix alignment of emojis

* add comment

* wip
2023-03-09 17:17:20 -03:00
Piyush Gupta 513e8ee636
[FIX] Increase border radius on MessageAvatar as small (#4837)
* fixed border radius of 4 on avatar

* fixed lint

* Update tests

---------

Co-authored-by: Diego Mello <diegolmello@gmail.com>
2023-03-08 15:34:39 -03:00
Mister-H aa57237004
[FIX] Order of quoted message done according to desktop version (#4739)
Co-authored-by: Diego Mello <diegolmello@gmail.com>
2023-03-08 11:20:01 -03:00
Diego Mello 58391964cb
[FIX] Message not rendering E2EE data if md exists (#4951) 2023-03-07 10:57:57 -03:00
8 changed files with 44 additions and 34 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,34 +1,31 @@
import React from 'react';
import { useWindowDimensions } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { EMOJI_BUTTON_SIZE } from './styles';
import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
import { IEmoji } from '../../definitions/IEmoji';
import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
import { PressableEmoji } from './PressableEmoji';
import { EMOJI_BUTTON_SIZE } from './styles';
interface IEmojiCategoryProps {
emojis: IEmoji[];
onEmojiSelected: (emoji: IEmoji) => void;
tabLabel?: string; // needed for react-native-scrollable-tab-view only
parentWidth: number;
}
const EmojiCategory = ({ onEmojiSelected, emojis }: IEmojiCategoryProps): React.ReactElement | null => {
const { width } = useWindowDimensions();
const numColumns = Math.trunc(width / EMOJI_BUTTON_SIZE);
const marginHorizontal = (width % EMOJI_BUTTON_SIZE) / 2;
const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
if (!width) {
const EmojiCategory = ({ onEmojiSelected, emojis, parentWidth }: IEmojiCategoryProps): React.ReactElement | null => {
if (!parentWidth) {
return null;
}
const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE);
const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2;
const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
return (
<FlatList
// needed to update the numColumns when the width changes
key={`emoji-category-${width}`}
key={`emoji-category-${parentWidth}`}
keyExtractor={item => (typeof item === 'string' ? item : item.name)}
data={emojis}
renderItem={renderItem}

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { View } from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
@ -20,6 +20,8 @@ const EmojiPicker = ({
searchedEmojis = []
}: IEmojiPickerProps): React.ReactElement | null => {
const { colors } = useTheme();
const [parentWidth, setParentWidth] = useState(0);
const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
const allCustomEmojis: ICustomEmojis = useAppSelector(
@ -50,7 +52,14 @@ const EmojiPicker = ({
if (!emojis.length) {
return null;
}
return <EmojiCategory emojis={emojis} onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} tabLabel={label} />;
return (
<EmojiCategory
parentWidth={parentWidth}
emojis={emojis}
onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
tabLabel={label}
/>
);
};
if (!loaded) {
@ -58,9 +67,13 @@ const EmojiPicker = ({
}
return (
<View style={styles.emojiPickerContainer}>
<View style={styles.emojiPickerContainer} onLayout={e => setParentWidth(e.nativeEvent.layout.width)}>
{searching ? (
<EmojiCategory emojis={searchedEmojis} onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} />
<EmojiCategory
emojis={searchedEmojis}
onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
parentWidth={parentWidth}
/>
) : (
<ScrollableTabView
renderTabBar={() => <TabBar />}

View File

@ -53,7 +53,7 @@ const Content = React.memo(
content = (
<Markdown
msg={props.msg}
md={props.md}
md={props.type !== 'e2e' ? props.md : undefined}
getCustomEmoji={props.getCustomEmoji}
enableMessageParser={user.enableMessageParserEarlyAdoption}
username={user.username}

View File

@ -18,7 +18,7 @@ const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomIn
style={small ? styles.avatarSmall : styles.avatar}
text={avatar ? '' : author.username}
size={small ? 20 : 36}
borderRadius={small ? 2 : 4}
borderRadius={4}
onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
getCustomEmoji={getCustomEmoji}
avatar={avatar}

View File

@ -247,6 +247,8 @@ const Reply = React.memo(
>
<View style={styles.attachmentContainer}>
<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
<UrlImage image={attachment.thumb_url} />
<Attachments
attachments={attachment.attachments}
getCustomEmoji={getCustomEmoji}
@ -255,8 +257,6 @@ const Reply = React.memo(
isReply
id={messageId}
/>
<UrlImage image={attachment.thumb_url} />
<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
<Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
{loading ? (
<View style={[styles.backdrop]}>

View File

@ -124,7 +124,7 @@
"react-native-reanimated": "2.8.0",
"react-native-restart": "0.0.22",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "3.20.0",
"react-native-screens": "3.13.1",
"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
"react-native-send-intent": "^1.3.0",
"react-native-simple-crypto": "RocketChat/react-native-simple-crypto#0.5.1",

View File

@ -17557,10 +17557,10 @@ react-native-safe-area-context@3.2.0:
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz#06113c6b208f982d68ab5c3cebd199ca93db6941"
integrity sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA==
react-native-screens@3.20.0:
version "3.20.0"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.20.0.tgz#4d154177395e5541387d9a05bc2e12e54d2fb5b1"
integrity sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg==
react-native-screens@3.13.1:
version "3.13.1"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.13.1.tgz#b3b1c5788dca25a71668909f66d87fb35c5c5241"
integrity sha512-xcrnuUs0qUrGpc2gOTDY4VgHHADQwp80mwR1prU/Q0JqbZN5W3koLhuOsT6FkSRKjR5t40l+4LcjhHdpqRB2HA==
dependencies:
react-freeze "^1.0.0"
warn-once "^0.1.0"