diff --git a/Example/app/widget/AutoDragSortableView.js b/Example/app/widget/AutoDragSortableView.js index 63a8c5b..2b8fa02 100644 --- a/Example/app/widget/AutoDragSortableView.js +++ b/Example/app/widget/AutoDragSortableView.js @@ -203,7 +203,8 @@ export default class AutoDragSortableView extends Component{ if (!this.props.sortable) return - if (this.sortRefs.has(touchIndex)) { + const key = this._getKey(touchIndex); + if (this.sortRefs.has(key)) { // Initialization data if (this.isStartupAuto()) { @@ -225,7 +226,7 @@ export default class AutoDragSortableView extends Component{ } ).start(()=>{ this.touchCurItem = { - ref: this.sortRefs.get(touchIndex), + ref: this.sortRefs.get(key), index: touchIndex, originLeft: this.state.dataSource[touchIndex].originLeft, originTop: this.state.dataSource[touchIndex].originTop, @@ -607,6 +608,11 @@ export default class AutoDragSortableView extends Component{ ) } + _getKey = (index) => { + const item = this.state.dataSource[index]; + return this.props.keyExtractor ? this.props.keyExtractor(item.data, index) : item.originIndex; + } + _renderItemView = () => { return this.state.dataSource.map((item,index)=>{ const transformObj = {} @@ -615,7 +621,7 @@ export default class AutoDragSortableView extends Component{ return ( this.sortRefs.set(index,ref)} + ref={(ref) => this.sortRefs.set(key,ref)} {...this._panResponder.panHandlers} style={[styles.item,{ marginTop: this.props.marginChildrenTop, diff --git a/Example/app/widget/DragSortableView.js b/Example/app/widget/DragSortableView.js index 2b1c739..713480c 100644 --- a/Example/app/widget/DragSortableView.js +++ b/Example/app/widget/DragSortableView.js @@ -115,7 +115,8 @@ export default class DragSortableView extends Component{ if (!this.props.sortable) return - if (this.sortRefs.has(touchIndex)) { + const key = this._getKey(touchIndex); + if (this.sortRefs.has(key)) { if (this.props.onDragStart) { this.props.onDragStart(touchIndex) } @@ -128,7 +129,7 @@ export default class DragSortableView extends Component{ } ).start(()=>{ this.touchCurItem = { - ref: this.sortRefs.get(touchIndex), + ref: this.sortRefs.get(key), index: touchIndex, originLeft: this.state.dataSource[touchIndex].originLeft, originTop: this.state.dataSource[touchIndex].originTop, @@ -416,15 +417,20 @@ export default class DragSortableView extends Component{ ) } + _getKey = (index) => { + const item = this.state.dataSource[index]; + return this.props.keyExtractor ? this.props.keyExtractor(item.data, index) : item.originIndex; + } + _renderItemView = () => { return this.state.dataSource.map((item,index)=>{ const transformObj = {} transformObj[this.props.scaleStatus] = item.scaleValue - const key = this.props.keyExtractor ? this.props.keyExtractor(item.data,index) : item.originIndex + const key = this._getKey(index); return ( this.sortRefs.set(index,ref)} + ref={(ref) => this.sortRefs.set(key,ref)} {...this._panResponder.panHandlers} style={[styles.item,{ marginTop: this.props.marginChildrenTop, diff --git a/lib/AutoDragSortableView.js b/lib/AutoDragSortableView.js index 63a8c5b..2b8fa02 100644 --- a/lib/AutoDragSortableView.js +++ b/lib/AutoDragSortableView.js @@ -203,7 +203,8 @@ export default class AutoDragSortableView extends Component{ if (!this.props.sortable) return - if (this.sortRefs.has(touchIndex)) { + const key = this._getKey(touchIndex); + if (this.sortRefs.has(key)) { // Initialization data if (this.isStartupAuto()) { @@ -225,7 +226,7 @@ export default class AutoDragSortableView extends Component{ } ).start(()=>{ this.touchCurItem = { - ref: this.sortRefs.get(touchIndex), + ref: this.sortRefs.get(key), index: touchIndex, originLeft: this.state.dataSource[touchIndex].originLeft, originTop: this.state.dataSource[touchIndex].originTop, @@ -607,6 +608,11 @@ export default class AutoDragSortableView extends Component{ ) } + _getKey = (index) => { + const item = this.state.dataSource[index]; + return this.props.keyExtractor ? this.props.keyExtractor(item.data, index) : item.originIndex; + } + _renderItemView = () => { return this.state.dataSource.map((item,index)=>{ const transformObj = {} @@ -615,7 +621,7 @@ export default class AutoDragSortableView extends Component{ return ( this.sortRefs.set(index,ref)} + ref={(ref) => this.sortRefs.set(key,ref)} {...this._panResponder.panHandlers} style={[styles.item,{ marginTop: this.props.marginChildrenTop, diff --git a/lib/DragSortableView.js b/lib/DragSortableView.js index 2b1c739..713480c 100644 --- a/lib/DragSortableView.js +++ b/lib/DragSortableView.js @@ -115,7 +115,8 @@ export default class DragSortableView extends Component{ if (!this.props.sortable) return - if (this.sortRefs.has(touchIndex)) { + const key = this._getKey(touchIndex); + if (this.sortRefs.has(key)) { if (this.props.onDragStart) { this.props.onDragStart(touchIndex) } @@ -128,7 +129,7 @@ export default class DragSortableView extends Component{ } ).start(()=>{ this.touchCurItem = { - ref: this.sortRefs.get(touchIndex), + ref: this.sortRefs.get(key), index: touchIndex, originLeft: this.state.dataSource[touchIndex].originLeft, originTop: this.state.dataSource[touchIndex].originTop, @@ -416,15 +417,20 @@ export default class DragSortableView extends Component{ ) } + _getKey = (index) => { + const item = this.state.dataSource[index]; + return this.props.keyExtractor ? this.props.keyExtractor(item.data, index) : item.originIndex; + } + _renderItemView = () => { return this.state.dataSource.map((item,index)=>{ const transformObj = {} transformObj[this.props.scaleStatus] = item.scaleValue - const key = this.props.keyExtractor ? this.props.keyExtractor(item.data,index) : item.originIndex + const key = this._getKey(index); return ( this.sortRefs.set(index,ref)} + ref={(ref) => this.sortRefs.set(key,ref)} {...this._panResponder.panHandlers} style={[styles.item,{ marginTop: this.props.marginChildrenTop, diff --git a/lib/package.json b/lib/package.json index ededf91..58b257d 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "react-native-drag-sort", - "version": "2.2.4", + "version": "2.3.4", "description": "Drag and drop sort control for react-native", "main": "index.js", "scripts": {