Skip to content

S
safetcut-app
Commit 4a4d2f97 by Tonk
Options

add share modal, fix setting detail style

parent dd12ef10
Showing with 117 additions and 17 deletions
screens/Private/SettingScreen/Setting.js
import React, { Component } from 'react';
import { Text, List, ListItem, Body, Button } from 'native-base';
import { color, theme } from '../../../constants/Styles';
import { View, StyleSheet, TextInput, Modal } from 'react-native';
import { View, StyleSheet, TextInput } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { width } from '../../../constants/Layout';
......@@ -35,13 +35,11 @@ export default class SmartMeterDetailScreen extends Component {
const { breaker, data, field, isVisible } = this.state;
return (
<View style={[theme.container]}>
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>
{breaker.toUpperCase()}
</Text>
<List style={[{ backgroundColor: color.white }, theme.mt2]}>
<ListItem itemDivider>
<Body>
<Text style={theme.description}>{breaker.toUpperCase()}</Text>
</Body>
</ListItem>
<ListItem>
<ListItem style={{ borderBottomWidth: 0 }}>
<Body>
<Text style={[theme.normalText, theme.textDark]}>{field}</Text>
<View
......
screens/Private/SettingScreen/SettingScreen.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { ListItem, Body, Text, Icon, Right, Switch, List } from 'native-base';
import { theme, color } from '../../../constants/Styles';
import { connect } from 'react-redux';
import { Overlay } from 'react-native-elements';
import { TouchableHighlight } from 'react-native-gesture-handler';
class SettingScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Setting',
headerRight: navigation.state.params ? navigation.state.params.headerRight : null,
});
constructor(props) {
super(props);
this.props.navigation.setParams({
headerRight: (
<TouchableOpacity onPress={() => this.setState({ isVisible: true })}>
<View style={{ marginRight: 17 }}>
<Icon name="share-outline" type="MaterialCommunityIcons" style={{ color: color.white }} />
</View>
</TouchableOpacity>
),
});
}
state = {
data: this.props.allDeviceInfo[0],
isVisible: false,
pressQr: false,
pressMail: false,
};
toggleModal(visible) {
this.setState({
isVisible: visible,
});
}
render() {
const { data } = this.state;
return (
<View style={[theme.container]}>
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>
{data.type.toUpperCase()}
</Text>
<List style={styles.ListItemContainer}>
<ListItem itemDivider>
<Body>
<Text style={theme.description}>{data.type.toUpperCase()}</Text>
</Body>
</ListItem>
<ListItem
onPress={() =>
this.props.navigation.navigate('SettingData', {
......@@ -29,6 +51,7 @@ class SettingScreen extends React.Component {
data: data.name,
})
}
style={{ borderBottomColor: '#efefef' }}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Name</Text>
......@@ -48,6 +71,7 @@ class SettingScreen extends React.Component {
data: data.description,
})
}
style={{ borderBottomColor: '#efefef' }}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Description</Text>
......@@ -67,6 +91,7 @@ class SettingScreen extends React.Component {
data: data.rcbo,
})
}
style={{ borderBottomColor: '#efefef' }}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>RCBO</Text>
......@@ -78,7 +103,7 @@ class SettingScreen extends React.Component {
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem>
<ListItem style={{ borderBottomWidth: 0 }}>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Notification</Text>
</Body>
......@@ -87,13 +112,77 @@ class SettingScreen extends React.Component {
</Right>
</ListItem>
</List>
<List style={styles.ListItemContainer}>
<ListItem>
<List style={[styles.ListItemContainer, { marginTop: 30 }]}>
<ListItem style={{ borderBottomWidth: 0 }}>
<Body>
<Text style={[theme.normalText, theme.textDanger]}>Delete</Text>
</Body>
</ListItem>
</List>
<Overlay
borderRadius={20}
height={'25%'}
width={'90%'}
overlayStyle={styles.overlayStyle}
isVisible={this.state.isVisible}
onBackdropPress={() => {
this.toggleModal(!this.state.isVisible);
}}
>
<>
<Icon
name="close"
type="AntDesign"
style={{ position: 'absolute', top: 20, right: 20, fontSize: 16, color: color.lightGrey }}
onPress={() => {
this.toggleModal(!this.state.isVisible);
}}
/>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Share to these items?
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<TouchableHighlight
underlayColor="transparent"
onHideUnderlay={() => this.setState({ pressQr: false })}
onShowUnderlay={() => this.setState({ pressQr: true })}
onPress={() => console.log('press')}
>
<View
style={[
styles.shareItemStyle,
{ backgroundColor: this.state.pressQr ? 'rgba(238,84,84,0.1)' : 'transparent' },
]}
>
<Icon
name="qrcode-scan"
type="MaterialCommunityIcons"
style={{ fontSize: 50, color: color.primary }}
/>
</View>
</TouchableHighlight>
<TouchableHighlight
underlayColor="transparent"
onHideUnderlay={() => this.setState({ pressMail: false })}
onShowUnderlay={() => this.setState({ pressMail: true })}
onPress={() => console.log('press')}
>
<View
style={[
styles.shareItemStyle,
{
backgroundColor: this.state.pressMail
? 'rgba(238,84,84,0.1)'
: 'transparent',
},
]}
>
<Icon name="mail" type="AntDesign" style={{ fontSize: 50, color: color.primary }} />
</View>
</TouchableHighlight>
</View>
</>
</Overlay>
</View>
);
}
......@@ -107,6 +196,19 @@ export default connect(mapStateToProps)(SettingScreen);
const styles = StyleSheet.create({
ListItemContainer: {
backgroundColor: color.white,
marginTop: 20,
marginTop: 10,
},
overlayStyle: {
padding: 20,
alignItems: 'center',
justifyContent: 'space-around',
},
shareItemStyle: {
height: 100,
width: 100,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 6,
marginHorizontal: 15,
},
});
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