Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Vista ccon el `Textfield` para los comentarios
// y el gráfico circular
internal struct Comment: View
{
/// ViewModel que controla el textfield y el gráfico
@ObservedObject private var updateViewModel = UpdateViewModel()
/// ¿Cuántos caracteres quedan para escribir?
@State private var commentLimit = ""
/// Valor porcentual
@State private var percetange: CGFloat = 0.0
/// Color del gráfico dependiendo de la cantidad
/// de caracteres que restan por escribir.
@State private var commentLimitForeground = Color.secondary
///
internal var body: some View
{
VStack(alignment: .leading, spacing: 8)
{
HStack(alignment: .center, spacing: 8)
{
Text("¿Qué tal el libro?")
.font(.system(size: 20, weight: .bold, design: .serif))
Spacer()
CircleBar(counter: $commentLimit, percentage: $percetange, color: $commentLimitForeground)
.frame(width: 45, height: 45)
.onReceive(self.updateViewModel.$commentCharactersRemaining, perform: { newLimit in
// Establecemos el color del gráfico en base a
// la cantidad de caracteres que quedan.
if newLimit > 15
{
self.commentLimitForeground = .secondary
}
else if newLimit <= 15 && newLimit > 5
{
self.commentLimitForeground = .orange
}
else
{
self.commentLimitForeground = .red
}
// Calculamos el tamaño del gráfico
let wrotten = 35 - newLimit
self.percetange = CGFloat((35.0 - CGFloat(wrotten)) / 35.0)
self.commentLimit = "\(newLimit)"
})
}
.padding([ .leading, .trailing ], 24)
.padding(.top, 16)
TextField("Hasta 35 caracteres", text: self.$updateViewModel.comment)
.font(.system(size: 20, design: .serif))
.multilineTextAlignment(.center)
.keyboardType(.asciiCapable)
.padding(16)
.background(Color(UIColor.tertiarySystemFill))
.frame(maxWidth: .infinity)
.cornerRadius(8)
.padding(24)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.