[TextControls] Add text areas leading/trailing views

PiperOrigin-RevId: 344113091
material-components · Nov 24, 2020 · a349540 · a349540
1 parent 77c77dc
commit a349540
Show file tree

Hide file tree

Showing 11 changed files with 328 additions and 55 deletions.
diff --git a/components/TextControls/examples/supplemental/MDCTextControlTextAreaContentViewController.m b/components/TextControls/examples/supplemental/MDCTextControlTextAreaContentViewController.m
@@ -16,9 +16,10 @@
 
 #import "MaterialButtons.h"
 
-#import "MDCBaseTextArea.h"
 #import "MaterialButtons+Theming.h"
+#import "MDCBaseTextArea.h"
 #import "MaterialColorScheme.h"
+#import "MaterialContainerScheme.h"
 
 #import "MDCTextControlLabelBehavior.h"
 #import "MDCFilledTextArea.h"
@@ -28,6 +29,7 @@
 
 @interface MDCTextControlTextAreaContentViewController () <UITextViewDelegate>
 @property(nonatomic, assign) BOOL shouldAddDebugBorder;
+@property(nonatomic, assign) BOOL shouldAddDebugLeadingView;
 @end
 
 @implementation MDCTextControlTextAreaContentViewController
@@ -38,33 +40,44 @@ - (MDCFilledTextArea *)createMaterialFilledTextArea {
   MDCFilledTextArea *textArea = [[MDCFilledTextArea alloc] init];
   textArea.textView.delegate = self;
   textArea.labelBehavior = MDCTextControlLabelBehaviorFloats;
-  textArea.label.text = @"Phone number";
-  textArea.leadingAssistiveLabel.text = @"This is a string.";
+  textArea.label.text = @"This is label text";
+  textArea.leadingAssistiveLabel.text = @"This is assistive label text.";
   if (self.shouldAddDebugBorder) {
     [self addBorderToTextArea:textArea];
   }
+  if (self.shouldAddDebugLeadingView) {
+    [self addLeadingViewToTextArea:textArea];
+  }
   [textArea applyThemeWithScheme:self.containerScheme];
   return textArea;
 }
 
 - (MDCOutlinedTextArea *)createMaterialOutlinedTextArea {
   MDCOutlinedTextArea *textArea = [[MDCOutlinedTextArea alloc] init];
   textArea.textView.delegate = self;
-  textArea.label.text = @"Phone number";
-  [textArea applyThemeWithScheme:self.containerScheme];
+  textArea.label.text = @"This is label text";
+  textArea.leadingAssistiveLabel.text = @"This is assistive label text.";
   if (self.shouldAddDebugBorder) {
     [self addBorderToTextArea:textArea];
   }
+  if (self.shouldAddDebugLeadingView) {
+    [self addLeadingViewToTextArea:textArea];
+  }
+  [textArea applyThemeWithScheme:self.containerScheme];
   return textArea;
 }
 
 - (MDCBaseTextArea *)createDefaultBaseTextArea {
   MDCBaseTextArea *textArea = [[MDCBaseTextArea alloc] init];
   textArea.textView.delegate = self;
-  textArea.label.text = @"This is a floating label";
+  textArea.label.text = @"This is label text";
+  textArea.leadingAssistiveLabel.text = @"This is assistive label text.";
   if (self.shouldAddDebugBorder) {
     [self addBorderToTextArea:textArea];
   }
+  if (self.shouldAddDebugLeadingView) {
+    [self addLeadingViewToTextArea:textArea];
+  }
   return textArea;
 }
 
@@ -77,12 +90,23 @@ - (void)addBorderToTextArea:(MDCBaseTextArea *)textArea {
   textArea.layer.borderWidth = 1;
 }
 
+- (void)addLeadingViewToTextArea:(MDCBaseTextArea *)textArea {
+  UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 24, 24)];
+  imageView.tintColor = self.containerScheme.colorScheme.primaryColor;
+  UIImage *image =
+      [[UIImage imageNamed:@"ic_cake"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  imageView.image = image;
+  textArea.leadingView = imageView;
+  textArea.leadingViewMode = UITextFieldViewModeAlways;
+}
+
 #pragma mark Overrides
 
 - (void)initializeScrollViewSubviewsArray {
   [super initializeScrollViewSubviewsArray];
 
   self.shouldAddDebugBorder = NO;
+  self.shouldAddDebugLeadingView = NO;
 
   MDCFilledTextArea *filledTextAreaWithoutFloatingLabel = [self createMaterialFilledTextArea];
   filledTextAreaWithoutFloatingLabel.labelBehavior = MDCTextControlLabelBehaviorDisappears;

diff --git a/components/TextControls/src/BaseTextAreas/MDCBaseTextArea.h b/components/TextControls/src/BaseTextAreas/MDCBaseTextArea.h
@@ -53,6 +53,26 @@
  */
 @property(strong, nonatomic, readonly, nonnull) UILabel *trailingAssistiveLabel;
 
+/**
+ This is an RTL-aware version of UITextField's leftView/rightView properties.
+ */
+@property(strong, nonatomic, nullable) UIView *leadingView;
+
+/**
+ This is an RTL-aware version of UITextField's leftView/rightView properties.
+ */
+@property(strong, nonatomic, nullable) UIView *trailingView;
+
+/**
+ This is an RTL-aware version of UITextField's leftViewMode/rightViewMode properties.
+ */
+@property(nonatomic, assign) UITextFieldViewMode leadingViewMode;
+
+/**
+ This is an RTL-aware version of UITextField's leftViewMode/rightViewMode properties.
+ */
+@property(nonatomic, assign) UITextFieldViewMode trailingViewMode;
+
 /**
 The UITextView contained within the text area.
  */

diff --git a/components/TextControls/src/BaseTextAreas/MDCBaseTextArea.m b/components/TextControls/src/BaseTextAreas/MDCBaseTextArea.m
@@ -213,6 +213,7 @@ - (void)postLayoutSubviews {
   self.assistiveLabelView.layout = self.layout.assistiveLabelViewLayout;
   [self.assistiveLabelView setNeedsLayout];
   [self animateLabel];
+  [self updateSideViews];
   [self.containerStyle applyStyleToTextControl:self animationDuration:self.animationDuration];
   [self layoutGradientLayers];
   [self scrollToSelectedText];
@@ -221,6 +222,30 @@ - (void)postLayoutSubviews {
   }
 }
 
+- (void)updateSideViews {
+  if (self.layout.displaysLeadingView) {
+    if (self.leadingView) {
+      if (self.leadingView.superview != self) {
+        [self addSubview:self.leadingView];
+      }
+      self.leadingView.frame = self.layout.leadingViewFrame;
+    }
+  } else {
+    [self.leadingView removeFromSuperview];
+  }
+
+  if (self.layout.displaysTrailingView) {
+    if (self.trailingView) {
+      if (self.trailingView.superview != self) {
+        [self addSubview:self.trailingView];
+      }
+      self.trailingView.frame = self.layout.trailingViewFrame;
+    }
+  } else {
+    [self.trailingView removeFromSuperview];
+  }
+}
+
 - (void)scrollToSelectedText {
   //  Undesirable things happen to the text view's contentOffset when adding new lines in a growing
   //  MDCBaseTextArea in iOS versions 11 and 12. Specifically, hitting return will appear to result
@@ -246,6 +271,10 @@ - (MDCBaseTextAreaLayout *)calculateLayoutWithSize:(CGSize)size {
                                        labelPosition:self.labelPosition
                                        labelBehavior:self.labelBehavior
                                     placeholderLabel:self.placeholderLabel
+                                         leadingView:self.leadingView
+                                     leadingViewMode:self.leadingViewMode
+                                        trailingView:self.trailingView
+                                    trailingViewMode:self.trailingViewMode
                                leadingAssistiveLabel:self.assistiveLabelView.leadingAssistiveLabel
                               trailingAssistiveLabel:self.assistiveLabelView.trailingAssistiveLabel
                           assistiveLabelDrawPriority:self.assistiveLabelDrawPriority
@@ -499,6 +528,28 @@ - (void)setPlaceholder:(NSString *)placeholder {
 
 #pragma mark MDCTextControl Protocol Accessors
 
+- (void)setLeadingView:(UIView *)leadingView {
+  [_leadingView removeFromSuperview];
+  _leadingView = leadingView;
+  [self setNeedsLayout];
+}
+
+- (void)setTrailingview:(UIView *)trailingView {
+  [_trailingView removeFromSuperview];
+  _trailingView = trailingView;
+  [self setNeedsLayout];
+}
+
+- (void)setLeadingViewMode:(UITextFieldViewMode)leadingViewMode {
+  _leadingViewMode = leadingViewMode;
+  [self setNeedsLayout];
+}
+
+- (void)setTrailingViewMode:(UITextFieldViewMode)trailingViewMode {
+  _trailingViewMode = trailingViewMode;
+  [self setNeedsLayout];
+}
+
 - (void)setContainerStyle:(id<MDCTextControlStyle>)containerStyle {
   id<MDCTextControlStyle> oldStyle = _containerStyle;
   if (oldStyle) {

diff --git a/components/TextControls/src/BaseTextAreas/private/MDCBaseTextAreaLayout.h b/components/TextControls/src/BaseTextAreas/private/MDCBaseTextAreaLayout.h
@@ -19,6 +19,12 @@
 
 @interface MDCBaseTextAreaLayout : NSObject
 
+@property(nonatomic, assign) BOOL displaysLeadingView;
+@property(nonatomic, assign) BOOL displaysTrailingView;
+
+@property(nonatomic, assign) CGRect leadingViewFrame;
+@property(nonatomic, assign) CGRect trailingViewFrame;
+
 @property(nonatomic, assign, readonly) CGRect labelFrameFloating;
 @property(nonatomic, assign, readonly) CGRect labelFrameNormal;
 
@@ -57,6 +63,10 @@
                        labelPosition:(MDCTextControlLabelPosition)labelPosition
                        labelBehavior:(MDCTextControlLabelBehavior)labelBehavior
                     placeholderLabel:(nonnull UILabel *)placeholderLabel
+                         leadingView:(nullable UIView *)leadingView
+                     leadingViewMode:(UITextFieldViewMode)leadingViewMode
+                        trailingView:(nullable UIView *)trailingView
+                    trailingViewMode:(UITextFieldViewMode)trailingViewMode
                leadingAssistiveLabel:(nonnull UILabel *)leadingAssistiveLabel
               trailingAssistiveLabel:(nonnull UILabel *)trailingAssistiveLabel
           assistiveLabelDrawPriority: