You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

216 lines
7.7 KiB

import SwiftUI
// MARK: - Contact Information Input Component
struct ContactInputView: View {
@Binding var firstName: String
@Binding var lastName: String
@Binding var phone: String
@Binding var email: String
@Binding var company: String
@Binding var title: String
@Binding var address: String
@Binding var website: String
@Binding var nickname: String
@Binding var birthday: Date
@Binding var note: String
@FocusState var focusedField: ContactField?
// Contact field enum
enum ContactField: Hashable {
case firstName, lastName, phone, email, company, title, address, website, nickname, birthday, note
}
var body: some View {
VStack(spacing: 16) {
// Name
HStack(spacing: 12) {
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("first_name".localized)
.font(.subheadline)
.foregroundColor(.primary)
Text("*")
.foregroundColor(.red)
Spacer()
}
TextField("first_name".localized, text: $firstName)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .firstName)
}
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("last_name".localized)
.font(.subheadline)
.foregroundColor(.primary)
Text("*")
.foregroundColor(.red)
Spacer()
}
TextField("last_name".localized, text: $lastName)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .lastName)
}
}
// Nickname
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("nickname".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("nickname".localized, text: $nickname)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .nickname)
}
// Phone
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("phone_number".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("contact_phone_placeholder".localized, text: $phone)
.textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.phonePad)
.focused($focusedField, equals: .phone)
}
// Email
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("email".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("contact_email_placeholder".localized, text: $email)
.textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.emailAddress)
.autocapitalization(.none)
.focused($focusedField, equals: .email)
}
// Company
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("company".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("company_name".localized, text: $company)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .company)
}
// Title
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("title".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("title_name".localized, text: $title)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .title)
}
// Address
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("address".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("detailed_address".localized, text: $address)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .address)
}
// Website
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("website".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("https://example.com", text: $website)
.textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.URL)
.autocapitalization(.none)
.focused($focusedField, equals: .website)
}
// Birthday
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("birthday".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
DatePicker("select_birthday".localized, selection: $birthday, displayedComponents: .date)
.datePickerStyle(CompactDatePickerStyle())
.focused($focusedField, equals: .birthday)
}
// Note
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("note".localized)
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("note_info".localized, text: $note)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .note)
}
}
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
Spacer()
Button("done".localized) {
focusedField = nil
}
.foregroundColor(.blue)
.font(.system(size: 16, weight: .medium))
}
}
}
}
#Preview {
ContactInputView(
firstName: .constant(""),
lastName: .constant(""),
phone: .constant(""),
email: .constant(""),
company: .constant(""),
title: .constant(""),
address: .constant(""),
website: .constant(""),
nickname: .constant(""),
birthday: .constant(Date()),
note: .constant("")
)
}