.singlePhotoPicker() and .multiplePhotosPicker() modifier that takes a store like .alert() to import photos from PhotoLibrary

[FredericRuaudel]

Hi!

In the same spirit of my previous post, I've also created some new modifiers to display the new PhotosPicker in a sheet. This time, the view modifier doesn't exists in vanilla SwiftUI so its a bit different but the result is as convenient as the other.

SinglePhotoPicker

Here is the implementation gist for singlePhotoPicker:

@_spi(Presentation) import ComposableArchitecture
import PhotosUI
import SwiftUI

// The ephemeral state
struct SinglePhotoPickerState<PhotosAction> {
    var selection: PhotosPickerItem?
    var matching: PHPickerFilter?
    var preferredItemEncoding: PhotosPickerItem.EncodingDisambiguationPolicy = .automatic
    var photoLibrary: PHPhotoLibrary = .shared()
    var onCompletion: (PhotosPickerItem) -> PhotosAction
}

extension SinglePhotoPickerState: _EphemeralState {
    typealias Action = PhotosAction
}

extension SinglePhotoPickerState: Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.selection == rhs.selection && lhs.matching == rhs.matching
            && lhs.preferredItemEncoding == rhs.preferredItemEncoding && lhs.photoLibrary == rhs.photoLibrary
    }
}

// The view modifier
extension View {
    func singlePhotoPicker<Action>(
        _ item: Binding<Store<SinglePhotoPickerState<Action>, Action>?>
    ) -> some View {
        let store = item.wrappedValue
        let pickerState = store?.withState { $0 }
        return self.sheet(
            isPresented: Binding(item)
        ) {
            PhotosPicker(
                "",
                selection: Binding(
                    get: {
                        pickerState?.selection
                    },
                    set: { newValue, _ in
                        if let pickerState, let newValue {
                            store?.send(pickerState.onCompletion(newValue))
                        }
                    }
                ),
                matching: pickerState?.matching,
                preferredItemEncoding: pickerState?.preferredItemEncoding ?? .automatic,
                photoLibrary: pickerState?.photoLibrary ?? .shared(),
            )
            .photosPickerStyle(.inline)
        }
    }
}

And a gist to use it:

@Reducer
struct TestReducer {
    @ObservableState
    struct State: Equatable {
        var selectedPhoto: PhotosPickerItem?

        @Presents var destination: Destination.State?
    }

    @Reducer
    enum Destination {
        // I had to add this macro to make it compiles 
        // but it should be automatic like for AlertState
        @ReducerCaseEphemeral
        case singlePhotoPicker(SinglePhotoPickerState<SinglePhotoPickerAction>)
    }

    enum Action {
        case showSinglePhotoPicker
        case destination(PresentationAction<Destination.Action>)
    }

    @CasePathable
    enum SinglePhotoPickerAction: Equatable {
        case didSelectPhoto(PhotosPickerItem)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .showSinglePhotoPicker:
                state.destination = .singlePhotoPicker(
                    SinglePhotoPickerState(
                        selection: state.seletedPhoto,
                        matching: .images,
                        onCompletion: SinglePhotoPickerAction.didSelectPhoto
                    )
                )
                return .none
            case .destination(.presented(.singlePhotoPicker(.didSelectPhoto(let item)))):
                state.seletedPhoto = item
                return .none
            case .destination:
                return .none
            }
        }
        .ifLet(\.$destination, action: \.destination)
    }
}

extension TestReducer.Destination.State: Equatable {}

struct ContentView: View {
    @Bindable var store: StoreOf<TestReducer>

    var body: some View {
        NavigationStack {
            Button("Show Single Photo Picker") {
                store.send(.showSinglePhotoPicker)
            }
        }
        .singlePhotoPicker(
            $store.scope(
                state: \.destination?.singlePhotoPicker,
                action: \.destination.singlePhotoPicker
            )
        )
    }
}

#Preview {
    ContentView(
        store: Store(
            initialState: TestReducer.State(),
            reducer: TestReducer.init
        )
    )
}

MultiplePhotosPicker

Here is the implementation gist for multiplePhotosPicker:

@_spi(Presentation) import ComposableArchitecture
import PhotosUI
import SwiftUI

// The ephemeral state
struct MultiplePhotosPickerState<PhotosAction> {
    var selection: [PhotosPickerItem] = []
    var maxSelectionCount: Int?
    var selectionBehavior: PhotosPickerSelectionBehavior = .default
    var matching: PHPickerFilter?
    var preferredItemEncoding: PhotosPickerItem.EncodingDisambiguationPolicy = .automatic
    var photoLibrary: PHPhotoLibrary = .shared()
    var onCompletion: ([PhotosPickerItem]) -> PhotosAction
}

extension MultiplePhotosPickerState: _EphemeralState {
    typealias Action = PhotosAction
}

extension MultiplePhotosPickerState: Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.selection == rhs.selection && lhs.maxSelectionCount == rhs.maxSelectionCount
            && lhs.selectionBehavior == rhs.selectionBehavior && lhs.matching == rhs.matching
            && lhs.preferredItemEncoding == rhs.preferredItemEncoding && lhs.photoLibrary == rhs.photoLibrary
    }
}

// The view modifier
extension View {
    func multiplePhotosPicker<Action>(
        _ item: Binding<Store<MultiplePhotosPickerState<Action>, Action>?>
    ) -> some View {
        let store = item.wrappedValue
        let pickerState = store?.withState { $0 }
        return self.sheet(
            isPresented: Binding(item)
        ) {
            PhotosPicker(
                "",
                selection: Binding(
                    get: {
                        pickerState?.selection ?? []
                    },
                    set: { newValue, _ in
                        if let pickerState {
                            store?.send(pickerState.onCompletion(newValue))
                        }
                    }
                ),
                maxSelectionCount: pickerState?.maxSelectionCount,
                selectionBehavior: pickerState?.selectionBehavior ?? .default,
                matching: pickerState?.matching,
                preferredItemEncoding: pickerState?.preferredItemEncoding ?? .automatic,
                photoLibrary: pickerState?.photoLibrary ?? .shared(),
            )
            .photosPickerStyle(.inline)
        }
    }
}

And a gist to use it:

@Reducer
struct TestReducer {
    @ObservableState
    struct State: Equatable {
        var selectedPhotos: [PhotosPickerItem] = []

        @Presents var destination: Destination.State?
    }

    @Reducer
    enum Destination {
        // I had to add this macro to make it compiles 
        // but it should be automatic like for AlertState
        @ReducerCaseEphemeral
        case multiplePhotosPicker(MultiplePhotosPickerState<MultiplePhotosPickerAction>)
    }

    enum Action {
        case showMultiplePhotoPicker
        case destination(PresentationAction<Destination.Action>)
    }

    @CasePathable
    enum MultiplePhotosPickerAction: Equatable {
        case didSelectPhotos([PhotosPickerItem])
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .showMultiplePhotoPicker:
                state.destination = .multiplePhotosPicker(
                    MultiplePhotosPickerState(
                        selection: state.selectedPhotos,
                        maxSelectionCount: 3,
                        selectionBehavior: .ordered,
                        matching: .images,
                        onCompletion: MultiplePhotosPickerAction.didSelectPhotos
                    )
                )
                return .none
            case .destination(.presented(.multiplePhotosPicker(.didSelectPhotos(let items)))):
                state.selectedPhotos = items
                return .none
            case .destination:
                return .none
            }
        }
        .ifLet(\.$destination, action: \.destination)
    }
}

extension TestReducer.Destination.State: Equatable {}

struct ContentView: View {
    @Bindable var store: StoreOf<TestReducer>

    var body: some View {
        NavigationStack {
            Button("Show Multiple Photos Picker") {
                store.send(.showMultiplePhotoPicker)
            }
        }
        .multiplePhotosPicker(
            $store.scope(
                state: \.destination?.multiplePhotosPicker,
                action: \.destination.multiplePhotosPicker
            )
        )
    }
}

#Preview {
    ContentView(
        store: Store(
            initialState: TestReducer.State(),
            reducer: TestReducer.init
        )
    )
}

If you try it, tell me what you think!

Have a nice day,

Fred