chore: integrate native timer in add task screen #38

vishal2376 · Mar 27, 2024 · 9ae9168 · 9ae9168
1 parent e304769
commit 9ae9168
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 27 deletions.
diff --git a/app/src/main/java/com/vishal2376/snaptick/presentation/add_edit_screen/AddTaskScreen.kt b/app/src/main/java/com/vishal2376/snaptick/presentation/add_edit_screen/AddTaskScreen.kt
@@ -38,6 +38,7 @@ import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberTimePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -64,8 +65,10 @@ import com.vishal2376.snaptick.presentation.add_edit_screen.components.CustomDat
 import com.vishal2376.snaptick.presentation.add_edit_screen.components.CustomDurationDialogComponent
 import com.vishal2376.snaptick.presentation.add_edit_screen.components.DurationComponent
 import com.vishal2376.snaptick.presentation.add_edit_screen.components.PriorityComponent
+import com.vishal2376.snaptick.presentation.add_edit_screen.components.ShowNativeTimePicker
 import com.vishal2376.snaptick.presentation.add_edit_screen.components.WeekDaysComponent
 import com.vishal2376.snaptick.presentation.common.AppTheme
+import com.vishal2376.snaptick.presentation.common.NativeTimePickerDialog
 import com.vishal2376.snaptick.presentation.common.Priority
 import com.vishal2376.snaptick.presentation.common.ShowTimePicker
 import com.vishal2376.snaptick.presentation.common.SnackbarController.showCustomSnackbar
@@ -96,9 +99,10 @@ fun AddTaskScreen(
 	onBack: () -> Unit
 ) {
 
+	val currentTime = LocalTime.now()
 	var taskTitle by remember { mutableStateOf("") }
-	var taskStartTime by remember { mutableStateOf(LocalTime.now()) }
-	var taskEndTime by remember { mutableStateOf(LocalTime.now().plusHours(1)) }
+	var taskStartTime by remember { mutableStateOf(currentTime) }
+	var taskEndTime by remember { mutableStateOf(currentTime.plusHours(1)) }
 	var taskDate by remember { mutableStateOf(LocalDate.now()) }
 	var isTaskReminderOn by remember { mutableStateOf(true) }
 	var isTaskRepeated by remember { mutableStateOf(false) }
@@ -112,6 +116,8 @@ fun AddTaskScreen(
 
 	var showDialogCustomDuration by remember { mutableStateOf(false) }
 	var showDialogDatePicker by remember { mutableStateOf(false) }
+	var showDialogStartTimePicker by remember { mutableStateOf(false) }
+	var showDialogEndTimePicker by remember { mutableStateOf(false) }
 
 	Scaffold(topBar = {
 		TopAppBar(
@@ -173,6 +179,22 @@ fun AddTaskScreen(
 			)
 		}
 
+		if (showDialogStartTimePicker) {
+			NativeTimePickerDialog(time = taskStartTime, onClose = {
+				taskStartTime = it
+				showDialogStartTimePicker = false
+			})
+		}
+
+		if (showDialogEndTimePicker) {
+			NativeTimePickerDialog(
+				time = taskEndTime,
+				onClose = {
+					taskEndTime = it
+					showDialogEndTimePicker = false
+				})
+		}
+
 		if (showDialogDatePicker) {
 			CustomDatePickerDialog(
 				defaultDay = taskDate, onClose = { day ->
@@ -248,10 +270,16 @@ fun AddTaskScreen(
 							color = if (appState.theme == AppTheme.Light) DarkGreen else LightGreen
 						)
 						Spacer(modifier = Modifier.height(8.dp))
-						ShowTimePicker(
-							time = taskStartTime
-						) { snappedTime ->
-							taskStartTime = snappedTime
+						if (appState.isWheelTimePicker) {
+							ShowTimePicker(
+								time = taskStartTime
+							) { snappedTime ->
+								taskStartTime = snappedTime
+							}
+						} else {
+							ShowNativeTimePicker(time = taskStartTime) {
+								showDialogStartTimePicker = true
+							}
 						}
 					}
 					Column(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -261,11 +289,18 @@ fun AddTaskScreen(
 							color = Red
 						)
 						Spacer(modifier = Modifier.height(8.dp))
-						ShowTimePicker(
-							time = taskEndTime,
-							isTimeUpdated = isTimeUpdated
-						) { snappedTime ->
-							taskEndTime = snappedTime
+						if (appState.isWheelTimePicker) {
+
+							ShowTimePicker(
+								time = taskEndTime,
+								isTimeUpdated = isTimeUpdated
+							) { snappedTime ->
+								taskEndTime = snappedTime
+							}
+						} else {
+							ShowNativeTimePicker(time = taskEndTime) {
+								showDialogEndTimePicker = true
+							}
 						}
 					}
 				}

diff --git a/...hal2376/snaptick/presentation/add_edit_screen/components/ShowNativeTimePickerComponent.kt b/...hal2376/snaptick/presentation/add_edit_screen/components/ShowNativeTimePickerComponent.kt
@@ -0,0 +1,51 @@
+package com.vishal2376.snaptick.presentation.add_edit_screen.components
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccessTime
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import com.vishal2376.snaptick.presentation.common.taskTextStyle
+import java.time.LocalTime
+import java.time.format.DateTimeFormatter
+
+@Composable
+fun ShowNativeTimePicker(time: LocalTime, onClick: () -> Unit) {
+	Box(modifier = Modifier.padding(vertical = 16.dp)) {
+		Row(
+			modifier = Modifier
+				.clip(RoundedCornerShape(16.dp))
+				.clickable { onClick() }
+				.border(2.dp, MaterialTheme.colorScheme.secondary, RoundedCornerShape(16.dp))
+				.padding(10.dp),
+			verticalAlignment = Alignment.CenterVertically,
+			horizontalArrangement = Arrangement.spacedBy(8.dp)
+		) {
+			Icon(
+				imageVector = Icons.Default.AccessTime,
+				contentDescription = null,
+				tint = MaterialTheme.colorScheme.onPrimary,
+				modifier = Modifier.size(24.dp)
+			)
+			val dtf = DateTimeFormatter.ofPattern("hh : mm a")
+			Text(
+				text = time.format(dtf),
+				style = taskTextStyle,
+				color = MaterialTheme.colorScheme.onPrimary
+			)
+		}
+	}
+}
diff --git a/app/src/main/java/com/vishal2376/snaptick/presentation/common/NativeTimePickerDialog.kt b/app/src/main/java/com/vishal2376/snaptick/presentation/common/NativeTimePickerDialog.kt
@@ -13,7 +13,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TimePicker
 import androidx.compose.material3.TimePickerDefaults
-import androidx.compose.material3.TimePickerState
 import androidx.compose.material3.rememberTimePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -26,14 +25,16 @@ import com.vishal2376.snaptick.R
 import com.vishal2376.snaptick.ui.theme.Black500
 import com.vishal2376.snaptick.ui.theme.Blue
 import com.vishal2376.snaptick.ui.theme.SnaptickTheme
+import java.time.LocalTime
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun NativeTimePickerDialog(
-	state: TimePickerState,
-	onClose: () -> Unit,
+	time: LocalTime,
+	onClose: (LocalTime) -> Unit,
 ) {
-	Dialog(onDismissRequest = { onClose() }) {
+	val state = rememberTimePickerState(time.hour, time.minute, false)
+	Dialog(onDismissRequest = { onClose(time) }) {
 		Card(
 			modifier = Modifier
 				.fillMaxWidth()
@@ -65,7 +66,8 @@ fun NativeTimePickerDialog(
 					modifier = Modifier
 						.padding(16.dp, 8.dp)
 						.clickable {
-							onClose()
+							val newTime = LocalTime.of(state.hour, state.minute)
+							onClose(newTime)
 						}
 						.align(Alignment.End),
 					text = stringResource(R.string.done),
@@ -83,6 +85,6 @@ fun NativeTimePickerDialog(
 fun NativeTimePickerDialogPreview() {
 	val state = rememberTimePickerState()
 	SnaptickTheme {
-		NativeTimePickerDialog(state = state, {})
+		NativeTimePickerDialog(LocalTime.now(), {})
 	}
 }
diff --git a/app/src/main/java/com/vishal2376/snaptick/presentation/main/MainState.kt b/app/src/main/java/com/vishal2376/snaptick/presentation/main/MainState.kt
@@ -14,5 +14,5 @@ data class MainState(
 	val streak: Int = -1,
 	val sleepTime: LocalTime = LocalTime.MAX,
 	val language: String = Locale.getDefault().language,
-	val isWheelTimePicker: Boolean = true,
+	val isWheelTimePicker: Boolean = false,
 )
diff --git a/...ava/com/vishal2376/snaptick/presentation/settings/components/TimePickerOptionComponent.kt b/...ava/com/vishal2376/snaptick/presentation/settings/components/TimePickerOptionComponent.kt
@@ -18,11 +18,9 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AccessTime
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberTimePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -45,21 +43,19 @@ import com.vishal2376.snaptick.ui.theme.SnaptickTheme
 import java.time.LocalTime
 import java.time.format.DateTimeFormatter
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TimePickerOptionComponent(isWheelTimePicker: Boolean, onSelect: (Boolean) -> Unit) {
 	var selectedOption by remember { mutableStateOf(isWheelTimePicker) }
-	var showDialogDatePicker by remember { mutableStateOf(false) }
+	var showDialogTimePicker by remember { mutableStateOf(false) }
 	val selectedTime by remember { mutableStateOf(LocalTime.now()) }
-	val state = rememberTimePickerState(selectedTime.hour, selectedTime.minute, false)
 
 	Column(
 		horizontalAlignment = Alignment.CenterHorizontally,
 		verticalArrangement = Arrangement.spacedBy(8.dp)
 	) {
 
-		if (showDialogDatePicker) {
-			NativeTimePickerDialog(state = state, onClose = { showDialogDatePicker = false })
+		if (showDialogTimePicker) {
+			NativeTimePickerDialog(selectedTime, onClose = { showDialogTimePicker = false })
 		}
 
 		Text(
@@ -77,7 +73,7 @@ fun TimePickerOptionComponent(isWheelTimePicker: Boolean, onSelect: (Boolean) ->
 			Row(
 				modifier = Modifier
 					.clip(RoundedCornerShape(16.dp))
-					.clickable { showDialogDatePicker = true }
+					.clickable { showDialogTimePicker = true }
 					.border(1.dp, MaterialTheme.colorScheme.primary, RoundedCornerShape(16.dp))
 					.padding(10.dp),
 				verticalAlignment = Alignment.CenterVertically,
@@ -91,7 +87,7 @@ fun TimePickerOptionComponent(isWheelTimePicker: Boolean, onSelect: (Boolean) ->
 				)
 				val dtf = DateTimeFormatter.ofPattern("hh : mm a")
 				Text(
-					text = LocalTime.of(state.hour, state.minute).format(dtf),
+					text = selectedTime.format(dtf),
 					style = taskTextStyle,
 					color = MaterialTheme.colorScheme.onPrimary
 				)