Skip to content

S
safetcut-app
Commit 51d96be3 by Tonk
Options

add shake animation when toggle delete connected device

parent 1e69a248
Showing with 75 additions and 13 deletions
screens/Private/SmartMeterScreen/McbLinkScreen.js
import React from 'react'; import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base'; import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { StyleSheet, TextInput, Image, TouchableOpacity } from 'react-native'; import { StyleSheet, TextInput, Image, TouchableOpacity, Animated, Easing } from 'react-native';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
...@@ -39,6 +39,10 @@ class McbLinkScreen extends React.Component { ...@@ -39,6 +39,10 @@ class McbLinkScreen extends React.Component {
}, },
}; };
}; };
constructor(props) {
super(props);
this.shakeValue = new Animated.Value(0);
}
state = { state = {
subBreakersInfo: [], subBreakersInfo: [],
subBreakerStatus: [], subBreakerStatus: [],
...@@ -62,6 +66,35 @@ class McbLinkScreen extends React.Component { ...@@ -62,6 +66,35 @@ class McbLinkScreen extends React.Component {
this.setSubBreakersState(); this.setSubBreakersState();
} }
}; };
handleAnimation = () => {
// A loop is needed for continuous animation
Animated.loop(
// Animation consists of a sequence of steps
Animated.sequence([
// start rotation in one direction (only half the time is needed)
Animated.timing(this.shakeValue, {
toValue: 1.0,
duration: 75,
easing: Easing.linear,
useNativeDriver: true,
}),
// rotate in other direction, to minimum value (= twice the duration of above)
Animated.timing(this.shakeValue, {
toValue: -1.0,
duration: 150,
easing: Easing.linear,
useNativeDriver: true,
}),
// return to begin position
Animated.timing(this.shakeValue, {
toValue: 0.0,
duration: 75,
easing: Easing.linear,
useNativeDriver: true,
}),
])
).start();
};
setSubBreakersState = () => { setSubBreakersState = () => {
const { existedSubBreakersData, shadow, existedConnectedDevice } = this.props; const { existedSubBreakersData, shadow, existedConnectedDevice } = this.props;
...@@ -200,10 +233,10 @@ class McbLinkScreen extends React.Component { ...@@ -200,10 +233,10 @@ class McbLinkScreen extends React.Component {
numColumns={4} numColumns={4}
renderItem={({ item, index }) => { renderItem={({ item, index }) => {
if (item.name == 'empty') { if (item.name == 'empty') {
return <Card transparent style={[styles.electronicCard]} />; return <View style={{ flex: 1, margin: 10 }} />;
} else if (item.name === 'add') { } else if (item.name === 'add') {
return ( return (
<Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}> <View style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
<TouchableOpacity <TouchableOpacity
style={[theme.centerContainer, { width: 65 }]} style={[theme.centerContainer, { width: 65 }]}
onPress={() => this.setState({ isAddElectronicVisible: true })} onPress={() => this.setState({ isAddElectronicVisible: true })}
...@@ -217,13 +250,30 @@ class McbLinkScreen extends React.Component { ...@@ -217,13 +250,30 @@ class McbLinkScreen extends React.Component {
{item.name} {item.name}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</Card> </View>
); );
} else { } else {
return ( return (
<Card style={[styles.electronicCard]}> <Animated.View
style={[
styles.electronicCard,
{
transform: [
{
rotate: this.shakeValue.interpolate({
inputRange: [-1, 1],
outputRange: ['-0.05rad', '0.05rad'],
}),
},
],
},
]}
>
<TouchableOpacity <TouchableOpacity
onLongPress={() => this.setState({ toggleDel: true })} onLongPress={() => {
this.setState({ toggleDel: true });
this.handleAnimation();
}}
style={[theme.centerContainer, { width: 65 }]} style={[theme.centerContainer, { width: 65 }]}
> >
{item.type ? ( {item.type ? (
...@@ -249,7 +299,7 @@ class McbLinkScreen extends React.Component { ...@@ -249,7 +299,7 @@ class McbLinkScreen extends React.Component {
onPress={() => this.props.deleteConnectedDevice(data[index])} onPress={() => this.props.deleteConnectedDevice(data[index])}
/> />
)} )}
</Card> </Animated.View>
); );
} }
}} }}
...@@ -268,7 +318,10 @@ class McbLinkScreen extends React.Component { ...@@ -268,7 +318,10 @@ class McbLinkScreen extends React.Component {
{toggleDel ? ( {toggleDel ? (
<TouchableOpacity <TouchableOpacity
style={styles.doneDeleteBtn} style={styles.doneDeleteBtn}
onPress={() => this.setState({ toggleDel: false })} onPress={() => {
this.setState({ toggleDel: false });
this.shakeValue.setValue(0);
}}
> >
<Text style={[theme.description, { color: color.white }]}>Done</Text> <Text style={[theme.description, { color: color.white }]}>Done</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -333,11 +386,11 @@ class McbLinkScreen extends React.Component { ...@@ -333,11 +386,11 @@ class McbLinkScreen extends React.Component {
numColumns={4} numColumns={4}
renderItem={({ item, index }) => { renderItem={({ item, index }) => {
if (item.type === 'empty') { if (item.type === 'empty') {
return <Card style={styles.electronicCard} transparent />; return <View style={{ flex: 1, margin: 10 }} />;
} else { } else {
const dynamicColor = item.type === deviceType ? color.white : color.primary; const dynamicColor = item.type === deviceType ? color.white : color.primary;
return ( return (
<Card <View
style={[ style={[
styles.electronicCard, styles.electronicCard,
{ {
...@@ -370,7 +423,7 @@ class McbLinkScreen extends React.Component { ...@@ -370,7 +423,7 @@ class McbLinkScreen extends React.Component {
{item.type} {item.type}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</Card> </View>
); );
} }
}} }}
...@@ -450,12 +503,21 @@ const styles = StyleSheet.create({ ...@@ -450,12 +503,21 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
aspectRatio: 1, aspectRatio: 1,
borderRadius: 10, borderRadius: 10,
marginRight: 10, margin: 10,
marginLeft: 10,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderWidth: 0, borderWidth: 0,
borderColor: 'transparent', borderColor: 'transparent',
backgroundColor: color.white,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.18,
shadowRadius: 1.0,
elevation: 1,
}, },
electronicIcon: { electronicIcon: {
// tintColor: color.primary, // tintColor: color.primary,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment