implement ghost style prop

Author: corupta

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 (
       <View style={styles.box}>
         {
@@ -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}
           <View style={styles.container}>
             {
               dataSource.map((item, index) => {
@@ -426,6 +427,7 @@ export default class AnySizeDragSortableView extends React.PureComponent {
                 return (
                   <View
                     key={key}
+                    style={selectedKey === key ? ghostStyle : undefined}
                     {...this._panResponder.panHandlers}
                     onLayout={event => this._setLayoutData(key, event)}
                   >
@@ -440,7 +442,7 @@ export default class AnySizeDragSortableView extends React.PureComponent {
       </View>
     )
   }
-  
+
 }
 
 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'
   }
-});
+});

lib/index.d.ts

@@ -61,6 +61,7 @@ interface AnySizeIProps{
   onScrollRef?: (ref: any) => void
   areaOverlapRatio?: number,
   movedWrapStyle: StyleProp<ViewStyle>,
+  ghostStyle: StyleProp<ViewStyle>,
   childMarginTop?: number,
   childMarginBottom?: number,
   childMarginLeft?: number,