Skip to content

Commit

Permalink
Merge pull request #4 from wordpress-mobile/issue/ios_recycler_cells_…
Browse files Browse the repository at this point in the history
…implementation

iOS recycler cells implementation
  • Loading branch information
maxme authored May 18, 2018
2 parents 1305dd3 + 1b7061d commit b061490
Show file tree
Hide file tree
Showing 12 changed files with 478 additions and 64 deletions.
82 changes: 79 additions & 3 deletions example/App.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ import {
View,
Image,
Button,
TouchableNativeFeedback
TouchableNativeFeedback,
TouchableHighlight,
SafeAreaView
} from 'react-native';

import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
Expand Down Expand Up @@ -40,15 +42,32 @@ export default class example extends Component {
const { dataSource } = this.state;

return (
<View style={{flex:1}}>
<SafeAreaView style={{flex:1, backgroundColor: '#e7e7e7'}}>
{ this.renderTopControlPanel() }
<RecyclerViewList
ref={(component) => this._recycler = component}
style={{flex:1}}
dataSource={dataSource}
renderItem={this.renderItem}
windowSize={20}
initialScrollIndex={0}
/>
{ this.renderBottomControlPanel() }
</View>
</SafeAreaView>
);
}

renderItem = ({item, index}) => {
return (
<Item
item={item}
index={index}
onRemove={() => this.remove(index)}
onAddAbove={() => this.addAbove(index)}
onMoveUp={() => this.moveUp(index)}
onMoveDown={() => this.moveDown(index)}
onAddBelow={() => this.addBelow(index)}
onIncrementCounter={() => this.incrementCounter(index)} />
);
}

Expand Down Expand Up @@ -150,6 +169,63 @@ export default class example extends Component {
}
}

class Item extends Component {
render() {
const { item, index, onRemove, onAddAbove, onAddBelow, onMoveUp, onMoveDown, onIncrementCounter } = this.props;
const { id, counter } = item;
const imageSize = 70;

return (
<TouchableHighlight
onPress={onIncrementCounter}>
<View style={{ flexDirection: 'row', alignItems: 'center', marginHorizontal: 5 }}>
<Image
source={{ uri: 'http://loremflickr.com/320/240?t=' + (id % 9) }}
style={{
width: imageSize,
height: imageSize,
marginRight: 10
}} />
<View style={{ flex: 1 }}>
<Text style={{
fontSize: 16,
color: 'black'
}}>Item #{id}</Text>
<Text style={{
fontSize: 13,
color: '#888'
}}>Touch to count { counter ?
<Text style={{ fontWeight: 'bold', color: 'black' }}>{counter}</Text>
: null }</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Button
title={"\u25B2"}
onPress={onMoveUp} />
<View style={{ width: 5 }} />
<Button
title={"\u25BC"}
onPress={onMoveDown} />
<View style={{ width: 5 }} />
<Button
title={"\u002B\u25B2"}
onPress={onAddAbove} />
<View style={{ width: 5 }} />
<Button
title={"\u002B\u25BC"}
onPress={onAddBelow} />
<View style={{ width: 5 }} />
<Button
color="red"
title={" X "}
onPress={onRemove} />
</View>
</View>
</TouchableHighlight>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
Expand Down
3 changes: 2 additions & 1 deletion example/ios/example/Info.plist
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,9 @@
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>NSAppTransportSecurity</key>
<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
Expand Down
1 change: 1 addition & 0 deletions ios/RNReactNativeRecyclerviewList-Bridging-Header.h
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
//

#import <React/RCTBridgeModule.h>
#import <React/RCTView.h>
22 changes: 16 additions & 6 deletions ios/RNReactNativeRecyclerviewList.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
objects = {

/* Begin PBXBuildFile section */
B3E7B58A1CC2AC0600A0062D /* RNReactNativeRecyclerviewList.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RNReactNativeRecyclerviewList.m */; };
B3E7B58A1CC2AC0600A0062D /* RNRecyclerListViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RNRecyclerListViewManager.m */; };
FF239D712099CC5200D0DA1A /* RNRecyclerListItemViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = FF239D702099CC5200D0DA1A /* RNRecyclerListItemViewManager.m */; };
FF239D732099CCC900D0DA1A /* RecyclerListItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FF239D722099CCC900D0DA1A /* RecyclerListItemView.swift */; };
FF658114208F49580034D916 /* RNRecyclerListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FF658113208F49580034D916 /* RNRecyclerListView.swift */; };
/* End PBXBuildFile section */

Expand All @@ -25,8 +27,11 @@

/* Begin PBXFileReference section */
134814201AA4EA6300B7C361 /* libRNReactNativeRecyclerviewList.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRNReactNativeRecyclerviewList.a; sourceTree = BUILT_PRODUCTS_DIR; };
B3E7B5881CC2AC0600A0062D /* RNReactNativeRecyclerviewList.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNReactNativeRecyclerviewList.h; sourceTree = "<group>"; };
B3E7B5891CC2AC0600A0062D /* RNReactNativeRecyclerviewList.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNReactNativeRecyclerviewList.m; sourceTree = "<group>"; };
B3E7B5881CC2AC0600A0062D /* RNRecyclerListViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNRecyclerListViewManager.h; sourceTree = "<group>"; };
B3E7B5891CC2AC0600A0062D /* RNRecyclerListViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNRecyclerListViewManager.m; sourceTree = "<group>"; };
FF239D6F2099CC0900D0DA1A /* RNRecyclerListItemViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNRecyclerListItemViewManager.h; sourceTree = "<group>"; };
FF239D702099CC5200D0DA1A /* RNRecyclerListItemViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNRecyclerListItemViewManager.m; sourceTree = "<group>"; };
FF239D722099CCC900D0DA1A /* RecyclerListItemView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RecyclerListItemView.swift; sourceTree = "<group>"; };
FF658112208F49570034D916 /* RNReactNativeRecyclerviewList-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "RNReactNativeRecyclerviewList-Bridging-Header.h"; sourceTree = "<group>"; };
FF658113208F49580034D916 /* RNRecyclerListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RNRecyclerListView.swift; sourceTree = "<group>"; };
/* End PBXFileReference section */
Expand All @@ -53,9 +58,12 @@
58B511D21A9E6C8500147676 = {
isa = PBXGroup;
children = (
FF239D6F2099CC0900D0DA1A /* RNRecyclerListItemViewManager.h */,
FF239D702099CC5200D0DA1A /* RNRecyclerListItemViewManager.m */,
FF239D722099CCC900D0DA1A /* RecyclerListItemView.swift */,
B3E7B5881CC2AC0600A0062D /* RNRecyclerListViewManager.h */,
B3E7B5891CC2AC0600A0062D /* RNRecyclerListViewManager.m */,
FF658113208F49580034D916 /* RNRecyclerListView.swift */,
B3E7B5881CC2AC0600A0062D /* RNReactNativeRecyclerviewList.h */,
B3E7B5891CC2AC0600A0062D /* RNReactNativeRecyclerviewList.m */,
134814211AA4EA7D00B7C361 /* Products */,
FF658112208F49570034D916 /* RNReactNativeRecyclerviewList-Bridging-Header.h */,
);
Expand Down Expand Up @@ -118,8 +126,10 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
FF239D732099CCC900D0DA1A /* RecyclerListItemView.swift in Sources */,
FF658114208F49580034D916 /* RNRecyclerListView.swift in Sources */,
B3E7B58A1CC2AC0600A0062D /* RNReactNativeRecyclerviewList.m in Sources */,
FF239D712099CC5200D0DA1A /* RNRecyclerListItemViewManager.m in Sources */,
B3E7B58A1CC2AC0600A0062D /* RNRecyclerListViewManager.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

#import "RNReactNativeRecyclerviewList-Swift.h"

@interface RNReactNativeRecyclerviewList : RCTViewManager
@interface RNRecyclerListItemViewManager : RCTViewManager

@end

50 changes: 50 additions & 0 deletions ios/RNRecyclerListItemViewManager.m
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@

#import "RNRecyclerListItemViewManager.h"
#import <React/RCTBridge.h>
#import <React/RCTUIManager.h>
#import <React/RCTConvert.h>

typedef void (^ListItemViewBlock)(RecyclerListItemView *listItemView);

@implementation RNRecyclerListItemViewManager

RCT_EXPORT_MODULE()

- (dispatch_queue_t)methodQueue
{
return dispatch_get_main_queue();
}

- (UIView *)view
{
return [[RecyclerListItemView alloc] init];
}

- (void)executeBlock:(ListItemViewBlock)block onNode:(NSNumber *)node {

[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
id view = viewRegistry[node];
if (![view isKindOfClass:[RecyclerListItemView class]]) {
RCTLogError(@"Invalid view returned from registry, expecting RNReactNativeTableView, got: %@", view);
return;
}
RecyclerListItemView *item = view;
if (block) {
block(item);
}
}];
}

RCT_CUSTOM_VIEW_PROPERTY(itemIndex, NSInteger, RecyclerListItemView)
{
view.itemIndex = [RCTConvert NSInteger:json];
}

RCT_CUSTOM_VIEW_PROPERTY(itemKey, NSInteger, RecyclerListItemView)
{
view.itemKey = [RCTConvert NSInteger:json];
}


@end

Loading

0 comments on commit b061490

Please sign in to comment.