How to replace the input view on the message list(chat)?

[tezpark]

Summary

• How to replace the input view on the message list(chat)?

Customer request

• Can they trigger a modal input to display over the chat? (such as on a click within the message)
• They could render a message in line with a custom_type message, but in this case, they want to pop out a modal.

Guide & Snippet

• The logic below is a custom snippet with a simple example.

• Create CustomGroupChannelInputComponent

class CustomGroupChannelInputComponent: SBUGroupChannelModule.Input {
    public lazy var customInputView = UIView()
    
    override func setupViews() {
        super.setupViews()

        // [Example]
        // You can implement the two functions below inside your logic and use them as needed.
        
        // - Expose the custom input view first for test.
        self.showCustomInputView()
        
        // - Change to original inputView after 3 seconds for test.
        Timer.scheduledTimer(withTimeInterval: 3.0, repeats: false) { timer in
            self.resetInputView()
        }
    }
    
    override func setupLayouts() {
        super.setupLayouts()
        
        // Sets the `customInputView` layout
        self.customInputView
            .sbu_constraint(height: 150)
    }
    
    override func setupStyles(theme: SBUChannelTheme? = nil) {
        super.setupStyles(theme: theme)
        
        // Sets the `customInputView` style
        self.customInputView.backgroundColor = .red
    }
    
    func showCustomInputView() {
        // Remove the original input view and add the custom input view.
        if let messageInputView = self.messageInputView {
            self.inputVStackView.removeArrangedSubview(messageInputView)
        }
        self.inputVStackView.addArrangedSubview(self.customInputView)
    }
    
    func resetInputView() {
        // Remove the custom input view and add the original input view.
        self.inputVStackView.arrangedSubviews.forEach {
            self.inputVStackView.removeArrangedSubview($0)
        }
        if let messageInputView = self.messageInputView {
            self.inputVStackView.addArrangedSubview(messageInputView)
        }
    }
}

• Before using the two custom classes, please set them in SBUModuleSet and SBUViewControllerSet.

SBUModuleSet.GroupChannelModule.InputComponent = CustomGroupChannelInputComponent.self

Result

Show custom input	Reset input view

Reference

• SBUGroupChannelModule.Input