feat:add CollectionDemo

demo/index.ts

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

demo/rollup.config.js

@@ -15,9 +15,9 @@ export default bundles.map(bundle => {
             commonjs()
         ],
         external: ['reflect-metadata', 'doric'],
-        onwarn: function(warning) {
-            if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
-            console.warn( warning.message );
+        onwarn: function (warning) {
+            if (warning.code === 'THIS_IS_UNDEFINED') { return; }
+            console.warn(warning.message);
         }
     }
 })

demo/src/CollectionDemo.ts

@@ -0,0 +1,31 @@
+import { Group, Panel, collection, layoutConfig, CollectionItem, } from "doric";
+import { colors, label } from "./utils";
+
+const imageUrls = [
+    'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
+    'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
+    'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
+    'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
+    'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
+    'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
+    'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
+    'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
+    'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
+]
+@Entry
+class CollectionDemo extends Panel {
+    build(rootView: Group): void {
+        collection({
+            layoutConfig: layoutConfig().atmost(),
+            itemCount: 50,
+            renderItem: (idx) => {
+                return new CollectionItem().apply({
+                    bgColor: colors[idx % colors.length],
+                    width: 70 + idx,
+                    height: 70 + idx,
+                })
+            },
+        })
+            .in(rootView)
+    }
+}

iOS/Pod/Classes/Shader/DoricCollectionNode.m

@@ -40,6 +40,7 @@ - (void)layoutSelf:(CGSize)targetSize {
 
 @interface DoricCollectionNode () <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
@@ -55,7 +56,7 @@ - (instancetype)initWithContext:(DoricContext *)doricContext {
 
 - (UICollectionView *)build {
     UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
-    [flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
+    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
 
     return [[[DoricCollectionView alloc] initWithFrame:CGRectZero
                                   collectionViewLayout:flowLayout]
@@ -72,7 +73,7 @@ - (void)blendView:(UICollectionView *)view forPropName:(NSString *)name propValu
     if ([@"itemCount" isEqualToString:name]) {
         self.itemCount = [prop unsignedIntegerValue];
         [self.view reloadData];
-    } else if ([@"renderPage" isEqualToString:name]) {
+    } else if ([@"renderItem" isEqualToString:name]) {
         [self.itemViewIds removeAllObjects];
         [self clearSubModel];
         [self.view reloadData];
@@ -138,5 +139,50 @@ - (void)blendSubNode:(NSDictionary *)subModel {
     }];
 }
 
+- (void)callItem:(NSUInteger)position size:(CGSize)size {
+    NSValue *old = self.itemSizeInfo[@(position)];
+    if (old && CGSizeEqualToSize([old CGSizeValue], size)) {
+        return;
+    }
+    self.itemSizeInfo[@(position)] = [NSValue valueWithCGSize:size];
+    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:position inSection:0];
+    [UIView performWithoutAnimation:^{
+        [self.view reloadItemsAtIndexPaths:@[indexPath]];
+    }];
+}
+
+- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
+    return self.itemCount;
+}
+
+- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
+    NSUInteger position = (NSUInteger) indexPath.row;
+    NSDictionary *model = [self itemModelAt:position];
+    NSDictionary *props = model[@"props"];
+    DoricCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"doricCell" forIndexPath:indexPath];
+    if (!cell.viewNode) {
+        DoricCollectionItemNode *itemNode = [[DoricCollectionItemNode alloc] initWithContext:self.doricContext];
+        [itemNode initWithSuperNode:self];
+        cell.viewNode = itemNode;
+        [cell.contentView addSubview:itemNode.view];
+    }
+    DoricCollectionItemNode *node = cell.viewNode;
+    node.viewId = model[@"id"];
+    [node blend:props];
+    CGSize size = [node.view measureSize:CGSizeMake(collectionView.width, collectionView.height)];
+    [node.view layoutSelf:size];
+    [self callItem:position size:size];
+    return cell;
+}
+
+- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
+    NSUInteger position = (NSUInteger) indexPath.row;
+    NSValue *value = self.itemSizeInfo[@(position)];
+    if (value) {
+        return [value CGSizeValue];
+    } else {
+        return CGSizeMake(100, 100);
+    }
+}
 
 @end

js-framework/src/widget/collection.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import { Stack } from './layouts'
-import { Property, IView, Superview } from '../ui/view'
+import { Property, IView, Superview, View } from '../ui/view'
+import { layoutConfig } from '../util/index.util'
 
 export class CollectionItem extends Stack {
     /**
@@ -77,3 +78,17 @@ export class Collection extends Superview implements ICollection {
     }
 }
 
+export function collection(config: ICollection) {
+    const ret = new Collection
+    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) => {
+        it.layoutConfig = layoutConfig().wrap()
+        it.addChild(item)
+    })
+}