drag-drop-list-react - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

dist/DragList.js

@@ -70,7 +70,2 @@ 'use strict';
 
-var scrollDetails = {
-  step: -1,
-  time: 32
-};
-
 var scrollBugFix = true;
@@ -118,3 +113,3 @@
       this.itemMarginBottoms = [];
-      scrollDetails.step = Math.round(defaultScrollStep * (nextProps.scrollSpeed === 'undefined' ? this.props.scrollSpeed : nextProps.scrollSpeed));
+      this.scrollDetails.step = Math.round(defaultScrollStep * (nextProps.scrollSpeed === 'undefined' ? 1.00 : nextProps.scrollSpeed));
       this.clone = typeof nextProps.removeItem === 'undefined';
@@ -155,2 +150,6 @@ }
       this.blankHeightTmp = -1;
+      this.scrollDetails = {
+        step: -1,
+        time: 32
+      };
     }
@@ -319,12 +318,12 @@ }, {
       if (dragData.ePos.x - this.props.scrollWhen < 0) {
-        window.scrollTo(Math.max(0, currX - scrollDetails.step), currY);
+        window.scrollTo(Math.max(0, currX - this.scrollDetails.step), currY);
       }
       if (dragData.ePos.y - this.props.scrollWhen < 0) {
-        window.scrollTo(currX, Math.max(0, currY - scrollDetails.step));
+        window.scrollTo(currX, Math.max(0, currY - this.scrollDetails.step));
       }
       if (dragData.ePos.x + this.props.scrollWhen > window.innerWidth) {
-        window.scrollTo(Math.min(pageW, currX + scrollDetails.step), currY);
+        window.scrollTo(Math.min(pageW, currX + this.scrollDetails.step), currY);
       }
       if (dragData.ePos.y + this.props.scrollWhen > window.innerHeight) {
-        window.scrollTo(currX, Math.min(pageH, scrollDetails.step + currY));
+        window.scrollTo(currX, Math.min(pageH, this.scrollDetails.step + currY));
       }
@@ -343,12 +342,12 @@ }
       if (dragData.ePos.x - this.props.scrollWhen < realStl.left) {
-        this.me.scrollLeft = Math.max(0, this.me.scrollLeft - scrollDetails.step);
+        this.me.scrollLeft = Math.max(0, this.me.scrollLeft - this.scrollDetails.step);
       }
       if (dragData.ePos.y - this.props.scrollWhen < realStl.top) {
-        this.me.scrollTop = Math.max(0, this.me.scrollTop - scrollDetails.step);
+        this.me.scrollTop = Math.max(0, this.me.scrollTop - this.scrollDetails.step);
       }
       if (dragData.ePos.x + this.props.scrollWhen > realStl.right) {
-        this.me.scrollLeft = Math.min(this.me.scrollWidth, this.me.scrollLeft + scrollDetails.step);
+        this.me.scrollLeft = Math.min(this.me.scrollWidth, this.me.scrollLeft + this.scrollDetails.step);
       }
       if (dragData.ePos.y + this.props.scrollWhen > realStl.bottom) {
-        this.me.scrollTop = Math.min(this.me.scrollHeight, this.me.scrollTop + scrollDetails.step);
+        this.me.scrollTop = Math.min(this.me.scrollHeight, this.me.scrollTop + this.scrollDetails.step);
       }
@@ -368,3 +367,3 @@ }
         });
-        setTimeout(this.startScrollInterval, scrollDetails.time);
+        setTimeout(this.startScrollInterval, this.scrollDetails.time);
       }
@@ -371,0 +370,0 @@ }

package.json

 {
   "name": "drag-drop-list-react",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A library that implements drag-drop lists for react.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -248,3 +248,8 @@ # DragDrop List for React
 
+When, you are using this option, be careful that the items you passed via the children prop take className props. 
+Meaning, either they are JSX objects that take a className prop, or HTML objects (which by default take a className prop)
 
+Failure to do so would result in such items not having the passed itemClass prop as the class property. (Other items can still be fine)
+
+
 ### `topElem` option:
@@ -298,4 +303,6 @@
 
-It is a good idea to use this when there's no margin in a list, but a user has to be able to scroll the list without dragging an item.
+It is a good idea to use this when there is no margin in a list, but a user has to be able to scroll the list without dragging an item.
 
+Another, good use for this option is when one or more of your items in this list have at least one input.
+
 Default value is 400.
@@ -310,3 +317,3 @@
 
-Honestly, I'm not sure, what would be a good use case for this. I've only implemented this feature because, I've also implemented it for a touch version.
+It is a good idea to use this when  one or more of your items in this list have at least one input.
 
@@ -343,1 +350,54 @@ Default value is 0.
 I'm trying to make it as extensive as possible, so feel free to contact me if you are looking for some new features.
+
+Here are some notes, that may help your reasoning about this library:
+
+- `clone: true` means there is no remove function.
+- `clone: false` means there is a remove function.
+
+
+- `scrollable: true` means dragName and dropName are the same, and different from empty string.
+- `scrollable: false` means dragName and dropName are not the same or they are both empty strings.
+
+
+- It is meaningless to pass an insertItem function if the dragName is empty.
+- Giving an empty dragName means items in the list are not draggable.
+- (The list can still be droppable)
+
+
+- It is meaningless to pass a removeItem function or dropFunc function if the dropName is empty.
+- Giving an empty dropName means the list is not droppable.
+- (The items in the list can still be draggable)
+
+
+- Important Note: If you are going to use overflow style for the list, don't put it in the class, but the list itself via the style prop.
+
+- Implementing a trash list:
+
+    - Make a list with no dragName but with a dropName.
+    - Don't pass an insert function.
+    - You will probably want to implement a dropFunc function.
+    - That's because, although the list is a trashlist (whatever gets dropped is destroyed) there is a blank (ghost) item seen on the list when you drag an item over but do not drop. 
+    - (This blank item is determined by the dropFunc function)
+
+
+- Implementing dragDropListception:
+    
+    - A DragDropList can have another DragDropList as its item. 
+    - However, beware that requires extra implementation for you.
+    - That's because, when an item is dropped to a DragDropList inside another, you need to update both the item and the parent DragDropList.
+    - What's more your dropFunc function must make a new gid (myGid prop), everytime the child DragDropList is copied.
+
+
+- Creating a grid of items:
+    
+    - Sorry, that's not possible right now.
+    - Your items can have different height / width / margin / paddings.
+    - But, the current version only supports creating horizontal lists.
+    - I may implement a vertical version later, contact me if you are interested in this.
+    - Yet, implementing a version that can have items with different widths/heights/margins as a grid is very hard.
+    - (That will probably require me to write another virtual DOM alongisde react's)
+    - What's more, I'm not sure how this should act like.
+    - (For example, are items going to fill up spaces between others, and etc.)
+    - Contact me, if you have any ideas, or want such feature.
+    - Note: Implementing a version for creating a grid of items with same width / height / margin is very easy actually.
+    - So, contact me if you are interested in such feature.

No alert changes

Improved metrics

Number of lines in readme file

399

increased by17.35%

Worsened metrics

Total package byte prevSize

121213

decreased by-2.98%

No dependency changes