verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Empty space logic

This commit is contained in:
Diego Mello 2023-05-30 18:10:46 -03:00
parent 1350116591
commit c130355a2e
11 changed files with 181 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
__tests__/containers/RoomHeader/__snapshots__/RoomHeader.stories.storyshot
View File

File diff suppressed because one or more lines are too long

6
__tests__/containers/RoomItem/__snapshots__/RoomItem.stories.storyshot
View File

File diff suppressed because one or more lines are too long

24
__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot
View File

File diff suppressed because one or more lines are too long

20
__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot
View File

File diff suppressed because one or more lines are too long

4
__tests__/views/DiscussionsView/__snapshots__/Item.stories.storyshot
View File

File diff suppressed because one or more lines are too long

6
__tests__/views/ThreadMessagesView/__snapshots__/Item.stories.storyshot
View File

File diff suppressed because one or more lines are too long

77
app/containers/markdown/AtMention.tsx
View File

@ -6,6 +6,8 @@ import { themes } from '../../lib/constants';
import styles from './styles';
import { events, logEvent } from '../../lib/methods/helpers/log';
import { IUserMention } from './interfaces';
import { isIOS } from '../../lib/methods/helpers';
import sharedStyles from '../../views/Styles';
interface IAtMention {
mention: string;
@ -20,27 +22,27 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
const { theme } = useTheme();
if (mention === 'all' || mention === 'here') {
return (
<View style={styles.mentionView}>
<Text>
<View>
<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text>
</View>
<View>
<Text
style={[
styles.mention,
{
color: themes[theme].pureWhite,
backgroundColor: themes[theme].mentionGroupColor
},
...style
]}
>
{` ${mention} `}
</Text>
</View>
</Text>
</View>
<Text style={[styles.plainText, styles.text]}>
<View style={{ marginBottom: isIOS ? -3 : 0 }}>
<Text
style={[
styles.plainText,
styles.text,
{
fontSize: 16,
...sharedStyles.textMedium,
borderRadius: 4,
overflow: 'hidden',
marginBottom: isIOS ? 0 : -5,
color: themes[theme].pureWhite,
backgroundColor: themes[theme].mentionGroupColor
}
]}
>
{` ${mention} `}
</Text>
</View>
</Text>
);
}
@ -73,18 +75,27 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
if (user) {
const m = useRealName && user.name ? user.name : user.username;
return (
<View style={styles.mentionView}>
<Text>
<View>
<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text>
</View>
<View>
<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}>
{` ${m} `}
</Text>
</View>
</Text>
</View>
<Text style={[styles.plainText, styles.text]}>
<View style={{ marginBottom: isIOS ? -3 : 0 }}>
<Text
style={[
styles.plainText,
styles.text,
{
fontSize: 16,
...sharedStyles.textMedium,
borderRadius: 4,
overflow: 'hidden',
marginBottom: isIOS ? 0 : -5
},
mentionStyle
]}
onPress={handlePress}
>
{` ${m} `}
</Text>
</View>
</Text>
);
}

46
app/containers/markdown/Hashtag.tsx
View File

@ -8,6 +8,8 @@ import styles from './styles';
import { getSubscriptionByRoomId } from '../../lib/database/services/Subscription';
import { useAppSelector } from '../../lib/hooks';
import { goRoom } from '../../lib/methods/helpers/goRoom';
import sharedStyles from '../../views/Styles';
import { isIOS } from '../../lib/methods/helpers';
interface IHashtag {
hashtag: string;
@ -38,28 +40,28 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
return (
<View style={styles.mentionView}>
<Text>
<View>
<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text>
</View>
<View>
<Text
style={[
styles.mention,
{
color: themes[theme].mentionOthersColor,
backgroundColor: themes[theme].mentionOthersBackground
},
...style
]}
onPress={handlePress}
>
{` ${hashtag} `}
</Text>
</View>
</Text>
</View>
<Text style={[styles.plainText, styles.text]}>
<View style={{ marginBottom: isIOS ? -3 : 0 }}>
<Text
style={[
styles.plainText,
styles.text,
{
fontSize: 16,
...sharedStyles.textMedium,
borderRadius: 4,
overflow: 'hidden',
marginBottom: isIOS ? 0 : -5,
color: themes[theme].mentionOthersColor,
backgroundColor: themes[theme].mentionOthersBackground
}
]}
onPress={handlePress}
>
{` #${hashtag} `}
</Text>
</View>
</Text>
);
}
return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;

70
app/containers/markdown/new/NewMarkdown.stories.tsx
View File

@ -141,7 +141,9 @@ const allMentionTokens = [
}
];
const multipleMentionTokens = [
const shortText = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';
const startingWithMention = [
{
type: 'PARAGRAPH',
value: [
@ -149,12 +151,12 @@ const multipleMentionTokens = [
type: 'MENTION_USER',
value: {
type: 'PLAIN_TEXT',
value: 'name'
value: 'all'
}
},
{
type: 'PLAIN_TEXT',
value: ' '
value: ` ${shortText} `
},
{
type: 'MENTION_USER',
@ -165,40 +167,52 @@ const multipleMentionTokens = [
},
{
type: 'PLAIN_TEXT',
value: ' '
value: ` ${shortText} `
},
{
type: 'MENTION_USER',
value: {
type: 'PLAIN_TEXT',
value: 'not_a_user'
value: 'name'
}
},
{
type: 'PLAIN_TEXT',
value: ' '
value: ` ${shortText} `
},
{
type: 'MENTION_USER',
type: 'MENTION_CHANNEL',
value: {
type: 'PLAIN_TEXT',
value: 'here'
value: 'text_channel'
}
},
{
type: 'PLAIN_TEXT',
value: ' '
value: ` ${shortText} `
},
{
type: 'MENTION_USER',
type: 'MENTION_CHANNEL',
value: {
type: 'PLAIN_TEXT',
value: 'all'
value: 'not_a_channel'
}
}
]
}
];
const startingWithoutMention = [
{
type: 'PARAGRAPH',
value: [
{
type: 'PLAIN_TEXT',
value: `${shortText} `
},
...startingWithMention[0].value.slice(2, startingWithMention[0].value.length)
]
}
];
const allMentions = [
{
@ -229,10 +243,42 @@ const multipleMentions = [
export const Mentions = () => (
<View style={styles.container}>
<NewMarkdown tokens={allMentionTokens} mentions={allMentions} navToRoomInfo={() => {}} style={[]} />
<NewMarkdown tokens={multipleMentionTokens} mentions={multipleMentions} navToRoomInfo={() => {}} style={[]} />
<NewMarkdown
tokens={startingWithMention}
mentions={multipleMentions}
channels={channelMention}
navToRoomInfo={() => {}}
style={[]}
/>
<NewMarkdown
tokens={startingWithoutMention}
mentions={multipleMentions}
channels={channelMention}
navToRoomInfo={() => {}}
style={[]}
/>
</View>
);
// export const Mentions = () => (
// <View style={styles.container}>
// <Text style={{ lineHeight: 24, fontSize: 16, fontFamily: 'Inter', fontWeight: '400' }}>
// <AtMention mention='all' />
// <Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
// <AtMention mention='all' />
// <Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
// <AtMention mention='all' />
// <Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
// <AtMention mention='all' />
// <Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
// <AtMention mention='all' />
// <Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
// <AtMention mention='all' />
// <Text> asd as das dasd asd asd asd asd asd asd ads adas </Text>
// </Text>
// </View>
// );
const channelTokens = [
{
type: 'PARAGRAPH',

6
app/containers/markdown/new/Paragraph.tsx
View File

@ -13,7 +13,12 @@ interface IParagraphProps {
const Paragraph = ({ value }: IParagraphProps) => {
let forceTrim = false;
let prependSpace = false;
const { theme } = useTheme();
// if starts with mention
if (value?.[0]?.type === 'MENTION_CHANNEL' || value?.[0]?.type === 'MENTION_USER') {
prependSpace = true;
}
if (
value?.[0]?.type === 'LINK' &&
// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
@ -33,6 +38,7 @@ const Paragraph = ({ value }: IParagraphProps) => {
}
return (
<Text style={[styles.text, { color: themes[theme].bodyText }]}>
{prependSpace ? ' ' : ''}
<Inline value={value} forceTrim={forceTrim} />
</Text>
);

16
app/containers/markdown/styles.ts
View File

@ -37,6 +37,7 @@ export default StyleSheet.create({
lineHeight: 24
},
text: {
lineHeight: 24,
fontSize: 16,
...sharedStyles.textRegular
},
@ -58,13 +59,24 @@ export default StyleSheet.create({
height: 30
},
temp: { opacity: 0.3 },
mentionView: { height: 20, marginBottom: isIOS ? -2 : -4 },
mentionView: {
height: 24,
marginBottom: isIOS ? -8 : -8,
backgroundColor: 'green'
},
mention: {
fontSize: 16,
...sharedStyles.textMedium,
borderRadius: 4,
overflow: 'hidden',
marginBottom: -4
// marginBottom: -4,
lineHeight: 24
},
mentionSymbol: {
lineHeight: 20,
marginBottom: isIOS ? 0 : -2,
backgroundColor: 'yellow',
overflow: 'hidden'
},
paragraph: {
marginTop: 0,