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

Comparing version 2.0.4 to 2.1.0

AutoDragSortableView.js

@@ -266,4 +266,4 @@ import React, {Component} from 'react'
                     // Automatic sliding
-                    const minDownDiss = curDis + this.props.childrenHeight * (1 + (this.props.maxScale - 1) / 2) + this.props.marginChildrenTop;
-                    const maxUpDiss = curDis + this.props.marginChildrenTop;
+                    const minDownDiss = curDis + this.props.childrenHeight * (1 + (this.props.maxScale - 1) / 2) + this.props.marginChildrenTop + this.props.headerViewHeight;
+                    const maxUpDiss = curDis + this.props.marginChildrenTop + this.props.headerViewHeight;
                     if ((tempStatus === 0 || tempStatus === 2) && vy > 0.01 && minDownDiss > this.curScrollData.windowHeight) {
@@ -577,3 +577,4 @@ this.autoObj.curDy = dy;
                 onScroll={this.onScrollListener}
-                style={styles.container}>   
+                style={styles.container}>  
+                {this.props.renderHeaderView ? this.props.renderHeaderView : null} 
                 <View
@@ -589,2 +590,3 @@ //ref={(ref)=>this.sortParentRef=ref}
                 </View>
+                {this.props.renderBottomView ? this.props.renderBottomView : null}
             </ScrollView>
@@ -671,2 +673,6 @@ )
     autoThrottleDuration: PropTypes.number,
+    renderHeaderView: PropTypes.element,
+    headerViewHeight: PropTypes.number,
+    renderBottomView: PropTypes.element,
+    bottomViewHeight: PropTypes.number,
 }
@@ -690,2 +696,4 @@
     autoThrottleDuration: 10,
+    headerViewHeight: 0,
+    bottomViewHeight: 0,
 }
@@ -692,0 +700,0 @@

index.d.ts

@@ -37,2 +37,6 @@ import React, { Component } from 'react'
   autoThrottleDuration: number?,
+  renderHeaderView: any?,
+  headerViewHeight: number?,
+  renderBottomView: any?,
+  bottomViewHeight: number?,
 }
@@ -39,0 +43,0 @@

package.json

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

README.md

@@ -7,6 +7,7 @@ # react-native-drag-sort
 
-### Language 
-- [English](https://github.com/mochixuan/react-native-drag-sort/blob/master/README.md) 
-- [中文](https://github.com/mochixuan/react-native-drag-sort/blob/master/README_ZH.md)
+### Version Iteration
+- [English Version Iteration](https://github.com/mochixuan/react-native-drag-sort/blob/master/README_History.md) 
+- [中文版本迭代](https://github.com/mochixuan/react-native-drag-sort/blob/master/README_ZH_History.md)
 
+
 ### Installation
@@ -22,106 +23,21 @@
 
-### important hint
-1. [Download Android example](https://fir.im/dragsort)
-2. You must write the attribute keyExtractor = {(item, index) => item.id} id is the unique identification of your data, there is no index to replace item.id.
-3. If Android Debug mode is compared to the card. Please package and install and test, release will not get stuck. Or test animation is very smooth under iOS.
+### Performance（GIF）
 
-#### 2020.2 Removed componentWillReceiveProps / componentWillMount method
-> Using Fiber after React 16.3, React rendering has become asynchronous rendering. For details, please Google React Fiber.
+[AutomaticSlidingOnePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingOnePage.js) | [AutomaticSlidingThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingThreePage.js)
+| ------ | ----------- | 
+| ![](https://user-gold-cdn.xitu.io/2020/2/15/170487f5ce137e15?w=240&h=514&f=gif&s=2527386) | ![](https://user-gold-cdn.xitu.io/2020/2/15/1704896e0729f8b7?w=240&h=514&f=gif&s=4958289) 
 
-React <16.3 Please quote react-native-drag-sort@2.0.1
-React> 16.3 Please quote react-native-drag-sort @ latest
+[ScrollFixedAddPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/ScrollFixedAddPage.js) | [DragDeletePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/DragDeletePage.js)  
+| ------ | ----------- |
+| ![](https://user-gold-cdn.xitu.io/2020/2/10/1702ea81299f097d?w=240&h=400&f=gif&s=863218)  | ![dragdelete.gif](https://upload-images.jianshu.io/upload_images/2646598-4d22ddb8f92a6563.gif?imageMogr2/auto-orient/strip)  
 
-### Update Progress
 
-#### 2020.1 Added auto swipe function
+[SortAndFixedPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/SortAndFixedPage.js)  | [OneRowsPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/OneRowsPage.js)  
+| ------ | ----------- | 
+| ![ezgif.com-resize.gif](https://upload-images.jianshu.io/upload_images/2646598-405b01d61547c972.gif?imageMogr2/auto-orient/strip)  | ![one-line.gif](https://upload-images.jianshu.io/upload_images/2646598-dd17c76291514316.gif?imageMogr2/auto-orient/strip)  
 
-##### If you do not need the auto-sliding function to use or are not satisfied with the Android effect, you can temporarily use DragSortableView (stable, reliable, long-term no-issus bug), if you want to use auto-sliding please use AutoDragSortableView。
+### API
 
-##### The auto slide function is complete. iOS implements smooth auto-sliding. Android implements sliding an Item at a fixed time. After Android calls scrollTo, the refresh is relatively slow, causing jitter, so using a fixed time to slide 1 Item, this compromise method. You can also pass parameters: autoThrottle (sliding distance per unit time), autoThrottleDuration (time to slide a distance regularly)。
-1. It is recommended to use Demo settings: Android automatically slides an item height every 400ms, and iOS automatically slides 2 every 10ms.
-2. If you want to achieve the same effect as Android and iOS, you can configure autoThrottle = {2}, autoThrottleDuration = {10}
-3. There will be time to optimize in the later period: trigger sliding condition optimization, Android jitter optimization when sliding.
+##### AutoDragSortableView、DragSortableView
 
-[AutomaticSlidingOnePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingOnePage.js)
-
-![](https://user-gold-cdn.xitu.io/2020/1/31/16ff953e160a4a8c?w=240&h=514&f=gif&s=3394945)
-
-[AutomaticSlidingThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingThreePage.js)
-
-![](https://user-gold-cdn.xitu.io/2020/1/31/16ff9538f47c623a?w=240&h=514&f=gif&s=4241359)
-
-#### 2019.10
-> Add a new scene based on user needs.
-
-- Add attribute (isDragFreely): Whether to limit the drag space.
-- Add property callback function (onDragging)
-- Add demo Demo: DragDeletePage
-
-[DragDeletePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/DragDeletePage.js)
-
-![dragdelete.gif](https://upload-images.jianshu.io/upload_images/2646598-4d22ddb8f92a6563.gif?imageMogr2/auto-orient/strip)
-
-#### 2019.7 
-> The 1.x version ends, the optimizations are optimized, and the problems that have occurred have been resolved. The 2.x version will be written next, and it is expected to add an auto-compatible ScrollView slide, slide delete function, and so on.
-
-- Fix a small problem.
-- Add a familiar keyExtractor:(item,index) => key to achieve performance optimization, similar to FlatList's keyExtractor, will not flash (repaint) when deleting Item.
-- Add the delayLongPress property: press to the time of the trigger, customize how long to start
-
-#### 2019.6 
-> Added the top fixed function, you can set the start of several consecutive non-dragable functions, similar to today's headlines, this function is the same as today's headline drag and drop, you can compare
-
-[SortAndFixedPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/SortAndFixedPage.js)
-
-![ezgif.com-resize.gif](https://upload-images.jianshu.io/upload_images/2646598-405b01d61547c972.gif?imageMogr2/auto-orient/strip)
-
-#### 2019.3
-> Add a single-line drag-and-drop demo. In fact, this function is consistent. This drag-and-drop plug-in is inherently adaptive. It will take time to optimize the ScrollView problem and make the control bring the ScrollView function。
-
-[OneRowsPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/OneRowsPage.js)
-
-![one-line.gif](https://upload-images.jianshu.io/upload_images/2646598-dd17c76291514316.gif?imageMogr2/auto-orient/strip)
-
-#### 2019.2: 
-> Optimize drag and drop automatically when not moving, now this plugin should have no problems. Add a real-world demo example, and there will be time to animate this example. When deleting, the item goes down to the item animation to be selected, and the item to be selected is selected. And automatically slide down the animation when sliding。
-
-[CommonSortPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/CommonSortPage.js)
-
-![demo.gif](https://upload-images.jianshu.io/upload_images/2646598-bd118152420cc0a9.gif?imageMogr2/auto-orient/strip)
-
-### Performance
-
-[ScrollPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/ScrollPage.js)
-
-![Demonstration.gif](https://upload-images.jianshu.io/upload_images/2646598-f3ece6209cb07e43.gif?imageMogr2/auto-orient/strip)
-
-### Example
-- [ScrollView](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/ScrollPage.js)
-- [View](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/NonScrollPage.js)
-- [Fixed Rows](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/FixedRowsPage.js)
-
-``` react
-<DragSortableView
-    dataSource={this.state.data}
-    parentWidth={parentWidth}
-    childrenWidth= {childrenWidth}
-    childrenHeight={childrenHeight}
-    marginChildrenTop={marginChildrenTop}
-    onDataChange = {(data)=>{
-        // delete or add data to refresh
-        if (data.length != this.state.data.length) {
-            this.setState({
-                data: data
-            })
-        }
-    }}
-    keyExtractor={(item,index)=> item.id}
-    onClickItem={(data,item,index)=>{}}
-    renderItem={(item,index)=>{
-        return this.renderItem(item,index)
-    }}/>
-
-```
-
-### API
 - **dataSource**: PropTypes.array.isRequired :
@@ -146,3 +62,3 @@ - **parentWidth**: PropTypes.number //parent width
 - **keyExtractor**: keyExtractor: PropTypes.func //(item,index) => key
-- **delayLongPress**: PropTypes.number
+- **delayLongPress**: PropTypes.number,
 - **isDragFreely**: PropTypes.bool, // Whether to limit the drag space
@@ -152,5 +68,42 @@ - **onDragging**: PropTypes.func
 - **minOpacity**: PropTypes.number;
+
+##### The following attributes belong only to AutoDragSortableView
+
 - **scaleDuration**: PropTypes.number;
 - **slideDuration**: PropTypes.number;
-- **autoThrottle**: PropTypes.number;
-- **autoThrottleDuration**: PropTypes.number;
+- **autoThrottle**: PropTypes.number; 
+- **autoThrottleDuration**: PropTypes.number;
+- **renderHeaderView**: PropTypes.element,
+- **headerViewHeight**: PropTypes.number,
+- **renderBottomView**: PropTypes.element,
+- **bottomViewHeight**: PropTypes.number,
+
+### Example
+
+``` react
+<DragSortableView
+    dataSource={this.state.data}
+    parentWidth={parentWidth}
+    childrenWidth= {childrenWidth}
+    childrenHeight={childrenHeight}
+    keyExtractor={(item,index)=> item.id}
+    renderItem={(item,index)=>{
+        return this.renderItem(item,index)
+    }}
+/>
+    
+<AutoDragSortableView
+    dataSource={this.state.data}
+    parentWidth={parentWidth}
+    childrenWidth= {childrenWidth}
+    childrenHeight={childrenHeight}
+    keyExtractor={(item,index)=> item.id}
+    renderItem={(item,index)=>{
+        return this.renderItem(item,index)
+    }}
+/>
+
+```
+
+### [Download Android example](https://fir.im/dragsort)
+

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

Lines of code

1108

increased by1.09%

Worsened metrics

Total package byte prevSize

79962

decreased by-3.59%

Number of lines in readme file

106

decreased by-30.26%

No dependency changes