|
@@ -1,9 +1,10 @@
|
1
|
1
|
import * as React from 'react';
|
2
|
|
-import {Avatar, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
|
|
2
|
+import {ActivityIndicator, Avatar, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
|
3
|
3
|
import {StyleSheet, View} from "react-native";
|
4
|
4
|
import ProxiwashConstants from "../../constants/ProxiwashConstants";
|
5
|
5
|
import i18n from "i18n-js";
|
6
|
6
|
import AprilFoolsManager from "../../managers/AprilFoolsManager";
|
|
7
|
+import * as Animatable from "react-native-animatable";
|
7
|
8
|
|
8
|
9
|
type Props = {
|
9
|
10
|
item: Object,
|
|
@@ -13,6 +14,9 @@ type Props = {
|
13
|
14
|
height: number,
|
14
|
15
|
}
|
15
|
16
|
|
|
17
|
+const AnimatedIcon = Animatable.createAnimatableComponent(Avatar.Icon);
|
|
18
|
+
|
|
19
|
+
|
16
|
20
|
/**
|
17
|
21
|
* Component used to display a proxiwash item, showing machine progression and state
|
18
|
22
|
*/
|
|
@@ -83,14 +87,21 @@ class ProxiwashListItem extends React.Component<Props> {
|
83
|
87
|
: 1;
|
84
|
88
|
|
85
|
89
|
const icon = props.isWatched
|
86
|
|
- ? <Avatar.Icon
|
|
90
|
+ ? <AnimatedIcon
|
87
|
91
|
icon={'bell-ring'}
|
88
|
|
- size={45}
|
|
92
|
+ animation={"rubberBand"}
|
|
93
|
+ useNativeDriver
|
|
94
|
+ size={50}
|
89
|
95
|
color={colors.primary}
|
90
|
96
|
style={styles.icon}
|
91
|
97
|
/>
|
92
|
|
- : <Avatar.Icon
|
|
98
|
+ : <AnimatedIcon
|
93
|
99
|
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
|
|
100
|
+ animation={isRunning ? "flash" : undefined}
|
|
101
|
+ iterationCount={"infinite"}
|
|
102
|
+ easing={"linear"}
|
|
103
|
+ duration={2000}
|
|
104
|
+ useNativeDriver
|
94
|
105
|
size={40}
|
95
|
106
|
color={colors.text}
|
96
|
107
|
style={styles.icon}
|
|
@@ -136,12 +147,20 @@ class ProxiwashListItem extends React.Component<Props> {
|
136
|
147
|
</Text>
|
137
|
148
|
</View>
|
138
|
149
|
<View style={{justifyContent: 'center',}}>
|
139
|
|
- <Avatar.Icon
|
140
|
|
- icon={stateIcon}
|
141
|
|
- color={colors.text}
|
142
|
|
- size={30}
|
143
|
|
- style={styles.icon}
|
144
|
|
- />
|
|
150
|
+ {
|
|
151
|
+ isRunning
|
|
152
|
+ ? <ActivityIndicator
|
|
153
|
+ animating={true}
|
|
154
|
+ size={'small'}
|
|
155
|
+ style={{marginLeft: 10}}/>
|
|
156
|
+ : <Avatar.Icon
|
|
157
|
+ icon={stateIcon}
|
|
158
|
+ color={colors.text}
|
|
159
|
+ size={30}
|
|
160
|
+ style={styles.icon}
|
|
161
|
+ />
|
|
162
|
+ }
|
|
163
|
+
|
145
|
164
|
</View>
|
146
|
165
|
</View>)}
|
147
|
166
|
/>
|