Current Filters

Shows applied refinements and lets users remove them.

Signature

CurrentFiltersConnector(
  filterState: FilterState,
  groupIDs: Set<FilterGroup.ID>?,
  interactor: CurrentFiltersInteractor,
  controller: CurrentFiltersController,
  presenter: Presenter<Filter, Output>
)

Explore example code

About this widget

Shows each currently active filter in aFilterState and lets users remove it.

Examples

Instantiate a CurrentFiltersConnector.

Swift

let filterState = FilterState()
let groupID: FilterGroup.ID = .and(name: "color")
let currenfFiltersTableController: CurrentFilterListTableController = .init(tableView: UITableView())
let currentFiltersConnector = CurrentFiltersConnector(filterState: filterState,
                                                      groupIDs: [groupID],
                                                      controller: currenfFiltersTableController)

Parameters

filterState · FilterState · required

The FilterState that holds your filters.

groupIDs · Set<FilterGroup.ID>? · required

When specified, only display current filters matching these filter group ids.

interactor · CurrentFiltersInteractor · required

The logic applied to the current filters.

controller · CurrentFiltersController

The Controller interfacing with a concrete current filters view.

presenter · Presenter<Filter, Output>

The Presenter defining how filters appears in the controller.

Presenter

Filter Presenter · (Filter) -> String

The presenter that defines the way you want to display a filter.

Swift

currentFiltersInteractor.connectController(currentFiltersController, customPresenter)

    let customPresenter: (Filter) -> String = { filter in
      let attributeName = filter.filter.attribute.name

      switch filter {
      case .facet(let facetFilter):
        switch facetFilter.value {
        case .bool:
          return filter.filter.attribute.name

        case .float(let floatValue):
          return "\(attributeName): \(floatValue)"

        case .string(let stringValue):
          return stringValue
        }

      case .numeric(let numericFilter):

        switch numericFilter.value {
        case .comparison(let comp):
          return "\(attributeName) \(comp.0) \(comp.1)"

        case .range(let range):
          return "\(attributeName): \(range.lowerBound) to \(range.upperBound)"
        }

      case .tag(let tagFilter):
        return tagFilter.value
      }
    }

Low-level API

If you want to fully control the Current Filters components and connect them manually, you can use the following components:

• CurrentFiltersInteractor. The logic for current filters in the FilterState.
• FilterState. The current state of the filters.
• CurrentFiltersController. The controller that interfaces with a concrete current filter view.
• Presenter. Optional. The presenter that defines the way you want to display a filter.

Swift

let filterState = FilterState()
let groupID: FilterGroup.ID = .and(name: "color")
let currentFiltersTableController: CurrentFilterListTableController = .init(tableView: UITableView())
let currentFiltersInteractor = CurrentFiltersInteractor()
currentFiltersInteractor.connectFilterState(filterState, filterGroupID: groupID)
currentFiltersInteractor.connectController(currentFiltersTableController)

Customizing your view

The controllers provided by default, like the CurrentFilterListTableController work well when you want to use native UIKit with their default behavior.

If you want to use another component (other than a UITableView) such as a UICollectionView, a third-party input view, or you want to introduce some custom behavior to the already provided UIKit component, you can create your own controller conforming to the CurrentFiltersController protocol.

Protocol

func setItems(_ item: [FilterAndID]):

Function called when current filters are refreshed and need to be updated.

Note that FilterAndID is a struct that contains the filter, its ID, and the text representation of the filter

var onRemoveItem: ((FilterAndID) -> Void)?:

Closure to call when a “remove filter” intention is detected on the corresponding current filter.

func reload():

Function called when the view needs to reload itself with new data.

Example

Swift

open class CurrentFilterListTableController: NSObject, CurrentFiltersController, UITableViewDataSource, UITableViewDelegate {

  open var onRemoveItem: ((FilterAndID) -> Void)?

  public let tableView: UITableView

  public var items: [FilterAndID] = []

  private let cellIdentifier = "CurrentFilterListTableControllerCellID"

  public init(tableView: UITableView) {
    self.tableView = tableView
    super.init()
    tableView.dataSource = self
    tableView.delegate = self
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellIdentifier)
  }

  open func setItems(_ item: [FilterAndID]) {
    items = item
  }

  open func reload() {
    tableView.reloadData()
  }

  // MARK: - UITableViewDataSource

  open func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return items.count
  }

  open func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
    let filterAndID = items[indexPath.row]
    cell.textLabel?.text = filterAndID.text

    return cell
  }

  // MARK: - UITableViewDelegate

  open func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    onRemoveItem?(items[indexPath.row])
  }

}

SwiftUI

InstantSearch provides the CurrentFiltersObservableController data model, which is an implementation of the CurrentFiltersController protocol adapted for usage with SwiftUI. CurrentFiltersObservableController must be connected to the CurrentFiltersConnector or CurrentFiltersConnector like any other CurrentFiltersController implementation.

The example of the current filters view presenting the grouped filters.

Swift

struct ContentView: View {

  @ObservedObject var currentFiltersController: CurrentFiltersObservableController

  var body: some View {
    VStack {
      Text("Filters")
        .font(.title)
      let filtersPerGroup = Dictionary(grouping: currentFiltersController.filters) { el in
        el.id
      }
      .mapValues { $0.map(\.filter) }
      .map { $0 }
      ForEach(filtersPerGroup, id: \.key) { (group, filters) in
        HStack {
          Text(group.description)
            .bold()
            .padding(.leading, 5)
          Spacer()
        }
        .padding(.vertical, 5)
        .background(Color(.systemGray5))
        ForEach(filters, id: \.self) { filter in
          HStack {
            Text(filter.description)
              .padding(.leading, 5)
            Spacer()
          }
        }
      }
      Spacer()
    }
  }

}

If you prefer to create a custom SwiftUI view that presents each facet, use the CurrentFiltersObservableController as a data model. It provides the filters property along with toggle and isSelected functions to streamline the design process of your custom SwiftUI view.