Commit abb2b6ac by Tonk

.

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