import React from 'react'; import PropTypes from 'prop-types'; import { StyleSheet, ActivityIndicator, Text, ScrollView, View } from 'react-native'; import { AntDesign } from '@expo/vector-icons'; import Page from 'src/components/Page/Page'; import Button from 'src/components/Button/Button'; import theme from 'src/common/theme'; import device from 'src/utils/device'; const Message = ({ icon, iconStyle, style, title, description, component, loading, error, errorMessage, center, ctas = [], }) => ( <Page style={[ styles.page, error && styles.coverError, style, ]} > {/** loading indicator */} {loading && ( <ActivityIndicator size="large" color={theme.palette.white} /> )} {/** error icon */} {error && ( <AntDesign name="frowno" size={52} color={theme.palette.white} /> )} {/** custom icon */} {icon && typeof icon === 'string' && <Text style={[styles.iconStyle, iconStyle]}>{icon}</Text>} {icon && typeof icon !== 'string' && <View style={[styles.iconStyle, iconStyle]}>{icon}</View>} {/** page title */} {title && ( <Text style={[ styles.text, styles.width, styles.title, ]} > {title} </Text> )} {/** page description */} {description && ( <Text style={[ styles.text, styles.width, styles.description, center && styles.center, ]} > {description} </Text> )} {/** print error message */} {errorMessage && ( <ScrollView style={[ styles.width, styles.error ]}> <Text textBreakStrategy="simple" style={styles.errorText}> {errorMessage} </Text> </ScrollView> )} {/** render any component for description */} {!!component && ( <View style={[ styles.text, styles.width]}> {component} </View> )} {/** render cta's */} {ctas.length > 0 && ctas.filter(Boolean).map(cta => ( <Button key={cta.id} style={[ styles.width, cta.style ]} text={cta.text} textStyle={cta.textStyle} onPress={cta.onPress} color={cta.color} iconRight={cta.iconRight} /> ))} </Page> ); Message.propTypes = { icon: PropTypes.any, iconStyle: PropTypes.object, style: PropTypes.object, loading: PropTypes.bool, title: PropTypes.string, description: PropTypes.string, errorMessage: PropTypes.string, component: PropTypes.any, ctas: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string, title: PropTypes.string, iconRight: PropTypes.any, style: PropTypes.object, textStyle: PropTypes.object, color: PropTypes.string, onPress: PropTypes.func, })) }; const styles = StyleSheet.create({ page: { flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', backgroundColor: theme.bg.body, }, coverError: { backgroundColor: theme.palette.red, }, center: { textAlign: 'center', }, width: device({ web: { width: '60%' }, mobile: { width: '80%' } }), text: { color: theme.palette.white, textAlign: 'center', }, iconStyle: { fontSize: 48, fontWeight: '700', color: theme.palette.white, }, title: { fontSize: 24, fontWeight: '700', marginTop: 18, }, description: { fontSize: 14, lineHeight: 15, fontWeight: '400', marginTop: 10, textAlign: 'justify', }, error: { backgroundColor: 'rgba(255, 255, 255, .2)', borderRadius: 4, padding: 8, marginTop: 16, height: 220, flexGrow: 0, overflow: 'hidden', }, errorText: device({ base: { textAlign: 'left', fontFamily: 'monospace', color: theme.palette.white, fontSize: 9, }, web: { wordBreak: 'break-all', } }) }) export default Message;