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 styles from './styles';
import { events, logEvent } from '../../lib/methods/helpers/log'; import { events, logEvent } from '../../lib/methods/helpers/log';
import { IUserMention } from './interfaces'; import { IUserMention } from './interfaces';
import { isIOS } from '../../lib/methods/helpers';
import sharedStyles from '../../views/Styles';
interface IAtMention { interface IAtMention {
mention: string; mention: string;
@ -20,27 +22,27 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
const { theme } = useTheme(); const { theme } = useTheme();
if (mention === 'all' || mention === 'here') { if (mention === 'all' || mention === 'here') {
return ( return (
<View style={styles.mentionView}> <Text style={[styles.plainText, styles.text]}>
<Text> <View style={{ marginBottom: isIOS ? -3 : 0 }}>
<View> <Text
<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text> style={[
</View> styles.plainText,
<View> styles.text,
<Text {
style={[ fontSize: 16,
styles.mention, ...sharedStyles.textMedium,
{ borderRadius: 4,
color: themes[theme].pureWhite, overflow: 'hidden',
backgroundColor: themes[theme].mentionGroupColor marginBottom: isIOS ? 0 : -5,
}, color: themes[theme].pureWhite,
...style backgroundColor: themes[theme].mentionGroupColor
]} }
> ]}
{` ${mention} `} >
</Text> {` ${mention} `}
</View> </Text>
</Text> </View>
</View> </Text>
); );
} }
@ -73,18 +75,27 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
if (user) { if (user) {
const m = useRealName && user.name ? user.name : user.username; const m = useRealName && user.name ? user.name : user.username;
return ( return (
<View style={styles.mentionView}> <Text style={[styles.plainText, styles.text]}>
<Text> <View style={{ marginBottom: isIOS ? -3 : 0 }}>
<View> <Text
<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text> style={[
</View> styles.plainText,
<View> styles.text,
<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}> {
{` ${m} `} fontSize: 16,
</Text> ...sharedStyles.textMedium,
</View> borderRadius: 4,
</Text> overflow: 'hidden',
</View> 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 { getSubscriptionByRoomId } from '../../lib/database/services/Subscription';
import { useAppSelector } from '../../lib/hooks'; import { useAppSelector } from '../../lib/hooks';
import { goRoom } from '../../lib/methods/helpers/goRoom'; import { goRoom } from '../../lib/methods/helpers/goRoom';
import sharedStyles from '../../views/Styles';
import { isIOS } from '../../lib/methods/helpers';
interface IHashtag { interface IHashtag {
hashtag: string; 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) { if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
return ( return (
<View style={styles.mentionView}> <Text style={[styles.plainText, styles.text]}>
<Text> <View style={{ marginBottom: isIOS ? -3 : 0 }}>
<View> <Text
<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText, marginBottom: -4 }]}>@</Text> style={[
</View> styles.plainText,
<View> styles.text,
<Text {
style={[ fontSize: 16,
styles.mention, ...sharedStyles.textMedium,
{ borderRadius: 4,
color: themes[theme].mentionOthersColor, overflow: 'hidden',
backgroundColor: themes[theme].mentionOthersBackground marginBottom: isIOS ? 0 : -5,
}, color: themes[theme].mentionOthersColor,
...style backgroundColor: themes[theme].mentionOthersBackground
]} }
onPress={handlePress} ]}
> onPress={handlePress}
{` ${hashtag} `} >
</Text> {` #${hashtag} `}
</View> </Text>
</Text> </View>
</View> </Text>
); );
} }
return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</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', type: 'PARAGRAPH',
value: [ value: [
@ -149,12 +151,12 @@ const multipleMentionTokens = [
type: 'MENTION_USER', type: 'MENTION_USER',
value: { value: {
type: 'PLAIN_TEXT', type: 'PLAIN_TEXT',
value: 'name' value: 'all'
} }
}, },
{ {
type: 'PLAIN_TEXT', type: 'PLAIN_TEXT',
value: ' ' value: ` ${shortText} `
}, },
{ {
type: 'MENTION_USER', type: 'MENTION_USER',
@ -165,40 +167,52 @@ const multipleMentionTokens = [
}, },
{ {
type: 'PLAIN_TEXT', type: 'PLAIN_TEXT',
value: ' ' value: ` ${shortText} `
}, },
{ {
type: 'MENTION_USER', type: 'MENTION_USER',
value: { value: {
type: 'PLAIN_TEXT', type: 'PLAIN_TEXT',
value: 'not_a_user' value: 'name'
} }
}, },
{ {
type: 'PLAIN_TEXT', type: 'PLAIN_TEXT',
value: ' ' value: ` ${shortText} `
}, },
{ {
type: 'MENTION_USER', type: 'MENTION_CHANNEL',
value: { value: {
type: 'PLAIN_TEXT', type: 'PLAIN_TEXT',
value: 'here' value: 'text_channel'
} }
}, },
{ {
type: 'PLAIN_TEXT', type: 'PLAIN_TEXT',
value: ' ' value: ` ${shortText} `
}, },
{ {
type: 'MENTION_USER', type: 'MENTION_CHANNEL',
value: { value: {
type: 'PLAIN_TEXT', 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 = [ const allMentions = [
{ {
@ -229,10 +243,42 @@ const multipleMentions = [
export const Mentions = () => ( export const Mentions = () => (
<View style={styles.container}> <View style={styles.container}>
<NewMarkdown tokens={allMentionTokens} mentions={allMentions} navToRoomInfo={() => {}} style={[]} /> <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> </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 = [ const channelTokens = [
{ {
type: 'PARAGRAPH', type: 'PARAGRAPH',

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

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

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

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