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.

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

Merged
merged 6 commits into from
Nov 26, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,40 @@
/// Create a single-selection configuration with given accessibility strings.
/// - Parameters:
/// - selectionHint: The hint provided to assistive technologies informing a user how to select a date.
/// - wholeMonth: The optional whole month selection configuration for assistive technologies.
public struct SingleAccessibilityConfigurations {
let selectionHint: String
let wholeMonth: WholeMonthAccessibilityConfigurations?

public init(selectionHint: String) {
public init(
selectionHint: String,
wholeMonth: WholeMonthAccessibilityConfigurations? = nil
) {
self.selectionHint = selectionHint
self.wholeMonth = wholeMonth
}
}

/// Create a whole-month configuration with given accessibility strings for single selection.
/// - Parameters:
/// - startSelectionState: The label provided to assistive technologies informing a user that a date is selected
/// as the first date in the range.
/// - endSelectionState: The label provided to assistive technologies informing a user that a date is selected
/// as the second date in the range.
/// - betweenSelectionState: The label provided to assistive technologies informing a user that a date lies
/// between the first and second selected dates.
public struct WholeMonthAccessibilityConfigurations {
let startSelectionState: String
let endSelectionState: String
let betweenSelectionState: String

public init(
startSelectionState: String,
endSelectionState: String,
betweenSelectionState: String
) {
self.startSelectionState = startSelectionState
self.endSelectionState = endSelectionState
self.betweenSelectionState = betweenSelectionState
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ public enum CalendarSelectionType {

/// A single selection, where the user can select a single date.
case single(
selected: Binding<Date?>,
selected: Binding<CalendarSingleSelectionState?>,
accessibilityConfigurations: SingleAccessibilityConfigurations
)
}
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?)
Copy link
Contributor

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

Copy link
Contributor Author

@novinfard novinfard Nov 26, 2024

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.

Single Range
Simulator Screenshot - iPhone SE (3rd generation) - 2024-11-26 at 10 38 16 Simulator Screenshot - iPhone SE (3rd generation) - 2024-11-26 at 10 38 10

Copy link
Contributor

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.

@State var selection: CalendarSingleSelectionState?
// so that would either be:
selection = .single(Date())
// or
selection = .wholeMonth(...)
// or
selection = nil

Copy link
Contributor Author

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. ✅


/// The state the user has selected the whole month.
case wholeMonth(ClosedRange<Date>)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Copy link
Contributor

Choose a reason for hiding this comment

The 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(...)
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 date == dayDate.

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,
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,42 @@ struct SingleDayAccessibilityProvider {
let accessibilityConfigurations: SingleAccessibilityConfigurations
let dateFormatter: DateFormatter

func accessibilityLabel(for dayDate: Date) -> String {
dateFormatter.string(from: dayDate)
func accessibilityLabel(for dayDate: Date, selection: CalendarSingleSelectionState?) -> String {
let baseLabel = dateFormatter.string(from: dayDate)

if case .wholeMonth(let range) = selection {
var state: String?
if range.contains(dayDate), let config = accessibilityConfigurations.wholeMonth {
if dayDate == range.lowerBound {
state = config.startSelectionState
} else if dayDate == range.upperBound {
state = config.endSelectionState
} else {
state = config.betweenSelectionState
}
}
guard let state else { return baseLabel }
return "\(baseLabel), \(state)"
} else {
return baseLabel
}
}
func accessibilityHint(for dayDate: Date, selection: Date?) -> String {
if dayDate == selection {

func accessibilityHint(for dayDate: Date, selection: CalendarSingleSelectionState?) -> String {
if selection?.isSelected(dayDate) == true {
return ""
}
return accessibilityConfigurations.selectionHint
}
}

extension CalendarSingleSelectionState {
func isSelected(_ date: Date) -> Bool {
switch self {
case .single(let selectedDate):
return selectedDate == date
case .wholeMonth(let range):
return range.contains(date)
}
}
}
2 changes: 1 addition & 1 deletion Backpack-SwiftUI/Tests/Calendar/BPKCalendarTests.swift
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ class BPKCalendarTests: XCTestCase {
assertSnapshot(
BPKCalendar(
selectionType: .single(
selected: .constant(testDate),
selected: .constant(.single(testDate)),
accessibilityConfigurations: SingleAccessibilityConfigurations(
selectionHint: ""
)
Expand Down
4 changes: 2 additions & 2 deletions Example/Backpack.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
53C6622929EA0DAB00BF1A62 /* AttributedTextExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53C6620F29EA0DAB00BF1A62 /* AttributedTextExampleView.swift */; };
53C7F0B92A4C615D003A8740 /* ChipGroupSingleSelectRailExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53C7F0B52A4C615D003A8740 /* ChipGroupSingleSelectRailExampleView.swift */; };
53C7F0BA2A4C615D003A8740 /* ChipGroupSingleSelectWrapExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53C7F0B62A4C615D003A8740 /* ChipGroupSingleSelectWrapExampleView.swift */; };
53D4614E29E574EB0061C222 /* BuildFile in Sources */ = {isa = PBXBuildFile; };
53D4614E29E574EB0061C222 /* (null) in Sources */ = {isa = PBXBuildFile; };
53D6396F2A7D46ED007EF376 /* MapMarkerExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53D6396E2A7D46ED007EF376 /* MapMarkerExampleView.swift */; };
53D7FBB527F715AF00DEE588 /* UIWindowFactory.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53D7FBB427F715AF00DEE588 /* UIWindowFactory.swift */; };
53E075A527FC780C0033147C /* NavBarGroups.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53E075A427FC780C0033147C /* NavBarGroups.swift */; };
Expand Down Expand Up @@ -1941,7 +1941,7 @@
5390DB612909940700F0F790 /* ColorTokensViewController.swift in Sources */,
794E1FF8280CF63100B965FF /* RadiusTokensView.swift in Sources */,
53B6DB6A27FC73A90042B7C0 /* LabelGroups.swift in Sources */,
53D4614E29E574EB0061C222 /* BuildFile in Sources */,
53D4614E29E574EB0061C222 /* (null) in Sources */,
53C6621329EA0DAB00BF1A62 /* SpinnerExampleView.swift in Sources */,
53BAC3F12A71415800236CC9 /* SectionHeaderGroups.swift in Sources */,
53C6622429EA0DAB00BF1A62 /* ButtonsPlaygroundView.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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(
Copy link
Contributor

Choose a reason for hiding this comment

The 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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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)
})
)
}
}
}
}
Expand Down
Loading