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

refactor blur component

This commit is contained in:
Reinaldo Neto 2023-05-15 19:53:29 -03:00
parent 991cdf1476
commit 389057aa2c
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/containers/message/Components/BlurComponent.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { BlurView } from '@react-native-community/blur';
import { View } from 'react-native';
import styles from '../styles';
import RCActivityIndicator from '../../ActivityIndicator';
import { CustomIcon } from '../../CustomIcon';
import { useTheme } from '../../../theme';
const BlurComponent = ({ loading = false }: { loading: boolean }) => {
const { theme, colors } = useTheme();
return (
<>
<BlurView
style={[styles.image, { position: 'absolute', borderWidth: 0, top: 0, left: 0, bottom: 0, right: 0 }]}
blurType={theme === 'light' ? 'light' : 'dark'}
blurAmount={10}
reducedTransparencyFallbackColor='white'
/>
<View style={[styles.image, { position: 'absolute', justifyContent: 'center', alignItems: 'center', borderWidth: 0 }]}>
{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name='arrow-down-circle' size={54} />}
</View>
</>
);
};
export default BlurComponent;

22
app/containers/message/Image.tsx
View File

@ -4,7 +4,6 @@ import FastImage from 'react-native-fast-image';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import { createImageProgress } from 'react-native-image-progress'; import { createImageProgress } from 'react-native-image-progress';
import * as Progress from 'react-native-progress'; import * as Progress from 'react-native-progress';
import { BlurView } from '@react-native-community/blur';
import * as FileSystem from 'expo-file-system'; import * as FileSystem from 'expo-file-system';
import Touchable from './Touchable'; import Touchable from './Touchable';
@ -16,10 +15,9 @@ import { TGetCustomEmoji } from '../../definitions/IEmoji';
import { IAttachment, IUserMessage } from '../../definitions'; import { IAttachment, IUserMessage } from '../../definitions';
import { TSupportedThemes, useTheme } from '../../theme'; import { TSupportedThemes, useTheme } from '../../theme';
import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl'; import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
import { CustomIcon } from '../CustomIcon';
import RCActivityIndicator from '../ActivityIndicator';
import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload'; import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload';
import { isAutoDownloadEnabled } from './helpers/mediaDownload/autoDownloadPreference'; import { isAutoDownloadEnabled } from './helpers/mediaDownload/autoDownloadPreference';
import BlurComponent from './Components/BlurComponent';
interface IMessageButton { interface IMessageButton {
children: React.ReactElement; children: React.ReactElement;
@ -73,24 +71,6 @@ export const MessageImage = React.memo(
} }
); );
const BlurComponent = ({ loading = false }: { loading: boolean }) => {
const { theme, colors } = useTheme();
return (
<>
<BlurView
style={[styles.image, { position: 'absolute', borderWidth: 0, top: 0, left: 0, bottom: 0, right: 0 }]}
blurType={theme === 'light' ? 'light' : 'dark'}
blurAmount={10}
reducedTransparencyFallbackColor='white'
/>
<View style={[styles.image, { position: 'absolute', justifyContent: 'center', alignItems: 'center', borderWidth: 0 }]}>
{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name='arrow-down-circle' size={54} />}
</View>
</>
);
};
const ImageContainer = React.memo( const ImageContainer = React.memo(
({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author, messageId }: IMessageImage) => { ({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author, messageId }: IMessageImage) => {
const [toDownload, setToDownload] = useState(true); const [toDownload, setToDownload] = useState(true);