SwiftUI how to perform action when EditMode changes?

Question

I'd like to perform an action when the EditMode changes.

Specifically, in edit mode, the user can select some items to delete. He normally presses the trash button afterwards. But he may also press Done. When he later presses Edit again, the items that were selected previously are still selected. I would like all items to be cleared.

struct ContentView: View {
    @State var isEditMode: EditMode = .inactive
    @State var selection = Set<UUID>()
    var items = [Item(), Item(), Item(), Item(), Item()]

    var body: some View {
        NavigationView {
            List(selection: $selection) {
                ForEach(items) { item in
                    Text(item.title)
                }
            }
            .navigationBarTitle(Text("Demo"))
            .navigationBarItems(
                leading: EditButton(),
                trailing: addDelButton
            )
            .environment(\.editMode, self.$isEditMode)
        }
    }

    private var addDelButton: some View {
        if isEditMode == .inactive {
            return Button(action: reset) {
                Image(systemName: "plus")
            }
        } else {
            return Button(action: reset) {
                Image(systemName: "trash")
            }
        }
    }

    private func reset() {
        selection = Set<UUID>()
    }
}

Definition of Item:

struct Item: Identifiable {
    let id = UUID()
    let title: String

    static var i = 0
    init() {
        self.title = "\(Item.i)"
        Item.i += 1
    }
}

Cool, except now the bubbles to select elements no longer appear... So the real EditButton must be something different that just setting editMode to active. — caram
– caram, Commented Sep 5, 2019 at 19:13
Plus, I also need editMode to be a @State variable so that the Trash button morphs back into a + when editMode is inactive. — caram
– caram, Commented Sep 5, 2019 at 19:59

caram · Accepted Answer · 2022-05-29 17:21:04Z

20

UPDATED for iOS 15.

This solution catches 2 birds with one stone:

The entire view redraws itself when editMode is toggle
A specific action can be performed upon activation/inactivation of editMode

Hopes this helps someone else.

struct ContentView: View {
    @State var editMode: EditMode = .inactive
    @State var selection = Set<UUID>()
    @State var items = [Item(), Item(), Item()]

    var body: some View {
        NavigationView {
            List(selection: $selection) {
                ForEach(items) { item in
                    Text(item.title)
                }
            }
            .navigationTitle(Text("Demo"))
            .environment(\.editMode, self.$editMode)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    editButton
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    addDelButton
                }
            }
        }
    }

    private var editButton: some View {
        Button(action: {
            self.editMode.toggle()
            self.selection = Set<UUID>()
        }) {
            Text(self.editMode.title)
        }
    }

    private var addDelButton: some View {
        if editMode == .inactive {
            return Button(action: addItem) {
                Image(systemName: "plus")
            }
        } else {
            return Button(action: deleteItems) {
                Image(systemName: "trash")
            }
        }
    }
    
    private func addItem() {
        items.append(Item())
    }
    
    private func deleteItems() {
        for id in selection {
            if let index = items.lastIndex(where: { $0.id == id }) {
                items.remove(at: index)
            }
        }
        selection = Set<UUID>()
    }
}

extension EditMode {
    var title: String {
        self == .active ? "Done" : "Edit"
    }
    
    mutating func toggle() {
        self = self == .active ? .inactive : .active
    }
}

edited May 29, 2022 at 17:21

answered Sep 5, 2019 at 20:03

caram

1,73915 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vinod Madigeri Over a year ago

FYI — One should be able to just declare the build in EditButton() as a trailing/leading ToolbarItem; this way we not only avoid custom editButton code, but also get support for full animation when switching modes. (ToolbarItem because navigationBarItems is deprecated in iOS 13.)

caram Over a year ago

I've update the code to use .toolbar instead of .navigationBarItems.

Peter Kreinz · Accepted Answer · 2023-07-08 13:06:39Z

12

I was trying forever, to clear List selections when the user exited editMode. For me, the cleanest way I've found to react to a change of editMode:

Make sure to reference the @Environment variable:

@Environment(\.editMode) var editMode

Add a computed property in the view to monitor the state:

private var isEditing: Bool {
   editMode?.wrappedValue.isEditing == true
}

Then use the .onChange(of:perform:) method:

.onChange(of: self.isEditing) { value in
  if value {
    // do something
  } else {
    // something else
  }
}

All together:

struct ContentView: View {
  
  @Environment(\.editMode) var editMode
  @State private var selections: [String] = []
  @State private var colors: ["Red", "Yellow", "Blue"]

  private var isEditing: Bool {
    if editMode?.wrappedValue.isEditing == true {
       return true
     }
     return false
  }
  
  var body: some View {

    List(selection: $selections) {
      ForEach(colors, id: \.self) { color in
        Text("Color")
      }
    }
    .toolbar {
      ToolbarItem(placement: .navigationBarTrailing) {
        EditButton()
      }
    }
    .onChange(of: isEditing) { value in
      if value == false {
        selection.removeAll()
      }
    }
  }

}

edited Jul 8, 2023 at 13:06

Peter Kreinz

8,7851 gold badge73 silver badges53 bronze badges

answered Aug 7, 2022 at 5:18

Trent M.

1913 silver badges5 bronze badges

3 Comments

krawieck Over a year ago

this solution should be upvoted more

elemento Over a year ago

From all solution, this one did it for me. I just used: if isEditing { } instead of .onChange

jasonnerothin Over a year ago

marked as unavailable as of iOS 18 :(

meomeomeo · Accepted Answer · 2022-06-10 08:33:08Z

In case someone want to use SwiftUI's EditButton() instead of custom a Button and still want to perform action when isEditing status changes

You can use View extension

extension View {
    func onChangeEditMode(editMode: EditMode?, perform: @escaping (EditMode?)->()) -> some View {
        ZStack {
            Text(String(describing: editMode))
                .opacity(0)
                .onChange(of: editMode, perform: perform)
            self
        }
    }
}

Then you can use it like this

struct TestEditModeView: View {
    @Environment(\.editMode) var editMode
    @State private var editModeDescription: String = "nil"
    var body: some View {
        VStack {
            Text(editModeDescription)
            EditButton()
        }
        .onChangeEditMode(editMode: editMode?.wrappedValue) {
            editModeDescription = String(describing: $0)
        }
    }
}

Collectives™ on Stack Overflow

SwiftUI how to perform action when EditMode changes?

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related