diff --git a/README.md b/README.md index 8f1dde9..7a30435 100755 --- a/README.md +++ b/README.md @@ -405,6 +405,81 @@ an `imageWidth` is unnecessary. ; ``` +## TableView inside ScrollView (like iOS Customise Control Center) + +In some cases you need place your TableView into ScrollView. There is some problems with handling +scroll events, so we don't recommend do it with large number of items +### Without reordering + +Just explicitly set height for `TableView` and disable it's scrolling. + +```jsx +render() { + return ( + + +
+ {items.map(obj => ( + + ))} +
+
+
+ ) +} +``` + +### With reordering + +Explicitly set height for `TableView`, disable it's scrolling and handle reorder actions +for toggling `scrollEnabled` prop of container `ScrollView`: + +```jsx +render() { + return ( + + { + this.setState({ scrollEnabled: false }); + }} + onReorderingEnd={() => { + this.setState({ scrollEnabled: true }); + }} + onReorderingCancel={() => { + this.setState({ scrollEnabled: true }); + }} + style={{ + // You should explicitly set height for TableView + // default height of header in iOS is 26, row height is 44 + height: headerHeight + (items.count * itemHeight), + }} + > +
+ {items.map(obj => ( + + ))} +
+
+
+ ) +} +``` + ### Editable Complex Components Only `Item`s can be edited or moved. However you can create a complex component diff --git a/RNTableView/RNTableView.h b/RNTableView/RNTableView.h index bcc3011..5a94fb4 100644 --- a/RNTableView/RNTableView.h +++ b/RNTableView/RNTableView.h @@ -86,6 +86,10 @@ @property(nonatomic, copy) RCTDirectEventBlock onScroll; @property(nonatomic, copy) RCTDirectEventBlock onRefresh; +@property(nonatomic, copy) RCTBubblingEventBlock onReorderingStart; +@property(nonatomic, copy) RCTBubblingEventBlock onReorderingEnd; +@property(nonatomic, copy) RCTBubblingEventBlock onReorderingCancel; + - (void)addRefresh; - (void)stopRefreshing; - (void)startRefreshing; diff --git a/RNTableView/RNTableView.m b/RNTableView/RNTableView.m index c519a80..c312d5a 100644 --- a/RNTableView/RNTableView.m +++ b/RNTableView/RNTableView.m @@ -570,6 +570,24 @@ - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *) return [value[@"canMove"] boolValue]; } +- (void)tableView:(UITableView *)tableView willBeginReorderingRowAtIndexPath:(NSIndexPath *)indexPath { + if (self.onReorderingStart) { + self.onReorderingStart(@{}); + } +} + +- (void)tableView:(UITableView *)tableView didEndReorderingRowAtIndexPath:(NSIndexPath *)indexPath { + if (self.onReorderingEnd) { + self.onReorderingEnd(@{}); + } +} + +- (void)tableView:(UITableView *)tableView didCancelReorderingRowAtIndexPath:(NSIndexPath *)indexPath { + if (self.onReorderingCancel) { + self.onReorderingCancel(@{}); + } +} + - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath { self.onChange(@{@"target":self.reactTag, @"sourceIndex":@(sourceIndexPath.row), @"sourceSection": @(sourceIndexPath.section), @"destinationIndex":@(destinationIndexPath.row), @"destinationSection":@(destinationIndexPath.section), @"mode": @"move"}); } diff --git a/RNTableView/RNTableViewManager.m b/RNTableView/RNTableViewManager.m index 104eaf3..af5897e 100644 --- a/RNTableView/RNTableViewManager.m +++ b/RNTableView/RNTableViewManager.m @@ -71,6 +71,10 @@ - (NSArray *)customDirectEventTypes RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock) +RCT_EXPORT_VIEW_PROPERTY(onReorderingStart, RCTBubblingEventBlock) +RCT_EXPORT_VIEW_PROPERTY(onReorderingEnd, RCTBubblingEventBlock) +RCT_EXPORT_VIEW_PROPERTY(onReorderingCancel, RCTBubblingEventBlock) + RCT_CUSTOM_VIEW_PROPERTY(refreshing, BOOL, RNTableView) { view.refreshing = [RCTConvert BOOL:json]; } diff --git a/example/src/index.js b/example/src/index.js index 3f2404c..2d652b0 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -9,6 +9,7 @@ import Example5 from './screens/Example5' import Example6 from './screens/Example6' import Example7 from './screens/Example7' import Example8 from './screens/Example8' +import Example9 from './screens/Example9' import TableViewExampleCell from './cells/TableViewExampleCell' @@ -68,6 +69,12 @@ const Stack = createStackNavigator( title: 'Scroll to Index', }, }, + insideScrollView: { + screen: Example9, + navigationOptions: { + title: 'Reorderable TableView in ScrollView', + }, + }, }, { navigationOptions: { diff --git a/example/src/screens/Example8.js b/example/src/screens/Example8.js index f7cb3fb..a1098ea 100644 --- a/example/src/screens/Example8.js +++ b/example/src/screens/Example8.js @@ -7,7 +7,7 @@ const { Section, Item } = TableView class Example8 extends React.Component{ render() { return( - +