chore: start the RoomView migrate to typescript

This commit is contained in:
AlexAlexandre 2021-12-01 23:24:51 -03:00
parent 010d88530c
commit 161e667678
3 changed files with 19 additions and 18 deletions

View File

@ -1,6 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import PropTypes from 'prop-types';
import { BorderlessButton, ScrollView } from 'react-native-gesture-handler'; import { BorderlessButton, ScrollView } from 'react-native-gesture-handler';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
@ -9,8 +8,16 @@ import { CustomIcon } from '../../lib/Icons';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import styles from './styles'; import styles from './styles';
interface IRoomBannerProps {
text: string;
title: string;
theme: string;
bannerClosed: boolean;
closeBanner(): void;
}
const Banner = React.memo( const Banner = React.memo(
({ text, title, theme, bannerClosed, closeBanner }) => { ({ text, title, theme, bannerClosed, closeBanner }: IRoomBannerProps) => {
const [showModal, openModal] = useState(false); const [showModal, openModal] = useState(false);
const toggleModal = () => openModal(prevState => !prevState); const toggleModal = () => openModal(prevState => !prevState);
@ -22,6 +29,7 @@ const Banner = React.memo(
style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]} style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]}
testID='room-view-banner' testID='room-view-banner'
onPress={toggleModal}> onPress={toggleModal}>
{/* @ts-ignore*/}
<Markdown msg={text} theme={theme} numberOfLines={1} style={[styles.bannerText]} preview /> <Markdown msg={text} theme={theme} numberOfLines={1} style={[styles.bannerText]} preview />
<BorderlessButton onPress={closeBanner}> <BorderlessButton onPress={closeBanner}>
<CustomIcon color={themes[theme].auxiliaryText} name='close' size={20} /> <CustomIcon color={themes[theme].auxiliaryText} name='close' size={20} />
@ -37,6 +45,7 @@ const Banner = React.memo(
<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}> <View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
<Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text> <Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text>
<ScrollView style={styles.modalScrollView}> <ScrollView style={styles.modalScrollView}>
{/* @ts-ignore*/}
<Markdown msg={text} theme={theme} /> <Markdown msg={text} theme={theme} />
</ScrollView> </ScrollView>
</View> </View>
@ -51,12 +60,4 @@ const Banner = React.memo(
prevProps.text === nextProps.text && prevProps.theme === nextProps.theme && prevProps.bannerClosed === nextProps.bannerClosed prevProps.text === nextProps.text && prevProps.theme === nextProps.theme && prevProps.bannerClosed === nextProps.bannerClosed
); );
Banner.propTypes = {
text: PropTypes.string,
title: PropTypes.string,
theme: PropTypes.string,
bannerClosed: PropTypes.bool,
closeBanner: PropTypes.func
};
export default Banner; export default Banner;

View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { ImageBackground, StyleSheet } from 'react-native'; import { ImageBackground, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
image: { image: {
@ -10,17 +9,18 @@ const styles = StyleSheet.create({
} }
}); });
const EmptyRoom = React.memo(({ length, mounted, theme, rid }) => { interface IEmptyRoomProps {
length: number;
mounted: boolean;
theme: string;
rid: string;
}
const EmptyRoom = React.memo(({ length, mounted, theme, rid }: IEmptyRoomProps) => {
if ((length === 0 && mounted) || !rid) { if ((length === 0 && mounted) || !rid) {
return <ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />; return <ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />;
} }
return null; return null;
}); });
EmptyRoom.propTypes = {
length: PropTypes.number.isRequired,
mounted: PropTypes.bool,
theme: PropTypes.string,
rid: PropTypes.string
};
export default EmptyRoom; export default EmptyRoom;