Skip to content

Analytics Hub: Custom Date Selector UI #8330

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

Merged
merged 3 commits into from
Dec 7, 2022
Merged

Analytics Hub: Custom Date Selector UI #8330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f8731c2
Adds main UI for the custom range picker selector
Ecarrion Dec 6, 2022
573b3e1
Make dates dynamic
Ecarrion Dec 6, 2022
6a0ca6d
Format dates temporarily
Ecarrion Dec 6, 2022
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
107 changes: 107 additions & 0 deletions WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/RangedDatePicker.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import Foundation
import SwiftUI

/// View to select a custom date range.
/// Consists of two date pickers laid out vertically.
///
struct RangedDatePicker: View {

@Environment(\.presentationMode) var presentation

/// Closure invoked when the custom date range has been confirmed.
///
var datesSelected: ((_ start: Date, _ end: Date) -> Void)?

/// Start date binding variable
///
@State private var startDate = Date()

/// End date binding variable
///
@State private var endDate = Date()

var body: some View {
NavigationView {
ScrollView {
VStack(alignment: .leading) {

// Start Picker
Text(Localization.startDate)
.foregroundColor(Color(.accent))
.headlineStyle()

Divider()

DatePicker("", selection: $startDate, in: ...Date(), displayedComponents: [.date])
.datePickerStyle(.graphical)
.accentColor(Color(.brand))

// End Picker
Text(Localization.endDate)
.foregroundColor(Color(.accent))
.headlineStyle()

Divider()

DatePicker("", selection: $endDate, in: ...Date(), displayedComponents: [.date])
.datePickerStyle(.graphical)
.accentColor(Color(.brand))
}
.padding()
}
.navigationBarTitleDisplayMode(.inline)
.toolbar(content: {
ToolbarItem(placement: .principal) {
// Navigation Bar title
VStack(spacing: Layout.titleSpacing) {
Text(Localization.title)
.headlineStyle()

// TODO: Properly format date ranges outside the view
Text("\(DateFormatter.monthAndDayFormatter.string(from: startDate)) - \(DateFormatter.monthAndDayFormatter.string(from: endDate))")
.captionStyle()
}
}
ToolbarItem(placement: .confirmationAction) {
Button(action: {
presentation.wrappedValue.dismiss()
datesSelected?(startDate, endDate)
}, label: {
Text(Localization.apply)
})
}
ToolbarItem(placement: .cancellationAction) {
Button(action: {
presentation.wrappedValue.dismiss()
}, label: {
Image(uiImage: .closeButton)
})
}
})
}
.navigationViewStyle(.stack)
.wooNavigationBarStyle()
}
}

// MARK: Constant

private extension RangedDatePicker {
enum Localization {
static let title = NSLocalizedString("Custom Date Range", comment: "Title in custom range date picker")
static let apply = NSLocalizedString("Apply", comment: "Apply navigation button in custom range date picker")
static let startDate = NSLocalizedString("Start Date", comment: "Start Date label in custom range date picker")
static let endDate = NSLocalizedString("End Date", comment: "End Date label in custom range date picker")
}
enum Layout {
static let titleSpacing: CGFloat = 4.0
}
}

// MARK: Previews

struct RangedDatePickerPreview: PreviewProvider {
static var previews: some View {
RangedDatePicker()
}
}
4 changes: 4 additions & 0 deletions WooCommerce/WooCommerce.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,7 @@
26B3D8A0252235C50054C319 /* RefundShippingDetailsViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26B3D89F252235C50054C319 /* RefundShippingDetailsViewModel.swift */; };
26B3EC622744772A0075EAE6 /* SimplePaymentsSummaryViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26B3EC612744772A0075EAE6 /* SimplePaymentsSummaryViewModelTests.swift */; };
26B3EC642745916F0075EAE6 /* BindableTextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26B3EC632745916F0075EAE6 /* BindableTextField.swift */; };
26B71DB6293FE490004D8052 /* RangedDatePicker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26B71DB5293FE490004D8052 /* RangedDatePicker.swift */; };
26B98758273C5BE30090E8CA /* EditCustomerNoteViewModelProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26B98757273C5BE30090E8CA /* EditCustomerNoteViewModelProtocol.swift */; };
26B9875D273C6A830090E8CA /* SimplePaymentsNoteViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26B9875C273C6A830090E8CA /* SimplePaymentsNoteViewModel.swift */; };
26B9875F273CB6AA0090E8CA /* SimplePaymentsNoteViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26B9875E273CB6AA0090E8CA /* SimplePaymentsNoteViewModelTests.swift */; };
Expand Down Expand Up @@ -2646,6 +2647,7 @@
26B3D89F252235C50054C319 /* RefundShippingDetailsViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RefundShippingDetailsViewModel.swift; sourceTree = "<group>"; };
26B3EC612744772A0075EAE6 /* SimplePaymentsSummaryViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SimplePaymentsSummaryViewModelTests.swift; sourceTree = "<group>"; };
26B3EC632745916F0075EAE6 /* BindableTextField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BindableTextField.swift; sourceTree = "<group>"; };
26B71DB5293FE490004D8052 /* RangedDatePicker.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RangedDatePicker.swift; sourceTree = "<group>"; };
26B98757273C5BE30090E8CA /* EditCustomerNoteViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditCustomerNoteViewModelProtocol.swift; sourceTree = "<group>"; };
26B9875C273C6A830090E8CA /* SimplePaymentsNoteViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SimplePaymentsNoteViewModel.swift; sourceTree = "<group>"; };
26B9875E273CB6AA0090E8CA /* SimplePaymentsNoteViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SimplePaymentsNoteViewModelTests.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -6209,6 +6211,7 @@
DE2FE5872925DD950018040A /* JetpackInstallHeaderView.swift */,
26E7EE6F29300F6200793045 /* DeltaTag.swift */,
AEE9A87F293A3E5500227C92 /* RefreshablePlainList.swift */,
26B71DB5293FE490004D8052 /* RangedDatePicker.swift */,
);
path = "SwiftUI Components";
sourceTree = "<group>";
Expand Down Expand Up @@ -9955,6 +9958,7 @@
7459A6C621B0680300F83A78 /* RequirementsChecker.swift in Sources */,
CE1D5A55228A0AD200DF3715 /* TwoColumnTableViewCell.swift in Sources */,
02759B9128FFA09600918176 /* StoreCreationWebViewModel.swift in Sources */,
26B71DB6293FE490004D8052 /* RangedDatePicker.swift in Sources */,
74460D4222289C7A00D7316A /* StorePickerCoordinator.swift in Sources */,
FEDD70AF26A7223500194C3A /* StorageEligibilityErrorInfo+Woo.swift in Sources */,
AE9E04752776213E003FA09E /* OrderCustomerSection.swift in Sources */,
Expand Down