DEV Community

GoyesDev
GoyesDev

Posted on

[SUI] ContextMenu

Las tablas (Table) proveen un menú contextual que aparece cuando se hace "click derecho" para efectuar una acción sobre una fila seleccionada, varias de ellas o ninguna (la tabla misma), con base en el número de elementos seleccionados.

struct ContentView: View {
  @State private var selectedPeople = Set<Person.ID>()
  @State private var people = [
    Person(givenName: "Juan", familyName: "Chavez", emailAddress: "juanchavez@icloud.com"),
    Person(givenName: "Mei", familyName: "Chen", emailAddress: "meichen@icloud.com"),
    Person(givenName: "Tom", familyName: "Clark", emailAddress: "tomclark@icloud.com"),
    Person(givenName: "Gita", familyName: "Kumar", emailAddress: "gitakumar@icloud.com")
  ]

  var body: some View {
    NavigationStack {
      VStack {
        Text("\(selectedPeople.count) people selected")
        Table(people, selection: $selectedPeople) {
          TableColumn("Given Name", value: \.givenName)
          TableColumn("Family Name", value: \.familyName)
          TableColumn("E-Mail Address", value: \.emailAddress)
        }
        .contextMenu(forSelectionType: Person.ID.self) { selectedItems in
          if selectedItems.isEmpty {
            Button {
              let result = Person(givenName: "David", familyName: "Goyes", emailAddress: "goyesdev117+swiftui@gmail.com")
              people.append(result)
            } label: {
              Text("Add new Person")
            }
          } else if selectedItems.count == 1, let selectedItemId = selectedItems.first {
            Button("Remove Person") {
              people.removeAll { $0.id == selectedItemId }
            }
            Button("Edit Person") {
              if let personIdToUpdate = people.firstIndex(where: { $0.id == selectedItemId }) {
                people[personIdToUpdate].givenName = "Fulano"
              }
            }
          } else {
            Button("Remove all these people") {
              people.removeAll {
                selectedItems.contains($0.id)
              }
            }
          }
        }
      }.toolbar {
        EditButton()
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)