77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
import { ScrollView, BorderlessButton } from 'react-native-gesture-handler';
|
|
import Modal from 'react-native-modal';
|
|
|
|
import Markdown from '../../containers/markdown';
|
|
|
|
import { CustomIcon } from '../../lib/Icons';
|
|
import { themes } from '../../constants/colors';
|
|
import styles from './styles';
|
|
|
|
const Banner = React.memo(({
|
|
text, title, theme, bannerClosed, closeBanner
|
|
}) => {
|
|
const [showModal, openModal] = useState(false);
|
|
|
|
const toggleModal = () => openModal(prevState => !prevState);
|
|
|
|
if (text && !bannerClosed) {
|
|
return (
|
|
<>
|
|
<BorderlessButton
|
|
style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]}
|
|
testID='room-view-banner'
|
|
onPress={toggleModal}
|
|
>
|
|
<Markdown
|
|
msg={text}
|
|
theme={theme}
|
|
numberOfLines={1}
|
|
style={[styles.bannerText]}
|
|
preview
|
|
/>
|
|
<BorderlessButton onPress={closeBanner}>
|
|
<CustomIcon
|
|
color={themes[theme].auxiliaryText}
|
|
name='close'
|
|
size={20}
|
|
/>
|
|
</BorderlessButton>
|
|
</BorderlessButton>
|
|
<Modal
|
|
onBackdropPress={toggleModal}
|
|
onBackButtonPress={toggleModal}
|
|
useNativeDriver
|
|
isVisible={showModal}
|
|
animationIn='fadeIn'
|
|
animationOut='fadeOut'
|
|
>
|
|
<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
|
|
<Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text>
|
|
<ScrollView style={styles.modalScrollView}>
|
|
<Markdown
|
|
msg={text}
|
|
theme={theme}
|
|
/>
|
|
</ScrollView>
|
|
</View>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}, (prevProps, nextProps) => 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;
|