chore: start the RoomView migrate to typescript
This commit is contained in:
parent
010d88530c
commit
161e667678
|
@ -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;
|
|
@ -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;
|
Loading…
Reference in New Issue