Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/datepicker-click SusuDatePicker 클릭으로 선택 #88

Merged
merged 1 commit into from
Jan 24, 2024
Merged

Feature/datepicker-click SusuDatePicker 클릭으로 선택 #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion ...c/main/java/com/susu/core/designsystem/component/bottomsheet/datepicker/InfiniteColumn.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import androidx.compose.ui.unit.dp
import com.susu.core.designsystem.theme.Gray100
import com.susu.core.designsystem.theme.Gray30
import com.susu.core.designsystem.theme.SusuTheme
import com.susu.core.ui.extension.susuClickable

@OptIn(ExperimentalFoundationApi::class)
@Composable
Expand All @@ -41,21 +42,31 @@ fun <T> InfiniteColumn(
textColor: Color = Gray30,
selectedTextColor: Color = Gray100,
onItemSelected: (index: Int, item: T) -> Unit = { _, _ -> },
onItemClicked: (item: T) -> Unit = { },
) {
val itemHalfHeight = LocalDensity.current.run { itemHeight.toPx() / 2f }
var lastSelectedIndex by remember { mutableStateOf(0) }
var itemsState by remember { mutableStateOf(items) }
val lazyListState = rememberLazyListState(0)
val flingBehavior: FlingBehavior = rememberSnapFlingBehavior(lazyListState)
var clickedIndex: Int? by remember { mutableStateOf(null) }

LaunchedEffect(items) {
LaunchedEffect(key1 = items) {
var targetIndex = items.indexOf(initialItem)
targetIndex += ((Int.MAX_VALUE / 2) / items.size) * items.size
itemsState = items
lastSelectedIndex = targetIndex
lazyListState.scrollToItem(targetIndex - 2, scrollOffset = (itemHeight.value * 0.6f).toInt())
}

LaunchedEffect(clickedIndex) {
if (clickedIndex != null) {
lastSelectedIndex = clickedIndex!!
val targetIndex = clickedIndex!! - 2
lazyListState.animateScrollToItem(targetIndex, scrollOffset = (itemHeight.value * 0.6f).toInt())
}
}

LazyColumn(
modifier = modifier.height(itemHeight * numberOfDisplayedItems),
state = lazyListState,
Expand Down Expand Up @@ -85,6 +96,13 @@ fun <T> InfiniteColumn(
contentAlignment = Alignment.Center,
) {
Text(
modifier = Modifier.susuClickable(
onClick = {
clickedIndex = i
onItemClicked(item)
},
rippleEnabled = false,
),
text = item.toString(),
style = if (lastSelectedIndex == i) {
selectedTextStyle
Expand Down
29 changes: 29 additions & 0 deletions .../com/susu/core/designsystem/component/bottomsheet/datepicker/SusuDatePickerBottomSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ fun SusuDatePickerBottomSheet(
}
onItemSelected(selectedYear, selectedMonth, selectedDay)
},
onItemClicked = { item ->
selectedYear = item.dropLast(1).toIntOrNull() ?: currentDate.year
},
)
InfiniteColumn(
modifier = Modifier.width(100.dp),
Expand All @@ -95,6 +98,9 @@ fun SusuDatePickerBottomSheet(
}
onItemSelected(selectedYear, selectedMonth, selectedDay)
},
onItemClicked = { item ->
selectedMonth = item.dropLast(1).toIntOrNull() ?: currentDate.monthValue
},
)
InfiniteColumn(
modifier = Modifier.width(100.dp),
Expand All @@ -106,6 +112,9 @@ fun SusuDatePickerBottomSheet(
selectedDay = item.dropLast(1).toIntOrNull() ?: 1
onItemSelected(selectedYear, selectedMonth, selectedDay)
},
onItemClicked = { item ->
selectedMonth = item.dropLast(1).toIntOrNull() ?: 1
},
)
}
}
Expand Down Expand Up @@ -234,6 +243,9 @@ fun SusuLimitDatePickerBottomSheet(
selectedYear = item.dropLast(1).toIntOrNull() ?: criteriaYear
onItemSelected(selectedYear, selectedMonth, selectedDay)
},
onItemClicked = { item ->
selectedYear = item.dropLast(1).toIntOrNull() ?: criteriaYear
},
)
if (monthRange.count() > 1) {
InfiniteColumn(
Expand All @@ -246,6 +258,9 @@ fun SusuLimitDatePickerBottomSheet(
selectedMonth = item.dropLast(1).toIntOrNull() ?: criteriaMonth
onItemSelected(selectedYear, selectedMonth, selectedDay)
},
onItemClicked = { item ->
selectedMonth = item.dropLast(1).toIntOrNull() ?: criteriaMonth
},
)
} else {
selectedMonth = criteriaMonth
Expand Down Expand Up @@ -276,6 +291,9 @@ fun SusuLimitDatePickerBottomSheet(
selectedDay = item.dropLast(1).toIntOrNull() ?: 1
onItemSelected(selectedYear, selectedMonth, selectedDay)
},
onItemClicked = { item ->
selectedDay = item.dropLast(1).toIntOrNull() ?: 1
},
)
} else {
selectedDay = criteriaDay
Expand Down Expand Up @@ -312,6 +330,7 @@ fun SusuYearPickerBottomSheet(
cornerRadius: Dp = 24.dp,
onDismissRequest: (Int) -> Unit = {},
onItemSelected: (Int) -> Unit = {},
onItemClicked: (Int) -> Unit = {},
) {
val currentYear = remember { LocalDate.now().year }
var selectedYear by remember { mutableIntStateOf(initialYear ?: currentYear) }
Expand All @@ -334,6 +353,7 @@ fun SusuYearPickerBottomSheet(
selectedYear = item.dropLast(1).toIntOrNull() ?: currentYear
onItemSelected(selectedYear)
},
onItemClicked = { onItemClicked(it.dropLast(1).toIntOrNull() ?: currentYear) },
)
}
}
Expand Down Expand Up @@ -367,3 +387,12 @@ fun SusuLimitDatePickerBottomSheetPreview() {
)
}
}

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun SusuYearPickerBottomSheetPreview() {
SusuTheme {
SusuYearPickerBottomSheet(maximumContainerHeight = 300.dp)
}
}