Comments (6)
Could you enable debug mode on the components and post a screenshot of what's going on?
from componentkit.
iOS 8.2 Simulator Screenshots
This is the result i expect and it is the result of the StackLayout when childrens are vertically aligned
#import <UIKit/UIKit.h>
@interface ViewController : UICollectionViewController
@end
#import "ViewController.h"
#import "CKComponentFlexibleSizeRangeProvider.h"
#import "CKCollectionViewDataSource.h"
#import "CKComponent.h"
#import "CKTextComponent.h"
#import "CKStackLayoutComponent.h"
#import <ComponentKit/CKComponentProvider.h>
@interface ViewController () <CKComponentProvider>
@end
@implementation ViewController {
CKCollectionViewDataSource *_dataSource;
CKComponentFlexibleSizeRangeProvider *_sizeRangeProvider;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.collectionView.backgroundColor = [UIColor whiteColor];
self.collectionView.delegate = self;
_sizeRangeProvider = [CKComponentFlexibleSizeRangeProvider providerWithFlexibility:CKComponentSizeRangeFlexibleHeight];
_dataSource = [[CKCollectionViewDataSource alloc]
initWithCollectionView:self.collectionView
supplementaryViewDataSource:nil
componentProvider:[self class]
context:nil
cellConfigurationFunction:nil];
CKArrayControllerSections listSctions;
CKArrayControllerInputItems listItems;
listSctions.insert(0);
listItems.insert({0,0}, @{});
[_dataSource
enqueueChangeset:{listSctions, listItems}
constrainedSize:[_sizeRangeProvider sizeRangeForBoundingSize:self.collectionView.bounds.size]];
}
- (BOOL)prefersStatusBarHidden
{
return YES;
}
+ (CKComponent *)componentForModel:(id<NSObject>)model context:(id<NSObject>)context
{
return [CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionHorizontal
}
children:{
{
[CKTextComponent
newWithTextAttributes:{
.attributedString = [[NSMutableAttributedString
alloc]
initWithString:@"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
attributes:@{
NSFontAttributeName: [UIFont systemFontOfSize:17.0f],
NSForegroundColorAttributeName : [UIColor blueColor],
}]
}
viewAttributes:{
{@selector(setOpaque:), @NO}
}
accessibilityContext:{}]
}
}];
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return [_dataSource sizeForItemAtIndexPath:indexPath];
}
@end
from componentkit.
Try adding .flexShrink = YES to the CKTextComponent that works for me.
[CKTextComponent
newWithTextAttributes:{
.attributedString = [[NSMutableAttributedString
alloc]
initWithString:@"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
attributes:@{
NSFontAttributeName: [UIFont systemFontOfSize:17.0f],
NSForegroundColorAttributeName : [UIColor blueColor],
}]
}
viewAttributes:{
{@selector(setOpaque:), @NO}
}
accessibilityContext:{}],
.flexShrink = YES
from componentkit.
You're right, this works! I still think it might be a bug
from componentkit.
Thanks for the suggestion, @aaronschubert0! Glad to see @smiLLe unstuck! 💯
This may indeed be something we should "fix"--but the key is keeping the behavior consistent across CKStackLayoutDirectionHorizontal
and CKStackLayoutDirectionVertical
. I would think that components without flexShrink
specified should render with the minimum widths or heights necessary to fit their content, regardless of screen size, and that appears to be the case already. But maybe the text wrapping behavior is unintuitive? Let's take a closer look! ☝️
from componentkit.
Thanks @smiLLe for reporting!
We've discussed this a bunch. I agree it's a kinda confusing at first—it's surprising that the text doesn't wrap!
However, this is how CSS flex-box specifies that it should work. When stacking horizontally, items should first be laid out unconstrained in the horizontal dimension (meaning: no wrapping). Then, the flex-box algorithm uses flexShrink
and justifyContent
to decide what to do about it.
In this case, you want wrapping, so you should use flexShrink
. If you wanted instead of the single line of text to be centered, you could use justifyContent = Center
. And so forth.
from componentkit.
Related Issues (20)
- Component not release
- [Documentation] Views path is not render HOT 3
- Delete 'Carthage/Checkouts' directory
- question - docs (docusaurus) repo? HOT 2
- Xcode not building ComponentKit checked out via cocoapods HOT 2
- Docusaurus source code
- question: My component is not getting full width in screen landscape mode. HOT 1
- Not Support Incremental mount
- Build Error with "RenderCoreLayoutCaching" HOT 1
- ComponentKit does not compile with Xcode 12.5 HOT 1
- Compile Error: Block implicitly retains 'self'; explicitly mention 'self' to indicate this is intended behavior HOT 1
- How do I pass multiple arguments
- Unsupported Swift Version: “FBSnapshotTestCase iOS” contains source code developed with Swift 3.x.
- [Question]How to unmount components from HostingView?
- How to make children component height equal to Scroll component's content view height but Scroll component's height HOT 2
- Yoga-internal.h:135:11: error: definition of implicit copy constructor for 'Values<9>' is deprecated
- CKNonNull.h:47:33 No member named 'move' in namespace 'std'; did you mean 'modf'?
- Abandoned?
- ComponentKit/ComponentKit.xcconfig is compiled as source code
- Unable to compile example project
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from componentkit.