Skip to content

S
safetcut-app
Commit ae1efc0a by Tonk
Options

update setting screen

parent 6297f2d3
Showing with 149 additions and 3 deletions
AppNavigation.js
......@@ -20,6 +20,7 @@ import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
// Setting
import SettingScreen from './screens/Private/SettingScreen/SettingScreen';
import Setting from './screens/Private/SettingScreen/Setting';
import PageTwo from './screens/Private/PageTwo';
import PageTree from './screens/Private/PageTree';
......@@ -102,6 +103,7 @@ const ThirdStack = createStackNavigator(
const SettingStack = createStackNavigator(
{
Setting: SettingScreen,
SettingData: Setting,
},
{
headerLayoutPreset: 'center',
......@@ -236,7 +238,7 @@ const AppStack = createSwitchNavigator(
Main: MainStack,
},
{
initialRouteName: 'AuthLoading', //default AuthLoading
initialRouteName: 'Main', //default AuthLoading
}
);
......
screens/Private/SettingScreen/Setting.js 0 → 100644
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 { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { width } from '../../../constants/Layout';
import { Overlay } from 'react-native-elements';
export default class SmartMeterDetailScreen extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Setting',
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} />
</HeaderButtons>
),
};
};
state = {
breaker: this.props.navigation.getParam('breaker', ''),
data: this.props.navigation.getParam('data', ''),
field: this.props.navigation.getParam('field', ''),
isVisible: false,
};
toggleModal(visible) {
this.setState({
isVisible: visible,
});
}
render() {
const { breaker, data, field, isVisible } = this.state;
return (
<View style={[theme.container]}>
<List style={[{ backgroundColor: color.white }, theme.mt2]}>
<ListItem itemDivider>
<Body>
<Text style={theme.description}>{breaker.toUpperCase()}</Text>
</Body>
</ListItem>
<ListItem>
<Body>
<Text style={[theme.normalText, theme.textDark]}>{field}</Text>
<View
style={{
marginHorizontal: 10,
paddingVertical: 10,
borderBottomWidth: 1,
borderColor: '#efefef',
}}
>
<TextInput
multiline={true}
style={theme.description}
onChangeText={data => this.setState({ data })}
value={data}
/>
</View>
</Body>
</ListItem>
</List>
<Button
full
style={{
backgroundColor: color.primary,
width: width * 0.75,
alignSelf: 'center',
borderRadius: 100,
marginTop: 40,
}}
onPress={() => {
this.toggleModal(true);
}}
>
<Text style={[theme.normalText, theme.textWhite]}>SAVE</Text>
</Button>
<Overlay
borderRadius={20}
height={'25%'}
width={'90%'}
overlayStyle={styles.overlayStyle}
isVisible={isVisible}
onBackdropPress={() => {
this.toggleModal(!isVisible);
}}
>
<>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Are you sure you want to save this item?
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Button
transparent
style={{ width: '40%' }}
onPress={() => {
this.toggleModal(!isVisible);
}}
>
<Text style={{ color: color.grey }}>CANCEL</Text>
</Button>
<Button style={styles.saveBtn} onPress={this.save} rounded>
<Text>SAVE</Text>
</Button>
</View>
</>
</Overlay>
</View>
);
}
}
const styles = StyleSheet.create({
overlayStyle: {
padding: 20,
alignItems: 'center',
justifyContent: 'space-around',
},
saveBtn: {
width: '40%',
backgroundColor: color.primary,
color: color.white,
justifyContent: 'center',
borderRadius: 100,
},
});
screens/Private/SettingScreen/SettingScreen.js
......@@ -23,7 +23,15 @@ export default class SettingScreen extends React.Component {
<Text style={theme.description}>{data.breaker.toUpperCase()}</Text>
</Body>
</ListItem>
<ListItem>
<ListItem
onPress={() =>
this.props.navigation.navigate('SettingData', {
breaker: data.breaker,
field: 'Name',
data: data.name,
})
}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Name</Text>
<Text note numberOfLines={1} style={theme.description}>
......@@ -34,7 +42,15 @@ export default class SettingScreen extends React.Component {
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem>
<ListItem
onPress={() =>
this.props.navigation.navigate('SettingData', {
breaker: data.breaker,
field: 'Description',
data: data.description,
})
}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>Description</Text>
<Text note numberOfLines={2} style={theme.description}>
......
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