The Wayback Machine - https://web.archive.org/web/20200526125718/https://github.com/CosmicMind/Material/issues/1219
Skip to content
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.

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

Add TextField to Dialog #1219

Open
leedsalex opened this issue Apr 18, 2019 · 9 comments
Open

Add TextField to Dialog #1219

leedsalex opened this issue Apr 18, 2019 · 9 comments
Assignees
Projects

Comments

@leedsalex
Copy link
Contributor

@leedsalex leedsalex commented Apr 18, 2019

Would be nice to have a TextField in a Dialog. I have achieved this by subclassing DialogView but I feel it's something others can benefit from if it was built-in.

@OrkhanAlikhanov
Copy link
Member

@OrkhanAlikhanov OrkhanAlikhanov commented Apr 18, 2019

Hey! Great idea! Would be great if you share your subclass and/or your use case. So that we have some insight about what users need.

@danieldahan
Copy link
Member

@danieldahan danieldahan commented Apr 18, 2019

Definitely can see how this would be useful :)

@leedsalex
Copy link
Contributor Author

@leedsalex leedsalex commented Apr 19, 2019

@OrkhanAlikhanov Here's the subclass in its most basic form. Keep in mind it's a bit amiss, I had to work with the open methods available to me. It would have been a little cleaner if Dialog was generic similar to DialogController, and if DialogView's layout and prepare methods were open instead of private. Also, I chose an arbitrary size for example purposes.

DialogView Subclass

    class DialogTextFieldView: DialogView {
        let textField: ErrorTextField = {
            let textField = ErrorTextField()
            textField.validator.min(length: 1, message: "Min 0 characters").max(length: 30, message: "Max 30 characters").autoValidationType = .always
            textField.placeholder = "Example Input"
            textField.placeholderAnimation = .hidden
            return textField
        }()

        override func prepare() {
            super.prepare()
            detailsLabel.removeFromSuperview()
            contentArea.addSubview(textField)
        }

        override func layoutSubviews() {
            layoutContentArea()
            super.layoutSubviews()
        }

        override func contentAreaSizeThatFits(width: CGFloat) -> CGSize {
            return CGSize(width: width, height: 60)
        }

        func layoutContentArea() {
            let size = CGSize(width: frame.width, height: contentAreaSizeThatFits(width: frame.width).height)
            contentArea.frame.size = size

            let insets = titleArea.frame.height == 0 ? UIEdgeInsets(top: 20, left: 24, bottom: 24, right: 24) : UIEdgeInsets(top: 0, left: 24, bottom: 24, right: 24)
            textField.frame = CGRect(origin: .zero, size: size).inset(by: insets)
        }
    }

Presentation Setup

Note: I couldn't use the Dialog class with a custom view/controller

let controller = DialogController<DialogTextFieldView>()
controller.dialogView.titleLabel.text = "TextField Example"
controller.dialogView.positiveButton.title = "Save"
controller.dialogView.positiveButton.titleColor = Color.green.base
controller.dialogView.neutralButton.title = "Cancel"
controller.dialogView.neutralButton.titleColor = Color.grey.base
controller.dialogView.textField.dividerActiveColor = Color.grey.base
present(controller, animated: true)
@OrkhanAlikhanov
Copy link
Member

@OrkhanAlikhanov OrkhanAlikhanov commented Apr 22, 2019

@leedsalex Thank you for your feedback on Material's Dialog

It would have been a little cleaner if Dialog was generic similar to DialogController

It was like that once, but we had to compromise it in favor of DialogDelegate.

Will work on the API. Thank you!

@OrkhanAlikhanov
Copy link
Member

@OrkhanAlikhanov OrkhanAlikhanov commented Apr 22, 2019

By the way, it's nice to see someone is diving into the source to learn and use Material's new features which has no documentation whatsoever except in the pull requests that introduced the feature.

@danieldahan
Copy link
Member

@danieldahan danieldahan commented Apr 22, 2019

@leedsalex @OrkhanAlikhanov nice work! Let's leave this open for now. I would like to dive in this myself as well.

@adamdahan
Copy link
Contributor

@adamdahan adamdahan commented Sep 8, 2019

@danieldahan @OrkhanAlikhanov Let's try to get this in for Material 4. :)
@leedsalex thanks, good addition! Now that we are aware of it. We will massage it into the code base for our next updates.

@danieldahan
Copy link
Member

@danieldahan danieldahan commented Sep 8, 2019

@adamdahan fully agree.

@jbaez
Copy link
Contributor

@jbaez jbaez commented Oct 10, 2019

This is a very good idea, I recently updated Material and saw that dialogs are available, and started migrating UIAlert to Material Dialog.
In the DialogTextFieldView I added the method addTextField like in UIAlertController, so we can add more than one text field.

    public var textFields: [TextField] = []

    public func addTextField(configurationHandler: ((TextField) -> Void)? = nil) {
        let textField = TextField()
        textFields.append(textField)
        contentArea.addSubview(textField)
        if let configurationHandler = configurationHandler {
            configurationHandler(textField)
        }
    }

Also will have to create another subclass to be able to add more buttons, In the App I'm working on we have a UIAlert with four buttons and the Material Dialog only has 3 configurable buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
5 participants
You can’t perform that action at this time.