react-reorder-list 0.6.7 → 0.7.0

package/README.md

@@ -7,7 +7,8 @@ A simple react component that facilitates the reordering of JSX/HTML elements th
 - 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)
+- Listens to children updates. See [listen to children updates](#listen-to-children-updates)
+- Disables reordering for individual children. See [disable reordering for individual children](#disable-reordering-for-individual-children)
 - Handles nested lists easily. See [nested list usage](#nested-list-usage)
 
 ## Installation
@@ -125,6 +126,29 @@ export default function App() {
 }
 ```
 
+#### Disable reordering for individual children
+
+```jsx
+import React from "react";
+import ReorderList from "react-reorder-list";
+
+export default function App() {
+  return (
+    <ReorderList>
+      <div key="div" data-disable-reorder={true}>
+        This div cannot be reordered
+      </div>
+      {[0, 1, 2, 3, 4].map((i) => {
+        return <div key={i}>Item {i}</div>; // Having a unique key is important
+      })}
+      <p key="p" data-disable-reorder={true}>
+        This p cannot be reordered either
+      </p>
+    </ReorderList>
+  );
+}
+```
+
 #### Nested List Usage
 
 ```jsx

package/dist/animation.js

@@ -1,5 +1,6 @@
-import { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
-const getKey = (child) => { var _a; return (_a = child === null || child === void 0 ? void 0 : child.key) === null || _a === void 0 ? void 0 : _a.split("/.")[0]; };
+import { useState, useLayoutEffect, Children } from "react";
+import { usePrevious } from "./hooks.js";
+import { getKey } from "./utils.js";
 function calculateBoundingBoxes(children) {
     const boundingBoxes = {};
     Children.forEach(children, (child) => {
@@ -9,13 +10,6 @@ function calculateBoundingBoxes(children) {
     });
     return boundingBoxes;
 }
-function usePrevious(value) {
-    const prevChildrenRef = useRef();
-    useEffect(() => {
-        prevChildrenRef.current = value;
-    }, [value]);
-    return prevChildrenRef.current;
-}
 export default function Animation({ duration, children }) {
     const [boundingBox, setBoundingBox] = useState({});
     const prevBoundingBox = usePrevious(boundingBox);

package/dist/hooks.d.ts

@@ -4,3 +4,4 @@ export declare function useDraggable(initValue?: boolean): readonly [boolean, {
     onTouchStart: () => void;
     onTouchEnd: () => void;
 }];
+export declare function usePrevious<T>(value: T): T | undefined;

package/dist/hooks.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 export function useDraggable(initValue = false) {
     const [draggable, setDraggable] = useState(initValue);
     const enableDragging = () => setDraggable(true);
@@ -6,3 +6,10 @@ export function useDraggable(initValue = false) {
     const draggableProps = { onMouseEnter: enableDragging, onMouseLeave: disableDragging, onTouchStart: enableDragging, onTouchEnd: disableDragging };
     return [draggable, draggableProps];
 }
+export function usePrevious(value) {
+    const prevChildrenRef = useRef();
+    useEffect(() => {
+        prevChildrenRef.current = value;
+    }, [value]);
+    return prevChildrenRef.current;
+}

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export type DivDragEventHandler = DragEventHandler<HTMLDivElement>;
 export type DivTouchEventHandler = TouchEventHandler<HTMLDivElement>;
 export type ReorderItemProps = {
     useOnlyIconToDrag: boolean;
+    disable: boolean;
     style: CSSProperties;
     onDragStart?: DivDragEventHandler;
     onDragEnter: DivDragEventHandler;

package/dist/index.js

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
-import { PiDotsSixVerticalBold } from "./icons.js";
 import Animation from "./animation.js";
+import { PiDotsSixVerticalBold } from "./icons.js";
 import { useDraggable } from "./hooks.js";
+import { swap } from "./utils.js";
 if (typeof window !== "undefined")
     import("drag-drop-touch");
 const scrollThreshold = { x: 10, y: 100 };
@@ -25,7 +26,10 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
     const [temp, setTemp] = useState({});
     const [isAnimating, setIsAnimating] = useState(false);
     const [scroll, setScroll] = useState();
-    const refs = useMemo(() => items.map((_) => createRef()), [items]);
+    const [refs, disableArr] = useMemo(() => items.reduce(([refs, disableArr], item) => {
+        var _a;
+        return [refs.concat(createRef()), disableArr.concat((_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a["data-disable-reorder"])];
+    }, [[], []]), [items]);
     const findIndex = (key) => (key ? items.findIndex((item) => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.split(".$").at(-1)) === key; }) : -1);
     useEffect(() => {
         if (!watchChildrenUpdates)
@@ -65,10 +69,10 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
         setStart(-1);
         setSelected(-1);
     }
-    return (React.createElement("div", Object.assign({ ref: ref }, props), disabled ? (children) : (React.createElement(Animation, { duration: +(start !== -1 && !scroll) && 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 }, items.map((child, i) => {
         if (!isValidElement(child))
             return child;
-        return (React.createElement(ReorderItemRef, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
+        return (React.createElement(ReorderItemRef, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, disable: disableArr[i], style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
                 event.stopPropagation();
                 setStart(i);
                 setSelected(i);
@@ -83,8 +87,16 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
                     return;
                 setSelected(i);
                 setItems(() => {
-                    const items = temp.items.filter((_, i) => i !== start);
-                    items.splice(i, 0, temp.items[start]);
+                    const items = temp.items.slice();
+                    const shiftForward = start < i;
+                    const increment = shiftForward ? 1 : -1;
+                    let key = start;
+                    for (let index = start + increment; shiftForward ? index <= i : index >= i; index += increment) {
+                        if (disableArr[index])
+                            continue;
+                        swap(items, key, index);
+                        key = index;
+                    }
                     return items;
                 });
                 setIsAnimating(true);
@@ -107,20 +119,20 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
     })))));
 }
 function ReorderItem(_a, ref) {
-    var { useOnlyIconToDrag, onTouchEnd: propOnTouchEnd, children } = _a, props = __rest(_a, ["useOnlyIconToDrag", "onTouchEnd", "children"]);
+    var { useOnlyIconToDrag, disable, style, children, onTouchEnd: propOnTouchEnd } = _a, events = __rest(_a, ["useOnlyIconToDrag", "disable", "style", "children", "onTouchEnd"]);
     const [draggable, _b] = useDraggable(), { onTouchEnd: draggableOnTouchEnd } = _b, draggableProps = __rest(_b, ["onTouchEnd"]);
     if (!draggable)
-        props.onDragStart = undefined;
+        events.onDragStart = undefined;
     const recursiveClone = (children) => Children.map(children, (child) => {
         if (!isValidElement(child))
             return child;
         return cloneElement(child, child.type === ReorderIcon ? draggableProps : {}, recursiveClone(child.props.children));
     });
     const recursiveChildren = useMemo(() => (useOnlyIconToDrag ? recursiveClone(children) : children), [useOnlyIconToDrag, children]);
-    return (React.createElement("div", Object.assign({ ref: ref, draggable: draggable }, props, (!useOnlyIconToDrag && draggableProps), { onTouchEnd: (event) => {
+    return (React.createElement("div", Object.assign({ ref: ref, draggable: !disable && draggable, style: style }, (!disable && Object.assign(Object.assign(Object.assign({}, events), (!useOnlyIconToDrag && draggableProps)), { onTouchEnd: (event) => {
             draggableOnTouchEnd();
             propOnTouchEnd(event);
-        } }), recursiveChildren));
+        } }))), recursiveChildren));
 }
 export function ReorderIcon(_a) {
     var { children = React.createElement(PiDotsSixVerticalBold, null), style } = _a, props = __rest(_a, ["children", "style"]);

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+export declare const getKey: (child: ReactNode) => string | undefined;
+export declare function swap(array: any[], i: number, j: number): void;

package/dist/utils.js

@@ -0,0 +1,6 @@
+export const getKey = (child) => { var _a; return (_a = child === null || child === void 0 ? void 0 : child.key) === null || _a === void 0 ? void 0 : _a.split("/.")[0]; };
+export function swap(array, i, j) {
+    const temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.6.7",
+  "version": "0.7.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",
@@ -29,7 +29,7 @@
     "react": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.67"
+    "@types/react": "^18.2.69"
   },
   "dependencies": {
     "drag-drop-touch": "^1.3.1"