react-reorder-list 0.5.0 → 0.6.0

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/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;

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,13 +24,14 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
     const [items, setItems] = useState(Children.toArray(children));
     const [temp, setTemp] = useState({});
     const [isAnimating, setIsAnimating] = useState(false);
+    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 = [];
@@ -43,15 +48,27 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
         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);
@@ -61,7 +78,7 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
                 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,27 +89,34 @@ 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 });
+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);
+    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"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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"
   }