update timer filter

screens/Private/TimerScreen/TimerScreen.js

@@ -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 {
 	static navigationOptions = ({ navigation }) => ({
 		title: 'Timer',
@@ -123,6 +156,7 @@ export default class TimerScreen extends Component {
 		currentTime: new Date(),
 		isVisible: false,
 		filterOpen: false,
+		selectedBreaker: '',
 		checked: [],
 	};
 
@@ -155,9 +189,25 @@ export default class TimerScreen extends Component {
 		});
 	}
 	render() {
-		console.log(MultipleMockData[0]);
 		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 */}
 				<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}>
 					<View
@@ -211,7 +261,7 @@ export default class TimerScreen extends Component {
 					animationType="slide"
 					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]}>
 							<Text style={theme.title}>Create Timer</Text>
 
@@ -313,7 +363,7 @@ export default class TimerScreen extends Component {
 					animationType="slide"
 					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={[
@@ -352,13 +402,13 @@ export default class TimerScreen extends Component {
 								]}
 							>
 								<RNPickerSelect
-									onValueChange={value => console.log(value)}
+									onValueChange={(value, index) =>
+										this.setState({
+											selectedBreaker: breaker[index - 1].sub,
+										})
+									}
 									placeholder={{ label: 'Select Breaker', value: null }}
-									items={[
-										{ label: 'Football', value: 'football' },
-										{ label: 'Baseball', value: 'baseball' },
-										{ label: 'Hockey', value: 'hockey' },
-									]}
+									items={breaker}
 									style={{
 										inputIOS: {
 											color: color.darkGrey,
@@ -375,7 +425,7 @@ export default class TimerScreen extends Component {
 							</View>
 							<FlatList
 								style={theme.mt2}
-								data={[1, 2, 3, 4, 5, 6, 7, 8]}
+								data={this.state.selectedBreaker}
 								ListEmptyComponent={() => (
 									<View>
 										<Text style={[theme.normalText, theme.mt2]}>No Sub breaker</Text>
@@ -387,13 +437,21 @@ export default class TimerScreen extends Component {
 										containerStyle={styles.checkboxContainer}
 										fontFamily={'Avenir-Roman'}
 										textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
-										title={'Sub breaker ' + (index + 1)}
-										checked={this.state.checked[index]}
+										title={'Sub breaker ' + item.id}
+										checked={this.state.selectedBreaker[index].active}
 										checkedIcon={
 											<Icon name="checkbox" style={{ color: color.primary, fontSize: 26 }} />
 										}
 										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}`}