Skip to content

S
safetcut-app
Commit 3aa4cff0 by Tonk
Options

update timer filter

parent 56b41f96
Showing with 72 additions and 14 deletions
screens/Private/TimerScreen/TimerScreen.js
...@@ -90,7 +90,40 @@ const MultipleMockData = [ ...@@ -90,7 +90,40 @@ const MultipleMockData = [
], ],
}, },
]; ];
const breaker = [
{
label: 'Main MCB Link',
value: 'mcbmain',
sub: [{ id: 1, active: true }, { id: 2, active: true }, { id: 3, active: true }],
},
{
label: 'MCB Link 1',
value: 'mcb1',
sub: [{ id: 1, active: true }, { id: 2, active: true }, { id: 3, active: true }],
},
{
label: 'MCB Link 2',
value: 'mcb2',
sub: [{ id: 1, active: true }, { id: 2, active: true }, { id: 3, active: true }],
},
{
label: 'MCB Link 3',
value: 'mcb3',
sub: [{ id: 1, active: true }, { id: 2, active: true }, { id: 3, active: true }],
},
{
label: 'MCB Link 4',
value: 'mcb4',
sub: [
{ id: 1, active: true },
{ id: 2, active: true },
{ id: 3, active: true },
{ id: 4, active: true },
{ id: 5, active: true },
{ id: 6, active: true },
],
},
];
export default class TimerScreen extends Component { export default class TimerScreen extends Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
title: 'Timer', title: 'Timer',
...@@ -123,6 +156,7 @@ export default class TimerScreen extends Component { ...@@ -123,6 +156,7 @@ export default class TimerScreen extends Component {
currentTime: new Date(), currentTime: new Date(),
isVisible: false, isVisible: false,
filterOpen: false, filterOpen: false,
selectedBreaker: '',
checked: [], checked: [],
}; };
...@@ -155,9 +189,25 @@ export default class TimerScreen extends Component { ...@@ -155,9 +189,25 @@ export default class TimerScreen extends Component {
}); });
} }
render() { render() {
console.log(MultipleMockData[0]);
return ( return (
<> <>
{/* Overlay */}
{this.state.isVisible ||
(this.state.filterOpen && (
<View
style={{
flex: 1,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
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
...@@ -211,7 +261,7 @@ export default class TimerScreen extends Component { ...@@ -211,7 +261,7 @@ export default class TimerScreen extends Component {
animationType="slide" animationType="slide"
visible={this.state.isVisible} visible={this.state.isVisible}
> >
<View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0,0.5)' }}> <View style={{ flex: 1, backgroundColor: 'transparent' }}>
<ScrollView contentContainerStyle={[styles.scrollContainer]}> <ScrollView contentContainerStyle={[styles.scrollContainer]}>
<Text style={theme.title}>Create Timer</Text> <Text style={theme.title}>Create Timer</Text>
...@@ -313,7 +363,7 @@ export default class TimerScreen extends Component { ...@@ -313,7 +363,7 @@ export default class TimerScreen extends Component {
animationType="slide" animationType="slide"
visible={this.state.filterOpen} visible={this.state.filterOpen}
> >
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}> <View style={{ flex: 1, backgroundColor: 'transparent' }}>
<View style={styles.filterModal}> <View style={styles.filterModal}>
<View <View
style={[ style={[
...@@ -352,13 +402,13 @@ export default class TimerScreen extends Component { ...@@ -352,13 +402,13 @@ export default class TimerScreen extends Component {
]} ]}
> >
<RNPickerSelect <RNPickerSelect
onValueChange={value => console.log(value)} onValueChange={(value, index) =>
this.setState({
selectedBreaker: breaker[index - 1].sub,
})
}
placeholder={{ label: 'Select Breaker', value: null }} placeholder={{ label: 'Select Breaker', value: null }}
items={[ items={breaker}
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
style={{ style={{
inputIOS: { inputIOS: {
color: color.darkGrey, color: color.darkGrey,
...@@ -375,7 +425,7 @@ export default class TimerScreen extends Component { ...@@ -375,7 +425,7 @@ export default class TimerScreen extends Component {
</View> </View>
<FlatList <FlatList
style={theme.mt2} style={theme.mt2}
data={[1, 2, 3, 4, 5, 6, 7, 8]} data={this.state.selectedBreaker}
ListEmptyComponent={() => ( ListEmptyComponent={() => (
<View> <View>
<Text style={[theme.normalText, theme.mt2]}>No Sub breaker</Text> <Text style={[theme.normalText, theme.mt2]}>No Sub breaker</Text>
...@@ -387,13 +437,21 @@ export default class TimerScreen extends Component { ...@@ -387,13 +437,21 @@ export default class TimerScreen extends Component {
containerStyle={styles.checkboxContainer} containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'} fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }} textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={'Sub breaker ' + (index + 1)} title={'Sub breaker ' + item.id}
checked={this.state.checked[index]} checked={this.state.selectedBreaker[index].active}
checkedIcon={ checkedIcon={
<Icon name="checkbox" style={{ color: color.primary, fontSize: 26 }} /> <Icon name="checkbox" style={{ color: color.primary, fontSize: 26 }} />
} }
uncheckedIcon={<Icon name="square-outline" style={{ color: color.grey }} />} uncheckedIcon={<Icon name="square-outline" style={{ color: color.grey }} />}
onPress={() => this.setState({ checked: !this.state.checked })} onPress={() =>
this.setState(prevState => ({
selectedBreaker: prevState.selectedBreaker.map(el =>
el.id === index + 1
? { ...el, active: !this.state.selectedBreaker[index].active }
: el
),
}))
}
/> />
)} )}
keyExtractor={(item, index) => `sub ${index}`} keyExtractor={(item, index) => `sub ${index}`}
......
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