react-native-drag-sort - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

DragSortableView.js

@@ -1,9 +0,7 @@
-import React, { Component } from 'react'
-import { Animated, Dimensions, Easing, PanResponder, StyleSheet, TouchableOpacity, View } from 'react-native'
+import React, {Component} from 'react'
+import {Animated, Dimensions, Easing, PanResponder, StyleSheet, TouchableOpacity, View} from 'react-native'
 
 const PropTypes = require('prop-types')
-const { width, height } = Dimensions.get('window')
+const {width,height} = Dimensions.get('window')
 
-const sortRefs = new Map()
-const animMaps = new Map()
 const measureDelay = 100
@@ -17,4 +15,15 @@ const defaultZIndex = 8
 
-export default class DragSortableView extends Component {
+export default class DragSortableView extends Component{
 
+    constructor(props) {
+        super(props)
+
+        this.sortRefs = new Map()
+
+        this.itemWidth = props.childrenWidth+props.marginChildrenLeft+props.marginChildrenRight
+        this.itemHeight = props.childrenHeight+props.marginChildrenTop+props.marginChildrenBottom
+
+        this.reComplexDataSource(true,props)
+    }
+
     componentWillMount() {
@@ -30,4 +39,4 @@ this._panResponder = PanResponder.create({
 
-            onPanResponderGrant: (evt, gestureState) => { },
-            onPanResponderMove: (evt, gestureState) => this.moveTouch(evt, gestureState),
+            onPanResponderGrant: (evt, gestureState) => {},
+            onPanResponderMove: (evt, gestureState) => this.moveTouch(evt,gestureState),
             onPanResponderRelease: (evt, gestureState) => this.endTouch(evt),
@@ -40,14 +49,5 @@
 
-    constructor(props) {
-        super()
-
-        this.itemWidth = props.childrenWidth + props.marginChildrenLeft + props.marginChildrenRight
-        this.itemHeight = props.childrenHeight + props.marginChildrenTop + props.marginChildrenBottom
-
-        this.reComplexDataSource(true, props)
-    }
-
     componentWillReceiveProps(nextProps) {
         if (this.props.dataSource != nextProps.dataSource) {
-            this.reComplexDataSource(false, nextProps)
+            this.reComplexDataSource(false,nextProps)
         }
@@ -60,3 +60,3 @@ }
         const fixedItems = this.props.fixedItems;
-        if (fixedItems.length > 0 && fixedItems.includes(touchIndex)) {
+        if (fixedItems.length > 0 && fixedItems.includes(touchIndex)){
             return;
@@ -69,3 +69,3 @@ }
 
-        if (sortRefs.has(touchIndex)) {
+        if (this.sortRefs.has(touchIndex)) {
             if (this.props.onDragStart) {
@@ -80,5 +80,5 @@ this.props.onDragStart(touchIndex)
                 }
-            ).start(() => {
+            ).start(()=>{
                 this.touchCurItem = {
-                    ref: sortRefs.get(touchIndex),
+                    ref: this.sortRefs.get(touchIndex),
                     index: touchIndex,
@@ -96,3 +96,3 @@ originLeft: this.state.dataSource[touchIndex].originLeft,
 
-    moveTouch(nativeEvent, gestureState) {
+    moveTouch (nativeEvent,gestureState) {
 
@@ -108,5 +108,5 @@ this.isHasMove = true
 
-            const rowNum = parseInt(this.props.parentWidth / this.itemWidth);
-            const maxWidth = this.props.parentWidth - this.itemWidth
-            const maxHeight = this.itemHeight * Math.ceil(this.state.dataSource.length / rowNum) - this.itemHeight
+            const rowNum = parseInt(this.props.parentWidth/this.itemWidth);
+            const maxWidth = this.props.parentWidth-this.itemWidth
+            const maxHeight = this.itemHeight*Math.ceil(this.state.dataSource.length/rowNum) - this.itemHeight
 
@@ -142,31 +142,31 @@ //出界后取最大或最小值
             let moveToIndex = 0
-            let moveXNum = dx / this.itemWidth
-            let moveYNum = dy / this.itemHeight
+            let moveXNum = dx/this.itemWidth
+            let moveYNum = dy/this.itemHeight
             if (moveXNum > 0) {
-                moveXNum = parseInt(moveXNum + 0.5)
+                moveXNum = parseInt(moveXNum+0.5)
             } else if (moveXNum < 0) {
-                moveXNum = parseInt(moveXNum - 0.5)
+                moveXNum = parseInt(moveXNum-0.5)
             }
             if (moveYNum > 0) {
-                moveYNum = parseInt(moveYNum + 0.5)
+                moveYNum = parseInt(moveYNum+0.5)
             } else if (moveYNum < 0) {
-                moveYNum = parseInt(moveYNum - 0.5)
+                moveYNum = parseInt(moveYNum-0.5)
             }
 
-            moveToIndex = this.touchCurItem.index + moveXNum + moveYNum * rowNum
+            moveToIndex = this.touchCurItem.index+moveXNum+moveYNum*rowNum
 
-            if (moveToIndex > this.state.dataSource.length - 1) moveToIndex = this.state.dataSource.length - 1
+            if (moveToIndex > this.state.dataSource.length-1) moveToIndex = this.state.dataSource.length-1
 
-            if (this.touchCurItem.moveToIndex != moveToIndex) {
+            if (this.touchCurItem.moveToIndex != moveToIndex ) {
                 const fixedItems = this.props.fixedItems;
                 if (fixedItems.length > 0 && fixedItems.includes(moveToIndex)) return;
                 this.touchCurItem.moveToIndex = moveToIndex
-                this.state.dataSource.forEach((item, index) => {
+                this.state.dataSource.forEach((item,index)=>{
 
                     let nextItem = null
                     if (index > this.touchCurItem.index && index <= moveToIndex) {
-                        nextItem = this.state.dataSource[index - 1]
+                        nextItem = this.state.dataSource[index-1]
 
                     } else if (index >= moveToIndex && index < this.touchCurItem.index) {
-                        nextItem = this.state.dataSource[index + 1]
+                        nextItem = this.state.dataSource[index+1]
 
@@ -178,4 +178,4 @@ } else if (index != this.touchCurItem.index &&
 
-                    } else if ((this.touchCurItem.index - moveToIndex > 0 && moveToIndex == index + 1) ||
-                        (this.touchCurItem.index - moveToIndex < 0 && moveToIndex == index - 1)) {
+                    } else if ((this.touchCurItem.index-moveToIndex > 0 && moveToIndex == index+1) ||
+                        (this.touchCurItem.index-moveToIndex < 0 && moveToIndex == index-1)) {
                         nextItem = this.state.dataSource[index]
@@ -188,3 +188,3 @@ }
                             {
-                                toValue: { x: parseInt(nextItem.originLeft + 0.5), y: parseInt(nextItem.originTop + 0.5) },
+                                toValue: {x: parseInt(nextItem.originLeft+0.5),y: parseInt(nextItem.originTop+0.5)},
                                 duration: slideDuration,
@@ -202,3 +202,3 @@ easing: Easing.out(Easing.quad),
 
-    endTouch(nativeEvent) {
+    endTouch (nativeEvent) {
 
@@ -208,3 +208,3 @@ //clear
             if (this.props.onDragEnd) {
-                this.props.onDragEnd(this.touchCurItem.index, this.touchCurItem.moveToIndex)
+                this.props.onDragEnd(this.touchCurItem.index,this.touchCurItem.moveToIndex)
             }
@@ -224,3 +224,3 @@ //this.state.dataSource[this.touchCurItem.index].scaleValue.setValue(1)
             })
-            this.changePosition(this.touchCurItem.index, this.touchCurItem.moveToIndex)
+            this.changePosition(this.touchCurItem.index,this.touchCurItem.moveToIndex)
             this.touchCurItem = null
@@ -230,11 +230,11 @@ }
 
-    onPressOut() {
-        this.isScaleRecovery = setTimeout(() => {
+    onPressOut () {
+        this.isScaleRecovery = setTimeout(()=> {
             if (this.isMovePanResponder && !this.isHasMove) {
                 this.endTouch()
             }
-        }, 220)
+        },220)
     }
 
-    changePosition(startIndex, endIndex) {
+    changePosition(startIndex,endIndex) {
 
@@ -244,4 +244,4 @@ if (startIndex == endIndex) {
             this.state.dataSource[startIndex].position.setValue({
-                x: parseInt(curItem.originLeft + 0.5),
-                y: parseInt(curItem.originTop + 0.5),
+                x: parseInt(curItem.originLeft+0.5),
+                y: parseInt(curItem.originTop+0.5),
             })
@@ -259,7 +259,7 @@ return;
 
-        const newDataSource = [...this.state.dataSource].map((item, index) => {
+        const newDataSource = [...this.state.dataSource].map((item,index)=>{
             let newIndex = null
             if (isCommon) {
                 if (endIndex > index && index >= startIndex) {
-                    newIndex = index + 1
+                    newIndex = index+1
                 } else if (endIndex == index) {
@@ -270,3 +270,3 @@ newIndex = startIndex
                 if (endIndex >= index && index > startIndex) {
-                    newIndex = index - 1
+                    newIndex = index-1
                 } else if (startIndex == index) {
@@ -278,8 +278,8 @@ newIndex = endIndex
             if (newIndex != null) {
-                const newItem = { ...this.state.dataSource[newIndex] }
+                const newItem = {...this.state.dataSource[newIndex]}
                 newItem.originLeft = item.originLeft
                 newItem.originTop = item.originTop
                 newItem.position = new Animated.ValueXY({
-                    x: parseInt(item.originLeft + 0.5),
-                    y: parseInt(item.originTop + 0.5),
+                    x: parseInt(item.originLeft+0.5),
+                    y: parseInt(item.originTop+0.5),
                 })
@@ -294,3 +294,3 @@ item = newItem
             dataSource: newDataSource
-        }, () => {
+        },()=>{
             if (this.props.onDataChange) {
@@ -302,9 +302,9 @@ this.props.onDataChange(this.getOriginalData())
             this.state.dataSource[startIndex].position.setValue({
-                x: parseInt(startItem.originLeft + 0.5),
-                y: parseInt(startItem.originTop + 0.5),
+                x: parseInt(startItem.originLeft+0.5),
+                y: parseInt(startItem.originTop+0.5),
             })
             const endItem = this.state.dataSource[endIndex]
             this.state.dataSource[endIndex].position.setValue({
-                x: parseInt(endItem.originLeft + 0.5),
-                y: parseInt(endItem.originTop + 0.5),
+                x: parseInt(endItem.originLeft+0.5),
+                y: parseInt(endItem.originTop+0.5),
             })
@@ -315,8 +315,8 @@ })
 
-    reComplexDataSource(isInit, props) {
-        const rowNum = parseInt(props.parentWidth / this.itemWidth);
-        const dataSource = props.dataSource.map((item, index) => {
+    reComplexDataSource(isInit,props) {
+        const rowNum = parseInt(props.parentWidth/this.itemWidth);
+        const dataSource = props.dataSource.map((item,index)=>{
             const newData = {}
-            const left = (index % rowNum) * this.itemWidth
-            const top = parseInt((index / rowNum)) * this.itemHeight
+            const left = (index%rowNum)*this.itemWidth
+            const top = parseInt((index/rowNum))*this.itemHeight
 
@@ -328,4 +328,4 @@ newData.data = item
             newData.position = new Animated.ValueXY({
-                x: parseInt(left + 0.5),
-                y: parseInt(top + 0.5),
+                x: parseInt(left+0.5),
+                y: parseInt(top+0.5),
             })
@@ -339,3 +339,3 @@ newData.scaleValue = new Animated.Value(1)
                 dataSource: dataSource,
-                height: Math.ceil(dataSource.length / rowNum) * this.itemHeight
+                height: Math.ceil(dataSource.length/rowNum)*this.itemHeight
             }
@@ -345,3 +345,3 @@ } else {
                 dataSource: dataSource,
-                height: Math.ceil(dataSource.length / rowNum) * this.itemHeight
+                height: Math.ceil(dataSource.length/rowNum)*this.itemHeight
             })
@@ -352,4 +352,4 @@ }
 
-    getOriginalData() {
-        return this.state.dataSource.map((item, index) => item.data)
+    getOriginalData () {
+        return this.state.dataSource.map((item,index)=> item.data)
     }
@@ -361,10 +361,10 @@
                 //ref={(ref)=>this.sortParentRef=ref}
-                style={[styles.container, {
+                style={[styles.container,{
                     width: this.props.parentWidth,
                     height: this.state.height,
                 }]}
-            //onLayout={()=> {}}
-            >
+                //onLayout={()=> {}}
+                >
                 {
-                    this.state.dataSource.map((item, index) => {
+                    this.state.dataSource.map((item,index)=>{
                         const transformObj = {}
@@ -375,5 +375,5 @@ transformObj[this.props.scaleStatus] = item.scaleValue
                                 key={item.originIndex}
-                                ref={(ref) => sortRefs.set(index, ref)}
+                                ref={(ref) => this.sortRefs.set(index,ref)}
                                 {...this._panResponder.panHandlers}
-                                style={[styles.item, {
+                                style={[styles.item,{
                                     marginTop: this.props.marginChildrenTop,
@@ -386,4 +386,4 @@ marginBottom: this.props.marginChildrenBottom,
                                     opacity: item.scaleValue.interpolate({
-                                        inputRange: [1, maxScale],
-                                        outputRange: [1, minOpacity]
+                                        inputRange:[1,maxScale],
+                                        outputRange:[1,minOpacity]
                                     }),
@@ -393,11 +393,11 @@ transform: [transformObj]
                                 <TouchableOpacity
-                                    activeOpacity={1}
-                                    onPressOut={() => this.onPressOut()}
-                                    onLongPress={() => this.startTouch(index)}
-                                    onPress={() => {
+                                    activeOpacity = {1}
+                                    onPressOut={()=> this.onPressOut()}
+                                    onLongPress={()=>this.startTouch(index)}
+                                    onPress={()=>{
                                         if (this.props.onClickItem) {
-                                            this.props.onClickItem(this.getOriginalData(), item.data, index)
+                                            this.props.onClickItem(this.getOriginalData(),item.data,index)
                                         }
                                     }}>
-                                    {this.props.renderItem(item.data, index)}
+                                    {this.props.renderItem(item.data,index)}
                                 </TouchableOpacity>
@@ -436,3 +436,3 @@ </Animated.View>
     renderItem: PropTypes.func.isRequired,
-    scaleStatus: PropTypes.oneOf('scale', 'scaleX', 'scaleY'),
+    scaleStatus: PropTypes.oneOf('scale','scaleX','scaleY'),
     fixedItems: PropTypes.array
@@ -439,0 +439,0 @@ }

package.json

 {
   "name": "react-native-drag-sort",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Drag and drop sort control for react-native",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30385

increased by2.56%

Worsened metrics

Lines of code

365

decreased by-0.27%

No dependency changes