54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
import * as React from 'react';
|
|
import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper';
|
|
import {StyleSheet, View} from "react-native";
|
|
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
|
|
|
/**
|
|
* Component used to display a message when a list is empty
|
|
*
|
|
* @param props Props to pass to the component
|
|
* @return {*}
|
|
*/
|
|
function EmptyWebSectionListItem(props: { text: string, icon: string, refreshing: boolean, theme: {} }) {
|
|
const {colors} = props.theme;
|
|
return (
|
|
<View>
|
|
<View style={styles.iconContainer}>
|
|
{props.refreshing ?
|
|
<ActivityIndicator
|
|
animating={true}
|
|
size={'large'}
|
|
color={colors.primary}/>
|
|
:
|
|
<MaterialCommunityIcons
|
|
name={props.icon}
|
|
size={100}
|
|
color={colors.textDisabled}/>}
|
|
</View>
|
|
|
|
<Subheading style={{
|
|
...styles.subheading,
|
|
color: colors.textDisabled
|
|
}}>
|
|
{props.text}
|
|
</Subheading>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
iconContainer: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
height: 100,
|
|
marginBottom: 20
|
|
},
|
|
subheading: {
|
|
textAlign: 'center',
|
|
marginRight: 20,
|
|
marginLeft: 20,
|
|
}
|
|
});
|
|
|
|
export default withTheme(EmptyWebSectionListItem);
|