From f2b4ba23c46285ec7532f08f0285455d6b554874 Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Thu, 28 Nov 2019 14:44:15 +0800 Subject: [PATCH] feat:add CollectionDemo --- demo/index.ts | 1 + demo/rollup.config.js | 6 +-- demo/src/CollectionDemo.ts | 31 ++++++++++++ iOS/Pod/Classes/Shader/DoricCollectionNode.m | 50 +++++++++++++++++++- js-framework/src/widget/collection.ts | 17 ++++++- 5 files changed, 99 insertions(+), 6 deletions(-) create mode 100644 demo/src/CollectionDemo.ts diff --git a/demo/index.ts b/demo/index.ts index 7b1bac66..cba98715 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -13,4 +13,5 @@ export default [ 'src/NavigatorDemo', 'src/NavbarDemo', 'src/RefreshableDemo', + 'src/CollectionDemo', ] \ No newline at end of file diff --git a/demo/rollup.config.js b/demo/rollup.config.js index 350e6bb7..3e5b5b75 100644 --- a/demo/rollup.config.js +++ b/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); } } }) \ No newline at end of file diff --git a/demo/src/CollectionDemo.ts b/demo/src/CollectionDemo.ts new file mode 100644 index 00000000..19e5d250 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/iOS/Pod/Classes/Shader/DoricCollectionNode.m b/iOS/Pod/Classes/Shader/DoricCollectionNode.m index 77a62fab..b2550167 100644 --- a/iOS/Pod/Classes/Shader/DoricCollectionNode.m +++ b/iOS/Pod/Classes/Shader/DoricCollectionNode.m @@ -40,6 +40,7 @@ - (void)layoutSelf:(CGSize)targetSize { @interface DoricCollectionNode () @property(nonatomic, strong) NSMutableDictionary *itemViewIds; +@property(nonatomic, strong) NSMutableDictionary *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 \ No newline at end of file diff --git a/js-framework/src/widget/collection.ts b/js-framework/src/widget/collection.ts index 280bf13f..aecd54e3 100644 --- a/js-framework/src/widget/collection.ts +++ b/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) + }) +}