react-reorder-list 0.1.3 → 0.2.0

package/README.md

@@ -31,7 +31,7 @@ import React from 'react'
 import ReorderList from 'react-reorder-list'
 
 export default function App() {
-    return <ReorderList useOnlyIconToDrag={false}>
+    return <ReorderList>
         {[0, 1, 2, 3, 4].map(i => {
             {/* Having a unique key is important */}
             return <div key={i}>{i}</div>
@@ -46,7 +46,7 @@ import React from 'react'
 import ReorderList, { ReorderIcon } from 'react-reorder-list'
 
 export default function App() {
-    return <ReorderList>
+    return <ReorderList useOnlyIconToDrag={true}>
         {[0, 1, 2, 3, 4].map(i => {
             return <div key={i}>
                 <ReorderIcon /> {/* Default icon */}
@@ -68,9 +68,8 @@ export default function App() {
     return <ReorderList>
         {[0, 1, 2].map(i => {
             return <div key={i}>
-                <ReorderIcon />
                 <span>{'Parent' + i}</span>
-                <ReorderList>
+                <ReorderList useOnlyIconToDrag={true}>
                     {[0, 1, 2].map(j => {
                         return <div key={j} style={{ paddingLeft: '16px' }}>
                             <ReorderIcon />
@@ -87,8 +86,9 @@ export default function App() {
 Here is the full API for the `<ReorderList>` component, these properties can be set on an instance of ReorderList:
 | Parameter | Type | Required | Default | Description |
 | - | - | - | - | - |
-| `useOnlyIconToDrag` | `Boolean` | No | true | See [usage with ReorderIcon](#usage-with-reordericon) |
+| `useOnlyIconToDrag` | `Boolean` | No | false | See [usage with ReorderIcon](#usage-with-reordericon) |
 | `selectedItemOpacity` | `Number (0 to 1)` | No | 0.5 | This determines the opacity of the item being dragged, until released. |
+| `animationDuration` | `Number` | No | 400 | The duration of swapping animation between items. If set to 0, animation will be disabled. |
 | `onPositionChange` | [`PositionChangeHandler`](#positionchangehandler) | No | - | Function to be executed on item position change. |
 | `disable` | `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. |

package/dist/animation.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+type AnimationProps = {
+    duration: number;
+    children: ReactNode;
+};
+export default function Animation({ duration, children }: AnimationProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export {};

package/dist/animation.js

@@ -0,0 +1,49 @@
+import React, { useState, useLayoutEffect, Children, isValidElement, useEffect, useRef } from "react";
+function usePrevious(value) {
+    const prevChildrenRef = useRef();
+    useEffect(() => { prevChildrenRef.current = value; }, [value]);
+    return prevChildrenRef.current;
+}
+;
+function calculateBoundingBoxes(children) {
+    const boundingBoxes = {};
+    Children.forEach(children, (child, i) => {
+        if (isValidElement(child))
+            boundingBoxes[child.key || i] = child.ref.current.getBoundingClientRect();
+    });
+    return boundingBoxes;
+}
+;
+function Animate({ duration, children }) {
+    const [boundingBox, setBoundingBox] = useState({});
+    const prevBoundingBox = usePrevious(boundingBox);
+    useLayoutEffect(() => {
+        const newBoundingBox = calculateBoundingBoxes(children);
+        setBoundingBox(newBoundingBox);
+    }, [children]);
+    useLayoutEffect(() => {
+        if (prevBoundingBox && Object.keys(prevBoundingBox).length)
+            Children.forEach(children, (child, i) => {
+                if (!isValidElement(child))
+                    return;
+                const domNode = child.ref.current;
+                const { left: prevLeft, top: prevTop } = prevBoundingBox[child.key || i];
+                const { left, top } = boundingBox[child.key || i];
+                const changeInX = prevLeft - left, changeInY = prevTop - top;
+                if (changeInX || changeInY)
+                    requestAnimationFrame(() => {
+                        domNode.style.transform = `translate(${changeInX}px, ${changeInY}px)`;
+                        domNode.style.transition = "none";
+                        requestAnimationFrame(() => {
+                            domNode.style.transform = "";
+                            domNode.style.transition = `transform ${duration}ms`;
+                        });
+                    });
+            });
+    }, [boundingBox]);
+    return children;
+}
+;
+export default function Animation({ duration, children }) {
+    return duration ? React.createElement(Animate, { duration: duration }, children) : children;
+}

package/dist/index.d.ts

@@ -9,11 +9,12 @@ export type PositionChangeHandler = (params?: {
 export type ReorderListProps = {
     useOnlyIconToDrag?: boolean;
     selectedItemOpacity?: number;
+    animationDuration?: number;
     onPositionChange?: PositionChangeHandler;
     disable?: boolean;
     props?: Props;
     children?: ReactNode;
 };
 export type { IconProps } from './icons.js';
-export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, onPositionChange, disable, props, children }: ReorderListProps): React.JSX.Element;
+export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, onPositionChange, disable, props, children }: ReorderListProps): React.JSX.Element;
 export declare const ReorderIcon: ({ children, style, ...props }: Props) => React.JSX.Element;

package/dist/index.js

@@ -9,56 +9,64 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { Children, cloneElement, isValidElement, useMemo, useState } from 'react';
+import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useMemo, useRef, useState } from 'react';
 import { PiDotsSixVerticalBold } from './icons.js';
-export default function ReorderList({ useOnlyIconToDrag = true, selectedItemOpacity = 0.5, onPositionChange, disable = false, props, children }) {
+import Animation from './animation.js';
+const ReorderItem = forwardRef(({ useOnlyIconToDrag, draggable, style, onDragStart, onDragEnter, onDragEnd, onPointerEnter, onPointerLeave, children }, ref) => {
+    const props = draggable ? { draggable, onDragStart, onDragEnter, onDragEnd } : {};
+    const recursiveClone = (children) => Children.map(children, child => {
+        if (!isValidElement(child))
+            return child;
+        const childProps = {};
+        if (useOnlyIconToDrag && child.type.name === 'ReorderIcon') {
+            childProps.onPointerEnter = onPointerEnter;
+            childProps.onPointerLeave = onPointerLeave;
+        }
+        return cloneElement(child, Object.assign({ children: recursiveClone(child.props.children) }, childProps));
+    });
+    const recursiveChildren = useMemo(() => recursiveClone(children), [children]);
+    return React.createElement("div", Object.assign({ ref: ref, style: style }, props), recursiveChildren);
+});
+export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 400, onPositionChange, disable = false, props, children }) {
+    const ref = useRef();
+    const [draggable, setDraggable] = useState(!useOnlyIconToDrag);
     const [start, setStart] = useState(-1);
     const [selected, setSelected] = useState(-1);
     const [items, setItems] = useState(children);
-    const [temp, setTemp] = useState([]);
-    return React.createElement("div", Object.assign({}, props), disable ? children : Children.map(items, (child, i) => {
+    const [temp, setTemp] = useState({});
+    const [isAnimating, setIsAnimating] = useState(false);
+    return React.createElement("div", Object.assign({ ref: ref }, props), disable ? children : React.createElement(Animation, { duration: +draggable && animationDuration }, Children.map(items, (child, i) => {
         if (!isValidElement(child))
             return child;
-        return React.createElement(ReorderItem, { key: child.key || i, opacity: selected === i ? selectedItemOpacity : 1, useOnlyIconToDrag: useOnlyIconToDrag, onDragStart: event => {
+        return React.createElement(ReorderItem, { key: child.key || i, ref: createRef(), useOnlyIconToDrag: useOnlyIconToDrag, draggable: draggable, style: { opacity: selected === i ? selectedItemOpacity : 1 }, onDragStart: event => {
                 event.stopPropagation();
                 setStart(i);
                 setSelected(i);
-                setTemp(items);
+                setTemp({ items, rect: ref.current.children[i].getBoundingClientRect() });
             }, onDragEnter: event => {
                 event.stopPropagation();
-                if (start === -1)
+                if (start === -1 || selected === i || isAnimating)
+                    return;
+                const { width: startWidth, height: startHeight } = temp.rect;
+                const { left, top, width, height } = event.currentTarget.getBoundingClientRect();
+                if (event.clientX - left > Math.min(startWidth, width) || event.clientY - top > Math.min(startHeight, height))
                     return;
                 setSelected(i);
                 setItems(() => {
-                    const items = temp.filter((_, i) => i !== start);
-                    items.splice(i, 0, temp[start]);
+                    const items = temp.items.filter((_, i) => i !== start);
+                    items.splice(i, 0, temp.items[start]);
                     return items;
                 });
+                setIsAnimating(true);
+                setTimeout(() => setIsAnimating(false), animationDuration);
             }, onDragEnd: event => {
                 event.stopPropagation();
                 if (i !== start)
-                    onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ start, end: i, oldItems: temp, newItems: items });
+                    onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ start, end: i, oldItems: temp.items, newItems: items });
                 setStart(-1);
                 setSelected(-1);
-            } }, child);
-    }));
-}
-function ReorderItem({ useOnlyIconToDrag, opacity, onDragStart, onDragEnter, onDragEnd, children }) {
-    const [draggable, setDraggable] = useState(!useOnlyIconToDrag);
-    const recursiveChildren = useMemo(() => recursiveClone(children), [children]);
-    function recursiveClone(children) {
-        return Children.map(children, child => {
-            if (!isValidElement(child))
-                return child;
-            const childProps = {};
-            if (useOnlyIconToDrag && child.type.name === 'ReorderIcon') {
-                childProps.onPointerEnter = () => setDraggable(true);
-                childProps.onPointerLeave = () => setDraggable(false);
-            }
-            return cloneElement(child, Object.assign({ children: recursiveClone(child.props.children) }, childProps));
-        });
-    }
-    return React.createElement("div", { draggable: draggable, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragEnd: onDragEnd, style: { opacity } }, recursiveChildren);
+            }, onPointerEnter: () => setDraggable(true), onPointerLeave: () => setDraggable(false) }, child);
+    })));
 }
 export const 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.1.3",
+  "version": "0.2.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",