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
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("")
|
|
)
|
|
} |