mirror of
https://github.com/Swiftgram/Telegram-iOS.git
synced 2025-06-16 05:55:20 +00:00

git-subtree-dir: submodules/AsyncDisplayKit git-subtree-mainline: d06f423e0ed3df1fed9bd10d79ee312a9179b632 git-subtree-split: 02bedc12816e251ad71777f9d2578329b6d2bef6
557 lines
25 KiB
Objective-C
557 lines
25 KiB
Objective-C
//
|
|
// OverviewComponentsViewController.m
|
|
// Texture
|
|
//
|
|
// Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
|
|
// Changes after 4/13/2017 are: Copyright (c) Pinterest, Inc. All rights reserved.
|
|
// Licensed under Apache 2.0: http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
|
|
#import "OverviewComponentsViewController.h"
|
|
|
|
#import "OverviewDetailViewController.h"
|
|
#import "OverviewASCollectionNode.h"
|
|
#import "OverviewASTableNode.h"
|
|
#import "OverviewASPagerNode.h"
|
|
|
|
#import <AsyncDisplayKit/AsyncDisplayKit.h>
|
|
|
|
|
|
#pragma mark - ASCenterLayoutSpecSizeThatFitsBlock
|
|
|
|
typedef ASLayoutSpec *(^OverviewDisplayNodeSizeThatFitsBlock)(ASSizeRange constrainedSize);
|
|
|
|
|
|
#pragma mark - OverviewDisplayNodeWithSizeBlock
|
|
|
|
@interface OverviewDisplayNodeWithSizeBlock : ASDisplayNode<ASLayoutSpecListEntry>
|
|
|
|
@property (nonatomic, copy) NSString *entryTitle;
|
|
@property (nonatomic, copy) NSString *entryDescription;
|
|
@property (nonatomic, copy) OverviewDisplayNodeSizeThatFitsBlock sizeThatFitsBlock;
|
|
|
|
@end
|
|
|
|
@implementation OverviewDisplayNodeWithSizeBlock
|
|
|
|
// FIXME: Use new ASDisplayNodeAPI (layoutSpecBlock) API if shipped
|
|
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
|
|
{
|
|
OverviewDisplayNodeSizeThatFitsBlock block = self.sizeThatFitsBlock;
|
|
if (block != nil) {
|
|
return block(constrainedSize);
|
|
}
|
|
|
|
return [super layoutSpecThatFits:constrainedSize];
|
|
}
|
|
|
|
@end
|
|
|
|
|
|
#pragma mark - OverviewTitleDescriptionCellNode
|
|
|
|
@interface OverviewTitleDescriptionCellNode : ASCellNode
|
|
|
|
@property (nonatomic, strong) ASTextNode *titleNode;
|
|
@property (nonatomic, strong) ASTextNode *descriptionNode;
|
|
|
|
@end
|
|
|
|
@implementation OverviewTitleDescriptionCellNode
|
|
|
|
- (instancetype)init
|
|
{
|
|
self = [super init];
|
|
if (self == nil) { return self; }
|
|
|
|
_titleNode = [[ASTextNode alloc] init];
|
|
_descriptionNode = [[ASTextNode alloc] init];
|
|
|
|
[self addSubnode:_titleNode];
|
|
[self addSubnode:_descriptionNode];
|
|
|
|
return self;
|
|
}
|
|
|
|
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
|
|
{
|
|
BOOL hasDescription = self.descriptionNode.attributedText.length > 0;
|
|
|
|
ASStackLayoutSpec *verticalStackLayoutSpec = [ASStackLayoutSpec verticalStackLayoutSpec];
|
|
verticalStackLayoutSpec.alignItems = ASStackLayoutAlignItemsStart;
|
|
verticalStackLayoutSpec.spacing = 5.0;
|
|
verticalStackLayoutSpec.children = hasDescription ? @[self.titleNode, self.descriptionNode] : @[self.titleNode];
|
|
|
|
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(10, 16, 10, 10) child:verticalStackLayoutSpec];
|
|
}
|
|
|
|
@end
|
|
|
|
|
|
#pragma mark - OverviewComponentsViewController
|
|
|
|
@interface OverviewComponentsViewController ()
|
|
|
|
@property (nonatomic, copy) NSArray *data;
|
|
@property (nonatomic, strong) ASTableNode *tableNode;
|
|
|
|
@end
|
|
|
|
@implementation OverviewComponentsViewController
|
|
|
|
|
|
#pragma mark - Lifecycle Methods
|
|
|
|
- (instancetype)init
|
|
{
|
|
_tableNode = [ASTableNode new];
|
|
|
|
self = [super initWithNode:_tableNode];
|
|
|
|
if (self) {
|
|
_tableNode.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
|
|
_tableNode.delegate = (id<ASTableDelegate>)self;
|
|
_tableNode.dataSource = (id<ASTableDataSource>)self;
|
|
}
|
|
|
|
return self;
|
|
}
|
|
|
|
- (void)viewDidLoad
|
|
{
|
|
[super viewDidLoad];
|
|
|
|
self.title = @"AsyncDisplayKit";
|
|
|
|
[self setupData];
|
|
}
|
|
|
|
- (void)viewWillAppear:(BOOL)animated
|
|
{
|
|
[super viewWillAppear:animated];
|
|
|
|
[_tableNode deselectRowAtIndexPath:_tableNode.indexPathForSelectedRow animated:YES];
|
|
}
|
|
|
|
|
|
#pragma mark - Data Model
|
|
|
|
- (void)setupData
|
|
{
|
|
OverviewDisplayNodeWithSizeBlock *parentNode = nil;
|
|
ASDisplayNode *childNode = nil;
|
|
|
|
|
|
// Setup Nodes Container
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
NSMutableArray *mutableNodesContainerData = [NSMutableArray array];
|
|
|
|
#pragma mark ASCollectionNode
|
|
childNode = [OverviewASCollectionNode new];
|
|
|
|
parentNode = [self centeringParentNodeWithInset:UIEdgeInsetsZero child:childNode];
|
|
parentNode.entryTitle = @"ASCollectionNode";
|
|
parentNode.entryDescription = @"ASCollectionNode is a node based class that wraps an ASCollectionView. It can be used as a subnode of another node, and provide room for many (great) features and improvements later on.";
|
|
[mutableNodesContainerData addObject:parentNode];
|
|
|
|
#pragma mark ASTableNode
|
|
childNode = [OverviewASTableNode new];
|
|
|
|
parentNode = [self centeringParentNodeWithInset:UIEdgeInsetsZero child:childNode];
|
|
parentNode.entryTitle = @"ASTableNode";
|
|
parentNode.entryDescription = @"ASTableNode is a node based class that wraps an ASTableView. It can be used as a subnode of another node, and provide room for many (great) features and improvements later on.";
|
|
[mutableNodesContainerData addObject:parentNode];
|
|
|
|
#pragma mark ASPagerNode
|
|
childNode = [OverviewASPagerNode new];
|
|
|
|
parentNode = [self centeringParentNodeWithInset:UIEdgeInsetsZero child:childNode];
|
|
parentNode.entryTitle = @"ASPagerNode";
|
|
parentNode.entryDescription = @"ASPagerNode is a specialized subclass of ASCollectionNode. Using it allows you to produce a page style UI similar to what you'd create with a UIPageViewController with UIKit. Luckily, the API is quite a bit simpler than UIPageViewController's.";
|
|
[mutableNodesContainerData addObject:parentNode];
|
|
|
|
|
|
// Setup Nodes
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
NSMutableArray *mutableNodesData = [NSMutableArray array];
|
|
|
|
#pragma mark ASDisplayNode
|
|
ASDisplayNode *displayNode = [self childNode];
|
|
|
|
parentNode = [self centeringParentNodeWithChild:displayNode];
|
|
parentNode.entryTitle = @"ASDisplayNode";
|
|
parentNode.entryDescription = @"ASDisplayNode is the main view abstraction over UIView and CALayer. It initializes and owns a UIView in the same way UIViews create and own their own backing CALayers.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASButtonNode
|
|
ASButtonNode *buttonNode = [ASButtonNode new];
|
|
|
|
// Set title for button node with a given font or color. If you pass in nil for font or color the default system
|
|
// font and black as color will be used
|
|
[buttonNode setTitle:@"Button Title Normal" withFont:nil withColor:[UIColor blueColor] forState:UIControlStateNormal];
|
|
[buttonNode setTitle:@"Button Title Highlighted" withFont:[UIFont systemFontOfSize:14] withColor:nil forState:UIControlStateHighlighted];
|
|
[buttonNode addTarget:self action:@selector(buttonPressed:) forControlEvents:ASControlNodeEventTouchUpInside];
|
|
|
|
parentNode = [self centeringParentNodeWithChild:buttonNode];
|
|
parentNode.entryTitle = @"ASButtonNode";
|
|
parentNode.entryDescription = @"ASButtonNode (a subclass of ASControlNode) supports simple buttons, with multiple states for a text label and an image with a few different layout options. Enables layerBacking for subnodes to significantly lighten main thread impact relative to UIButton (though async preparation is the bigger win).";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASTextNode
|
|
ASTextNode *textNode = [ASTextNode new];
|
|
textNode.attributedText = [[NSAttributedString alloc] initWithString:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius nisi quis mattis dignissim. Proin convallis odio nec ipsum molestie, in porta quam viverra. Fusce ornare dapibus velit, nec malesuada mauris pretium vitae. Etiam malesuada ligula magna."];
|
|
|
|
parentNode = [self centeringParentNodeWithChild:textNode];
|
|
parentNode.entryTitle = @"ASTextNode";
|
|
parentNode.entryDescription = @"Like UITextView — built on TextKit with full-featured rich text support.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASEditableTextNode
|
|
ASEditableTextNode *editableTextNode = [ASEditableTextNode new];
|
|
editableTextNode.backgroundColor = [UIColor lightGrayColor];
|
|
editableTextNode.attributedText = [[NSAttributedString alloc] initWithString:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius nisi quis mattis dignissim. Proin convallis odio nec ipsum molestie, in porta quam viverra. Fusce ornare dapibus velit, nec malesuada mauris pretium vitae. Etiam malesuada ligula magna."];
|
|
|
|
parentNode = [self centeringParentNodeWithChild:editableTextNode];
|
|
parentNode.entryTitle = @"ASEditableTextNode";
|
|
parentNode.entryDescription = @"ASEditableTextNode provides a flexible, efficient, and animation-friendly editable text component.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASImageNode
|
|
ASImageNode *imageNode = [ASImageNode new];
|
|
imageNode.image = [UIImage imageNamed:@"image.jpg"];
|
|
|
|
CGSize imageNetworkImageNodeSize = (CGSize){imageNode.image.size.width / 7, imageNode.image.size.height / 7};
|
|
|
|
imageNode.style.preferredSize = imageNetworkImageNodeSize;
|
|
|
|
parentNode = [self centeringParentNodeWithChild:imageNode];
|
|
parentNode.entryTitle = @"ASImageNode";
|
|
parentNode.entryDescription = @"Like UIImageView — decodes images asynchronously.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASNetworkImageNode
|
|
ASNetworkImageNode *networkImageNode = [ASNetworkImageNode new];
|
|
networkImageNode.URL = [NSURL URLWithString:@"http://i.imgur.com/FjOR9kX.jpg"];
|
|
networkImageNode.style.preferredSize = imageNetworkImageNodeSize;
|
|
|
|
parentNode = [self centeringParentNodeWithChild:networkImageNode];
|
|
parentNode.entryTitle = @"ASNetworkImageNode";
|
|
parentNode.entryDescription = @"ASNetworkImageNode is a simple image node that can download and display an image from the network, with support for a placeholder image.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASMapNode
|
|
ASMapNode *mapNode = [ASMapNode new];
|
|
mapNode.style.preferredSize = CGSizeMake(300.0, 300.0);
|
|
|
|
// San Francisco
|
|
CLLocationCoordinate2D coord = CLLocationCoordinate2DMake(37.7749, -122.4194);
|
|
mapNode.region = MKCoordinateRegionMakeWithDistance(coord, 20000, 20000);
|
|
|
|
parentNode = [self centeringParentNodeWithChild:mapNode];
|
|
parentNode.entryTitle = @"ASMapNode";
|
|
parentNode.entryDescription = @"ASMapNode offers completely asynchronous preparation, automatic preloading, and efficient memory handling. Its standard mode is a fully asynchronous snapshot, with liveMap mode loading automatically triggered by any ASTableView or ASCollectionView; its .liveMap mode can be flipped on with ease (even on a background thread) to provide a cached, fully interactive map when necessary.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASVideoNode
|
|
ASVideoNode *videoNode = [ASVideoNode new];
|
|
videoNode.style.preferredSize = CGSizeMake(300.0, 400.0);
|
|
|
|
AVAsset *asset = [AVAsset assetWithURL:[NSURL URLWithString:@"http://www.w3schools.com/html/mov_bbb.mp4"]];
|
|
videoNode.asset = asset;
|
|
|
|
parentNode = [self centeringParentNodeWithChild:videoNode];
|
|
parentNode.entryTitle = @"ASVideoNode";
|
|
parentNode.entryDescription = @"ASVideoNode is a newer class that exposes a relatively full-featured API, and is designed for both efficient and convenient implementation of embedded videos in scrolling views.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
#pragma mark ASScrollNode
|
|
UIImage *scrollNodeImage = [UIImage imageNamed:@"image"];
|
|
|
|
ASScrollNode *scrollNode = [ASScrollNode new];
|
|
scrollNode.style.preferredSize = CGSizeMake(300.0, 400.0);
|
|
|
|
UIScrollView *scrollNodeView = scrollNode.view;
|
|
[scrollNodeView addSubview:[[UIImageView alloc] initWithImage:scrollNodeImage]];
|
|
scrollNodeView.contentSize = scrollNodeImage.size;
|
|
|
|
parentNode = [self centeringParentNodeWithChild:scrollNode];
|
|
parentNode.entryTitle = @"ASScrollNode";
|
|
parentNode.entryDescription = @"Simple node that wraps UIScrollView.";
|
|
[mutableNodesData addObject:parentNode];
|
|
|
|
|
|
// Layout Specs
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
NSMutableArray *mutableLayoutSpecData = [NSMutableArray array];
|
|
|
|
#pragma mark ASInsetLayoutSpec
|
|
childNode = [self childNode];
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"ASInsetLayoutSpec";
|
|
parentNode.entryDescription = @"Applies an inset margin around a component.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(20, 10, 0, 0) child:childNode];
|
|
};
|
|
[parentNode addSubnode:childNode];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
|
|
#pragma mark ASBackgroundLayoutSpec
|
|
ASDisplayNode *backgroundNode = [ASDisplayNode new];
|
|
backgroundNode.backgroundColor = [UIColor greenColor];
|
|
|
|
childNode = [self childNode];
|
|
childNode.backgroundColor = [childNode.backgroundColor colorWithAlphaComponent:0.5];
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"ASBackgroundLayoutSpec";
|
|
parentNode.entryDescription = @"Lays out a component, stretching another component behind it as a backdrop.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
return [ASBackgroundLayoutSpec backgroundLayoutSpecWithChild:childNode background:backgroundNode];
|
|
};
|
|
[parentNode addSubnode:backgroundNode];
|
|
[parentNode addSubnode:childNode];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
|
|
#pragma mark ASOverlayLayoutSpec
|
|
ASDisplayNode *overlayNode = [ASDisplayNode new];
|
|
overlayNode.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:0.5];
|
|
|
|
childNode = [self childNode];
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"ASOverlayLayoutSpec";
|
|
parentNode.entryDescription = @"Lays out a component, stretching another component on top of it as an overlay.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
return [ASOverlayLayoutSpec overlayLayoutSpecWithChild:childNode overlay:overlayNode];
|
|
};
|
|
[parentNode addSubnode:childNode];
|
|
[parentNode addSubnode:overlayNode];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
|
|
#pragma mark ASCenterLayoutSpec
|
|
childNode = [self childNode];
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"ASCenterLayoutSpec";
|
|
parentNode.entryDescription = @"Centers a component in the available space.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
return [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY
|
|
sizingOptions:ASCenterLayoutSpecSizingOptionDefault
|
|
child:childNode];
|
|
};
|
|
[parentNode addSubnode:childNode];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
#pragma mark ASRatioLayoutSpec
|
|
childNode = [self childNode];
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"ASRatioLayoutSpec";
|
|
parentNode.entryDescription = @"Lays out a component at a fixed aspect ratio. Great for images, gifs and videos.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
return [ASRatioLayoutSpec ratioLayoutSpecWithRatio:0.25 child:childNode];
|
|
};
|
|
[parentNode addSubnode:childNode];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
#pragma mark ASRelativeLayoutSpec
|
|
childNode = [self childNode];
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"ASRelativeLayoutSpec";
|
|
parentNode.entryDescription = @"Lays out a component and positions it within the layout bounds according to vertical and horizontal positional specifiers. Similar to the “9-part” image areas, a child can be positioned at any of the 4 corners, or the middle of any of the 4 edges, as well as the center.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
return [ASRelativeLayoutSpec relativePositionLayoutSpecWithHorizontalPosition:ASRelativeLayoutSpecPositionEnd
|
|
verticalPosition:ASRelativeLayoutSpecPositionCenter
|
|
sizingOption:ASRelativeLayoutSpecSizingOptionDefault
|
|
child:childNode];
|
|
};
|
|
[parentNode addSubnode:childNode];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
#pragma mark ASAbsoluteLayoutSpec
|
|
childNode = [self childNode];
|
|
// Add a layout position to the child node that the absolute layout spec will pick up and place it on that position
|
|
childNode.style.layoutPosition = CGPointMake(10.0, 10.0);
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"ASAbsoluteLayoutSpec";
|
|
parentNode.entryDescription = @"Allows positioning children at fixed offsets.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
return [ASAbsoluteLayoutSpec absoluteLayoutSpecWithChildren:@[childNode]];
|
|
};
|
|
[parentNode addSubnode:childNode];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
|
|
#pragma mark Vertical ASStackLayoutSpec
|
|
ASDisplayNode *childNode1 = [self childNode];
|
|
childNode1.backgroundColor = [UIColor greenColor];
|
|
|
|
ASDisplayNode *childNode2 = [self childNode];
|
|
childNode2.backgroundColor = [UIColor blueColor];
|
|
|
|
ASDisplayNode *childNode3 = [self childNode];
|
|
childNode3.backgroundColor = [UIColor yellowColor];
|
|
|
|
// If we just would add the childrent to the stack layout the layout would be to tall and run out of the edge of
|
|
// the node as 50+50+50 = 150 but the parent node is only 100 height. To prevent that we set flexShrink on 2 of the
|
|
// children to let the stack layout know it should shrink these children in case the layout will run over the edge
|
|
childNode2.style.flexShrink = 1.0;
|
|
childNode3.style.flexShrink = 1.0;
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"Vertical ASStackLayoutSpec";
|
|
parentNode.entryDescription = @"Is based on a simplified version of CSS flexbox. It allows you to stack components vertically or horizontally and specify how they should be flexed and aligned to fit in the available space.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
ASStackLayoutSpec *verticalStackLayoutSpec = [ASStackLayoutSpec verticalStackLayoutSpec];
|
|
verticalStackLayoutSpec.alignItems = ASStackLayoutAlignItemsStart;
|
|
verticalStackLayoutSpec.children = @[childNode1, childNode2, childNode3];
|
|
return verticalStackLayoutSpec;
|
|
};
|
|
[parentNode addSubnode:childNode1];
|
|
[parentNode addSubnode:childNode2];
|
|
[parentNode addSubnode:childNode3];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
#pragma mark Horizontal ASStackLayoutSpec
|
|
childNode1 = [ASDisplayNode new];
|
|
childNode1.style.preferredSize = CGSizeMake(10.0, 20.0);
|
|
childNode1.style.flexGrow = 1.0;
|
|
childNode1.backgroundColor = [UIColor greenColor];
|
|
|
|
childNode2 = [ASDisplayNode new];
|
|
childNode2.style.preferredSize = CGSizeMake(10.0, 20.0);
|
|
childNode2.style.alignSelf = ASStackLayoutAlignSelfStretch;
|
|
childNode2.backgroundColor = [UIColor blueColor];
|
|
|
|
childNode3 = [ASDisplayNode new];
|
|
childNode3.style.preferredSize = CGSizeMake(10.0, 20.0);
|
|
childNode3.backgroundColor = [UIColor yellowColor];
|
|
|
|
parentNode = [self parentNodeWithChild:childNode];
|
|
parentNode.entryTitle = @"Horizontal ASStackLayoutSpec";
|
|
parentNode.entryDescription = @"Is based on a simplified version of CSS flexbox. It allows you to stack components vertically or horizontally and specify how they should be flexed and aligned to fit in the available space.";
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
|
|
// Create stack alyout spec to layout children
|
|
ASStackLayoutSpec *horizontalStackSpec = [ASStackLayoutSpec horizontalStackLayoutSpec];
|
|
horizontalStackSpec.alignItems = ASStackLayoutAlignItemsStart;
|
|
horizontalStackSpec.children = @[childNode1, childNode2, childNode3];
|
|
horizontalStackSpec.spacing = 5.0; // Spacing between children
|
|
|
|
// Layout the stack layout with 100% width and 100% height of the parent node
|
|
horizontalStackSpec.style.height = ASDimensionMakeWithFraction(1.0);
|
|
horizontalStackSpec.style.width = ASDimensionMakeWithFraction(1.0);
|
|
|
|
// Add a bit of inset
|
|
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(0.0, 5.0, 0.0, 5.0) child:horizontalStackSpec];
|
|
};
|
|
[parentNode addSubnode:childNode1];
|
|
[parentNode addSubnode:childNode2];
|
|
[parentNode addSubnode:childNode3];
|
|
[mutableLayoutSpecData addObject:parentNode];
|
|
|
|
|
|
// Setup Data
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
NSMutableArray *mutableData = [NSMutableArray array];
|
|
[mutableData addObject:@{@"title" : @"Node Containers", @"data" : mutableNodesContainerData}];
|
|
[mutableData addObject:@{@"title" : @"Nodes", @"data" : mutableNodesData}];
|
|
[mutableData addObject:@{@"title" : @"Layout Specs", @"data" : [mutableLayoutSpecData copy]}];
|
|
self.data = mutableData;
|
|
}
|
|
|
|
#pragma mark - Parent / Child Helper
|
|
|
|
- (OverviewDisplayNodeWithSizeBlock *)parentNodeWithChild:(ASDisplayNode *)child
|
|
{
|
|
OverviewDisplayNodeWithSizeBlock *parentNode = [OverviewDisplayNodeWithSizeBlock new];
|
|
parentNode.style.preferredSize = CGSizeMake(100, 100);
|
|
parentNode.backgroundColor = [UIColor redColor];
|
|
return parentNode;
|
|
}
|
|
|
|
- (OverviewDisplayNodeWithSizeBlock *)centeringParentNodeWithChild:(ASDisplayNode *)child
|
|
{
|
|
return [self centeringParentNodeWithInset:UIEdgeInsetsMake(10, 10, 10, 10) child:child];
|
|
}
|
|
|
|
- (OverviewDisplayNodeWithSizeBlock *)centeringParentNodeWithInset:(UIEdgeInsets)insets child:(ASDisplayNode *)child
|
|
{
|
|
OverviewDisplayNodeWithSizeBlock *parentNode = [OverviewDisplayNodeWithSizeBlock new];
|
|
[parentNode addSubnode:child];
|
|
parentNode.sizeThatFitsBlock = ^ASLayoutSpec *(ASSizeRange constrainedSize) {
|
|
ASCenterLayoutSpec *centerLayoutSpec = [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY sizingOptions:ASCenterLayoutSpecSizingOptionDefault child:child];
|
|
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets child:centerLayoutSpec];
|
|
};
|
|
return parentNode;
|
|
}
|
|
|
|
- (ASDisplayNode *)childNode
|
|
{
|
|
ASDisplayNode *childNode = [ASDisplayNode new];
|
|
childNode.style.preferredSize = CGSizeMake(50, 50);
|
|
childNode.backgroundColor = [UIColor blueColor];
|
|
return childNode;
|
|
}
|
|
|
|
#pragma mark - Actions
|
|
|
|
- (void)buttonPressed:(ASButtonNode *)buttonNode
|
|
{
|
|
NSLog(@"Button Pressed");
|
|
}
|
|
|
|
#pragma mark - <ASTableDataSource / ASTableDelegate>
|
|
|
|
- (NSInteger)numberOfSectionsInTableNode:(ASTableNode *)tableNode
|
|
{
|
|
return self.data.count;
|
|
}
|
|
|
|
- (nullable NSString *)tableNode:(ASTableNode *)tableNode titleForHeaderInSection:(NSInteger)section
|
|
{
|
|
return self.data[section][@"title"];
|
|
}
|
|
|
|
- (NSInteger)tableNode:(ASTableNode *)tableNode numberOfRowsInSection:(NSInteger)section
|
|
{
|
|
return [self.data[section][@"data"] count];
|
|
}
|
|
|
|
- (ASCellNodeBlock)tableNode:(ASTableNode *)tableNode nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath
|
|
{
|
|
// You should get the node or data you want to pass to the cell node outside of the ASCellNodeBlock
|
|
ASDisplayNode<ASLayoutSpecListEntry> *node = self.data[indexPath.section][@"data"][indexPath.row];
|
|
return ^{
|
|
OverviewTitleDescriptionCellNode *cellNode = [OverviewTitleDescriptionCellNode new];
|
|
|
|
NSDictionary *titleNodeAttributes = @{
|
|
NSFontAttributeName : [UIFont boldSystemFontOfSize:14.0],
|
|
NSForegroundColorAttributeName : [UIColor blackColor]
|
|
};
|
|
cellNode.titleNode.attributedText = [[NSAttributedString alloc] initWithString:node.entryTitle attributes:titleNodeAttributes];
|
|
|
|
if (node.entryDescription) {
|
|
NSDictionary *descriptionNodeAttributes = @{NSForegroundColorAttributeName : [UIColor lightGrayColor]};
|
|
cellNode.descriptionNode.attributedText = [[NSAttributedString alloc] initWithString:node.entryDescription attributes:descriptionNodeAttributes];
|
|
}
|
|
|
|
return cellNode;
|
|
};
|
|
}
|
|
|
|
- (void)tableNode:(ASTableNode *)tableNode didSelectRowAtIndexPath:(NSIndexPath *)indexPath
|
|
{
|
|
ASDisplayNode *node = self.data[indexPath.section][@"data"][indexPath.row];
|
|
OverviewDetailViewController *detail = [[OverviewDetailViewController alloc] initWithNode:node];
|
|
[self.navigationController pushViewController:detail animated:YES];
|
|
}
|
|
|
|
@end
|