SwiftUI update CustomView on enum variable change - swiftui

Question

I have months view on grid 3x4. Each subview is a small box with month name and state, selected/unselected. The problem is... I want to observe enum variable from parent view and deselect all buttons except the last pressed.
For now I had next logic implemented. Initially I have currentMonthSelected with state .none (no months selected). When I press JAN button, i pass currentMonthSelected == .jax to Single month subview and it returns me back callback that change currentMonthSelected which should observe other views.
ParentView
#State var currentMonthSelected: MonthsTypes = .none
SingleButtonView(title: .jan, isSelected: currentMonthSelected == .jan ? true : false, action: { month in
self.currentMonthSelected = month
})
SingleButtonView(title: .feb, isSelected: currentMonthSelected == .feb ? true : false, action: { month in
self.currentMonthSelected = month
})
Single month subview
struct SingleButtonView: View {
var title: MonthsTypes = .none
#State var isSelected = false
var action: (MonthsTypes) -> ()
var body: some View {
VStack(spacing: 0){
Button(action: {
self.action(self.title)
}){
Spacer()
Text(title.rawValue.prefix(3))
.font(.Montserrat(weight: isSelected ? .SemiBold : .Regular, size: 16))
.foregroundColor(isSelected ? Color.white : Color.gray)
Spacer()
}
}
.frame(width: 80, height: 40)
.background(isSelected ? Color.white : Color.brand_purple)
}
}

Answer 1

enum MonthsTypes: String {
case jan = "January"
case feb = "February"
case none
}
struct ContentView: View {
#State var currentMonthSelected: MonthsTypes = .none
var body: some View {
VStack() {
SingleButtonView(title: .jan, currentMonthSelected: $currentMonthSelected)
SingleButtonView(title: .feb, currentMonthSelected: $currentMonthSelected)}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct SingleButtonView: View {
var title: MonthsTypes = .none
#Binding var currentMonthSelected: MonthsTypes
var isSelected: Bool {
if title == currentMonthSelected { return true}
return false
}
var body: some View {
VStack(spacing: 0){
Button(action: {
self.currentMonthSelected = self.title
}){
Spacer()
Text(title.rawValue.prefix(3))
.foregroundColor(isSelected ? Color.white : Color.gray)
Spacer()
}
}
.frame(width: 80, height: 40)
.background(isSelected ? Color.white : Color.yellow)
}
}

Answer 2

Such view hierarchy is much easier to manage via one view model. Here is a demo of approach based on your code (a just drop some lines with custom fonts/colors, which however does not affect idea).
struct ParentView_Previews: PreviewProvider {
static var previews: some View {
ParentView().environmentObject(ViewModel()) // inject view model
}
}
enum MonthsTypes: String { // restored enum
case none = "None"
case jan = "January"
case feb = "February"
case mar = "March"
}
class ViewModel: ObservableObject { // selection holder (extendable for anything)
#Published var currentMonthSelected: MonthsTypes = .none
}
struct ParentView: View {
#EnvironmentObject var viewModel: ViewModel // assuming injected by .environmentObject(ViewModel)
var body: some View {
VStack {
SingleButtonView(title: .jan) // simple declaration, action can be added
SingleButtonView(title: .feb)
SingleButtonView(title: .mar)
}
}
}
struct SingleButtonView: View {
#EnvironmentObject var vm: ViewModel // logic on selection change is inside
var title: MonthsTypes = .none
var action: (MonthsTypes) -> () = { _ in } // default action does nothing
var body: some View {
VStack(spacing: 0){
Button(action: {
// change selection to self or toggle
self.vm.currentMonthSelected = (self.vm.currentMonthSelected != self.title ? self.title : MonthsTypes.none)
self.action(self.title) // callback if needed
}){
Spacer()
Text(title.rawValue.prefix(3))
.foregroundColor(self.vm.currentMonthSelected == self.title ? Color.white : Color.gray)
Spacer()
}
}
.frame(width: 80, height: 40)
.background(vm.currentMonthSelected == title ? Color.purple : Color.white)
}
}