Skip to content

feat: Support local appearance configuration #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Support local appearance configuration #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 49 additions & 4 deletions GoodSwiftUI-Sample/GoodSwiftUI-Sample/Extensions/InputFieldViewConfiguration.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import GRInputField
extension InputFieldView {

static func configureAppearance() {
let customAppearance = InputFieldAppearance(
let globalAppearance = InputFieldAppearance(
titleFont: UIFont.preferredFont(for: .caption1, weight: .regular, defaultSize: 12.0),
titleColor: UIColor.systemBlue,
textFieldTintColor: UIColor.systemBlue,
Expand All @@ -33,14 +33,14 @@ extension InputFieldView {
placeholderColor: UIColor.darkGray,
contentBackgroundColor: UIColor.tertiarySystemBackground,
textFieldTextColor: UIColor.systemBlue,
borderColor: UIColor.gray,
borderColor: UIColor.black,
hintColor: UIColor.darkGray
),
disabled: InputFieldViewStateAppearance(
placeholderColor: UIColor.darkGray,
contentBackgroundColor: UIColor.secondarySystemBackground,
textFieldTextColor: UIColor.darkGray,
borderColor: UIColor.gray,
borderColor: UIColor.systemGray2,
hintColor: UIColor.darkGray
),
failed: InputFieldViewStateAppearance(
Expand All @@ -52,11 +52,56 @@ extension InputFieldView {
)
)

InputFieldView.defaultAppearance = customAppearance
InputFieldView.defaultAppearance = globalAppearance
}

}

extension InputFieldAppearance {

static let custom = InputFieldAppearance(
titleFont: UIFont.preferredFont(for: .title2, weight: .regular, defaultSize: 20),
titleColor: UIColor.brown,
textFieldTintColor: UIColor.brown,
textFieldFont: UIFont.preferredFont(for: .title2, weight: .regular, defaultSize: 30.0),
hintFont: UIFont.preferredFont(for: .title2, weight: .thin, defaultSize: 20.0),
borderWidth: 3,
cornerRadius: 20,
height: 56,
eyeImageHidden: UIImage(systemName: "eye"),
eyeImageVisible: UIImage(systemName: "eye.slash"),
enabled: InputFieldViewStateAppearance(
placeholderColor: UIColor.green.withAlphaComponent(0.5),
contentBackgroundColor: UIColor.yellow.withAlphaComponent(0.1),
textFieldTextColor: UIColor.green,
borderColor: UIColor.systemMint,
hintColor: UIColor.darkGray
),
selected: InputFieldViewStateAppearance(
placeholderColor: UIColor.green.withAlphaComponent(0.5),
contentBackgroundColor: UIColor.yellow.withAlphaComponent(0.1),
textFieldTextColor: UIColor.green,
borderColor: UIColor.green,
hintColor: UIColor.darkGray
),
disabled: InputFieldViewStateAppearance(
placeholderColor: UIColor.darkGray,
contentBackgroundColor: UIColor.secondarySystemBackground,
textFieldTextColor: UIColor.green.withAlphaComponent(0.5),
borderColor: UIColor.systemMint.withAlphaComponent(0.2),
hintColor: UIColor.darkGray
),
failed: InputFieldViewStateAppearance(
placeholderColor: UIColor.darkGray,
contentBackgroundColor: UIColor.tertiarySystemBackground,
textFieldTextColor: UIColor.green,
borderColor: UIColor.purple,
hintColor: UIColor.systemRed
)
)

}

extension UIFont {

static func preferredFont(for style: TextStyle, weight: Weight, defaultSize: CGFloat) -> UIFont {
Expand Down
1 change: 1 addition & 0 deletions GoodSwiftUI-Sample/GoodSwiftUI-Sample/Screens/InputFieldSampleView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ extension InputFieldSampleView {
private var nameInputField: some View {
// Text field
InputField(text: $name, title: "Name", placeholder: "Jožko", hint: "Text is limited to 10 characters")
.inputFieldStyle(.custom)

// "Continue" keyboard action button
.inputFieldTraits(returnKeyType: .continue)
Expand Down
11 changes: 10 additions & 1 deletion Sources/GRInputField/SwiftUI/InputField.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ public struct InputField<LeftView: View, RightView: View>: UIViewRepresentable {
private var resignAction: MainClosure?
private var editingChangedAction: MainClosure?

/// Change appearance with `.inputFieldStyle()` modifier
private var customAppearance: InputFieldAppearance?

// MARK: - Initialization

public init(
Expand Down Expand Up @@ -170,7 +173,7 @@ public struct InputField<LeftView: View, RightView: View>: UIViewRepresentable {
traits: traits
)

view.setup(with: model)
view.setup(with: model, customAppearance: customAppearance)
view.attachTextFieldDelegate(context.coordinator)

view.setValidationCriteria(criteria)
Expand Down Expand Up @@ -390,6 +393,12 @@ public extension InputField {
return modifiedSelf
}

func inputFieldStyle(_ appearance: InputFieldAppearance) -> Self {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer the modifier to be named .inputFieldAppearance, as "Style" reminds me of native SwiftUI modifiers, but those work in a different way, with their own Styles and Configurations. Setting the look of the input field globally is also named defaultAppearance/globalAppearance.

var modifiedSelf = self
modifiedSelf.customAppearance = appearance
return modifiedSelf
}

func inputFieldTraits(
textContentType: UITextContentType? = .none,
autocapitalizationType: UITextAutocapitalizationType = .none,
Expand Down
10 changes: 8 additions & 2 deletions Sources/GRInputField/UIKit/InputFieldView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,9 @@ public class InputFieldView: UIView {
}
}

/// Appearance can be set globally using `configureAppearance()` by modifying the `defaultAppearance`,
/// or locally by sending an appearance in `setup(with: Model, customAppearance: InputFieldAppearance?)`.
open var standardAppearance: InputFieldAppearance = defaultAppearance

public static var defaultAppearance: InputFieldAppearance = .default

// MARK: - Combine
Expand Down Expand Up @@ -563,7 +564,12 @@ public extension InputFieldView {

var isSelected: Bool { textField.isSelected }

func setup(with model: Model) {
func setup(with model: Model, customAppearance: InputFieldAppearance? = nil) {
if let customAppearance {
standardAppearance = customAppearance
setupAppearance()
Comment on lines +567 to +570
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm adding a suggestion - separating the appearance from behaviour. This is so that existing implementations in UIKit can modify the appearance in their own way (for example: one can modify the appearance by subclassing, accessing the properties, assigning a new appearance proxy or even by modifying the UIKit hierarchy directly). We've got all kinds of mess in our projects, and I hope this should make it more compatible.

Also it supports the "separation of responsibilities" principle, since setting the appearance will be its own function, decoupled from the "model"/traits of the input field.

Suggested change
func setup(with model: Model, customAppearance: InputFieldAppearance? = nil) {
if let customAppearance {
standardAppearance = customAppearance
setupAppearance()
func setupAppearance(_ appearance: InputFieldAppearance) {
standardAppearance = customAppearance
setupAppearance()
}
func setup(with model: Model) {

}

/// Traits
setupTraits(traits: model.traits ?? .default)
setupToolbarIfNeeded(traits: model.traits ?? .default)
Expand Down