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

Comparing version 1.1.0 to 1.1.1

DragSortableView.js

@@ -1,6 +0,6 @@
-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')
 
@@ -17,3 +17,3 @@ const sortRefs = new Map()
 
-export default class DragSortableView extends Component{
+export default class DragSortableView extends Component {
 
@@ -30,4 +30,4 @@ componentWillMount() {
 
-            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),
@@ -43,6 +43,6 @@
 
-        this.itemWidth = props.childrenWidth+props.marginChildrenLeft+props.marginChildrenRight
-        this.itemHeight = props.childrenHeight+props.marginChildrenTop+props.marginChildrenBottom
+        this.itemWidth = props.childrenWidth + props.marginChildrenLeft + props.marginChildrenRight
+        this.itemHeight = props.childrenHeight + props.marginChildrenTop + props.marginChildrenBottom
 
-        this.reComplexDataSource(true,props)
+        this.reComplexDataSource(true, props)
     }
@@ -52,3 +52,3 @@
         if (this.props.dataSource != nextProps.dataSource) {
-            this.reComplexDataSource(false,nextProps)
+            this.reComplexDataSource(false, nextProps)
         }
@@ -59,2 +59,8 @@ }
 
+        //防止拖动
+        const fixedItems = this.props.fixedItems;
+        if (fixedItems.length > 0 && fixedItems.includes(touchIndex)) {
+            return;
+        }
+
         this.isHasMove = false
@@ -74,3 +80,3 @@
                 }
-            ).start(()=>{
+            ).start(() => {
                 this.touchCurItem = {
@@ -90,3 +96,3 @@ ref: sortRefs.get(touchIndex),
 
-    moveTouch (nativeEvent,gestureState) {
+    moveTouch(nativeEvent, gestureState) {
 
@@ -102,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
 
@@ -136,30 +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]
 
@@ -171,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]
@@ -181,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,
@@ -195,9 +202,8 @@ easing: Easing.out(Easing.quad),
 
-    endTouch (nativeEvent) {
+    endTouch(nativeEvent) {
 
         //clear
-
         if (this.touchCurItem) {
             if (this.props.onDragEnd) {
-                this.props.onDragEnd(this.touchCurItem.index,this.touchCurItem.moveToIndex)
+                this.props.onDragEnd(this.touchCurItem.index, this.touchCurItem.moveToIndex)
             }
@@ -217,3 +223,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
@@ -223,11 +229,11 @@ }
 
-    onPressOut () {
-        this.isScaleRecovery = setTimeout(()=> {
+    onPressOut() {
+        this.isScaleRecovery = setTimeout(() => {
             if (this.isMovePanResponder && !this.isHasMove) {
                 this.endTouch()
             }
-        },220)
+        }, 220)
     }
 
-    changePosition(startIndex,endIndex) {
+    changePosition(startIndex, endIndex) {
 
@@ -237,4 +243,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),
             })
@@ -252,7 +258,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) {
@@ -263,3 +269,3 @@ newIndex = startIndex
                 if (endIndex >= index && index > startIndex) {
-                    newIndex = index-1
+                    newIndex = index - 1
                 } else if (startIndex == index) {
@@ -271,8 +277,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),
                 })
@@ -287,3 +293,3 @@ item = newItem
             dataSource: newDataSource
-        },()=>{
+        }, () => {
             if (this.props.onDataChange) {
@@ -295,9 +301,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),
             })
@@ -308,8 +314,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
 
@@ -321,4 +327,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),
             })
@@ -332,3 +338,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
             }
@@ -338,3 +344,3 @@ } else {
                 dataSource: dataSource,
-                height: Math.ceil(dataSource.length/rowNum)*this.itemHeight
+                height: Math.ceil(dataSource.length / rowNum) * this.itemHeight
             })
@@ -345,4 +351,4 @@ }
 
-    getOriginalData () {
-        return this.state.dataSource.map((item,index)=> item.data)
+    getOriginalData() {
+        return this.state.dataSource.map((item, index) => item.data)
     }
@@ -354,16 +360,18 @@
                 //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 = {}
+                        transformObj[this.props.scaleStatus] = item.scaleValue
                         return (
                             <Animated.View
                                 key={item.originIndex}
-                                ref={(ref) => sortRefs.set(index,ref)}
+                                ref={(ref) => sortRefs.set(index, ref)}
                                 {...this._panResponder.panHandlers}
-                                style={[styles.item,{
+                                style={[styles.item, {
                                     marginTop: this.props.marginChildrenTop,
@@ -376,19 +384,17 @@ marginBottom: this.props.marginChildrenBottom,
                                     opacity: item.scaleValue.interpolate({
-                                        inputRange:[1,maxScale],
-                                        outputRange:[1,minOpacity]
+                                        inputRange: [1, maxScale],
+                                        outputRange: [1, minOpacity]
                                     }),
-                                    transform: [
-                                        {scale: item.scaleValue}
-                                    ]
+                                    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>
@@ -427,2 +433,4 @@ </Animated.View>
     renderItem: PropTypes.func.isRequired,
+    scaleStatus: PropTypes.oneOf('scale', 'scaleX', 'scaleY'),
+    fixedItems: PropTypes.array
 }
@@ -437,2 +445,4 @@
     sortable: true,
+    scaleStatus: 'scale',
+    fixedItems: []
 }
@@ -439,0 +449,0 @@

package.json

 {
   "name": "react-native-drag-sort",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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

29627

increased by5.64%

Lines of code

366

increased by3.1%

No dependency changes