update timer style

components/SlideUpModal.js

@@ -8,11 +8,12 @@ export default class SlideUpModal extends React.Component {
 	};
 
 	componentDidMount() {
+		const topValue = this.props.ending * height;
 		Animated.timing(
 			// Animate over time
 			this.state.slide, // The animated value to drive
 			{
-				toValue: height * 0.3, // Animate to opacity: 1 (opaque)
+				toValue: topValue, // Animate to opacity: 1 (opaque)
 				duration: 500, // Make it take a while
 			}
 		).start(); // Starts the animation

components/SwipeableRow.js

@@ -16,9 +16,11 @@ const Row = ({ data }) => {
 		<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
 			<View style={{ flexDirection: 'row', paddingVertical: 5 }}>
 				<View style={{ flex: 1 }}>
-					<Text style={[theme.title]}>
+					<Text style={[theme.title, { color: !data.active && color.grey }]}>
 						{format(data.time, 'h:mm')}{' '}
-						<Text style={[theme.description, theme.textDark]}>{format(data.time, 'A')}</Text>
+						<Text style={[theme.description, theme.textDark, { color: !data.active && color.grey }]}>
+							{format(data.time, 'A')}
+						</Text>
 					</Text>
 					<View style={theme.rowContainer}>
 						{data.repeatDays.map((item, index) => (
@@ -43,7 +45,9 @@ const Row = ({ data }) => {
 					</View>
 				</View>
 				<View style={{ flex: 1 }}>
-					<Text style={[theme.title, { fontWeight: 'normal' }]}>{data.name}</Text>
+					<Text style={[theme.title, { fontWeight: 'normal', color: !data.active && color.grey }]}>
+						{data.name}
+					</Text>
 					<Text style={theme.description}>{data.active ? 'Active' : 'Inactive'} </Text>
 				</View>
 				<View style={{ flex: 1, alignItems: 'flex-end' }}>
@@ -185,7 +189,7 @@ const styles = StyleSheet.create({
 		backgroundColor: color.primary,
 		color: color.white,
 		justifyContent: 'center',
-		borderRadius: 9,
+		borderRadius: 100,
 	},
 	cfDelOverlay: {
 		padding: 20,

screens/Private/TimerScreen/TimerScreen.js

@@ -285,7 +285,7 @@ export default class TimerScreen extends Component {
 						value={this.state.search}
 					/>
 					<Icon
-						name="funnel"
+						name="md-funnel"
 						style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
 						onPress={() => this.onOpenModal()}
 					/>
@@ -312,34 +312,101 @@ export default class TimerScreen extends Component {
 				<Modal
 					transparent
 					presentationStyle={'overFullScreen'}
-					animationType="slide"
+					animationType="fade"
 					visible={this.state.isVisible}
 				>
 					<FadeDimBG />
 					<View style={{ flex: 1, backgroundColor: 'transparent' }}>
-						<ScrollView contentContainerStyle={[styles.scrollContainer]}>
+						<SlideUpModal ending={0.1} style={styles.scrollContainer}>
+							<ScrollView>
 								<Text style={theme.title}>Create Timer</Text>
 
-							<Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
+								<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Set Time</Text>
 								<DatePicker
 									date={this.state.timer}
 									onDateChange={date => this.setState({ timer: date })}
 									mode="time"
 									style={{ height: 100 }}
 								/>
+								<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Select Breaker</Text>
+								<View
+									style={[
+										theme.mt2,
+										{
+											borderWidth: 1,
+											borderColor: '#dcdcdc',
+											borderRadius: 5,
+											padding: 10,
+										},
+									]}
+								>
+									<RNPickerSelect
+										onValueChange={(value, index) =>
+											this.setState({ selectedBreaker: breaker[index - 1].sub })
+										}
+										placeholder={{ label: 'Select Breaker', value: null }}
+										items={breaker}
+										style={{
+											inputIOS: {
+												color: color.darkGrey,
+												fontFamily: 'Avenir-Roman',
+											},
+											iconContainer: {
+												right: 0,
+											},
+										}}
+										Icon={() => {
+											return (
+												<Icon name="arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />
+											);
+										}}
+									/>
+								</View>
+								<FlatList
+									style={theme.mt2}
+									data={this.state.selectedBreaker}
+									ListEmptyComponent={() => (
 										<View>
-								<Text style={[theme.normalText, theme.textDark]}>Name</Text>
-								<InputField placeholder="Name" customStyle={[theme.input, { marginTop: 0 }]} />
+											<Text style={[theme.normalText, theme.mt1]}>No Sub breaker</Text>
 										</View>
-							<View style={[styles.rowContainer]}>
+									)}
+									ItemSeparatorComponent={() => <View style={theme.mt1} />}
+									renderItem={({ item, index }) => (
+										<CheckBox
+											containerStyle={styles.checkboxContainer}
+											fontFamily={'Avenir-Roman'}
+											textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
+											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(prevState => ({
+													selectedBreaker: prevState.selectedBreaker.map(el =>
+														el.id === index + 1
+															? {
+																	...el,
+																	active: !this.state.selectedBreaker[index].active,
+															  }
+															: el
+													),
+												}))
+											}
+										/>
+									)}
+									keyExtractor={(item, index) => `sub${index}`}
+								/>
+								<View style={[styles.rowContainer, theme.mt2]}>
 									<Text style={[theme.normalText, theme.textDark]}>Power</Text>
 									<Switch value={this.state.power} onValueChange={this.togglePower} />
 								</View>
-							<View style={[styles.rowContainer]}>
+								<View style={[styles.rowContainer, theme.mt2]}>
 									<Text style={[theme.normalText, theme.textDark]}>Active</Text>
 									<Switch value={this.state.active} onValueChange={this.toggleActive} />
 								</View>
-							<View>
+								<View style={theme.mt2}>
 									<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
 									<View style={styles.dayContainer}>
 										{this.state.repeatDays.map((item, index) => (
@@ -371,7 +438,7 @@ export default class TimerScreen extends Component {
 										))}
 									</View>
 								</View>
-							<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
+								<View style={[{ flexDirection: 'row', justifyContent: 'space-evenly' }, theme.mt2]}>
 									<Button
 										transparent
 										style={{ flex: 1, justifyContent: 'center' }}
@@ -431,6 +498,7 @@ export default class TimerScreen extends Component {
 									</Button>
 								</View>
 							</ScrollView>
+						</SlideUpModal>
 					</View>
 				</Modal>
 				{this.renderTimerFab()}
@@ -444,7 +512,7 @@ export default class TimerScreen extends Component {
 				>
 					<FadeDimBG />
 					<View style={{ flex: 1, backgroundColor: 'transparent' }}>
-						<SlideUpModal style={styles.filterModal}>
+						<SlideUpModal ending={0.3} style={styles.filterModal}>
 							<View
 								style={[
 									theme.rowContainer,
@@ -563,10 +631,10 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 	},
 	scrollContainer: {
-		flex: 0.95,
-		top: height * 0.05,
+		flex: 0.9,
+		top: height * 0.1,
 		paddingTop: 20,
-		paddingBottom: 18,
+		paddingBottom: 30,
 		paddingHorizontal: 25,
 		backgroundColor: '#fff',
 		borderTopLeftRadius: 10,