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 { 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 { View, StyleSheet, TextInput } from 'react-native';
import { View, StyleSheet, TextInput, Platform } 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';
import { connect } from 'react-redux';
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 {
static navigationOptions = ({ navigation }) => {
......@@ -22,21 +25,55 @@ class updateDetailScreen extends Component {
};
state = {
breaker: this.props.navigation.getParam('breaker', ''),
data: this.props.navigation.getParam('data', ''),
field: this.props.navigation.getParam('field', ''),
breaker: null,
field: null,
data: null,
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) {
this.setState({
isVisible: visible,
});
static getDerivedStateFromProps(props, state) {
const {
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.navigation.navigate('Setting');
}
};
render() {
const { breaker, data, field, isVisible } = this.state;
return (
......@@ -48,22 +85,36 @@ class updateDetailScreen extends Component {
<ListItem style={{ borderBottomWidth: 0 }}>
<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}
keyboardType={typeof data === 'number' ? 'number-pad' : 'default'}
{this.state.field === 'RCBO' ? (
<Slider
value={0}
minimumValue={0}
maximumValue={2}
step={1}
minimumTrackTintColor={color.lightRed}
maximumTrackTintColor={color.lightGrey}
thumbTintColor={color.primary}
/>
</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>
</ListItem>
</List>
......@@ -76,9 +127,7 @@ class updateDetailScreen extends Component {
borderRadius: 100,
marginTop: 40,
}}
onPress={() => {
this.toggleModal(true);
}}
onPress={() => this.toggleModal(true)}
>
<Text style={[theme.normalText, theme.textWhite]}>SAVE</Text>
</Button>
......@@ -88,22 +137,14 @@ class updateDetailScreen extends Component {
width={'90%'}
overlayStyle={styles.overlayStyle}
isVisible={isVisible}
onBackdropPress={() => {
this.toggleModal(!isVisible);
}}
onBackdropPress={() => this.toggleModal(false)}
>
<>
<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);
}}
>
<Button transparent style={{ width: '40%' }} onPress={() => this.toggleModal(false)}>
<Text style={{ color: color.grey }}>CANCEL</Text>
</Button>
<Button style={styles.saveBtn} rounded onPress={() => this.confirm()}>
......@@ -139,4 +180,20 @@ const styles = StyleSheet.create({
justifyContent: 'center',
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 { ListItem, Body, Text, Icon, Right, Switch, List } from 'native-base';
import { theme, color } from '../../../constants/Styles';
......@@ -7,7 +7,7 @@ import { Overlay } from 'react-native-elements';
import { TouchableHighlight } from 'react-native-gesture-handler';
import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction';
class SettingScreen extends React.Component {
class SettingScreen extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'Setting',
headerLeft: (
......@@ -19,6 +19,7 @@ class SettingScreen extends React.Component {
),
headerRight: navigation.state.params ? navigation.state.params.headerRight : null,
});
constructor(props) {
super(props);
this.props.navigation.setParams({
......@@ -31,29 +32,24 @@ class SettingScreen extends React.Component {
),
});
}
state = {
data: '',
isVisible: false,
pressQr: false,
pressMail: false,
};
componentDidMount() {
this.setState({
data: this.props.currentSelectedData,
});
}
componentDidUpdate(prevProps, prevState) {
componentDidMount = () => this.setState({ data: this.props.currentSelectedData });
componentDidUpdate = (prevProps, prevState) => {
if (prevProps.currentSelectedData != this.props.currentSelectedData) {
this.setState({
data: this.props.currentSelectedData,
});
this.setState({ data: this.props.currentSelectedData });
}
}
toggleModal(visible) {
this.setState({
isVisible: visible,
});
}
};
toggleModal = visible => this.setState({ isVisible: visible });
render() {
const { data } = this.state;
return (
......@@ -162,18 +158,14 @@ class SettingScreen extends React.Component {
width={'90%'}
overlayStyle={styles.overlayStyle}
isVisible={this.state.isVisible}
onBackdropPress={() => {
this.toggleModal(!this.state.isVisible);
}}
onBackdropPress={() => this.toggleModal(false)}
>
<>
<Icon
name="close"
type="AntDesign"
style={{ position: 'absolute', top: 20, right: 20, fontSize: 16, color: color.lightGrey }}
onPress={() => {
this.toggleModal(!this.state.isVisible);
}}
onPress={() => this.toggleModal(false)}
/>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
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