Skip to content

S
safetcut-app
Commit 8eefdf54 by Tonk
Options

update rcbo setting

parent d17b6767
Showing with 74 additions and 195 deletions
components/Chart/CustomAreaChart.js
......@@ -3,7 +3,7 @@ import { View } from 'react-native';
import { XAxis, AreaChart } from 'react-native-svg-charts';
import * as shape from 'd3-shape';
import { format } from 'date-fns';
import { Circle, LinearGradient, Stop, Defs, Path, ect } from 'react-native-svg';
import { Circle, LinearGradient, Stop, Defs, Path } from 'react-native-svg';
import Tooltip from './Tooltip';
import { color } from '../../constants/Styles';
import * as scale from 'd3-scale';
......
components/FadeDimBG.js deleted 100644 → 0
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
export default class FadeDimBG extends React.Component {
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
};
componentDidMount() {
Animated.timing(
// Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 500, // Make it take a while
}
).start(); // Starts the animation
}
componentWillUnmount() {
Animated.timing(
// Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 0, // Animate to opacity: 1 (opaque)
duration: 500, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<Animated.View // Special animatable View
style={[
StyleSheet.absoluteFill,
{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
backgroundColor: 'rgba(0,0,0,0.5)',
},
]}
>
{this.props.children}
</Animated.View>
);
}
}
components/InputField.js deleted 100755 → 0
import React from 'react';
import { TextInput, Text, View } from 'react-native';
import { Icon } from 'native-base';
import { color, theme } from '../constants/Styles';
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
borderBottomWidth: 1,
flexDirection: 'row',
justifyContent: 'space-between',
borderBottomColor: color.lightGrey,
},
icon: {
fontSize: 20,
marginRight: 5,
marginBottom: 2,
color: color.grey,
},
});
const InputField = ({
name, // field name - required
customStyle,
onChangeText, // event
value, // field value
disabled,
placeholder,
errors, // this array prop is automatically passed down to this component from <Form />
isPass,
passVisible,
onPressEye,
}) => {
return (
<View>
<View style={styles.container}>
<TextInput
value={value && value}
onChangeText={onChangeText ? val => onChangeText(val) : null}
placeholder={placeholder ? placeholder : ''}
placeholderTextColor={color.lightGrey}
disabled={disabled}
style={theme.input}
secureTextEntry={isPass ? !passVisible : false}
/>
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
{isPass && (
<Icon onPress={onPressEye} name={passVisible ? 'eye' : 'eye-off'} style={[styles.icon]} />
)}
{errors &&
errors.length > 0 &&
errors.map((item, index) =>
item.field === name && item.error ? (
<Icon key={`${index}`} name="close" style={[styles.icon, theme.textDanger]} />
) : null
)}
</View>
</View>
{errors &&
errors.length > 0 &&
errors.map((item, index) =>
item.field === name && item.error ? (
<Text
key={`${index}`}
style={[theme.description, theme.textDanger, { bottom: -15, position: 'absolute' }]}
>
{item.error}
</Text>
) : null
)}
</View>
);
};
export default InputField;
components/SlideUpModal.js deleted 100644 → 0
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import { height } from '../constants/Layout';
export default class SlideUpModal extends React.Component {
state = {
slide: new Animated.Value(height * 1), // Initial value for opacity: 0
};
componentDidMount() {
const topValue = this.props.ending * height;
Animated.timing(
// Animate over time
this.state.slide, // The animated value to drive
{
toValue: topValue, // Animate to opacity: 1 (opaque)
duration: 500, // Make it take a while
}
).start(); // Starts the animation
}
componentWillUnmount() {
Animated.timing(
// Animate over time
this.state.slide, // The animated value to drive
{
toValue: height * 1, // Animate to opacity: 1 (opaque)
duration: 500, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { slide } = this.state;
return (
<Animated.View // Special animatable View
style={{
...this.props.style,
top: slide,
}}
>
{this.props.children}
</Animated.View>
);
}
}
screens/Private/SettingScreen/Setting.js
import React, { Component } from 'react';
import { Text, Button } from 'native-base';
import { color, theme } from '../../../constants/Styles';
import { View, StyleSheet, TextInput, Platform } from 'react-native';
import { View, StyleSheet, TextInput, Platform, TouchableOpacity } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { width } from '../../../constants/Layout';
......@@ -72,7 +72,7 @@ class updateDetailScreen extends Component {
};
render() {
const { breaker, data, field, isVisible } = this.state;
const { breaker, data, field, isVisible, rcboOptions, indexData } = this.state;
return (
<View style={[theme.container]}>
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>
......@@ -81,38 +81,69 @@ class updateDetailScreen extends Component {
<View style={[styles.editFieldContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>{field}</Text>
{this.state.field === 'RCBO' ? (
<>
<View style={{ marginHorizontal: 25 }}>
<Slider
value={this.state.indexData}
minimumValue={0}
maximumValue={2}
step={1}
thumbStyle={styles.thumbStyle}
trackStyle={{ height: 2, backgroundColor: color.lightGrey }}
minimumTrackTintColor={color.lightRed}
maximumTrackTintColor={color.lightGrey}
thumbTintColor={color.primary}
onSlidingComplete={value => this.setState({ indexData: value })}
// <>
// <View style={{ marginHorizontal: 25 }}>
// <Slider
// value={this.state.indexData}
// minimumValue={0}
// maximumValue={2}
// step={1}
// thumbStyle={styles.thumbStyle}
// trackStyle={{ height: 2, backgroundColor: color.lightGrey }}
// minimumTrackTintColor={color.lightRed}
// maximumTrackTintColor={color.lightGrey}
// thumbTintColor={color.primary}
// onSlidingComplete={value => this.setState({ indexData: value })}
// />
// </View>
// <View style={styles.labelContainer}>
// {this.state.rcboOptions.map((item, index) => (
// <Text
// key={`label${item.value}`}
// style={[
// theme.normalText,
// {
// fontSize: 14,
// color: this.state.indexData >= index ? color.primary : color.grey,
// },
// ]}
// >
// {item.label}
// </Text>
// ))}
// </View>
// </>
<View style={styles.rowContainer}>
{rcboOptions.map((item, index) => (
<TouchableOpacity
style={{ alignItems: 'center' }}
onPress={() => this.setState({ indexData: index })}
>
<View
style={{
backgroundColor: indexData === index ? color.lightRed : color.lightGrey,
...styles.outerCircle,
}}
>
<View
style={{
backgroundColor: indexData === index ? color.primary : color.white,
...styles.innerCircle,
}}
/>
</View>
<View style={styles.labelContainer}>
{this.state.rcboOptions.map((item, index) => (
<Text
key={`label${item.value}`}
style={[
theme.normalText,
{
fontSize: 14,
color: this.state.indexData >= index ? color.primary : color.grey,
},
indexData === index ? theme.textDanger : null,
theme.description,
theme.mt1,
]}
>
{item.label}
</Text>
</TouchableOpacity>
))}
</View>
</>
) : (
<View style={styles.textInputContainer}>
<TextInput
......@@ -230,4 +261,22 @@ const styles = StyleSheet.create({
borderRadius: 100,
marginTop: 40,
},
rowContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
...theme.mt2,
},
outerCircle: {
width: 14,
height: 14,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
},
innerCircle: {
width: 10,
height: 10,
borderRadius: 10,
},
});
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