verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor tweak, pass hasContent and imageLoadedState instead of style

This commit is contained in:
Reinaldo Neto 2023-03-06 22:38:00 -03:00
parent 249a056b7d
commit 0c14716815
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/containers/message/__snapshots__/Message.stories.storyshot
View File

File diff suppressed because one or more lines are too long

21
app/containers/message/Urls.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import { StyleProp, StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard'; import Clipboard from '@react-native-clipboard/clipboard';
import FastImage, { ImageStyle } from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import Touchable from './Touchable'; import Touchable from './Touchable';
@ -56,7 +56,7 @@ const styles = StyleSheet.create({
zIndex: 2, zIndex: 2,
position: 'absolute' position: 'absolute'
}, },
loadingState: { loading: {
height: 0, height: 0,
borderWidth: 0 borderWidth: 0
} }
@ -66,11 +66,13 @@ const UrlImage = React.memo(
({ ({
image, image,
setImageLoadedState, setImageLoadedState,
style hasContent,
imageLoadedState
}: { }: {
image: string; image: string;
setImageLoadedState(value: TImageLoadedState): void; setImageLoadedState(value: TImageLoadedState): void;
style: StyleProp<ImageStyle>; hasContent: boolean;
imageLoadedState: TImageLoadedState;
}) => { }) => {
const { baseUrl, user } = useContext(MessageContext); const { baseUrl, user } = useContext(MessageContext);
@ -84,7 +86,7 @@ const UrlImage = React.memo(
<> <>
<FastImage <FastImage
source={{ uri: image }} source={{ uri: image }}
style={[styles.image, style]} style={[styles.image, !hasContent && styles.imageWithoutContent, imageLoadedState === 'loading' && styles.loading]}
resizeMode={FastImage.resizeMode.cover} resizeMode={FastImage.resizeMode.cover}
onError={() => setImageLoadedState('error')} onError={() => setImageLoadedState('error')}
onLoad={() => setImageLoadedState('done')} onLoad={() => setImageLoadedState('done')}
@ -92,7 +94,7 @@ const UrlImage = React.memo(
</> </>
); );
}, },
(prevProps, nextProps) => prevProps.image === nextProps.image && dequal(prevProps.style, nextProps.style) (prevProps, nextProps) => prevProps.image === nextProps.image && prevProps.imageLoadedState === nextProps.imageLoadedState
); );
const UrlContent = React.memo( const UrlContent = React.memo(
@ -154,7 +156,7 @@ const Url = React.memo(
backgroundColor: themes[theme].chatComponentBackground, backgroundColor: themes[theme].chatComponentBackground,
borderColor: themes[theme].borderColor borderColor: themes[theme].borderColor
}, },
imageLoadedState === 'loading' && styles.loadingState imageLoadedState === 'loading' && styles.loading
]} ]}
background={Touchable.Ripple(themes[theme].bannerBackground)} background={Touchable.Ripple(themes[theme].bannerBackground)}
> >
@ -162,7 +164,8 @@ const Url = React.memo(
<UrlImage <UrlImage
setImageLoadedState={setImageLoadedState} setImageLoadedState={setImageLoadedState}
image={url.image || url.url} image={url.image || url.url}
style={[!hasContent && styles.imageWithoutContent, imageLoadedState === 'loading' && styles.loadingState]} hasContent={!!hasContent}
imageLoadedState={imageLoadedState}
/> />
{hasContent ? <UrlContent title={url.title} description={url.description} theme={theme} /> : null} {hasContent ? <UrlContent title={url.title} description={url.description} theme={theme} /> : null}
</> </>