-
Notifications
You must be signed in to change notification settings - Fork 36
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.
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
[DON-715] Whole month in single date selection #2113
Changes from 4 commits
ee8d330
7ec9b6b
f813e36
6efc852
8abe004
d969e74
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/* | ||
* Backpack - Skyscanner's Design System | ||
* | ||
* Copyright 2018 Skyscanner Ltd | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
import Foundation | ||
|
||
/// The `CalendarSingleSelectionState` enum represents the different states of a single selection. | ||
public enum CalendarSingleSelectionState { | ||
/// The state, with single date selection | ||
case single(Date?) | ||
|
||
/// The state the user has selected the whole month. | ||
case wholeMonth(ClosedRange<Date>) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,7 +19,7 @@ | |
import SwiftUI | ||
|
||
struct SingleCalendarContainer<MonthHeader: View, DayAccessoryView: View>: View { | ||
@Binding var selection: Date? | ||
@Binding var selection: CalendarSingleSelectionState? | ||
let calendar: Calendar | ||
let validRange: ClosedRange<Date> | ||
let accessibilityProvider: SingleDayAccessibilityProvider | ||
|
@@ -30,20 +30,36 @@ struct SingleCalendarContainer<MonthHeader: View, DayAccessoryView: View>: View | |
@ViewBuilder | ||
private func makeDayCell(_ dayDate: Date) -> some View { | ||
CalendarSelectableCell { | ||
if selection == dayDate { | ||
SingleSelectedCell(calendar: calendar, date: dayDate) | ||
} else { | ||
switch selection { | ||
case .single(let date): | ||
if date == dayDate { | ||
SingleSelectedCell(calendar: calendar, date: dayDate) | ||
} else { | ||
DefaultCalendarDayCell(calendar: calendar, date: dayDate) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. if you appliy the above comment about optionality, I think this if let would be done on the selection itself, rather than the date. switch selection {
case single(let date): SingleSelectedCel(...)
case wholeMonth(..): ....
case nil: DefaultCalendarDayCell(...)
} There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I removed the optional, but we still need this statement to determine which date needs to be highlighted among other dates when a date has been selected When the tap action happens, we change the state, and the change of state helps us to render the changes. |
||
} | ||
case .wholeMonth(let closedRange): | ||
if closedRange.contains(dayDate) { | ||
RangeSelectionCalendarDayCell( | ||
date: dayDate, | ||
selection: closedRange, | ||
calendar: calendar, | ||
highlightRangeEnds: false | ||
) | ||
} else { | ||
DefaultCalendarDayCell(calendar: calendar, date: dayDate) | ||
} | ||
case .none: | ||
DefaultCalendarDayCell(calendar: calendar, date: dayDate) | ||
} | ||
} onSelection: { | ||
selection = dayDate | ||
selection = .single(dayDate) | ||
} | ||
.accessibilityAddTraits(.isButton) | ||
.accessibilityAddTraits(selection == dayDate ? .isSelected : []) | ||
.accessibilityLabel(accessibilityProvider.accessibilityLabel(for: dayDate)) | ||
.accessibilityAddTraits(selection?.isSelected(dayDate) == true ? .isSelected : []) | ||
.accessibilityLabel(accessibilityProvider.accessibilityLabel(for: dayDate, selection: selection)) | ||
.accessibilityHint(accessibilityProvider.accessibilityHint(for: dayDate, selection: selection)) | ||
} | ||
|
||
var body: some View { | ||
CalendarContainer( | ||
calendar: calendar, | ||
|
@@ -77,11 +93,11 @@ struct SingleCalendarContainer_Previews: PreviewProvider { | |
let end = calendar.date(from: .init(year: 2025, month: 12, day: 25))! | ||
|
||
SingleCalendarContainer( | ||
selection: .constant(calendar.date(from: .init(year: 2023, month: 11, day: 10))!), | ||
selection: .constant(.single(calendar.date(from: .init(year: 2023, month: 11, day: 10))!)), | ||
calendar: calendar, | ||
validRange: start...end, | ||
accessibilityProvider: SingleDayAccessibilityProvider( | ||
accessibilityConfigurations: .init(selectionHint: ""), | ||
accessibilityConfigurations: .init(selectionHint: "", wholeMonth: nil), | ||
dateFormatter: Self.formatter | ||
), | ||
monthScroll: nil, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,7 +21,7 @@ import SwiftUI | |
import Backpack_SwiftUI | ||
|
||
struct CalendarExampleSingleView: View { | ||
@State var selectedDate: Date? | ||
@State var selection: CalendarSingleSelectionState? | ||
private var monthScroll: MonthScroll? | ||
|
||
let validRange: ClosedRange<Date> | ||
|
@@ -49,28 +49,39 @@ struct CalendarExampleSingleView: View { | |
self.monthScroll = .init(monthToScroll: date, animated: true) | ||
} | ||
|
||
_selectedDate = State(initialValue: date) | ||
_selection = State(initialValue: .single(date)) | ||
} | ||
|
||
var body: some View { | ||
VStack { | ||
HStack { | ||
BPKText("Selected date:", style: .caption) | ||
if let selectedDate { | ||
BPKText("\(formatter.string(from: selectedDate))", style: .caption) | ||
if case .single(let date) = selection, let date { | ||
BPKText("\(formatter.string(from: date))", style: .caption) | ||
} else if case .wholeMonth(let month) = selection { | ||
BPKText("\(formatter.string(from: month.lowerBound))", style: .caption) | ||
} | ||
} | ||
BPKCalendar( | ||
selectionType: .single( | ||
selected: $selectedDate, | ||
selected: $selection, | ||
accessibilityConfigurations: SingleAccessibilityConfigurations( | ||
selectionHint: "Double tap to select date" | ||
selectionHint: "Double tap to select date", | ||
wholeMonth: nil | ||
) | ||
), | ||
calendar: calendar, | ||
validRange: validRange, | ||
initialMonthScroll: monthScroll | ||
) | ||
.monthAccessoryAction { _ in | ||
return CalendarMonthAccessoryAction( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wonder if the accessibility setting for this should be here instead, to avoid being possible to send nil to that, when you do have an action. wdyt? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good point. 👍 I made this config as part whole month selection state. So if the consumer doesn't want to use the wholeMonth they don't have to provide this value. Removed this optional. ✅ |
||
title: "Select whole month", | ||
action: .wholeMonthSelection({ monthRange in | ||
selection = .wholeMonth(monthRange) | ||
}) | ||
) | ||
} | ||
} | ||
} | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this should probably not be optional right? the optional would be on the enum itself, but not the date.
reasoning being:
if there's a single date selected, it makes no sense that that seleciton has no date
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In both calendar selection types (range/single), there is a use case for not having a date selected (e.g., when dates are cleared). Therefore, this optional date is still valid.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah, bu the nil would be on the entire selection instance, not the date itself.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool. Right. I applied the change. ✅