Building Menu recursively in SwiftUI

user_7886424 0
Viewed 998

Problem

I recently discovered SwiftUI's OutlineGroup in iOS 14 (I am using Xcode 12 beta 6 ). This works really well, either on its own or when using List, to compute "views and disclosure groups on demand from an underlying collection of tree-structured, identified data."

I.e. if you have a struct defined recursively, this works really well to build DisclosureGroup elements. However I am looking for something a little different that would allow me to build a "pull-down" (or hamburger) menu.

There's another control called Menu, in iOS 14, which renders a "pull-down" (or hamburger) menu exactly as I would like :

enter image description here

However I can't seem to use the 2 together to build a dynamic Menu based on data represented recursively, for example :

struct Tree<Value: Hashable>: Hashable {
    let value: Value
    var children: [Tree]? = nil
}

And menus built in the following manner :

struct SideMenu: View {    
    var body: some View {        
        Menu {
            Button(action: {}) {
                Image(systemName: "person")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                Text("Profile")
                    .foregroundColor(.gray)
                    .font(.headline)
            }
            Button(action: {}) {
                Image(systemName: "person.3")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                Text("Family Members")
                    .foregroundColor(.gray)
                    .font(.headline)
            }
            Button(action: {}) {
                Image(systemName: "calendar")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                Text("Events")
                    .foregroundColor(.gray)
                    .font(.headline)
            }
        } label: {
            Image(systemName: "line.horizontal.3")
        }
    }
}

Question

Is there a way to build Menu from recursive data, similar to what is done with OutlineGroup ?

swiftui swift
1 Answers

I like enums to represent trees, to avoid impossible or inconsistent states. Furthermore, you need a recursive UI function call, but using methods makes the compiler fails for me (Xcode 12 beta 6), so instead I separated the menu parts in different views and this seems to work. Now you have a completely dynamic menu that can built from your ViewModel.

import SwiftUI

enum ViewEvent {
    case profileTapped
    case familyMembersTapped
    case eventsTapped
    case foldersTapped
    case deletedItemsTapped
}

struct MenuItem: Identifiable {
    var id: String { return text }
    let text: String
    let systemImage: String?
    let action: ViewEvent?
}

enum MenuContent: Identifiable {
    var id: String {
        switch self {
        case let .item(item): return item.id
        case let .submenu(text, _): return text
        }
    }

    case item(MenuItem)
    indirect case submenu(text: String, content: [MenuContent])
}

struct ViewState {
    let menu: [MenuContent]
    let content: String

    static var `default`: ViewState {
        .init(
            menu: [
                .item(MenuItem(text: "Profile", systemImage: "person", action: .profileTapped)),
                .item(MenuItem(text: "Family Members", systemImage: "person.3", action: .familyMembersTapped)),
                .item(MenuItem(text: "Events", systemImage: "calendar", action: .familyMembersTapped)),
                .submenu(text: "More", content: [
                    .item(MenuItem(text: "Folders", systemImage: "folder.fill", action: .foldersTapped)),
                    .item(MenuItem(text: "Deleted", systemImage: "trash.fill", action: .deletedItemsTapped))
                ])
            ],
            content: "Content")
    }
}

struct ContentView: View {
    @State var viewState: ViewState

    var body: some View {
        HStack(alignment: .top, spacing: 16) {
            AppMenu(contents: viewState.menu) {
                Image(systemName: "line.horizontal.3")
            }

            Text("Content")
        }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .padding()
    }
}

struct AppMenuItem: View {
    let item: MenuItem

    func dispatch(_ action: ViewEvent) {
        // todo: call viewModel.dispatch
        print("Sending action \(action)")
    }

    init(item: MenuItem) {
        self.item = item
    }

    var body: some View {
        Button(action: {
            item.action.map { action in dispatch(action) }
        }) {
            item.systemImage.map { systemImage in
                Image(systemName: systemImage)
                    .foregroundColor(.gray)
                    .imageScale(.large)
            }

            Text(item.text)
                .foregroundColor(.gray)
                .font(.headline)
        }
    }
}

struct AppSubmenu: View {
    let text: String
    let contents: [MenuContent]

    var body: some View {
        AppMenu(contents: contents) {
            HStack {
                Text(text)
                Image(systemName: "chevron.right")
            }
        }
    }
}

struct AppMenu<Label: View>: View {
    let label: () -> Label
    let contents: [MenuContent]

    init(contents: [MenuContent], @ViewBuilder label: @escaping () -> Label) {
        self.contents = contents
        self.label = label
    }

    var body: some View {
        Menu {
            ForEach(contents) { content in
                // In case this is an item
                if case let .item(item) = content {
                    AppMenuItem(item: item)
                }

                // In case this is a submenu
                if case let .submenu(text, contents) = content {
                    AppSubmenu(text: text, contents: contents)
                }
            }
        } label: { label() }
    }
}
user_40162790
Related