react-reorder-list 0.5.0 → 0.6.1

package/README.md

@@ -1,13 +1,19 @@
 # react-reorder-list
+
 A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.
+
 ## Features
+
 - Reorders list of elements using drag and drop.
 - Easy to use
 - Smooth transition using animation.
 - Listen to children updates. See [listen to children updates](#listen-to-children-updates)
 - Handles nested lists easily. See [nested list usage](#nested-list-usage)
+
 ## Installation
+
 To install react-reorder-list
+
 ```bash
   # with npm:
   npm install react-reorder-list --save
@@ -21,50 +27,61 @@ To install react-reorder-list
   # with bun:
   bun add react-reorder-list
 ```
+
 ## Usage
+
 `react-reorder-list` default exports `<ReorderList>` component which encapsulates all the list items as its children.
 
 Items in this list can be reordered by simply dragging an item and dropping it in place of another item.
+
 #### Basic Usage
+
 Each `<div>` component inside `<ReorderList>` can now be drag-and-dropped to another `<div>` to reorder them.
+
 ```jsx
-import React from 'react'
-import ReorderList from 'react-reorder-list'
+import React from "react";
+import ReorderList from "react-reorder-list";
 
 export default function App() {
-    return <ReorderList>
-        {[0, 1, 2, 3, 4].map(i => {
-            {/* Having a unique key is important */}
-            return <div key={i}>Item {i}</div>
-        })}
+  return (
+    <ReorderList>
+      {[0, 1, 2, 3, 4].map((i) => {
+        return <div key={i}>Item {i}</div>; // Having a unique key is important
+      })}
     </ReorderList>
+  );
 }
 ```
+
 #### Usage with ReorderIcon
+
 The dragging behavior can be changed using the `useOnlyIconToDrag` prop of `<ReorderList>` component.
 
 If set to `false`, an item can be dragged by clicking anywhere inside the item.
 
 If set to `true`, an item can be dragged only using the `<ReorderIcon>` present inside the item.
+
 ```jsx
 import React from 'react'
 import ReorderList, { ReorderIcon } from 'react-reorder-list'
 
 export default function App() {
-    return <ReorderList useOnlyIconToDrag={true}>
-        {[0, 1, 2, 3, 4].map(i => {
-            return <div key={i}>
-                <ReorderIcon /> {/* Default icon */}
-                <ReorderIcon>
-                    {/* Custom icon/component */}
-                </Reordericon>
-                <span>{i}</span>
-            </div>
-        })}
-    </ReorderList>
+  return <ReorderList useOnlyIconToDrag={true}>
+    {[0, 1, 2, 3, 4].map(i => {
+      return <div key={i}>
+        <ReorderIcon /> {/* Default icon */}
+        <ReorderIcon>
+          {/* Custom icon/component */}
+        </Reordericon>
+        <span>{i}</span>
+      </div>
+    })}
+  </ReorderList>
 }
 ```
+
 #### Listen to Children Updates
+
 `<ReorderList>` can listen to updates to it's children components using the `watchChildrenUpdates` prop as shown below.
 
 If set to `false`, any updates made in children component except reordering by user won't reflect.
@@ -74,59 +91,74 @@ Further if `preserveOrder` is set to false, the order in which new children appe
 Whereas if `preserveOrder` is set to true, the order of existing items will be preserved as before the update occured and new items will be placed at the end irrespective of their order in children. Also, if an item is being dragged and an update occurs at that moment, that item will be placed at respective location and `onPositionChange` will be called to prevent any inconsistency.
 
 NOTE: The props `watchChildrenUpdates` and `preserveOrder` should be used carefully to avoid any unexpected behaviour
+
 ```jsx
-import React, { useState } from 'react'
-import ReorderList from 'react-reorder-list'
+import React, { useState } from "react";
+import ReorderList from "react-reorder-list";
 
 export default function App() {
-    const [array, setArray] = useState([0, 1, 2, 3, 4])
-
-    function setNewArray() {
-        setArray(prev => {
-            const array = []
-            prev.forEach(_ => {
-                do {
-                    var item = Math.floor(Math.random() * 9)
-                } while (array.includes(item))
-                array.push(item)
-            })
-            return array
-        })
-    }
-
-    return <div>
-        <ReorderList watchChildrenUpdates={true} animationDuration={200}>
-            {array.map(i => <div key={i}>Item {i}</div>)}
-        </ReorderList>
-        <button onClick={setNewArray}>Click me</button>
+  const [array, setArray] = useState([0, 1, 2, 3, 4]);
+
+  function setNewArray() {
+    setArray((prev) => {
+      const array = [];
+      prev.forEach((_) => {
+        do {
+          var item = Math.floor(Math.random() * 9);
+        } while (array.includes(item));
+        array.push(item);
+      });
+      return array;
+    });
+  }
+
+  return (
+    <div>
+      <ReorderList watchChildrenUpdates={true} animationDuration={200}>
+        {array.map((i) => (
+          <div key={i}>Item {i}</div>
+        ))}
+      </ReorderList>
+      <button onClick={setNewArray}>Click me</button>
     </div>
+  );
 }
 ```
+
 #### Nested List Usage
+
 ```jsx
-import React from 'react'
-import ReorderList, { ReorderIcon } from 'react-reorder-list'
+import React from "react";
+import ReorderList, { ReorderIcon } from "react-reorder-list";
 
 export default function App() {
-    return <ReorderList>
-        {[0, 1, 2].map(i => {
-            return <div key={i}>
-                <ReorderIcon />
-                <span>{'Parent' + i}</span>
-                <ReorderList useOnlyIconToDrag={true}>
-                    {[0, 1, 2].map(j => {
-                        return <div key={j} style={{ paddingLeft: '16px' }}>
-                            <ReorderIcon />
-                            <span>{'Child' + i + j}</span>
-                        </div>
-                    })}
-                </ReorderList>
-            </div>
-        })}
+  return (
+    <ReorderList>
+      {[0, 1, 2].map((i) => {
+        return (
+          <div key={i}>
+            <ReorderIcon />
+            <span>{"Parent" + i}</span>
+            <ReorderList useOnlyIconToDrag={true}>
+              {[0, 1, 2].map((j) => {
+                return (
+                  <div key={j} style={{ paddingLeft: "16px" }}>
+                    <ReorderIcon />
+                    <span>{"Child" + i + j}</span>
+                  </div>
+                );
+              })}
+            </ReorderList>
+          </div>
+        );
+      })}
     </ReorderList>
+  );
 }
 ```
+
 ## ReorderList Component API Reference
+
 Here is the full API for the `<ReorderList>` component, these properties can be set on an instance of ReorderList:
 | Parameter | Type | Required | Default | Description |
 | - | - | - | - | - |
@@ -138,19 +170,24 @@ Here is the full API for the `<ReorderList>` component, these properties can be
 | `onPositionChange` | [`PositionChangeHandler`](#positionchangehandler) | No | - | Function to be executed on item position change. |
 | `disabled` | `Boolean` | No | false | When set to true, `<ReorderList>` will work as a plain `div` with no functionality. |
 | `props` | `React.DetailedHTMLProps` | No | - | Props to customize the `<ReorderList>` component. |
+
 ### Types
+
 #### PositionChangeHandler
+
 ```typescript
-import { ReactNode } from 'react';
-type RevertHandler = () => void
-type PositionChangeParams = { 
-    start?: number // Index of the item being dragged
-    end?: number // Index of the item being displaced by the starting item
-    oldItems?: ReactNode[] // Array of children before reordering
-    newItems?: ReactNode[] // Array of children after reordering
-    revert: RevertHandler // A fallback handler to revert the reordering
-}
-type PositionChangeHandler = (params?: PositionChangeParams) => void
+import { ReactNode } from "react";
+type RevertHandler = () => void;
+type PositionChangeParams = {
+  start?: number; // Index of the item being dragged
+  end?: number; // Index of the item being displaced by the starting item
+  oldItems?: ReactNode[]; // Array of children before reordering
+  newItems?: ReactNode[]; // Array of children after reordering
+  revert: RevertHandler; // A fallback handler to revert the reordering
+};
+type PositionChangeHandler = (params?: PositionChangeParams) => void;
 ```
+
 ## Author
-[Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)
+
+[Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)

package/dist/animation.js

@@ -1,16 +1,16 @@
 import { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
 function usePrevious(value) {
     const prevChildrenRef = useRef();
-    useEffect(() => { prevChildrenRef.current = value; }, [value]);
+    useEffect(() => {
+        prevChildrenRef.current = value;
+    }, [value]);
     return prevChildrenRef.current;
 }
-;
 function calculateBoundingBoxes(children) {
     const boundingBoxes = {};
-    Children.forEach(children, child => boundingBoxes[child.key.split("/.")[0]] = child.ref.current.getBoundingClientRect());
+    Children.forEach(children, (child) => (boundingBoxes[child.key.split("/.")[0]] = child.ref.current.getBoundingClientRect()));
     return boundingBoxes;
 }
-;
 export default function Animation({ duration, children }) {
     const [boundingBox, setBoundingBox] = useState({});
     const prevBoundingBox = usePrevious(boundingBox);
@@ -22,7 +22,7 @@ export default function Animation({ duration, children }) {
     }, [children]);
     useLayoutEffect(() => {
         if (duration > 0 && prevBoundingBox && Object.keys(prevBoundingBox).length)
-            Children.forEach(children, child => {
+            Children.forEach(children, (child) => {
                 const domNode = child.ref.current;
                 const key = child.key.split("/.")[0];
                 const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};
@@ -41,4 +41,3 @@ export default function Animation({ duration, children }) {
     }, [boundingBox]);
     return children;
 }
-;

package/dist/hooks.d.ts

@@ -0,0 +1,6 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export default function useDraggable(initValue?: boolean): {
+    draggable: boolean;
+    draggableProps: Props;
+};

package/dist/hooks.js

@@ -0,0 +1,8 @@
+import { useState } from "react";
+export default function useDraggable(initValue = false) {
+    const [draggable, setDraggable] = useState(initValue);
+    const enableDragging = () => setDraggable(true);
+    const disableDragging = () => setDraggable(false);
+    const draggableProps = { onMouseEnter: enableDragging, onMouseLeave: disableDragging, onTouchStart: enableDragging, onTouchEnd: disableDragging };
+    return { draggable, draggableProps };
+}

package/dist/icons.js

@@ -1,6 +1,6 @@
 import React from "react";
 export function PiDotsSixVerticalBold(props) {
-    return React.createElement("span", Object.assign({}, props),
+    return (React.createElement("span", Object.assign({}, props),
         React.createElement("svg", { viewBox: "0 0 256 256", fill: "currentColor", width: "1.25rem", height: "1.25rem" },
-            React.createElement("path", { d: "M108,60A16,16,0,1,1,92,44,16,16,0,0,1,108,60Zm56,16a16,16,0,1,0-16-16A16,16,0,0,0,164,76ZM92,112a16,16,0,1,0,16,16A16,16,0,0,0,92,112Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,112ZM92,180a16,16,0,1,0,16,16A16,16,0,0,0,92,180Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,180Z" })));
+            React.createElement("path", { d: "M108,60A16,16,0,1,1,92,44,16,16,0,0,1,108,60Zm56,16a16,16,0,1,0-16-16A16,16,0,0,0,164,76ZM92,112a16,16,0,1,0,16,16A16,16,0,0,0,92,112Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,112ZM92,180a16,16,0,1,0,16,16A16,16,0,0,0,92,180Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,180Z" }))));
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
-export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+import React, { ReactNode } from "react";
+import { Props } from "./hooks.js";
+export type { Props } from "./hooks.js";
 export type PositionChangeHandler = (params?: {
     start?: number;
     end?: number;
@@ -18,6 +19,6 @@ export type ReorderListProps = {
     props?: Props;
     children?: ReactNode;
 };
-export type { IconProps } from './icons.js';
+export type { IconProps } from "./icons.js";
 export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, watchChildrenUpdates, preserveOrder, onPositionChange, disabled, props, children }: ReorderListProps): React.JSX.Element;
 export declare function ReorderIcon({ children, style, ...props }: Props): React.JSX.Element;

package/dist/index.js

@@ -12,6 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
 import { PiDotsSixVerticalBold } from "./icons.js";
 import Animation from "./animation.js";
+import useDraggable from "./hooks.js";
+if (typeof window !== "undefined")
+    import("drag-drop-touch");
+const scrollThreshold = { x: 10, y: 100 };
 const ReorderItemRef = forwardRef(ReorderItem);
 export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 400, watchChildrenUpdates = false, preserveOrder = false, onPositionChange, disabled = false, props, children }) {
     const ref = useRef(null);
@@ -20,17 +24,18 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
     const [items, setItems] = useState(Children.toArray(children));
     const [temp, setTemp] = useState({});
     const [isAnimating, setIsAnimating] = useState(false);
-    const refs = useMemo(() => items.map(_ => createRef()), [items]);
-    const findIndex = (key) => key ? items.findIndex(item => { var _a, _b; return ((_b = (_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.split(".$").at(-1)) !== null && _b !== void 0 ? _b : item === null || item === void 0 ? void 0 : item.toString()) === key; }) : -1;
+    const [scroll, setScroll] = useState();
+    const refs = useMemo(() => items.map((_) => createRef()), [items]);
+    const findIndex = (key) => (key ? items.findIndex((item) => { var _a, _b; return ((_b = (_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.split(".$").at(-1)) !== null && _b !== void 0 ? _b : item === null || item === void 0 ? void 0 : item.toString()) === key; }) : -1);
     useEffect(() => {
         if (!watchChildrenUpdates)
             return;
         if (selected !== -1)
-            handleDragEnd(selected, preserveOrder);
+            handleDragEnd(null, selected, preserveOrder);
         if (preserveOrder) {
             const items = [];
             const newItems = [];
-            Children.forEach(children, child => {
+            Children.forEach(children, (child) => {
                 var _a;
                 const index = findIndex((_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : child === null || child === void 0 ? void 0 : child.toString());
                 if (index === -1)
@@ -38,30 +43,42 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
                 else
                     items[index] = child;
             });
-            setItems(items.filter(item => item !== undefined).concat(newItems));
+            setItems(items.filter((item) => item !== undefined).concat(newItems));
         }
         else
             setItems(Children.toArray(children));
     }, [children]);
-    function handleDragEnd(end, handlePositionChange = true) {
+    useEffect(() => {
+        if (!scroll)
+            return;
+        const { left, top } = scroll;
+        const { scrollWidth, scrollHeight } = document.body;
+        const interval = setInterval(() => {
+            if (left < 0 || top < 0 || scrollWidth - scrollX > innerWidth - left || scrollHeight - scrollY > innerHeight - top)
+                scrollBy({ left, top, behavior: "instant" });
+        }, 20);
+        return () => clearInterval(interval);
+    }, [scroll]);
+    function handleDragEnd(event, end = selected, handlePositionChange = true) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (handlePositionChange && end !== start)
             onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ start, end, oldItems: temp.items, newItems: items, revert: () => setItems(temp.items) });
         setStart(-1);
         setSelected(-1);
     }
-    return React.createElement("div", Object.assign({ ref: ref }, props), disabled ? children : React.createElement(Animation, { duration: +(start !== -1) && animationDuration }, Children.map(items, (child, i) => {
+    return (React.createElement("div", Object.assign({ ref: ref }, props), disabled ? (children) : (React.createElement(Animation, { duration: +(start !== -1 && !scroll) && animationDuration }, Children.map(items, (child, i) => {
         var _a;
-        return React.createElement(ReorderItemRef, { key: (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : child === null || child === void 0 ? void 0 : child.toString(), ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, style: { opacity: selected === i ? selectedItemOpacity : 1 }, onDragStart: event => {
+        return (React.createElement(ReorderItemRef, { key: (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : child === null || child === void 0 ? void 0 : child.toString(), ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
                 event.stopPropagation();
                 setStart(i);
                 setSelected(i);
                 setTemp({ items, rect: ref.current.children[i].getBoundingClientRect() });
-            }, onDragEnter: event => {
+            }, onDragEnter: (event) => {
                 event.stopPropagation();
                 if (start === -1 || selected === i || isAnimating)
                     return;
                 const { width: startWidth, height: startHeight } = temp.rect;
-                const { left, top, width, height } = event.currentTarget.getBoundingClientRect();
+                const { left, top, width, height } = event.target.getBoundingClientRect();
                 if (event.clientX - left > Math.min(startWidth, width) || event.clientY - top > Math.min(startHeight, height))
                     return;
                 setSelected(i);
@@ -72,29 +89,36 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
                 });
                 setIsAnimating(true);
                 setTimeout(() => setIsAnimating(false), animationDuration);
-            }, onDragEnd: event => {
-                event.stopPropagation();
-                handleDragEnd(i);
-            } }, child);
-    })));
+            }, onDragEnd: handleDragEnd, onTouchMove: (event) => {
+                const { clientX, screenX, clientY, screenY } = event.touches[0];
+                let left = 0, top = 0;
+                if (clientX < scrollThreshold.x)
+                    left = -5;
+                else if (innerWidth - screenX < scrollThreshold.x)
+                    left = 5;
+                if (clientY < scrollThreshold.y)
+                    top = -10;
+                else if (innerHeight - screenY < scrollThreshold.y)
+                    top = 10;
+                setScroll(left || top ? { left, top } : undefined);
+            }, onTouchEnd: () => setScroll(undefined) }, child));
+    })))));
 }
-function ReorderItem({ useOnlyIconToDrag, style, onDragStart, onDragEnter, onDragEnd, children }, ref) {
-    const [draggable, setDraggable] = useState(false);
-    const onPointerEnter = () => setDraggable(true);
-    const onPointerLeave = () => setDraggable(false);
-    let props = { draggable, onDragStart, onDragEnter, onDragEnd };
-    if (!useOnlyIconToDrag)
-        props = Object.assign(Object.assign({}, props), { onPointerEnter, onPointerLeave });
-    const recursiveClone = (children) => Children.map(children, child => {
+function ReorderItem(_a, ref) {
+    var { useOnlyIconToDrag, onTouchEnd: propOnTouchEnd, children } = _a, props = __rest(_a, ["useOnlyIconToDrag", "onTouchEnd", "children"]);
+    const _b = useDraggable(), { draggable } = _b, _c = _b.draggableProps, { onTouchEnd: draggableOnTouchEnd } = _c, draggableProps = __rest(_c, ["onTouchEnd"]);
+    const recursiveClone = (children) => Children.map(children, (child) => {
         if (!isValidElement(child))
             return child;
-        const childProps = child.type === ReorderIcon ? { onPointerEnter, onPointerLeave } : {};
-        return cloneElement(child, Object.assign({ children: recursiveClone(child.props.children) }, childProps));
+        return cloneElement(child, Object.assign({ children: recursiveClone(child.props.children) }, (child.type === ReorderIcon && draggableProps)));
     });
-    const recursiveChildren = useMemo(() => useOnlyIconToDrag ? recursiveClone(children) : children, [children]);
-    return React.createElement("div", Object.assign({ ref: ref, style: style }, props), recursiveChildren);
+    const recursiveChildren = useMemo(() => (useOnlyIconToDrag ? recursiveClone(children) : children), [useOnlyIconToDrag, children]);
+    return (React.createElement("div", Object.assign({ ref: ref, draggable: draggable }, props, (!useOnlyIconToDrag && draggableProps), { onTouchEnd: (event) => {
+            draggableOnTouchEnd(event);
+            propOnTouchEnd(event);
+        } }), recursiveChildren));
 }
 export function ReorderIcon(_a) {
     var { children = React.createElement(PiDotsSixVerticalBold, null), style } = _a, props = __rest(_a, ["children", "style"]);
-    return React.createElement("span", Object.assign({ style: Object.assign({ cursor: "grab" }, style) }, props), children);
+    return (React.createElement("span", Object.assign({ style: Object.assign({ cursor: "grab" }, style) }, props), children));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.",
   "type": "module",
   "main": "dist/index.js",
@@ -32,6 +32,9 @@
   "devDependencies": {
     "@types/react": "^18.2.48"
   },
+  "dependencies": {
+    "drag-drop-touch": "^1.3.1"
+  },
   "scripts": {
     "build": "pnpm i && tsc"
   }