Skip to content

S
safetcut-app
Commit abb2b6ac by Tonk
Options

.

parent b6a4e84f
Showing with 52 additions and 15 deletions
screens/Private/SmartMeterScreen/McbLinkScreen.js
...@@ -183,7 +183,7 @@ class McbLinkScreen extends React.Component { ...@@ -183,7 +183,7 @@ class McbLinkScreen extends React.Component {
return ( return (
<Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}> <Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
<TouchableOpacity <TouchableOpacity
style={theme.centerContainer} style={[theme.centerContainer, { flex: 1 }]}
onPress={() => this.setState({ isAddElectronicVisible: true })} onPress={() => this.setState({ isAddElectronicVisible: true })}
disabled={toggleDel} disabled={toggleDel}
> >
...@@ -202,7 +202,7 @@ class McbLinkScreen extends React.Component { ...@@ -202,7 +202,7 @@ class McbLinkScreen extends React.Component {
<Card style={[styles.electronicCard]}> <Card style={[styles.electronicCard]}>
<TouchableOpacity <TouchableOpacity
onLongPress={() => this.setState({ toggleDel: true })} onLongPress={() => this.setState({ toggleDel: true })}
style={theme.centerContainer} style={[theme.centerContainer, { width: 65 }]}
> >
{item.type ? ( {item.type ? (
<Image <Image
...@@ -212,7 +212,9 @@ class McbLinkScreen extends React.Component { ...@@ -212,7 +212,9 @@ class McbLinkScreen extends React.Component {
) : ( ) : (
<Icon style={{ color: color.primary }} name={'md-help'} /> <Icon style={{ color: color.primary }} name={'md-help'} />
)} )}
<Text style={styles.electronictext}>{item.name}</Text> <Text style={styles.electronictext} numberOfLines={2}>
{item.name}
</Text>
</TouchableOpacity> </TouchableOpacity>
{toggleDel && ( {toggleDel && (
<Icon <Icon
...@@ -259,8 +261,19 @@ class McbLinkScreen extends React.Component { ...@@ -259,8 +261,19 @@ class McbLinkScreen extends React.Component {
</> </>
); );
}; };
renderAddModal = () => { renderAddModal = () => {
const { deviceName, deviceType } = this.state; const { deviceName, deviceType } = this.state;
const formatGridData = unformatData => {
let data = unformatData;
const numberOfFullRows = Math.floor(data.length / 4);
let numberOfElementsLastRow = data.length - numberOfFullRows * 4;
while (numberOfElementsLastRow !== 4 && numberOfElementsLastRow !== 0) {
data.push({ type: 'empty' });
numberOfElementsLastRow = numberOfElementsLastRow + 1;
}
return data;
};
return ( return (
<> <>
<View style={styles.dragIndicator} /> <View style={styles.dragIndicator} />
...@@ -273,11 +286,11 @@ class McbLinkScreen extends React.Component { ...@@ -273,11 +286,11 @@ class McbLinkScreen extends React.Component {
Cancel Cancel
</Text> </Text>
<Text style={[theme.smallTitle, theme.textDark]}>Add device</Text> <Text style={[theme.smallTitle, theme.textDark]}>Add device</Text>
<Text style={[theme.smallTitle, theme.textDanger]} onPress={this.addDevice}> <TouchableOpacity onPress={this.addDevice} disabled={deviceName && deviceType ? false : true}>
Save <Text style={[theme.smallTitle, theme.textDanger]}>Save</Text>
</Text> </TouchableOpacity>
</View> </View>
<ScrollView> <ScrollView showsVerticalScrollIndicator={false}>
<View style={theme.mt2}> <View style={theme.mt2}>
<Text style={[theme.normalText]}>Enter Device’s name</Text> <Text style={[theme.normalText]}>Enter Device’s name</Text>
<View style={styles.inputDeviceNameContainer}> <View style={styles.inputDeviceNameContainer}>
...@@ -296,34 +309,56 @@ class McbLinkScreen extends React.Component { ...@@ -296,34 +309,56 @@ class McbLinkScreen extends React.Component {
<View style={theme.mt2}> <View style={theme.mt2}>
<Text style={[theme.normalText]}>Select Device’s icon</Text> <Text style={[theme.normalText]}>Select Device’s icon</Text>
<FlatList <FlatList
data={listDeviceIcon} data={formatGridData(listDeviceIcon)}
style={[theme.mt1, { paddingBottom: isIphoneX() ? 80 : 45 }]} style={[theme.mt1, { paddingBottom: isIphoneX() ? 80 : 45 }]}
numColumns={4} numColumns={4}
renderItem={({ item, index }) => ( renderItem={({ item, index }) => {
if (item.type === 'empty') {
return <Card style={styles.electronicCard} transparent />;
} else {
return (
<Card <Card
style={[ style={[
styles.electronicCard, styles.electronicCard,
{ {
backgroundColor: item.type === deviceType ? color.primary : color.white, backgroundColor:
item.type === deviceType ? color.primary : color.white,
}, },
]} ]}
> >
<TouchableOpacity <TouchableOpacity
style={theme.centerContainer} style={[theme.centerContainer, { width: 65 }]}
onPress={() => this.setState({ deviceType: item.type })} onPress={() => this.setState({ deviceType: item.type })}
> >
<Image style={styles.electronicIcon} source={getDeviceIcon(item.type)} /> <Image
style={[
styles.electronicIcon,
{
tintColor:
item.type === deviceType
? color.white
: color.primary,
},
]}
source={getDeviceIcon(item.type)}
/>
<Text <Text
style={[ style={[
styles.electronictext, styles.electronictext,
{ color: item.type === deviceType ? color.white : color.grey }, {
color:
item.type === deviceType ? color.white : color.grey,
},
]} ]}
numberOfLines={1}
> >
{item.type} {item.type}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</Card> </Card>
)} );
}
}}
keyExtractor={({ item, index }) => `device${index}`} keyExtractor={({ item, index }) => `device${index}`}
/> />
</View> </View>
...@@ -418,11 +453,13 @@ const styles = StyleSheet.create({ ...@@ -418,11 +453,13 @@ const styles = StyleSheet.create({
}, },
electronictext: { electronictext: {
position: 'absolute', position: 'absolute',
textAlign: 'center',
bottom: 5, bottom: 5,
left: 2,
right: 2,
fontSize: 10, fontSize: 10,
fontFamily: 'Avenir-Roman', fontFamily: 'Avenir-Roman',
color: color.grey, color: color.grey,
width: '100%',
}, },
doneDeleteBtn: { doneDeleteBtn: {
backgroundColor: color.lightGrey, backgroundColor: color.lightGrey,
......
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