Merge pull request #244 from surfstudio/feature/SPT-1478/add-interaction-to-message-view

[SPT-1478] Интерактивность MessageView

Author: NullIsOne

Components/Sources/Common/Models/Styles/DataDetectionStyle.swift

@@ -0,0 +1,54 @@
+//
+//  DataDetectionStyle.swift
+//  ReactiveDataDisplayManager
+//
+//  Created by Антон Голубейков on 13.07.2023.
+//
+#if os(iOS)
+import Foundation
+import UIKit
+
+public struct DataDetectionStyle: Equatable {
+
+    // MARK: - Nested types
+
+    public typealias Handler = (URL) -> Void
+
+    // MARK: - Properties
+
+    public let id: AnyHashable
+    public let linkTextAttributes: [NSAttributedString.Key: Any]
+    public var handler: Handler?
+    public var dataDetectorTypes: UIDataDetectorTypes = []
+
+    public init(id: AnyHashable, linkTextAttributes: [NSAttributedString.Key: Any], handler: @escaping Handler, dataDetectorTypes: UIDataDetectorTypes) {
+        self.id = id
+        self.linkTextAttributes = linkTextAttributes
+        self.handler = handler
+        self.dataDetectorTypes = dataDetectorTypes
+    }
+
+    // MARK: - Equatable
+
+    public static func == (lhs: DataDetectionStyle, rhs: DataDetectionStyle) -> Bool {
+        lhs.id == rhs.id &&
+        areDictionariesEqual(lhs.linkTextAttributes, rhs.linkTextAttributes) &&
+        lhs.dataDetectorTypes == rhs.dataDetectorTypes
+    }
+
+}
+
+// MARK: - Private extension
+
+private extension DataDetectionStyle {
+
+    private static func areDictionariesEqual(_ lhs: [NSAttributedString.Key: Any]?, _ rhs: [NSAttributedString.Key: Any]?) -> Bool {
+        guard let lhs = lhs, let rhs = rhs else {
+            return lhs == nil && rhs == nil
+        }
+
+        return NSDictionary(dictionary: lhs).isEqual(to: rhs)
+    }
+
+}
+#endif

Components/Sources/Common/Utils/ViewWrapper.swift

@@ -15,6 +15,9 @@ public protocol ViewWrapper: ConfigurableItem {
     /// Inner configurable view with content
     var nestedView: NestedView { get }
 
+    /// View that will be used as container for `nestedView`
+    var contentView: UIView { get }
+
     /// Previous value of `Alignment` applyed to `nestedView`
     var cachedAlignment: Alignment? { get set }
 
@@ -46,11 +49,11 @@ private extension ViewWrapper where Self: UIView {
         nestedView.removeFromSuperview()
         switch alignment {
         case .trailing(let insets):
-            wrapWithLeadingGreaterThenOrEqualRule(subview: nestedView, with: insets)
+            contentView.wrapWithLeadingGreaterThenOrEqualRule(subview: nestedView, with: insets)
         case .leading(let insets):
-            wrapWithTrailingLessThenOrEqualRule(subview: nestedView, with: insets)
+            contentView.wrapWithTrailingLessThenOrEqualRule(subview: nestedView, with: insets)
         case .all(let insets):
-            wrap(subview: nestedView, with: insets)
+            contentView.wrap(subview: nestedView, with: insets)
         case .none:
             break
         }

Components/Sources/Common/Views/MessageView.swift

@@ -14,6 +14,7 @@ public class MessageView: UIView {
     // MARK: - Private properties
 
     private var textView = UITextView(frame: .zero)
+    private var dataDetectionHandler: DataDetectionStyle.Handler?
 
 }
 
@@ -103,6 +104,23 @@ extension MessageView: ConfigurableItem {
                     return model
                 })
             }
+
+            public static func dataDetection(_ value: DataDetectionStyle) -> Property {
+                .init(closure: { model in
+                    var model = model
+                    model.set(dataDetection: value)
+                    return model
+                })
+            }
+            
+            /// To set it to **false**, dataDetection and tapHandler must be nil
+            public static func selectable(_ selectable: Bool) -> Property {
+                .init(closure: { model in
+                    var model = model
+                    model.set(selectable: selectable)
+                    return model
+                })
+            }
         }
 
         // MARK: - Public properties
@@ -115,6 +133,8 @@ extension MessageView: ConfigurableItem {
         private(set) public var alignment: Alignment = .all(.zero)
         private(set) public var internalEdgeInsets: UIEdgeInsets = .zero
         private(set) public var borderStyle: BorderStyle?
+        private(set) public var dataDetection: DataDetectionStyle?
+        private(set) public var selectable: Bool = false
 
         // MARK: - Mutation
 
@@ -150,6 +170,14 @@ extension MessageView: ConfigurableItem {
             self.borderStyle = border
         }
 
+        mutating func set(dataDetection: DataDetectionStyle) {
+            self.dataDetection = dataDetection
+        }
+
+        mutating func set(selectable: Bool) {
+            self.selectable = selectable
+        }
+
         // MARK: - Builder
 
         public static func build(@EditorBuilder<Property> content: (Property.Type) -> [Property]) -> Self {
@@ -163,9 +191,10 @@ extension MessageView: ConfigurableItem {
     // MARK: - Methods
 
     public func configure(with model: Model) {
-
         textView.backgroundColor = .clear
         textView.isEditable = false
+        setIsSelectablePropertyIfNeeded(for: model)
+        textView.isUserInteractionEnabled = true
         textView.isScrollEnabled = false
         configureTextView(textView, with: model)
         textView.textColor = model.textStyle.color
@@ -193,6 +222,11 @@ private extension MessageView {
         case .attributedString(let attributedString):
             textView.attributedText = attributedString
         }
+
+        textView.dataDetectorTypes = model.dataDetection?.dataDetectorTypes ?? []
+        textView.linkTextAttributes = model.dataDetection?.linkTextAttributes
+        textView.delegate = self
+        dataDetectionHandler = model.dataDetection?.handler
     }
 
     func applyBackground(style: BackgroundStyle) {
@@ -212,5 +246,28 @@ private extension MessageView {
         layer.maskedCorners = borderStyle.maskedCorners
     }
 
+    func handleDataDetection(_ data: URL) {
+        dataDetectionHandler?(data)
+    }
+
+    func setIsSelectablePropertyIfNeeded(for model: Model) {
+        if model.dataDetection != nil {
+            textView.isSelectable = true
+        } else {
+            textView.isSelectable = model.selectable
+        }
+    }
+
+}
+
+// MARK: - UITextViewDelegate
+
+extension MessageView: UITextViewDelegate {
+
+    public func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {
+        handleDataDetection(URL)
+        return false
+    }
+
 }
 #endif

Example/ReactiveDataDisplayManager/Table/ComponentsOverviewTableViewController/ComponentsOverviewTableViewController.swift

@@ -82,13 +82,10 @@ final class ComponentsOverviewTableViewController: UIViewController {
     private let sentMessageStyle = TextStyle(color: .white,
                                              font: .systemFont(ofSize: 16, weight: .regular))
     private let sentMessageBorderStyle = BorderStyle(cornerRadius: 9,
-                                                            maskedCorners: [.layerMinXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMinYCorner])
+                                                     maskedCorners: [.layerMinXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMinYCorner])
     private lazy var sentMessageModel: MessageView.Model = .build { property in
-        if Bool.random() {
-            property.background(.solid(.systemBlue))
-        } else {
-            property.background(.solid(.rddm))
-        }
+        let backgorundColor: UIColor? = Bool.random() ? .systemBlue : .rddm
+        property.background(.solid(backgorundColor))
         property.border(sentMessageBorderStyle)
         property.style(sentMessageStyle)
         property.textAlignment(.right)
@@ -101,21 +98,41 @@ final class ComponentsOverviewTableViewController: UIViewController {
                                      left: 5,
                                      bottom: 3,
                                      right: 5))
-        property.text(.string("Lorem"))
+        property.text(.string("Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"))
+
+        let tapAction: () -> Void = {
+            if var topController = UIApplication.shared.keyWindow?.rootViewController {
+                while let presentedViewController = topController.presentedViewController {
+                    topController = presentedViewController
+                }
+
+                let alertController = UIAlertController(title: "MessageView Tapped", message: "The MessageView was tapped!", preferredStyle: .alert)
+                alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
+                topController.present(alertController, animated: true, completion: nil)
+            }
+        }
+
     }
 
     private lazy var sentMessageGenerator = MessageView.rddm.tableGenerator(with: sentMessageModel, and: .class)
 
     // Recieved message
     private let recievedMessageStyle = TextStyle(color: .black, font: .systemFont(ofSize: 16, weight: .regular))
     private let recievedMessageBorderStyle = BorderStyle(cornerRadius: 9,
-                                                                maskedCorners: [
-                                                                    .layerMinXMinYCorner,
-                                                                    .layerMaxXMaxYCorner,
-                                                                    .layerMaxXMinYCorner
-                                                                ],
-                                                                borderWidth: 1,
-                                                                borderColor: UIColor.black.cgColor)
+                                                         maskedCorners: [
+                                                            .layerMinXMinYCorner,
+                                                            .layerMaxXMaxYCorner,
+                                                            .layerMaxXMinYCorner
+                                                         ],
+                                                         borderWidth: 1,
+                                                         borderColor: UIColor.black.cgColor)
+    let dataDetectionHandler: DataDetectionStyle.Handler = { url in
+        UIApplication.shared.open(url, options: [:], completionHandler: nil)
+    }
+    private lazy var dataDetection = DataDetectionStyle(id: "Basic handling of links using UIApplication",
+                                                   linkTextAttributes: [.foregroundColor: UIColor.blue],
+                                                   handler: dataDetectionHandler,
+                                                   dataDetectorTypes: [.link])
     private lazy var recievedMessageModel: MessageView.Model = .build { property in
         property.border(recievedMessageBorderStyle)
         property.style(recievedMessageStyle)
@@ -127,7 +144,9 @@ final class ComponentsOverviewTableViewController: UIViewController {
                                      left: 5,
                                      bottom: 3,
                                      right: 5))
-        property.text(.string("Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"))
+        property.text(.string("Check out link: https://stackoverflow.com/"))
+        property.dataDetection(dataDetection)
+        property.selectable(true)
     }
 
     private lazy var recievedMessageGenerator = MessageView.rddm.tableGenerator(with: recievedMessageModel, and: .class)
@@ -143,6 +162,7 @@ final class ComponentsOverviewTableViewController: UIViewController {
         super.viewDidLoad()
         tableView.accessibilityIdentifier = "ComponentsOverviewTableViewController"
         tableView.separatorStyle = .none
+        tableView.allowsSelection = false
         fillAdapter()
     }