diff --git a/README.md b/README.md index 91010a3..b04c6c1 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,7 @@ isRequired if there is a * in the name field |**onScrollRef** | (ref: any) => void |**areaOverlapRatio**|number| Must be greater than 0.5 |**movedWrapStyle**| StyleProp |style +|**ghostStyle**| StyleProp |style |**childMarginTop**|number |**childMarginBottom**|number |**childMarginLeft**|number diff --git a/lib/AnySizeDragSortableView.js b/lib/AnySizeDragSortableView.js index 9450cbc..8208571 100644 --- a/lib/AnySizeDragSortableView.js +++ b/lib/AnySizeDragSortableView.js @@ -175,7 +175,7 @@ export default class AnySizeDragSortableView extends React.PureComponent { const curLayout = this.layoutMap.get(key) const firstOffsetY = (this.curScrollData && this.curScrollData.offsetY) || 0 const initTop = parseInt(curLayout.y - firstOffsetY + headerViewHeight + 0.5) - this.setState({ + this.setState({ scrollEnabled: false, selectedItem: item, selectedKey: key, @@ -280,7 +280,7 @@ export default class AnySizeDragSortableView extends React.PureComponent { break } // When sliding to the end, there is no assistance - if (!this.isUpdating && nextLineLastLayout && + if (!this.isUpdating && nextLineLastLayout && moveX1 >= nextLineLastLayout.x + nextLineLastLayout.width && (moveY2 + moveY1) / 2 > nextLineLastLayout.y ) { this.move(curLayout.key, nextLineLastLayout.key, vy, curLayout.y !== nextLineLastLayout.y) @@ -295,7 +295,7 @@ export default class AnySizeDragSortableView extends React.PureComponent { if (preLeft !== nextLeft || preTop !== nextTop) { this.setState({ selectedPosition: { - ...selectedPosition, + ...selectedPosition, left: nextLeft, top: nextTop } @@ -314,7 +314,7 @@ export default class AnySizeDragSortableView extends React.PureComponent { return } if ( - this.preMoveKeyObj && this.preMoveKeyObj.fromKey === fromKey && this.preMoveKeyObj.toKey === toKey && + this.preMoveKeyObj && this.preMoveKeyObj.fromKey === fromKey && this.preMoveKeyObj.toKey === toKey && isDiffline && ((toIndex - fromIndex > 0 && vy <= 0.01) || (toIndex - fromIndex < 0 && vy >= -0.01)) ) { this.isUpdating = false @@ -395,7 +395,8 @@ export default class AnySizeDragSortableView extends React.PureComponent { render() { const {selectedItem, selectedPosition, scrollEnabled} = this.state - const {dataSource, keyExtractor, renderItem, movedWrapStyle} = this.props + const {ghostStyle, dataSource, keyExtractor, renderItem, movedWrapStyle} = this.props + const selectedKey = selectedItem && keyExtractor(selectedItem); return ( { @@ -417,7 +418,7 @@ export default class AnySizeDragSortableView extends React.PureComponent { scrollEnabled = {scrollEnabled} onScroll={this.onScrollListener} style={styles.scroll}> - {this.props.renderHeaderView ? this.props.renderHeaderView : null} + {this.props.renderHeaderView ? this.props.renderHeaderView : null} { dataSource.map((item, index) => { @@ -426,6 +427,7 @@ export default class AnySizeDragSortableView extends React.PureComponent { return ( this._setLayoutData(key, event)} > @@ -440,7 +442,7 @@ export default class AnySizeDragSortableView extends React.PureComponent { ) } - + } AnySizeDragSortableView.propTypes = { @@ -465,9 +467,10 @@ AnySizeDragSortableView.propTypes = { onScrollRef: PropTypes.func, areaOverlapRatio: PropTypes.number, movedWrapStyle: PropTypes.object, - /** + ghostStyle: PropTypes.object, + /** * childMarginxx: Must be greater than > 0 - * Optimize the calculation of the size of the rectangle where the two components + * Optimize the calculation of the size of the rectangle where the two components * intersect to prevent repeated switching caused by triggering the critical point . */ childMarginTop: PropTypes.number, @@ -492,6 +495,9 @@ AnySizeDragSortableView.defaultProps = { backgroundColor: 'blue', zIndex: 999, }, + ghostStyle: { + opacity: 0.5 + }, childMarginTop: 10, childMarginBottom: 10, childMarginLeft: 10, @@ -511,4 +517,4 @@ const styles = StyleSheet.create({ flexDirection: 'row', flexWrap: 'wrap' } -}); \ No newline at end of file +}); diff --git a/lib/index.d.ts b/lib/index.d.ts index 8eb4cc2..fded9c6 100644 --- a/lib/index.d.ts +++ b/lib/index.d.ts @@ -61,6 +61,7 @@ interface AnySizeIProps{ onScrollRef?: (ref: any) => void areaOverlapRatio?: number, movedWrapStyle: StyleProp, + ghostStyle: StyleProp, childMarginTop?: number, childMarginBottom?: number, childMarginLeft?: number,