Skip to content

S
safetcut-app
Commit 0de89626 by HaOuiha
Options

update

parent abb2b6ac
Showing with 111 additions and 62 deletions
screens/Private/SettingScreen/Setting.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Text, List, ListItem, Body, Button } from 'native-base'; import { Text, List, ListItem, Body, Button, Icon } from 'native-base';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { View, StyleSheet, TextInput } from 'react-native'; import { View, StyleSheet, TextInput, Platform } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { width } from '../../../constants/Layout'; import { width } from '../../../constants/Layout';
import { Overlay } from 'react-native-elements'; import { Overlay } from 'react-native-elements';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction'; import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction';
// import SnapSlider from 'react-native-snap-slider';
import { CheckBox } from 'react-native-elements';
import Slider from 'react-native-slider';
class updateDetailScreen extends Component { class updateDetailScreen extends Component {
static navigationOptions = ({ navigation }) => { static navigationOptions = ({ navigation }) => {
...@@ -22,21 +25,55 @@ class updateDetailScreen extends Component { ...@@ -22,21 +25,55 @@ class updateDetailScreen extends Component {
}; };
state = { state = {
breaker: this.props.navigation.getParam('breaker', ''), breaker: null,
data: this.props.navigation.getParam('data', ''), field: null,
field: this.props.navigation.getParam('field', ''), data: null,
isVisible: false, isVisible: false,
sliderOptions: [
{ value: 6, label: '6 mA', selected: false },
{ value: 10, label: '10 mA', selected: false },
{ value: 30, label: '30 mA', selected: false },
],
defaultItem: 0,
}; };
toggleModal(visible) { static getDerivedStateFromProps(props, state) {
this.setState({ const {
isVisible: visible, navigation: {
}); state: { params },
},
} = props;
if (params.breaker !== state.breaker || params.data !== state.data || params.field !== state.field) {
return {
breaker: props.navigation.getParam('breaker', null),
field: props.navigation.getParam('field', null),
data: props.navigation.getParam('data', null),
};
}
return null;
} }
confirm() {
componentDidMount = () => {
this.getInitailState();
};
getInitailState = () => {
if (this.state.field === 'RCBO') {
const indexDefualt = this.state.sliderOptions.findIndex((item, index) => item.value === this.state.data);
this.setState({ defaultItem: indexDefualt });
}
console.log(this.state.defaultItem);
};
toggleModal = visible => this.setState({ isVisible: visible });
confirm = () => {
this.props.updateDetail(this.state.field, this.state.data); this.props.updateDetail(this.state.field, this.state.data);
this.props.navigation.navigate('Setting'); this.props.navigation.navigate('Setting');
} };
render() { render() {
const { breaker, data, field, isVisible } = this.state; const { breaker, data, field, isVisible } = this.state;
return ( return (
...@@ -48,22 +85,36 @@ class updateDetailScreen extends Component { ...@@ -48,22 +85,36 @@ class updateDetailScreen extends Component {
<ListItem style={{ borderBottomWidth: 0 }}> <ListItem style={{ borderBottomWidth: 0 }}>
<Body> <Body>
<Text style={[theme.normalText, theme.textDark]}>{field}</Text> <Text style={[theme.normalText, theme.textDark]}>{field}</Text>
<View {this.state.field === 'RCBO' ? (
style={{ <Slider
marginHorizontal: 10, value={0}
paddingVertical: 10, minimumValue={0}
borderBottomWidth: 1, maximumValue={2}
borderColor: '#efefef', step={1}
}} minimumTrackTintColor={color.lightRed}
> maximumTrackTintColor={color.lightGrey}
<TextInput thumbTintColor={color.primary}
multiline={true}
style={theme.description}
onChangeText={data => this.setState({ data })}
value={data}
keyboardType={typeof data === 'number' ? 'number-pad' : 'default'}
/> />
</View> ) : (
<View
style={{
marginHorizontal: 10,
// paddingVertical: 10,
paddingTop: 10,
paddingBottom: Platform.OS === 'android' ? 0 : 10,
borderBottomWidth: 1,
borderColor: '#efefef',
}}
>
<TextInput
multiline={true}
style={theme.description}
onChangeText={data => this.setState({ data })}
value={data}
keyboardType={typeof data === 'number' ? 'number-pad' : 'default'}
/>
</View>
)}
</Body> </Body>
</ListItem> </ListItem>
</List> </List>
...@@ -76,9 +127,7 @@ class updateDetailScreen extends Component { ...@@ -76,9 +127,7 @@ class updateDetailScreen extends Component {
borderRadius: 100, borderRadius: 100,
marginTop: 40, marginTop: 40,
}} }}
onPress={() => { onPress={() => this.toggleModal(true)}
this.toggleModal(true);
}}
> >
<Text style={[theme.normalText, theme.textWhite]}>SAVE</Text> <Text style={[theme.normalText, theme.textWhite]}>SAVE</Text>
</Button> </Button>
...@@ -88,22 +137,14 @@ class updateDetailScreen extends Component { ...@@ -88,22 +137,14 @@ class updateDetailScreen extends Component {
width={'90%'} width={'90%'}
overlayStyle={styles.overlayStyle} overlayStyle={styles.overlayStyle}
isVisible={isVisible} isVisible={isVisible}
onBackdropPress={() => { onBackdropPress={() => this.toggleModal(false)}
this.toggleModal(!isVisible);
}}
> >
<> <>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}> <Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Are you sure you want to save this item? Are you sure you want to save this item?
</Text> </Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Button <Button transparent style={{ width: '40%' }} onPress={() => this.toggleModal(false)}>
transparent
style={{ width: '40%' }}
onPress={() => {
this.toggleModal(!isVisible);
}}
>
<Text style={{ color: color.grey }}>CANCEL</Text> <Text style={{ color: color.grey }}>CANCEL</Text>
</Button> </Button>
<Button style={styles.saveBtn} rounded onPress={() => this.confirm()}> <Button style={styles.saveBtn} rounded onPress={() => this.confirm()}>
...@@ -139,4 +180,20 @@ const styles = StyleSheet.create({ ...@@ -139,4 +180,20 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
borderRadius: 100, borderRadius: 100,
}, },
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
snapsliderContainer: {},
snapslider: {},
snapsliderItemWrapper: {},
snapsliderItem: {},
}); });
screens/Private/SettingScreen/SettingScreen.js
import React from 'react'; import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native'; import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { ListItem, Body, Text, Icon, Right, Switch, List } from 'native-base'; import { ListItem, Body, Text, Icon, Right, Switch, List } from 'native-base';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
...@@ -7,7 +7,7 @@ import { Overlay } from 'react-native-elements'; ...@@ -7,7 +7,7 @@ import { Overlay } from 'react-native-elements';
import { TouchableHighlight } from 'react-native-gesture-handler'; import { TouchableHighlight } from 'react-native-gesture-handler';
import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction'; import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction';
class SettingScreen extends React.Component { class SettingScreen extends Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
title: 'Setting', title: 'Setting',
headerLeft: ( headerLeft: (
...@@ -19,6 +19,7 @@ class SettingScreen extends React.Component { ...@@ -19,6 +19,7 @@ class SettingScreen extends React.Component {
), ),
headerRight: navigation.state.params ? navigation.state.params.headerRight : null, headerRight: navigation.state.params ? navigation.state.params.headerRight : null,
}); });
constructor(props) { constructor(props) {
super(props); super(props);
this.props.navigation.setParams({ this.props.navigation.setParams({
...@@ -31,29 +32,24 @@ class SettingScreen extends React.Component { ...@@ -31,29 +32,24 @@ class SettingScreen extends React.Component {
), ),
}); });
} }
state = { state = {
data: '', data: '',
isVisible: false, isVisible: false,
pressQr: false, pressQr: false,
pressMail: false, pressMail: false,
}; };
componentDidMount() {
this.setState({ componentDidMount = () => this.setState({ data: this.props.currentSelectedData });
data: this.props.currentSelectedData,
}); componentDidUpdate = (prevProps, prevState) => {
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.currentSelectedData != this.props.currentSelectedData) { if (prevProps.currentSelectedData != this.props.currentSelectedData) {
this.setState({ this.setState({ data: this.props.currentSelectedData });
data: this.props.currentSelectedData,
});
} }
} };
toggleModal(visible) {
this.setState({ toggleModal = visible => this.setState({ isVisible: visible });
isVisible: visible,
});
}
render() { render() {
const { data } = this.state; const { data } = this.state;
return ( return (
...@@ -162,18 +158,14 @@ class SettingScreen extends React.Component { ...@@ -162,18 +158,14 @@ class SettingScreen extends React.Component {
width={'90%'} width={'90%'}
overlayStyle={styles.overlayStyle} overlayStyle={styles.overlayStyle}
isVisible={this.state.isVisible} isVisible={this.state.isVisible}
onBackdropPress={() => { onBackdropPress={() => this.toggleModal(false)}
this.toggleModal(!this.state.isVisible);
}}
> >
<> <>
<Icon <Icon
name="close" name="close"
type="AntDesign" type="AntDesign"
style={{ position: 'absolute', top: 20, right: 20, fontSize: 16, color: color.lightGrey }} style={{ position: 'absolute', top: 20, right: 20, fontSize: 16, color: color.lightGrey }}
onPress={() => { onPress={() => this.toggleModal(false)}
this.toggleModal(!this.state.isVisible);
}}
/> />
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}> <Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Share to these items? Share to these items?
......
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