feat:rename collcetion to flowlayout

demo/index.ts

@@ -13,5 +13,5 @@ export default [
     'src/NavigatorDemo',
     'src/NavbarDemo',
     'src/RefreshableDemo',
-    'src/CollectionDemo',
+    'src/FlowLayoutDemo',
 ]

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,
+                    width: 200,
-                    height: 70 + idx,
+                    height: 50 + idx * 10,
                 })
             },
         })

iOS/Pod/Classes/DoricRegistry.m

@@ -38,8 +38,8 @@
 #import "DoricNavigatorPlugin.h"
 #import "DoricNavBarPlugin.h"
 #import "DoricRefreshableNode.h"
-#import "DoricCollectionItemNode.h"
+#import "DoricFlowLayoutItemNode.h"
-#import "DoricCollectionNode.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:DoricFlowLayoutItemNode.class withName:@"FlowLayoutItem"];
-    [self registerViewNode:DoricCollectionNode.class withName:@"Collection"];
+    [self registerViewNode:DoricFlowLayoutNode.class withName:@"FlowLayout"];
 }
 
 - (void)registerJSBundle:(NSString *)bundle withName:(NSString *)name {

iOS/Pod/Classes/Shader/DoricFlowLayoutItemNode.h

@@ -6,5 +6,5 @@
 #import "DoricStackNode.h"
 
 
-@interface DoricCollectionItemNode : DoricStackNode
+@interface DoricFlowLayoutItemNode : DoricStackNode
 @end

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

iOS/Pod/Classes/Shader/DoricFlowLayoutNode.h

@@ -5,5 +5,5 @@
 #import <Foundation/Foundation.h>
 #import "DoricSuperNode.h"
 
-@interface DoricCollectionNode : DoricSuperNode<UICollectionView *>
+@interface DoricFlowLayoutNode : DoricSuperNode<UICollectionView *>
 @end

iOS/Pod/Classes/Shader/DoricFlowLayoutNode.m

@@ -2,22 +2,22 @@
 // Created by pengfei.zhou on 2019/11/28.
 //
 
-#import "DoricCollectionNode.h"
+#import "DoricFlowLayoutNode.h"
-#import "DoricCollectionItemNode.h"
+#import "DoricFlowLayoutItemNode.h"
 #import "DoricExtensions.h"
 #import <JavaScriptCore/JavaScriptCore.h>
 
-@interface DoricCollectionViewCell : UICollectionViewCell
+@interface DoricFlowLayoutViewCell : UICollectionViewCell
-@property(nonatomic, strong) DoricCollectionItemNode *viewNode;
+@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 () <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
+@interface DoricFlowLayoutNode () <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
 @property(nonatomic, strong) NSMutableDictionary <NSNumber *, NSString *> *itemViewIds;
 @property(nonatomic, strong) NSMutableDictionary <NSNumber *, NSValue *> *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]]) {
+            if ([collectionViewCell isKindOfClass:[DoricFlowLayoutViewCell class]]) {
-                DoricCollectionItemNode *node = ((DoricCollectionViewCell *) collectionViewCell).viewNode;
+                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
+- (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

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 {
+export interface IFlowLayout extends IView {
-    renderItem: (index: number) => CollectionItem
+    renderItem: (index: number) => FlowLayoutItem
     itemCount: number
     batchCount?: number
+    column?: number
 }
 
-export class Collection extends Superview implements ICollection {
+export class FlowLayout extends Superview implements IFlowLayout {
-    private cachedViews: Map<string, CollectionItem> = new Map
+    private cachedViews: Map<string, FlowLayoutItem> = 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) {
+export function flowlayout(config: IFlowLayout) {
-    const ret = new Collection
+    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) {
+export function flowItem(item: View) {
-    return (new CollectionItem).also((it) => {
+    return (new FlowLayoutItem).also((it) => {
         it.layoutConfig = layoutConfig().wrap()
         it.addChild(item)
     })

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'
+export * from './flowlayout'