add limit current

screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js

@@ -76,6 +76,13 @@ const MainBreaker = {
 		},
 	],
 };
+const LimitCurrent = [
+	{ name: 'AC Volt', limit: 1000 },
+	{ name: 'AC Current', limit: 1000 },
+	{ name: 'Watt', limit: 1000 },
+	{ name: 'Leakage Current', limit: 1000 },
+	{ name: 'Watthour', limit: 1000 },
+];
 
 export default class SmartMeterDetailScreen extends Component {
 	static navigationOptions = ({ navigation }) => {
@@ -143,14 +150,49 @@ export default class SmartMeterDetailScreen extends Component {
 		// Electric Current card
 		const Current = props => {
 			return (
-				<Card style={styles.currentCard}>
-					<Text style={theme.smDescription}>{props.name}</Text>
+				<Card
+					style={[
+						styles.currentCard,
+						{
+							backgroundColor:
+								props.number > LimitCurrent[props.index].limit ? color.primary : color.white,
+						},
+					]}
+				>
+					<Text
+						style={[
+							theme.smDescription,
+							{ color: props.number > LimitCurrent[props.index].limit ? color.white : color.grey },
+						]}
+					>
+						{props.name}
+					</Text>
 
 					<Text
 						numberOfLines={1}
-						style={[theme.smallTitle, theme.textDark, theme.mt1, { textAlign: 'right' }]}
+						style={[
+							theme.smallTitle,
+							theme.textDark,
+							theme.mt1,
+							{
+								textAlign: 'right',
+								color: props.number > LimitCurrent[props.index].limit ? color.white : color.darkGrey,
+							},
+						]}
+					>
+						{props.number}{' '}
+						<Text
+							style={[
+								theme.smDescription,
+								theme.textDark,
+								{
+									color:
+										props.number > LimitCurrent[props.index].limit ? color.white : color.darkGrey,
+								},
+							]}
 						>
-						{props.number} <Text style={[theme.smDescription, theme.textDark]}>{props.unit}</Text>
+							{props.unit}
+						</Text>
 					</Text>
 				</Card>
 			);
@@ -249,11 +291,11 @@ export default class SmartMeterDetailScreen extends Component {
 				{/* Electric Current */}
 				<FlatList
 					data={this.formatGridData(MainBreaker.Ecurrent)}
-					renderItem={({ item }) => {
+					renderItem={({ item, index }) => {
 						if (item.name == 'empty') {
 							return <Card transparent style={{ flex: 1, padding: 10 }} />;
 						} else {
-							return <Current name={item.name} number={item.number} unit={item.unit} />;
+							return <Current index={index} name={item.name} number={item.number} unit={item.unit} />;
 						}
 					}}
 					numColumns={3}