Add Yoga layout to ASDKGram Texture cells

- Fix Yoga layout within PhotoCellNode
- Add Yoga layout support to FeedHeaderNode and TailLoadingNode

examples/ASDKgram/Sample.xcodeproj/project.pbxproj

@@ -72,6 +72,7 @@
 		7688437E1CAA37EF00D8629E /* Utilities.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; lineEnding = 0; path = Utilities.m; sourceTree = "<group>"; xcLanguageSpecificationIdentifier = xcode.lang.objc; };
 		7688437F1CAA37EF00D8629E /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		97A9B1BAF4265967672F9EA3 /* Pods-Sample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Sample.debug.xcconfig"; path = "Pods/Target Support Files/Pods-Sample/Pods-Sample.debug.xcconfig"; sourceTree = "<group>"; };
+		9DD0C21A21E8AA2B00CB0F51 /* Availability.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = Availability.h; sourceTree = "<group>"; };
 		AD5DDA0A29B0F32AA5CC47BA /* libPods-Sample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Sample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		CC00D1551E15912F004E5502 /* PhotoFeedListKitViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = PhotoFeedListKitViewController.h; sourceTree = "<group>"; };
 		CC00D1561E15912F004E5502 /* PhotoFeedListKitViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = PhotoFeedListKitViewController.m; sourceTree = "<group>"; };
@@ -126,6 +127,7 @@
 		05E2128319D4DB510098F589 /* Sample */ = {
 			isa = PBXGroup;
 			children = (
+				9DD0C21A21E8AA2B00CB0F51 /* Availability.h */,
 				768843511CAA37EF00D8629E /* AppDelegate.h */,
 				768843681CAA37EF00D8629E /* AppDelegate.m */,
 				CCEDDDD6200C4C0E00FFCD0A /* TextureConfigDelegate.m */,

examples/ASDKgram/Sample/Availability.h

@@ -0,0 +1,18 @@
+//
+//  Availability.h
+//  Texture
+//
+//  Copyright (c) Pinterest, Inc.  All rights reserved.
+//  Licensed under Apache 2.0: http://www.apache.org/licenses/LICENSE-2.0
+//
+
+/**
+ * Enable Yoga layout engine in Texture cells 
+ */
+#define YOGA_LAYOUT 0
+
+/**
+ * There are many ways to format ASLayoutSpec code.  In this example, we offer two different formats:
+ * A flatter, more ordinary Objective-C style; or a more structured, "visually" declarative style.
+ */
+#define FLAT_LAYOUT 0

examples/ASDKgram/Sample/FeedHeaderNode.m

@@ -7,8 +7,12 @@
 //
 
 #import "FeedHeaderNode.h"
+
+#import "Availability.h"
 #import "Utilities.h"
 
+#define YOGA_LAYOUT 0
+
 static UIEdgeInsets kFeedHeaderInset = { .top = 20, .bottom = 20, .left = 10, .right = 10 };
 
 @interface FeedHeaderNode ()
@@ -20,16 +24,32 @@ @implementation FeedHeaderNode
 - (instancetype)init
 {
   if (self = [super init]) {
-    _textNode = [[ASTextNode alloc] init];
     self.automaticallyManagesSubnodes = YES;
+
+    _textNode = [[ASTextNode alloc] init];
     _textNode.attributedText = [NSAttributedString attributedStringWithString:@"Latest Posts" fontSize:18 color:[UIColor darkGrayColor] firstWordColor:nil];
+
+    [self setupYogaLayoutIfNeeded];
   }
   return self;
 }
 
+#if !YOGA_LAYOUT
 - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
 {
   return [ASInsetLayoutSpec insetLayoutSpecWithInsets:kFeedHeaderInset child:_textNode];
 }
+#endif
+
+- (void)setupYogaLayoutIfNeeded
+{
+#if YOGA_LAYOUT
+  [self.style yogaNodeCreateIfNeeded];
+  [self.textNode.style yogaNodeCreateIfNeeded];
+  [self addYogaChild:self.textNode];
+
+  self.style.padding = ASEdgeInsetsMake(kFeedHeaderInset);
+#endif
+}
 
 @end

examples/ASDKgram/Sample/PhotoCellNode.m

@@ -12,14 +12,10 @@
 #import <AsyncDisplayKit/AsyncDisplayKit.h>
 #import <AsyncDisplayKit/ASDisplayNode+Beta.h>
 
-#import "Utilities.h"
+#import "Availability.h"
 #import "PINImageView+PINRemoteImage.h"
 #import "PINButton+PINRemoteImage.h"
-
-// There are many ways to format ASLayoutSpec code.  In this example, we offer two different formats:
-// A flatter, more ordinary Objective-C style; or a more structured, "visually" declarative style.
-#define YOGA_LAYOUT 0
-#define FLAT_LAYOUT 0
+#import "Utilities.h"
 
 #define DEBUG_PHOTOCELL_LAYOUT  0
 
@@ -288,7 +284,6 @@ - (void)setupYogaLayoutIfNeeded
   [_userAvatarImageNode.style yogaNodeCreateIfNeeded];
   [_userNameLabel.style yogaNodeCreateIfNeeded];
   [_photoImageNode.style yogaNodeCreateIfNeeded];
-  [_photoCommentsNode.style yogaNodeCreateIfNeeded];
   [_photoLikesLabel.style yogaNodeCreateIfNeeded];
   [_photoDescriptionLabel.style yogaNodeCreateIfNeeded];
   [_photoLocationLabel.style yogaNodeCreateIfNeeded];
@@ -329,7 +324,7 @@ - (void)setupYogaLayoutIfNeeded
   ASDisplayNode *footerStack = [ASDisplayNode yogaVerticalStack];
   footerStack.style.margin = ASEdgeInsetsMake(InsetForFooter);
   footerStack.style.padding = ASEdgeInsetsMake(UIEdgeInsetsMake(0.0, 0.0, VERTICAL_BUFFER, 0.0));
-  footerStack.yogaChildren = @[_photoLikesLabel, _photoDescriptionLabel, _photoCommentsNode];
+  footerStack.yogaChildren = @[_photoLikesLabel, _photoDescriptionLabel];
 
   // Main Vertical Stack: contains header, large main photo with fixed aspect ratio, and footer.
   _photoImageNode.style.aspectRatio = 1.0;

examples/ASDKgram/Sample/PhotoFeedSectionController.m

@@ -84,12 +84,14 @@ - (void)beginBatchFetchWithContext:(ASBatchContext *)context
 
     // Push to next runloop to give time to insert the spinner
     dispatch_async(dispatch_get_main_queue(), ^{
-      // Start the fetch, then update the items (removing the spinner) when they are loaded.
-      [_photoFeed requestPageWithCompletionBlock:^(NSArray *newPhotos){
-        [self setItems:_photoFeed.photos animated:NO completion:^{
-          [context completeBatchFetching:YES];
-        }];
-      } numResultsToReturn:20];
+      dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
+        // Start the fetch, then update the items (removing the spinner) when they are loaded.
+        [_photoFeed requestPageWithCompletionBlock:^(NSArray *newPhotos){
+          [self setItems:_photoFeed.photos animated:NO completion:^{
+            [context completeBatchFetching:YES];
+          }];
+        } numResultsToReturn:20];
+      });
     });
   });
 }

examples/ASDKgram/Sample/TailLoadingNode.m

@@ -8,6 +8,8 @@
 
 #import "TailLoadingNode.h"
 
+#import "Availability.h"
+
 @interface TailLoadingNode ()
 @property (nonatomic, strong) ASDisplayNode *activityIndicatorNode;
 @end
@@ -17,19 +19,36 @@ @implementation TailLoadingNode
 - (instancetype)init
 {
   if (self = [super init]) {
+    self.automaticallyManagesSubnodes = YES;
+
     _activityIndicatorNode = [[ASDisplayNode alloc] initWithViewBlock:^{
       UIActivityIndicatorView *v = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
       [v startAnimating];
       return v;
     }];
     self.style.height = ASDimensionMake(100);
+
+    [self setupYogaLayoutIfNeeded];
   }
   return self;
 }
-
+#if !YOGA_LAYOUT
 - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
 {
   return [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY sizingOptions:ASCenterLayoutSpecSizingOptionMinimumXY child:self.activityIndicatorNode];
 }
+#endif
+
+- (void)setupYogaLayoutIfNeeded
+{
+#if YOGA_LAYOUT
+  [self.style yogaNodeCreateIfNeeded];
+  [self.activityIndicatorNode.style yogaNodeCreateIfNeeded];
+  [self addYogaChild:self.activityIndicatorNode];
+
+  self.style.justifyContent = ASStackLayoutJustifyContentCenter;
+  self.style.alignItems = ASStackLayoutAlignItemsCenter;
+#endif
+}
 
 @end