Suggestions UI - expandable item

ios/chrome/browser/ui/suggestions/suggestions_expandable_item.mm

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "ios/chrome/browser/ui/suggestions/suggestions_expandable_item.h"
+
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+#include "ios/chrome/grit/ios_strings.h"
+#include "ui/base/l10n/l10n_util_mac.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+const CGFloat kImageSize = 80;
+}
+
+@interface SuggestionsExpandableItem ()
+
+- (void)expand:(SuggestionsExpandableCell*)cell;
+- (void)retract:(SuggestionsExpandableCell*)cell;
+
+@end
+
+@interface SuggestionsExpandableCell ()
+
+- (void)expand;
+- (void)retract;
+
+@end
+
+#pragma mark - SuggestionsExpandableItem
+
+@implementation SuggestionsExpandableItem {
+  NSString* _title;
+  NSString* _subtitle;
+  UIImage* _image;
+  NSString* _detail;
+  BOOL isExpanded;

[lpromero, 2017/01/12 16:44:39]

s/isExpanded/_isExpanded.

[gambard, 2017/01/13 16:41:52]

Done.

+}
+
+@synthesize collectionView = _collectionView;
+
+- (instancetype)initWithType:(NSInteger)type
+                       title:(NSString*)title
+                    subtitle:(NSString*)subtitle
+                       image:(UIImage*)image
+                  detailText:(NSString*)detail {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [SuggestionsExpandableCell class];
+    _title = [title copy];
+    _subtitle = [subtitle copy];
+    _image = image;
+    _detail = [detail copy];
+  }
+  return self;
+}
+
+#pragma mark - CollectionViewItem
+
+- (void)configureCell:(SuggestionsExpandableCell*)cell {
+  [super configureCell:cell];
+  cell.item = self;
+  cell.titleLabel.text = _title;
+  cell.subtitleLabel.text = _subtitle;
+  cell.imageView.image = _image;
+  cell.detailLabel.text = _detail;
+  if (isExpanded)
+    [cell expand];
+  else
+    [cell retract];
+}
+
+#pragma mark - Private
+
+- (void)expand:(SuggestionsExpandableCell*)cell {
+  [cell expand];
+  isExpanded = YES;
+  [UIView animateWithDuration:1
+                   animations:^{
+                     [_collectionView.collectionViewLayout invalidateLayout];
+                   }];
+}
+
+- (void)retract:(SuggestionsExpandableCell*)cell {
+  [cell retract];
+  isExpanded = NO;
+  [UIView animateWithDuration:1
+                   animations:^{
+                     [_collectionView.collectionViewLayout invalidateLayout];
+                   }];
+}
+
+@end
+
+#pragma mark - SuggestionsExpandableCell
+
+@implementation SuggestionsExpandableCell {
+  UIView* _articleContainer;
+  UIButton* _interactionButton;
+  UIButton* _expandButton;
+  BOOL _isExpanded;
+}
+
+@synthesize item = _item;
+@synthesize titleLabel = _titleLabel;
+@synthesize subtitleLabel = _subtitleLabel;
+@synthesize detailLabel = _detailLabel;
+@synthesize imageView = _imageView;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    _isExpanded = NO;
+    _titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
+    _subtitleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
+    _imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
+    UIView* imageContainer = [[UIView alloc] initWithFrame:CGRectZero];
+    _articleContainer = [[UIView alloc] initWithFrame:CGRectZero];
+    _expandButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    _detailLabel = [[UILabel alloc] initWithFrame:CGRectZero];
+    _interactionButton = [UIButton buttonWithType:UIButtonTypeSystem];
+
+    _subtitleLabel.numberOfLines = 0;
+    [_expandButton setTitle:@"See more" forState:UIControlStateNormal];
+    _detailLabel.numberOfLines = 0;
+    [_interactionButton setTitle:@"Less interaction"
+                        forState:UIControlStateNormal];
+
+    imageContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    _imageView.translatesAutoresizingMaskIntoConstraints = NO;
+    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _subtitleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _articleContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    _expandButton.translatesAutoresizingMaskIntoConstraints = NO;
+    _detailLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _interactionButton.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [_expandButton addTarget:self
+                      action:@selector(expandPressed)
+            forControlEvents:UIControlEventTouchUpInside];
+    [_interactionButton addTarget:self
+                           action:@selector(retractPressed)
+                 forControlEvents:UIControlEventTouchUpInside];
+
+    [imageContainer addSubview:_imageView];
+    [_articleContainer addSubview:imageContainer];
+    [_articleContainer addSubview:_titleLabel];
+    [_articleContainer addSubview:_subtitleLabel];
+
+    [self.contentView addSubview:_articleContainer];
+    [self.contentView addSubview:_expandButton];
+
+    [NSLayoutConstraint activateConstraints:@[
+      [self.contentView.centerXAnchor
+          constraintEqualToAnchor:_expandButton.centerXAnchor],
+      [_expandButton.topAnchor
+          constraintEqualToAnchor:_articleContainer.bottomAnchor],
+      [_expandButton.bottomAnchor
+          constraintEqualToAnchor:self.contentView.bottomAnchor]
+    ]];
+
+    ApplyVisualConstraintsWithMetrics(
+        @[
+          @"H:|[container]|", @"H:|-[title]-[imageContainer(imageSize)]-|",
+          @"H:|[image(imageSize)]", @"H:|-[text]-[imageContainer]",
+          @"V:|[image(imageSize)]", @"V:|-[title]-[text]-|",
+          @"V:|-[imageContainer(>=imageSize)]-|", @"V:|[container]"
+        ],
+        @{
+          @"image" : _imageView,
+          @"imageContainer" : imageContainer,
+          @"title" : _titleLabel,
+          @"text" : _subtitleLabel,
+          @"container" : _articleContainer
+        },
+        @{ @"imageSize" : @(kImageSize) });
+  }
+  return self;
+}
+
+#pragma mark - Private
+
+- (void)expandPressed {
+  [self.item expand:self];
+}
+
+- (void)retractPressed {
+  [self.item retract:self];
+}
+
+- (void)expand {
+  if (_isExpanded)
+    return;
+  _isExpanded = YES;
+
+  [self.contentView addSubview:_detailLabel];
+  [self.contentView addSubview:_interactionButton];
+  [_expandButton removeFromSuperview];
+
+  [NSLayoutConstraint activateConstraints:@[
+    [_detailLabel.topAnchor
+        constraintEqualToAnchor:_articleContainer.bottomAnchor],
+    [_detailLabel.bottomAnchor
+        constraintEqualToAnchor:_interactionButton.topAnchor],
+    [_interactionButton.bottomAnchor
+        constraintEqualToAnchor:self.contentView.bottomAnchor],
+    [_detailLabel.leadingAnchor
+        constraintEqualToAnchor:self.contentView.leadingAnchor],
+    [_detailLabel.trailingAnchor
+        constraintEqualToAnchor:self.contentView.trailingAnchor]
+  ]];
+}
+
+- (void)retract {
+  if (!_isExpanded)
+    return;
+  _isExpanded = NO;
+
+  [_detailLabel removeFromSuperview];
+  [_interactionButton removeFromSuperview];
+  [self.contentView addSubview:_expandButton];
+
+  [NSLayoutConstraint activateConstraints:@[
+    [self.contentView.centerXAnchor
+        constraintEqualToAnchor:_expandButton.centerXAnchor],
+    [_expandButton.topAnchor
+        constraintEqualToAnchor:_articleContainer.bottomAnchor],
+    [_expandButton.bottomAnchor
+        constraintEqualToAnchor:self.contentView.bottomAnchor]
+  ]];
+}
+
+#pragma mark - UIView
+
+// Implements -layoutSubviews as per instructions in documentation for
+// +[MDCCollectionViewCell cr_preferredHeightForWidth:forItem:].
+- (void)layoutSubviews {
+  [super layoutSubviews];
+
+  // Adjust the text label preferredMaxLayoutWidth when the parent's width
+  // changes, for instance on screen rotation.
+  CGFloat parentWidth = CGRectGetWidth(self.contentView.bounds);
+  _subtitleLabel.preferredMaxLayoutWidth = parentWidth - kImageSize - 3 * 8;
+  _detailLabel.preferredMaxLayoutWidth = parentWidth;
+
+  // Re-layout with the new preferred width to allow the label to adjust its
+  // height.
+  [super layoutSubviews];
+}
+
+@end