diff --git a/demo/index.ts b/demo/index.ts index cba98715..62eca345 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -13,5 +13,5 @@ export default [ 'src/NavigatorDemo', 'src/NavbarDemo', 'src/RefreshableDemo', - 'src/CollectionDemo', + 'src/FlowLayoutDemo', ] \ No newline at end of file diff --git a/demo/src/CollectionDemo.ts b/demo/src/FlowLayoutDemo.ts similarity index 79% rename from demo/src/CollectionDemo.ts rename to demo/src/FlowLayoutDemo.ts index 19e5d250..3d868636 100644 --- a/demo/src/CollectionDemo.ts +++ b/demo/src/FlowLayoutDemo.ts @@ -1,4 +1,4 @@ -import { Group, Panel, collection, layoutConfig, CollectionItem, } from "doric"; +import { Group, Panel, flowlayout, layoutConfig, FlowLayoutItem } from "doric"; import { colors, label } from "./utils"; const imageUrls = [ @@ -13,16 +13,16 @@ const imageUrls = [ 'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png', ] @Entry -class CollectionDemo extends Panel { +class FlowDemo extends Panel { build(rootView: Group): void { - collection({ + flowlayout({ layoutConfig: layoutConfig().atmost(), - itemCount: 50, + itemCount: 500, renderItem: (idx) => { - return new CollectionItem().apply({ + return new FlowLayoutItem().apply({ bgColor: colors[idx % colors.length], - width: 70 + idx, - height: 70 + idx, + width: 200, + height: 50 + idx * 10, }) }, }) diff --git a/iOS/Pod/Classes/DoricRegistry.m b/iOS/Pod/Classes/DoricRegistry.m index adae7587..48f6ac46 100644 --- a/iOS/Pod/Classes/DoricRegistry.m +++ b/iOS/Pod/Classes/DoricRegistry.m @@ -38,8 +38,8 @@ #import "DoricNavigatorPlugin.h" #import "DoricNavBarPlugin.h" #import "DoricRefreshableNode.h" -#import "DoricCollectionItemNode.h" -#import "DoricCollectionNode.h" +#import "DoricFlowLayoutItemNode.h" +#import "DoricFlowLayoutNode.h" @interface DoricRegistry () @@ -80,8 +80,8 @@ - (void)innerRegister { [self registerViewNode:DoricSliderNode.class withName:@"Slider"]; [self registerViewNode:DoricSlideItemNode.class withName:@"SlideItem"]; [self registerViewNode:DoricRefreshableNode.class withName:@"Refreshable"]; - [self registerViewNode:DoricCollectionItemNode.class withName:@"CollectionItem"]; - [self registerViewNode:DoricCollectionNode.class withName:@"Collection"]; + [self registerViewNode:DoricFlowLayoutItemNode.class withName:@"FlowLayoutItem"]; + [self registerViewNode:DoricFlowLayoutNode.class withName:@"FlowLayout"]; } - (void)registerJSBundle:(NSString *)bundle withName:(NSString *)name { diff --git a/iOS/Pod/Classes/Shader/DoricCollectionItemNode.h b/iOS/Pod/Classes/Shader/DoricFlowLayoutItemNode.h similarity index 66% rename from iOS/Pod/Classes/Shader/DoricCollectionItemNode.h rename to iOS/Pod/Classes/Shader/DoricFlowLayoutItemNode.h index 74965d32..8c3d22be 100644 --- a/iOS/Pod/Classes/Shader/DoricCollectionItemNode.h +++ b/iOS/Pod/Classes/Shader/DoricFlowLayoutItemNode.h @@ -6,5 +6,5 @@ #import "DoricStackNode.h" -@interface DoricCollectionItemNode : DoricStackNode +@interface DoricFlowLayoutItemNode : DoricStackNode @end \ No newline at end of file diff --git a/iOS/Pod/Classes/Shader/DoricCollectionItemNode.m b/iOS/Pod/Classes/Shader/DoricFlowLayoutItemNode.m similarity index 61% rename from iOS/Pod/Classes/Shader/DoricCollectionItemNode.m rename to iOS/Pod/Classes/Shader/DoricFlowLayoutItemNode.m index da58fc8a..dc1e34ae 100644 --- a/iOS/Pod/Classes/Shader/DoricCollectionItemNode.m +++ b/iOS/Pod/Classes/Shader/DoricFlowLayoutItemNode.m @@ -2,19 +2,19 @@ // Created by pengfei.zhou on 2019/11/28. // -#import "DoricCollectionItemNode.h" +#import "DoricFlowLayoutItemNode.h" -@interface DoricCollectionItemView : DoricStackView +@interface DoricFlowLayoutItemView : DoricStackView @end -@implementation DoricCollectionItemView +@implementation DoricFlowLayoutItemView @end -@interface DoricCollectionItemNode () +@interface DoricFlowLayoutItemNode () @end -@implementation DoricCollectionItemNode +@implementation DoricFlowLayoutItemNode - (instancetype)initWithContext:(DoricContext *)doricContext { if (self = [super initWithContext:doricContext]) { self.reusable = YES; @@ -28,6 +28,6 @@ - (void)initWithSuperNode:(DoricSuperNode *)superNode { } - (DoricStackView *)build { - return [DoricCollectionItemView new]; + return [DoricFlowLayoutItemView new]; } @end diff --git a/iOS/Pod/Classes/Shader/DoricCollectionNode.h b/iOS/Pod/Classes/Shader/DoricFlowLayoutNode.h similarity index 62% rename from iOS/Pod/Classes/Shader/DoricCollectionNode.h rename to iOS/Pod/Classes/Shader/DoricFlowLayoutNode.h index 90dbf200..1c999e15 100644 --- a/iOS/Pod/Classes/Shader/DoricCollectionNode.h +++ b/iOS/Pod/Classes/Shader/DoricFlowLayoutNode.h @@ -5,5 +5,5 @@ #import #import "DoricSuperNode.h" -@interface DoricCollectionNode : DoricSuperNode +@interface DoricFlowLayoutNode : DoricSuperNode @end \ No newline at end of file diff --git a/iOS/Pod/Classes/Shader/DoricCollectionNode.m b/iOS/Pod/Classes/Shader/DoricFlowLayoutNode.m similarity index 81% rename from iOS/Pod/Classes/Shader/DoricCollectionNode.m rename to iOS/Pod/Classes/Shader/DoricFlowLayoutNode.m index b2550167..f467f92b 100644 --- a/iOS/Pod/Classes/Shader/DoricCollectionNode.m +++ b/iOS/Pod/Classes/Shader/DoricFlowLayoutNode.m @@ -2,22 +2,22 @@ // Created by pengfei.zhou on 2019/11/28. // -#import "DoricCollectionNode.h" -#import "DoricCollectionItemNode.h" +#import "DoricFlowLayoutNode.h" +#import "DoricFlowLayoutItemNode.h" #import "DoricExtensions.h" #import -@interface DoricCollectionViewCell : UICollectionViewCell -@property(nonatomic, strong) DoricCollectionItemNode *viewNode; +@interface DoricFlowLayoutViewCell : UICollectionViewCell +@property(nonatomic, strong) DoricFlowLayoutItemNode *viewNode; @end -@implementation DoricCollectionViewCell +@implementation DoricFlowLayoutViewCell @end -@interface DoricCollectionView : UICollectionView +@interface DoricFlowLayoutView : UICollectionView @end -@implementation DoricCollectionView +@implementation DoricFlowLayoutView - (CGSize)sizeThatFits:(CGSize)size { if (self.subviews.count > 0) { CGFloat width = size.width; @@ -38,17 +38,18 @@ - (void)layoutSelf:(CGSize)targetSize { } @end -@interface DoricCollectionNode () +@interface DoricFlowLayoutNode () @property(nonatomic, strong) NSMutableDictionary *itemViewIds; @property(nonatomic, strong) NSMutableDictionary *itemSizeInfo; @property(nonatomic, assign) NSUInteger itemCount; @property(nonatomic, assign) NSUInteger batchCount; @end -@implementation DoricCollectionNode +@implementation DoricFlowLayoutNode - (instancetype)initWithContext:(DoricContext *)doricContext { if (self = [super initWithContext:doricContext]) { _itemViewIds = [NSMutableDictionary new]; + _itemSizeInfo = [NSMutableDictionary new]; _batchCount = 15; } return self; @@ -58,14 +59,14 @@ - (UICollectionView *)build { UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical]; - return [[[DoricCollectionView alloc] initWithFrame:CGRectZero + return [[[DoricFlowLayoutView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout] also:^(UICollectionView *it) { it.backgroundColor = [UIColor whiteColor]; it.pagingEnabled = YES; it.delegate = self; it.dataSource = self; - [it registerClass:[DoricCollectionViewCell class] forCellWithReuseIdentifier:@"doricCell"]; + [it registerClass:[DoricFlowLayoutViewCell class] forCellWithReuseIdentifier:@"doricCell"]; }]; } @@ -106,8 +107,8 @@ - (DoricViewNode *)subNodeWithViewId:(NSString *)viewId { __block DoricViewNode *ret = nil; [self.doricContext.driver ensureSyncInMainQueue:^{ for (UICollectionViewCell *collectionViewCell in self.view.visibleCells) { - if ([collectionViewCell isKindOfClass:[DoricCollectionViewCell class]]) { - DoricCollectionItemNode *node = ((DoricCollectionViewCell *) collectionViewCell).viewNode; + if ([collectionViewCell isKindOfClass:[DoricFlowLayoutViewCell class]]) { + DoricFlowLayoutItemNode *node = ((DoricFlowLayoutViewCell *) collectionViewCell).viewNode; if ([viewId isEqualToString:node.viewId]) { ret = node; break; @@ -159,14 +160,14 @@ - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collection NSUInteger position = (NSUInteger) indexPath.row; NSDictionary *model = [self itemModelAt:position]; NSDictionary *props = model[@"props"]; - DoricCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"doricCell" forIndexPath:indexPath]; + DoricFlowLayoutViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"doricCell" forIndexPath:indexPath]; if (!cell.viewNode) { - DoricCollectionItemNode *itemNode = [[DoricCollectionItemNode alloc] initWithContext:self.doricContext]; + DoricFlowLayoutItemNode *itemNode = [[DoricFlowLayoutItemNode alloc] initWithContext:self.doricContext]; [itemNode initWithSuperNode:self]; cell.viewNode = itemNode; [cell.contentView addSubview:itemNode.view]; } - DoricCollectionItemNode *node = cell.viewNode; + DoricFlowLayoutItemNode *node = cell.viewNode; node.viewId = model[@"id"]; [node blend:props]; CGSize size = [node.view measureSize:CGSizeMake(collectionView.width, collectionView.height)]; @@ -185,4 +186,11 @@ - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollection } } -@end \ No newline at end of file +- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { + return 0; +} + +- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { + return 0; +} +@end diff --git a/js-framework/src/widget/collection.ts b/js-framework/src/widget/flowlayout.ts similarity index 80% rename from js-framework/src/widget/collection.ts rename to js-framework/src/widget/flowlayout.ts index aecd54e3..c339cb2a 100644 --- a/js-framework/src/widget/collection.ts +++ b/js-framework/src/widget/flowlayout.ts @@ -17,31 +17,36 @@ import { Stack } from './layouts' import { Property, IView, Superview, View } from '../ui/view' import { layoutConfig } from '../util/index.util' -export class CollectionItem extends Stack { +export class FlowLayoutItem extends Stack { /** * Set to reuse native view */ @Property identifier?: string } -export interface ICollection extends IView { - renderItem: (index: number) => CollectionItem +export interface IFlowLayout extends IView { + renderItem: (index: number) => FlowLayoutItem itemCount: number batchCount?: number + column?: number } -export class Collection extends Superview implements ICollection { - private cachedViews: Map = new Map +export class FlowLayout extends Superview implements IFlowLayout { + private cachedViews: Map = new Map private ignoreDirtyCallOnce = false + allSubviews() { return this.cachedViews.values() } + @Property + column = 1 + @Property itemCount = 0 @Property - renderItem!: (index: number) => CollectionItem + renderItem!: (index: number) => FlowLayoutItem @Property batchCount = 15 @@ -78,16 +83,16 @@ export class Collection extends Superview implements ICollection { } } -export function collection(config: ICollection) { - const ret = new Collection +export function flowlayout(config: IFlowLayout) { + const ret = new FlowLayout for (let key in config) { Reflect.set(ret, key, Reflect.get(config, key, config), ret) } return ret } -export function collectionItem(item: View) { - return (new CollectionItem).also((it) => { +export function flowItem(item: View) { + return (new FlowLayoutItem).also((it) => { it.layoutConfig = layoutConfig().wrap() it.addChild(item) }) diff --git a/js-framework/src/widget/index.widget.ts b/js-framework/src/widget/index.widget.ts index 9e8dde39..14449949 100644 --- a/js-framework/src/widget/index.widget.ts +++ b/js-framework/src/widget/index.widget.ts @@ -20,4 +20,4 @@ export * from './list' export * from './slider' export * from './scroller' export * from './refreshable' -export * from './collection' \ No newline at end of file +export * from './flowlayout' \ No newline at end of file