bquintan/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added icon animations

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-16 23:50:32 +02:00
parent b336c95f20
commit 96394972eb
1 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/Lists/ProxiwashListItem.js
View file

@ -1,9 +1,10 @@
import * as React from 'react'; import * as React from 'react';
import {Avatar, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper'; import {ActivityIndicator, Avatar, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
import {StyleSheet, View} from "react-native"; import {StyleSheet, View} from "react-native";
import ProxiwashConstants from "../../constants/ProxiwashConstants"; import ProxiwashConstants from "../../constants/ProxiwashConstants";
import i18n from "i18n-js"; import i18n from "i18n-js";
import AprilFoolsManager from "../../managers/AprilFoolsManager"; import AprilFoolsManager from "../../managers/AprilFoolsManager";
import * as Animatable from "react-native-animatable";
type Props = { type Props = {
item: Object, item: Object,
@ -13,6 +14,9 @@ type Props = {
height: number, height: number,
} }
const AnimatedIcon = Animatable.createAnimatableComponent(Avatar.Icon);
/** /**
* Component used to display a proxiwash item, showing machine progression and state * Component used to display a proxiwash item, showing machine progression and state
*/ */
@ -83,14 +87,21 @@ class ProxiwashListItem extends React.Component<Props> {
: 1; : 1;
const icon = props.isWatched const icon = props.isWatched
? <Avatar.Icon ? <AnimatedIcon
icon={'bell-ring'} icon={'bell-ring'}
size={45} animation={"rubberBand"}
useNativeDriver
size={50}
color={colors.primary} color={colors.primary}
style={styles.icon} style={styles.icon}
/> />
: <Avatar.Icon : <AnimatedIcon
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'} icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
animation={isRunning ? "flash" : undefined}
iterationCount={"infinite"}
easing={"linear"}
duration={2000}
useNativeDriver
size={40} size={40}
color={colors.text} color={colors.text}
style={styles.icon} style={styles.icon}
@ -136,12 +147,20 @@ class ProxiwashListItem extends React.Component<Props> {
</Text> </Text>
</View> </View>
<View style={{justifyContent: 'center',}}> <View style={{justifyContent: 'center',}}>
<Avatar.Icon {
icon={stateIcon} isRunning
color={colors.text} ? <ActivityIndicator
size={30} animating={true}
style={styles.icon} size={'small'}
/> style={{marginLeft: 10}}/>
: <Avatar.Icon
icon={stateIcon}
color={colors.text}
size={30}
style={styles.icon}
/>
}
</View> </View>
</View>)} </View>)}
/> />