123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- import * as React from 'react';
- import {Avatar, Card, Text, withTheme} from 'react-native-paper';
- import {StyleSheet, View} from "react-native";
- import ProxiwashConstants from "../constants/ProxiwashConstants";
-
- /**
- * Component used to display a proxiwash item, showing machine progression and state
- *
- * @param props Props to pass to the component
- * @return {*}
- */
- function ProxiwashListItem(props) {
- const {colors} = props.theme;
- let stateColors = {};
- stateColors[ProxiwashConstants.machineStates.TERMINE] = colors.proxiwashFinishedColor;
- stateColors[ProxiwashConstants.machineStates.DISPONIBLE] = colors.proxiwashReadyColor;
- stateColors[ProxiwashConstants.machineStates["EN COURS"]] = colors.proxiwashRunningColor;
- stateColors[ProxiwashConstants.machineStates.HS] = colors.proxiwashBrokenColor;
- stateColors[ProxiwashConstants.machineStates.ERREUR] = colors.proxiwashErrorColor;
- const icon = (
- props.isWatched ?
- <Avatar.Icon
- icon={'bell-ring'}
- size={45}
- color={colors.primary}
- style={styles.icon}
- /> :
- <Avatar.Icon
- icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
- color={colors.text}
- size={40}
- style={styles.icon}
- />
- );
- return (
- <Card
- style={{
- margin: 5,
- }}
- onPress={props.onPress}
- >
- {ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates["EN COURS"] ?
- <Card style={{
- ...styles.backgroundCard,
- backgroundColor: colors.proxiwashRunningBgColor,
-
- }}/> : null
- }
-
- <Card style={{
- ...styles.progressionCard,
- width: props.progress,
- backgroundColor: stateColors[ProxiwashConstants.machineStates[props.state]],
- }}/>
- <Card.Title
- title={props.title}
- titleStyle={{fontSize: 17}}
- subtitle={props.description}
- style={styles.title}
- left={() => icon}
- right={() => (
- <View style={{flexDirection: 'row'}}>
- <View style={{justifyContent: 'center'}}>
- <Text style={
- ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates.TERMINE ?
- {fontWeight: 'bold',} : {}}
- >
- {props.statusText}
- </Text>
- </View>
- <Avatar.Icon
- icon={props.statusIcon}
- color={colors.text}
- size={30}
- style={styles.icon}
- />
- </View>)}
- />
- </Card>
- );
- }
-
- const styles = StyleSheet.create({
- icon: {
- backgroundColor: 'transparent'
- },
- backgroundCard: {
- height: '100%',
- position: 'absolute',
- left: 0,
- width: '100%',
- elevation: 0,
- },
- progressionCard: {
- height: '100%',
- position: 'absolute',
- left: 0,
- elevation: 0,
- },
- title: {
- backgroundColor: 'transparent',
- height: 64
- }
- });
-
- export default withTheme(ProxiwashListItem);
|