Merge pull request #65 from material-foundation/text_input

Adds a control for text input

Author: Andrés

README.md

@@ -1,6 +1,6 @@
 ![remixer](https://cdn.rawgit.com/material-foundation/material-remixer/master/docs/assets/lockup_remixer_icon_horizontal_dark_small.svg)
 
-Remixer helps teams use and refine design specs by providing an abstraction for these values that is accessible and configurable from both inside and outside the app itself. 
+Remixer helps teams use and refine design specs by providing an abstraction for these values that is accessible and configurable from both inside and outside the app itself.
 
 This SDK for iOS is currently in development.
 
@@ -73,13 +73,13 @@ Note that we currently support only RMXStorageModeLocal as RMXStorageModeCloud i
 
 - (BOOL)application:(UIApplication *)application
     didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-    
+
   // Create the window
   self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 
   // Start Remixer
   [RMXRemixer startInMode:RMXStorageModeLocal];
-  
+
   // Create the root view controller and set it in the window
   self.window.rootViewController = [[UIViewController alloc] init];
   [self.window makeKeyAndVisible];
@@ -105,7 +105,7 @@ Now you can add Remixer variables in your view controller classes as follows:
   _box = [[UIView alloc] initWithFrame:CGRectMake(50, 150, 80, 80)];
   _box.backgroundColor = [UIColor redColor];
   [self.view addSubview:_box];
-  
+
   // Add a color variable to control the background color.
   // Note: You can set possibleValues to limit it to certain colors.
   [RMXColorVariable

examples/objc/Podfile.lock

@@ -23,10 +23,10 @@ PODS:
   - GoogleToolboxForMac/Defines (2.1.0)
   - GoogleToolboxForMac/NSData+zlib (2.1.0):
     - GoogleToolboxForMac/Defines (= 2.1.0)
-  - Remixer/Core (1.0.0)
-  - Remixer/Firebase (1.0.0):
-    - Firebase/Core
-    - Firebase/Database
+  - Remixer/Core (0.5.2)
+  - Remixer/Firebase (0.5.2):
+    - Firebase/Core (~> 3.8)
+    - Firebase/Database (~> 3.1)
     - Remixer/Core
 
 DEPENDENCIES:
@@ -45,7 +45,7 @@ SPEC CHECKSUMS:
   GoogleInterchangeUtilities: d5bc4d88d5b661ab72f9d70c58d02ca8c27ad1f7
   GoogleSymbolUtilities: 631ee17048aa5e9ab133470d768ea997a5ef9b96
   GoogleToolboxForMac: 2b2596cbb7186865e98cadf2b1e262d851c2b168
-  Remixer: 6083bf76ba904c8e7dfa38acb2834cdad4b49838
+  Remixer: d358089aa00e0b780ae0710a2b356b0c7d36016a
 
 PODFILE CHECKSUM: d1a9444e2abc793509b33eccd75ed4aaad6d17bf
 

examples/objc/RemixerExample/ColorDemoViewController.m

@@ -38,7 +38,7 @@ - (void)viewDidLoad {
   [RMXColorVariable
       colorVariableWithKey:@"boxBgColor"
               defaultValue:[UIColor redColor]
-            possibleValues:@[[UIColor redColor], [UIColor blueColor], [UIColor greenColor]]
+            possibleValues:@[ [UIColor redColor], [UIColor blueColor], [UIColor greenColor] ]
                updateBlock:^(RMXColorVariable *_Nonnull variable, UIColor *selectedValue) {
                  _box.backgroundColor = selectedValue;
                }];

examples/objc/RemixerExample/FontViewController.m

@@ -30,27 +30,40 @@ - (void)viewDidLoad {
   [super viewDidLoad];
   self.view.backgroundColor = [UIColor whiteColor];
 
-  _fontLabel =
-      [[UILabel alloc] initWithFrame:CGRectMake(0, 100, CGRectGetWidth(self.view.bounds), 40)];
+  _fontLabel = [[UILabel alloc] initWithFrame:CGRectZero];
+  _fontLabel.numberOfLines = 0;
   _fontLabel.textAlignment = NSTextAlignmentCenter;
   [self.view addSubview:_fontLabel];
 
+  [RMXStringVariable stringVariableWithKey:@"labelText"
+                              defaultValue:@"This is a customizable label"
+                               updateBlock:^(RMXStringVariable *variable, NSString *selectedValue) {
+                                 _fontLabel.text = selectedValue;
+                                 [self.view setNeedsLayout];
+                               }];
+
   NSArray<NSString *> *fontNames = @[
     @"System", @"AvenirNext-Bold", @"Baskerville-SemiBold", @"Courier",
     @"Futura-CondensedExtraBold", @"Helvetica-Light", @"SnellRoundhand"
   ];
   [RMXStringVariable
-      stringVariableWithKey:@"font"
+      stringVariableWithKey:@"labelFont"
                defaultValue:fontNames[1]
              possibleValues:fontNames
-                updateBlock:^(RMXStringVariable *variable, NSString *selectedValue) {
-                  NSString *fontName = selectedValue;
-                  _fontLabel.text = fontName;
+                updateBlock:^(RMXStringVariable *variable, NSString *selectedFontName) {
                   _fontLabel.font =
-                      [UIFont fontWithName:fontName size:[UIFont labelFontSize]];
+                      [UIFont fontWithName:selectedFontName size:_fontLabel.font.pointSize];
+                  [self.view setNeedsLayout];
                 }];
 }
 
+- (void)viewWillLayoutSubviews {
+  [super viewWillLayoutSubviews];
+
+  CGSize labelSize = [_fontLabel sizeThatFits:CGRectInset(self.view.bounds, 20, 100).size];
+  _fontLabel.frame = CGRectMake(20, 100, self.view.bounds.size.width - 40, labelSize.height);
+}
+
 - (void)viewWillDisappear:(BOOL)animated {
   [super viewWillDisappear:animated];
   [RMXRemixer removeAllVariables];

examples/objc/RemixerExample/SpinningBoxViewController.m

@@ -61,24 +61,22 @@ - (void)viewDidLoad {
 
                  // Set box2 animation to be twice as fast.
                  presentationLayer = _box2.layer.presentationLayer;
-                 angle =
-                     [[presentationLayer valueForKeyPath:@"transform.rotation.z"] floatValue];
+                 angle = [[presentationLayer valueForKeyPath:@"transform.rotation.z"] floatValue];
                  animation.fromValue = [NSNumber numberWithFloat:angle];
                  animation.toValue = [NSNumber numberWithFloat:angle + M_PI * 2.0];
                  animation.duration = MAX(2.0 - (selectedValue * 2), 0.1);
                  [_box2.layer addAnimation:animation forKey:@"spinning"];
                }];
 
-  [RMXBooleanVariable
-      booleanVariableWithKey:@"slowAnimations"
-                defaultValue:NO
-                 updateBlock:^(RMXBooleanVariable *variable, BOOL selectedValue) {
-                   CALayer *layer = self.view.layer;
-                   layer.timeOffset =
-                       [layer convertTime:CACurrentMediaTime() fromLayer:nil];
-                   layer.beginTime = CACurrentMediaTime();
-                   layer.speed = selectedValue ? 0.2 : 1;
-                 }];
+  [RMXBooleanVariable booleanVariableWithKey:@"slowAnimations"
+                                defaultValue:NO
+                                 updateBlock:^(RMXBooleanVariable *variable, BOOL selectedValue) {
+                                   CALayer *layer = self.view.layer;
+                                   layer.timeOffset =
+                                       [layer convertTime:CACurrentMediaTime() fromLayer:nil];
+                                   layer.beginTime = CACurrentMediaTime();
+                                   layer.speed = selectedValue ? 0.2 : 1;
+                                 }];
 }
 
 - (void)viewWillDisappear:(BOOL)animated {

src/core/RMXRemixer.m

@@ -91,12 +91,12 @@ + (void)start {
   if (instance.storageMode == RMXStorageModeLocal) {
     instance.storage = [[RMXLocalStorageController alloc] init];
   } else {
-    #ifdef REMIXER_CLOUD_FIREBASE
+#ifdef REMIXER_CLOUD_FIREBASE
     instance.storage = [[RMXFirebaseStorageController alloc] init];
-    #else
+#else
     instance.storage = [[RMXLocalStorageController alloc] init];
-    // TODO(chuga): Print out a warning.
-    #endif
+// TODO(chuga): Print out a warning.
+#endif
   }
   [instance.storage setup];
   [instance.storage startObservingUpdates];

src/core/UI/RMXOverlayViewController.m

@@ -22,11 +22,12 @@
 
 #import "RMXCellButton.h"
 #import "RMXCellColorList.h"
+#import "RMXCellColorPicker.h"
 #import "RMXCellSegmented.h"
 #import "RMXCellSlider.h"
 #import "RMXCellStepper.h"
 #import "RMXCellSwitch.h"
-#import "RMXCellColorPicker.h"
+#import "RMXCellTextInput.h"
 #import "RMXCellTextPicker.h"
 #import "RMXOverlayNavigationBar.h"
 #import "RMXOverlayView.h"
@@ -40,7 +41,8 @@
 @interface RMXOverlayViewController () <UITableViewDataSource,
                                         UITableViewDelegate,
                                         UIGestureRecognizerDelegate,
-                                        RMXOverlayViewDelegate>
+                                        RMXOverlayViewDelegate,
+                                        RMXCellDelegate>
 @property(nonatomic, strong) RMXOverlayView *view;
 @end
 
@@ -64,6 +66,7 @@ - (void)viewDidLoad {
 
   self.view.tableView.dataSource = self;
   self.view.tableView.delegate = self;
+  self.view.tableView.keyboardDismissMode = UIScrollViewKeyboardDismissModeOnDrag;
 
   [self.view.tableView registerClass:[RMXCellButton class]
               forCellReuseIdentifier:NSStringFromClass([RMXCellButton class])];
@@ -81,6 +84,8 @@ - (void)viewDidLoad {
               forCellReuseIdentifier:NSStringFromClass([RMXCellSwitch class])];
   [self.view.tableView registerClass:[RMXCellTextPicker class]
               forCellReuseIdentifier:NSStringFromClass([RMXCellTextPicker class])];
+  [self.view.tableView registerClass:[RMXCellTextInput class]
+              forCellReuseIdentifier:NSStringFromClass([RMXCellTextInput class])];
 
   UINavigationItem *item = self.view.navigationBar.topItem;
   [(UIButton *)item.leftBarButtonItem.customView addTarget:self
@@ -200,10 +205,11 @@ - (void)maximizePanel {
 }
 
 - (void)dismissOverlay:(id)sender {
-  [self dismissOptionsViewWithCompletion:nil];
+  [self dismissOverlayWithCompletion:nil];
 }
 
-- (void)dismissOptionsViewWithCompletion:(void (^)(BOOL finished))completion {
+- (void)dismissOverlayWithCompletion:(void (^)(BOOL finished))completion {
+  [self.view endEditing:YES];
   [UIView animateWithDuration:0.2
       animations:^{
         [self.view hidePanel];
@@ -226,7 +232,7 @@ - (void)sendEmailInvite:(id)sender {
   [RMXRemixer sendEmailInvite];
 }
 
-#pragma mark - <UITableViewDataSource>
+#pragma mark - UITableViewDataSource
 
 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
   return [_content count];
@@ -238,15 +244,18 @@ - (UITableViewCell *)tableView:(UITableView *)tableView
   NSString *identifier = [self cellIdentifierForVariable:variable];
   RMXCell *cell = (RMXCell *)[tableView dequeueReusableCellWithIdentifier:identifier];
   cell.variable = variable;
+  cell.delegate = self;
   return cell;
 }
 
+#pragma mark - UITableViewDelegate
+
 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
   RMXVariable *variable = _content[indexPath.row];
   return [[self cellClassForVariable:variable] cellHeight];
 }
 
-#pragma mark - <RMXOverlayViewDelegate>
+#pragma mark - RMXOverlayViewDelegate
 
 - (void)touchStartedAtPoint:(CGPoint)point withEvent:(UIEvent *)event {
   // No-op.
@@ -256,6 +265,12 @@ - (BOOL)shouldCapturePointOutsidePanel:(CGPoint)point {
   return self.presentedViewController != nil;
 }
 
+#pragma mark - RMXCellDelegate
+
+- (void)cellRequestedFullScreenOverlay:(RMXCell *)cell {
+  [self maximizePanel];
+}
+
 #pragma mark - Private
 
 - (Class)cellClassForVariable:(RMXVariable *)variable {
@@ -275,6 +290,8 @@ - (Class)cellClassForVariable:(RMXVariable *)variable {
     return [RMXCellSwitch class];
   } else if (variable.controlType == RMXControlTypeTextPicker) {
     return [RMXCellTextPicker class];
+  } else if (variable.controlType == RMXControlTypeTextInput) {
+    return [RMXCellTextInput class];
   }
   return nil;
 }

src/core/UI/cells/RMXCell.h

@@ -21,12 +21,24 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+@class RMXCell;
+
 /** Minimal height for the cell. */
 extern const CGFloat RMXCellHeightMinimal;
 
 /** Larger height for the cell. */
 extern const CGFloat RMXCellHeightLarge;
 
+@protocol RMXCellDelegate <NSObject>
+
+/**
+ Called by the cell when it requires the overlay to go full screen.
+ One example use case is when the keyboard appears.
+ */
+- (void)cellRequestedFullScreenOverlay:(RMXCell *)cell;
+
+@end
+
 /**
  The RMXCell class provides table view cell that should be subclassed for specific Variable
  model types.
@@ -39,6 +51,9 @@ extern const CGFloat RMXCellHeightLarge;
 /** The Variable this cell is controlling. */
 @property(nonatomic, weak) RMXVariable *variable;
 
+/** The delegate for this cell. */
+@property(nonatomic, weak) id<RMXCellDelegate> delegate;
+
 /** The height of this cell. Subclasses should override. */
 + (CGFloat)cellHeight;
 

src/core/UI/cells/RMXCellColorPicker.m

@@ -91,9 +91,7 @@ - (void)layoutSubviews {
   [_button sizeToFit];
   _button.frame =
       CGRectMake(CGRectGetWidth(self.controlViewWrapper.frame) - CGRectGetWidth(_button.frame),
-                 kButtonTopOffset,
-                 CGRectGetWidth(_button.frame),
-                 CGRectGetHeight(_button.frame));
+                 kButtonTopOffset, CGRectGetWidth(_button.frame), CGRectGetHeight(_button.frame));
 }
 
 - (void)prepareForReuse {

src/core/UI/cells/RMXCellTextInput.h

@@ -0,0 +1,30 @@
+/*
+ Copyright 2016-present Google Inc. All Rights Reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+#import "RMXCell.h"
+
+#import "RMXStringVariable.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+/** Provides a table view cell that has a text field. */
+@interface RMXCellTextInput : RMXCell
+
+@property(nonatomic, weak) RMXStringVariable *variable;
+
+@end
+
+NS_ASSUME_NONNULL_END