Skip to content

S
safetcut-app
Commit 756c4c6b by OuiAtichat
Options

update overlay & update seachbar

parent a44a6e17
Showing with 66 additions and 36 deletions
screens/Private/TimerScreen/TimerScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Fab, Icon, Text } from 'native-base'; import { Fab, Icon, Text } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView, Modal, TouchableOpacity } from 'react-native'; import { View, StyleSheet, FlatList, ScrollView, Modal, TouchableOpacity, TextInput } from 'react-native';
import { Switch, Button } from 'native-base'; import { Switch, Button } from 'native-base';
import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons'; import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import RNPickerSelect from 'react-native-picker-select';
import { Badge } from 'react-native-elements'; import { Badge, CheckBox, SearchBar } from 'react-native-elements';
import SwipeableRow from '../../../components/SwipeableRow'; import SwipeableRow from '../../../components/SwipeableRow';
import DatePicker from 'react-native-date-picker'; import DatePicker from 'react-native-date-picker';
import { height } from '../../../constants/Layout'; import { width, height } from '../../../constants/Layout';
import InputField from '../../../components/InputField'; import InputField from '../../../components/InputField';
import { isIphoneX } from '../../../utils/isPhoneX'; import { isIphoneX } from '../../../utils/isPhoneX';
// import { TouchableOpacity } from 'react-native-gesture-handler';
// mock data // mock data
const MultipleMockData = [ const MultipleMockData = [
{ {
...@@ -163,11 +162,11 @@ export default class TimerScreen extends Component { ...@@ -163,11 +162,11 @@ export default class TimerScreen extends Component {
{ day: 'F', isRepeat: false }, { day: 'F', isRepeat: false },
{ day: 'S', isRepeat: false }, { day: 'S', isRepeat: false },
], ],
// repeatDays: [{ S: false }, { M: false }, { T: false }, { W: false }, { T: false }, { F: false }, { S: false }],
isVisible: false, isVisible: false,
filterOpen: false, filterOpen: false,
selectedBreaker: '', selectedBreaker: '',
checked: [], checked: [],
search: '',
}; };
renderTimerFab = () => { renderTimerFab = () => {
...@@ -218,6 +217,10 @@ export default class TimerScreen extends Component { ...@@ -218,6 +217,10 @@ export default class TimerScreen extends Component {
})); }));
}; };
updateSearch = search => {
this.setState({ search });
};
componentDidUpdate = (prevProps, prevState) => { componentDidUpdate = (prevProps, prevState) => {
if (prevState !== this.state) console.log(this.state); if (prevState !== this.state) console.log(this.state);
}; };
...@@ -226,27 +229,22 @@ export default class TimerScreen extends Component { ...@@ -226,27 +229,22 @@ export default class TimerScreen extends Component {
return ( return (
<> <>
{/* Overlay */} {/* Overlay */}
{this.state.isVisible ||
(this.state.filterOpen && ( <Modal
<View transparent
style={{ presentationStyle={'overFullScreen'}
flex: 1, animationType="fade"
position: 'absolute', visible={this.state.filterOpen || this.state.isVisible}
top: 0, >
bottom: 0, <View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} />
left: 0, </Modal>
right: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
zIndex: 1,
}}
/>
))}
{/* Search Bar */} {/* Search Bar */}
<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}> <View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}>
<View {/* <View
style={[ style={[
{ {
// height: 30,
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 10,
borderColor: '#c7cad1', borderColor: '#c7cad1',
...@@ -263,7 +261,32 @@ export default class TimerScreen extends Component { ...@@ -263,7 +261,32 @@ export default class TimerScreen extends Component {
placeholderTextColor="#b9bdc5" placeholderTextColor="#b9bdc5"
style={{ fontSize: 14, fontFamily: 'Avenir-Roman' }} style={{ fontSize: 14, fontFamily: 'Avenir-Roman' }}
/> />
</View> </View> */}
<SearchBar
containerStyle={{
flex: 1,
display: 'flex',
borderWidth: 1,
borderColor: '#c7cad1',
backgroundColor: 'transparent',
height: 30,
paddingVertical: 0,
borderRadius: 30,
}}
inputContainerStyle={{
borderWidth: 0,
backgroundColor: 'transparent',
minHeight: 10,
height: 30,
borderColor: '#c7cad1',
}}
inputStyle={{ fontFamily: 'Avenir-Roman', fontSize: 12, color: color.darkGrey }}
round
lightTheme
placeholder="Search..."
onChangeText={this.updateSearch}
value={this.state.search}
/>
<Icon <Icon
name="funnel" name="funnel"
style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }} style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
...@@ -365,16 +388,29 @@ export default class TimerScreen extends Component { ...@@ -365,16 +388,29 @@ export default class TimerScreen extends Component {
justifyContent: 'center', justifyContent: 'center',
backgroundColor: color.primary, backgroundColor: color.primary,
}} }}
onPress={() => { onPress={async () => {
this.setState({ isVisible: false }); await MultipleMockData[0].timer.push({
MultipleMockData[0].timer.push({
name: 'Slot 1', name: 'Slot 1',
time: this.state.timer, time: this.state.timer,
active: this.state.active, active: this.state.active,
power: this.state.power, power: this.state.power,
repeatDays: this.state.repeatDays, repeatDays: this.state.repeatDays,
}); });
this.setState({
isVisible: false,
timer: new Date(),
active: false,
power: false,
repeatDays: [
{ day: 'S', isRepeat: false },
{ day: 'M', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'W', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: false },
{ day: 'S', isRepeat: false },
],
});
}} }}
> >
<Text style={{ color: color.white }}>Confirm</Text> <Text style={{ color: color.white }}>Confirm</Text>
...@@ -409,11 +445,7 @@ export default class TimerScreen extends Component { ...@@ -409,11 +445,7 @@ export default class TimerScreen extends Component {
<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text> <Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
<Text <Text
style={[theme.smallTitle, theme.textDanger]} style={[theme.smallTitle, theme.textDanger]}
onPress={() => onPress={() => this.setState({ filterOpen: false })}
this.setState({
filterOpen: false,
})
}
> >
Done Done
</Text> </Text>
...@@ -432,9 +464,7 @@ export default class TimerScreen extends Component { ...@@ -432,9 +464,7 @@ export default class TimerScreen extends Component {
> >
<RNPickerSelect <RNPickerSelect
onValueChange={(value, index) => onValueChange={(value, index) =>
this.setState({ this.setState({ selectedBreaker: breaker[index - 1].sub })
selectedBreaker: breaker[index - 1].sub,
})
} }
placeholder={{ label: 'Select Breaker', value: null }} placeholder={{ label: 'Select Breaker', value: null }}
items={breaker} items={breaker}
...@@ -483,7 +513,7 @@ export default class TimerScreen extends Component { ...@@ -483,7 +513,7 @@ export default class TimerScreen extends Component {
} }
/> />
)} )}
keyExtractor={(item, index) => `sub ${index}`} keyExtractor={(item, index) => `sub${index}`}
/> />
</View> </View>
</View> </View>
......
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