Merge pull request #40 from wordpress-mobile/issue/placeholder-ios

Add placeholder properties for iOS AztecView.
WordPress · Aug 12, 2018 · 42918cd · 42918cd
2 parents 1bb40c6 + 65e4d8e
commit 42918cd
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/ios/RNTAztecView/RCTAztecView.swift b/ios/RNTAztecView/RCTAztecView.swift
@@ -1,17 +1,43 @@
 import Aztec
 import Foundation
+import UIKit
 
 class RCTAztecView: Aztec.TextView {
     @objc var onChange: RCTBubblingEventBlock? = nil
     @objc var onContentSizeChange: RCTBubblingEventBlock? = nil
 
     private var previousContentSize: CGSize = .zero
-
+
+    private lazy var placeholderLabel: UILabel = {
+        let label = UILabel(frame: .zero)
+        return label
+    }()
+
+    override init(defaultFont: UIFont, defaultParagraphStyle: ParagraphStyle, defaultMissingImage: UIImage) {
+        super.init(defaultFont: defaultFont, defaultParagraphStyle: defaultParagraphStyle, defaultMissingImage: defaultMissingImage)
+        commonInit()
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+        commonInit()
+    }
+
+    func commonInit() {
+        addSubview(placeholderLabel)
+        placeholderLabel.textAlignment = .natural
+        placeholderLabel.translatesAutoresizingMaskIntoConstraints = false
+        placeholderLabel.font = font
+        NSLayoutConstraint.activate([
+            placeholderLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: contentInset.left + textContainerInset.left + textContainer.lineFragmentPadding),
+            placeholderLabel.topAnchor.constraint(equalTo: topAnchor, constant: contentInset.top + textContainerInset.top)
+            ])
+    }
+
     // MARK - View Height: Match to content height
 
     override func layoutSubviews() {
         super.layoutSubviews()
-
         updateContentSizeInRN()
     }
 
@@ -33,7 +59,7 @@ class RCTAztecView: Aztec.TextView {
 
     open override func insertText(_ text: String) {
         super.insertText(text)
-
+        updatePlaceholderVisibility()
         if let onChange = onChange {
             let text = packForRN(getHTML(), withName: "text")
             onChange(text)
@@ -42,7 +68,7 @@ class RCTAztecView: Aztec.TextView {
 
     open override func deleteBackward() {
         super.deleteBackward()
-
+        updatePlaceholderVisibility()
         if let onChange = onChange {
             let text = packForRN(getHTML(), withName: "text")
             onChange(text)
@@ -74,6 +100,32 @@ class RCTAztecView: Aztec.TextView {
         let html = contents["text"] as? String ?? ""
 
         setHTML(html)
+        updatePlaceholderVisibility()
+    }
+
+    // MARK: - Placeholder
+
+    @objc var placeholder: String {
+        set {
+            placeholderLabel.text = newValue
+        }
+
+        get {
+            return placeholderLabel.text ?? ""
+        }
+    }
+
+    @objc var placeholderTextColor: UIColor {
+        set {
+            placeholderLabel.textColor = newValue
+        }
+        get {
+            return placeholderLabel.textColor
+        }
+    }
+
+    func updatePlaceholderVisibility() {
+        placeholderLabel.isHidden = !self.text.isEmpty
     }
 }
 
diff --git a/ios/RNTAztecView/RCTAztecViewManager.m b/ios/RNTAztecView/RCTAztecViewManager.m
@@ -9,4 +9,7 @@ @implementation RCTAztecViewManager (RCTExternModule)
 RCT_EXPORT_VIEW_PROPERTY(onContentSizeChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 
+RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
+RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)
+
 @end