From ebcf138c7167e4b4a42244ec00a2c28390af695b Mon Sep 17 00:00:00 2001 From: Box Tsang Date: Tue, 17 Aug 2021 17:37:29 +0800 Subject: [PATCH] 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 | 4 ++++ docs/hippy-vue/components.md | 3 +++ .../src/components/ListView/index.jsx | 13 ++++++++++++ .../src/components/demos/demo-list.vue | 7 +++++++ .../component/listview/HippyBaseListView.h | 3 +++ .../component/listview/HippyBaseListView.m | 21 +++++++++++++++++++ .../listview/HippyBaseListViewManager.m | 2 ++ packages/hippy-vue/src/elements/built-in.js | 3 +++ 8 files changed, 56 insertions(+) diff --git a/docs/hippy-react/components.md b/docs/hippy-react/components.md index be61cef9d..9717e93a4 100644 --- a/docs/hippy-react/components.md +++ b/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` | + ## 方法 diff --git a/docs/hippy-vue/components.md b/docs/hippy-vue/components.md index 0b3b1ea64..404475504 100644 --- a/docs/hippy-vue/components.md +++ b/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` | ## 方法 diff --git a/examples/hippy-react-demo/src/components/ListView/index.jsx b/examples/hippy-react-demo/src/components/ListView/index.jsx index 06eba4de9..e9cfaed66 100644 --- a/examples/hippy-react-demo/src/components/ListView/index.jsx +++ b/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} diff --git a/examples/hippy-vue-demo/src/components/demos/demo-list.vue b/examples/hippy-vue-demo/src/components/demos/demo-list.vue index d16a9c6c0..419992650 100644 --- a/examples/hippy-vue-demo/src/components/demos/demo-list.vue +++ b/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" >