feat(ios): enable swipe to delete in UITableView (#935)

* feat(ios): enable swipe to delete in UITableView

* docs(hippy-react): fix conflicts

* feat(vue): support swipe to delete

* docs(vue): typo fix

* docs(vue): markdownlint fint

* docs(listview): add min support ver

* feat(listview): add demo case

* feat(reactdemo): add a line

* revert(vuedemo): del yarn.lock

* revert(reactdemo): del yarn.lock

* feat(reactdemo): eslint fix

* docs(react): change function type

* feat(reactdemo): trigger build

docs/hippy-react/components.md

@@ -117,6 +117,10 @@ import icon from './qb_icon_new.png';
 | renderPullHeader   | 设置列表下拉头部（刷新条），配合`onHeaderReleased`、`onHeaderPulling` 和 `collapsePullHeader`使用, 参考 [DEMO](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/components/PullHeader/index.jsx)。 | `() => View`                                                   | `ALL`    |
 | onHeaderPulling   | 下拉过程中触发, 事件会通过 contentOffset 参数返回拖拽高度，可以根据下拉偏移量做相应的逻辑。 | `(obj: { contentOffset: number }) => any`                                                   | `ALL`    |
 | onHeaderReleased   | 下拉超过内容高度，松手后触发。 | `() => any`                                                   | `ALL`    |
+| editable   | 是否可编辑，开启侧滑删除时需要设置为 `true`。`最低支持版本2.9.0` | `boolean`                                                   | `iOS`    |
+| delText   | 侧滑删除文本。`最低支持版本2.9.0` | `string`                                                   | `iOS`    |
+| onDelete   | 在列表项侧滑删除时调起。`最低支持版本2.9.0` | `( nativeEvent: { index: number} ) => void`                                                   | `iOS`    |
+
 
 ## 方法
 

docs/hippy-vue/components.md

@@ -312,6 +312,8 @@ Hippy 的重点功能，高性能的可复用列表组件。里面第一层只
 | preloadItemNumber     | 指定当列表滚动至倒数第几行时触发 `onEndReached` 回调。 | `number` | `ALL` |
 | exposureEventEnabled | Android曝光能力启用开关，如果要使用`appear`、`disappear`相关事件，Android需要设置（iOS无需设置）| `boolean` | `Android`
 | endReached | 当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 `endReached` 回调。 | `Function`                                                  | `ALL`    |
+| editable | 是否可编辑，开启侧滑删除时需要设置为 `true`。`最低支持版本2.9.0` | `boolean`                                                  | `iOS`    |
+| delText | 侧滑删除文本。`最低支持版本2.9.0` | `string`                                                  | `iOS`    |
 
 ## 事件
 
@@ -324,6 +326,7 @@ Hippy 的重点功能，高性能的可复用列表组件。里面第一层只
 | scrollBeginDrag     | 当用户开始拖拽 `ScrollView` 时调用。                         | `Function`                                                  | `ALL`    |
 | scrollEndDrag       | 当用户停止拖拽 `ScrollView` 或者放手让 `ScrollView` 开始滑动的时候调用 | `Function`                                                  | `ALL`    |
 | layout      | 当元素挂载或者布局改变的时候调用，参数为： `{ nativeEvent: { layout: { x, y, width, height } } }`。 | `Function`                                | `ALL`    |
+| delete      | 在列表项侧滑删除时调起，参数为： `{ nativeEvent: { index } }`。`最低支持版本2.9.0` | `Function`                                | `iOS`    |
 
 ## 方法
 

examples/hippy-react-demo/src/components/ListView/index.jsx

@@ -95,12 +95,22 @@ export default class ListExample extends React.Component {
       fetchingDataFlag: false,
     };
     this.fetchTimes = 0;
+    this.delText = 'Delete';
     this.mockFetchData = this.mockFetchData.bind(this);
     this.getRenderRow = this.getRenderRow.bind(this);
     this.onEndReached = this.onEndReached.bind(this);
     this.getRowType = this.getRowType.bind(this);
     this.getRowKey = this.getRowKey.bind(this);
     this.getRowStyle = this.getRowStyle.bind(this);
+    this.onDelete = this.onDelete.bind(this);
+  }
+
+  onDelete({ index }) {
+    const { dataSource } = this.state;
+    const newData = dataSource.filter((item, i) => index !== i);
+    this.setState({
+      dataSource: newData,
+    });
   }
 
   async onEndReached() {
@@ -224,6 +234,9 @@ export default class ListExample extends React.Component {
         renderRow={this.getRenderRow}
         onEndReached={this.onEndReached}
         getRowType={this.getRowType}
+        onDelete={this.onDelete}
+        delText={this.delText}
+        editable={true}
         // getRowStyle={this.getRowStyle}
         getRowKey={this.getRowKey}
         initialListSize={15}

examples/hippy-vue-demo/src/components/demos/demo-list.vue

@@ -32,8 +32,11 @@
       :horizontal="undefined"
       :numberOfRows="dataSource.length"
       :exposureEventEnabled="true"
+      :delText="delText"
+      :editable="true"
       @endReached="onEndReached"
       @scroll="onScroll"
+      @delete="onDelete"
     >
       <!--
         li 有两个参数是一定要加上的。
@@ -96,6 +99,7 @@ export default {
         top: 0,
         left: 0,
       },
+      delText: 'Delete',
       Vue,
       STYLE_LOADING,
     };
@@ -145,6 +149,9 @@ export default {
         }, 300);
       });
     },
+    onDelete(event) {
+      this.dataSource.splice(event.index, 1);
+    },
     async onEndReached() {
       const { dataSource } = this;
 

ios/sdk/component/listview/HippyBaseListView.h

@@ -39,11 +39,14 @@
 @property (nonatomic, copy) HippyDirectEventBlock onMomentumScrollEnd;
 @property (nonatomic, copy) HippyDirectEventBlock onRowWillDisplay;
 @property (nonatomic, copy) HippyDirectEventBlock onEndReached;
+@property (nonatomic, copy) HippyDirectEventBlock onDelete;
+
 @property (nonatomic, assign) NSUInteger preloadItemNumber;
 @property (nonatomic, assign) CGFloat initialContentOffset;
 @property (nonatomic, assign) BOOL manualScroll;
 @property (nonatomic, assign) BOOL bounces;
 @property (nonatomic, assign) BOOL showScrollIndicator;
+@property (nonatomic, assign) BOOL editable;
 
 @property (nonatomic, strong) HippyListTableView *tableView;
 @property (nonatomic, strong, readonly) HippyBaseListViewDataSource *dataSource;

ios/sdk/component/listview/HippyBaseListView.m

@@ -210,6 +210,27 @@
 
 #pragma mark - Delegate & Datasource
 
+- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
+    return self.editable;
+}
+
+- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath {
+	NSString *delText = self.node.props[@"delText"];
+    return delText;
+}
+
+- (BOOL)tableView: (UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath {		
+	return NO;
+}
+
+- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
+	HippyVirtualCell *node = [_dataSource cellForIndexPath: indexPath];
+	NSInteger index = [self.node.subNodes indexOfObject: node];
+	if (self.onDelete) {
+		self.onDelete(@{@"index": @(index)});
+	}  
+}
+
 - (NSInteger)numberOfSectionsInTableView:(__unused UITableView *)tableView {
     return [_dataSource numberOfSection];
 }

ios/sdk/component/listview/HippyBaseListViewManager.m

@@ -38,9 +38,11 @@ HIPPY_EXPORT_VIEW_PROPERTY(onMomentumScrollBegin, HippyDirectEventBlock)
 HIPPY_EXPORT_VIEW_PROPERTY(onMomentumScrollEnd, HippyDirectEventBlock)
 HIPPY_EXPORT_VIEW_PROPERTY(onRowWillDisplay, HippyDirectEventBlock)
 HIPPY_EXPORT_VIEW_PROPERTY(onEndReached, HippyDirectEventBlock)
+HIPPY_EXPORT_VIEW_PROPERTY(onDelete, HippyDirectEventBlock)
 HIPPY_EXPORT_VIEW_PROPERTY(preloadItemNumber, NSUInteger)
 HIPPY_EXPORT_VIEW_PROPERTY(bounces, BOOL)
 HIPPY_EXPORT_VIEW_PROPERTY(initialContentOffset, CGFloat)
+HIPPY_EXPORT_VIEW_PROPERTY(editable, BOOL)
 HIPPY_EXPORT_VIEW_PROPERTY(showScrollIndicator, BOOL)
 HIPPY_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
 

packages/hippy-vue/src/elements/built-in.js

@@ -139,6 +139,9 @@ const ul = {
           event.offsetX = nativeEventParams.contentOffset.x;
           event.offsetY = nativeEventParams.contentOffset.y;
           break;
+        case 'onDelete': 
+          event.index = nativeEventParams.index
+          break;
         default:
       }
       return event;