Merge pull request #2156 from woocommerce/issue/2054-product-sort-options-bottom-sheet

Bottom Sheet: Products tab sort options

Author: jaclync

WooCommerce/Classes/ViewRelated/BottomSheet/ListSelector/BottomSheetListSelectorCommand.swift

@@ -13,7 +13,7 @@ protocol BottomSheetListSelectorCommand {
     var selected: Model? { get }
 
     /// Called when a different model is selected.
-    mutating func handleSelectedChange(selected: Model)
+    func handleSelectedChange(selected: Model)
 
     /// Configures the cell with the given model.
     func configureCell(cell: Cell, model: Model)

WooCommerce/Classes/ViewRelated/BottomSheet/ListSelector/BottomSheetListSelectorViewController.swift

@@ -5,7 +5,7 @@ import UIKit
 final class BottomSheetListSelectorViewController<Command: BottomSheetListSelectorCommand, Model, Cell>:
 UIViewController, UITableViewDataSource, UITableViewDelegate where Command.Model == Model, Command.Cell == Cell {
     private let viewProperties: BottomSheetListSelectorViewProperties
-    private var command: Command
+    private let command: Command
     private let onDismiss: (_ selected: Model?) -> Void
 
     private let rowType = Cell.self

WooCommerce/Classes/ViewRelated/Products/BottomSheetListSelector/ProductsSortOrderBottomSheetListSelectorCommand.swift

@@ -0,0 +1,52 @@
+import Yosemite
+
+private extension ProductsSortOrder {
+    /// Title shown on the action sheet.
+    ///
+    var actionSheetTitle: String {
+        switch self {
+        case .dateAscending:
+            return NSLocalizedString("Date: Oldest to Newest", comment: "Action sheet option to sort products from the oldest to the newest")
+        case .dateDescending:
+            return NSLocalizedString("Date: Newest to Oldest", comment: "Action sheet option to sort products from the newest to the oldest")
+        case .nameAscending:
+            return NSLocalizedString("Title: A to Z", comment: "Action sheet option to sort products by ascending product name")
+        case .nameDescending:
+            return NSLocalizedString("Title: Z to A", comment: "Action sheet option to sort products by descending product name")
+        }
+    }
+}
+
+/// `BottomSheetListSelectorCommand` for selecting a sort order for the Products tab.
+///
+final class ProductsSortOrderBottomSheetListSelectorCommand: BottomSheetListSelectorCommand {
+    typealias Model = ProductsSortOrder
+    typealias Cell = BasicTableViewCell
+
+    let data: [ProductsSortOrder] = [
+        .dateDescending,
+        .dateAscending,
+        .nameDescending,
+        .nameAscending
+    ]
+
+    var selected: ProductsSortOrder?
+
+    init(selected: ProductsSortOrder?) {
+        self.selected = selected
+    }
+
+    func configureCell(cell: BasicTableViewCell, model: ProductsSortOrder) {
+        cell.selectionStyle = .default
+        cell.textLabel?.text = model.actionSheetTitle
+        cell.accessoryType = isSelected(model: model) ? .checkmark: .none
+    }
+
+    func handleSelectedChange(selected: ProductsSortOrder) {
+        self.selected = selected
+    }
+
+    func isSelected(model: ProductsSortOrder) -> Bool {
+        return model == selected
+    }
+}

WooCommerce/Classes/ViewRelated/Products/ProductsViewController.swift

@@ -260,7 +260,7 @@ private extension ProductsViewController {
         let sortTitle = NSLocalizedString("Sort by", comment: "Title of the toolbar button to sort products in different ways.")
         let sortButton = UIButton(frame: .zero)
         sortButton.setTitle(sortTitle, for: .normal)
-        sortButton.addTarget(self, action: #selector(sortButtonTapped), for: .touchUpInside)
+        sortButton.addTarget(self, action: #selector(sortButtonTapped(sender:)), for: .touchUpInside)
 
         let filterTitle = NSLocalizedString("Filter", comment: "Title of the toolbar button to filter products by different attributes.")
         let filterButton = UIButton(frame: .zero)
@@ -434,12 +434,25 @@ private extension ProductsViewController {
         }
     }
 
-    @objc func sortButtonTapped() {
-        UIAlertController.presentSortProductsActionSheet(viewController: self, onSelect: { [weak self] sortOrder in
-            self?.sortOrder = sortOrder
-        }, onCancel: { [weak self] in
-            self?.dismiss(animated: true, completion: nil)
-        })
+    @objc func sortButtonTapped(sender: UIButton) {
+        let title = NSLocalizedString("Sort by",
+                                      comment: "Message title for sort products action bottom sheet")
+        let viewProperties = BottomSheetListSelectorViewProperties(title: title)
+        let command = ProductsSortOrderBottomSheetListSelectorCommand(selected: sortOrder)
+        let sortOrderListViewController = BottomSheetListSelectorViewController(viewProperties: viewProperties,
+                                                                                command: command) { [weak self] selectedSortOrder in
+                                                                                    defer {
+                                                                                        self?.dismiss(animated: true, completion: nil)
+                                                                                    }
+
+                                                                                    guard let selectedSortOrder = selectedSortOrder else {
+                                                                                        return
+                                                                                    }
+                                                                                    self?.sortOrder = selectedSortOrder
+        }
+
+        let bottomSheet = BottomSheetViewController(childViewController: sortOrderListViewController)
+        bottomSheet.show(from: self, sourceView: sender, arrowDirections: .up)
     }
 
     @objc func filterButtonTapped() {

WooCommerce/Classes/ViewRelated/Products/UIAlertController+SortProducts.swift

@@ -34,6 +34,7 @@ class BottomSheetViewController: UIViewController {
             popoverPresentationController?.permittedArrowDirections = arrowDirections
             popoverPresentationController?.sourceView = sourceView ?? UIView()
             popoverPresentationController?.sourceRect = sourceView?.bounds ?? .zero
+            popoverPresentationController?.backgroundColor = view.backgroundColor
         } else {
             transitioningDelegate = self
             modalPresentationStyle = .custom
@@ -67,8 +68,8 @@ class BottomSheetViewController: UIViewController {
         view.clipsToBounds = true
         view.layer.cornerRadius = Constants.cornerRadius
         view.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]
-        view.backgroundColor = .basicBackground
 
+        view.backgroundColor = childViewController?.view.backgroundColor
         NSLayoutConstraint.activate([
             gripButton.heightAnchor.constraint(equalToConstant: Constants.gripHeight)
         ])