react-reorder-list - npm Package Compare versions

Comparing version 0.6.7 to 0.7.0

dist/animation.js

@@ -1,3 +0,4 @@
-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) {
@@ -12,9 +13,2 @@ const boundingBoxes = {};
 }
-function usePrevious(value) {
-    const prevChildrenRef = useRef();
-    useEffect(() => {
-        prevChildrenRef.current = value;
-    }, [value]);
-    return prevChildrenRef.current;
-}
 export default function Animation({ duration, children }) {
@@ -21,0 +15,0 @@ const [boundingBox, setBoundingBox] = useState({});

dist/hooks.d.ts

@@ -7,1 +7,2 @@ export declare function useDraggable(initValue?: boolean): readonly [boolean, {
 }];
+export declare function usePrevious<T>(value: T): T | undefined;

dist/hooks.js

@@ -1,2 +0,2 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 export function useDraggable(initValue = false) {
@@ -9,1 +9,8 @@ const [draggable, setDraggable] = useState(initValue);
 }
+export function usePrevious(value) {
+    const prevChildrenRef = useRef();
+    useEffect(() => {
+        prevChildrenRef.current = value;
+    }, [value]);
+    return prevChildrenRef.current;
+}

dist/index.d.ts

@@ -25,2 +25,3 @@ import React, { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, ReactNode, TouchEventHandler } from "react";
     useOnlyIconToDrag: boolean;
+    disable: boolean;
     style: CSSProperties;
@@ -27,0 +28,0 @@ onDragStart?: DivDragEventHandler;

dist/index.js

@@ -13,5 +13,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
+import Animation from "./animation.js";
 import { PiDotsSixVerticalBold } from "./icons.js";
-import Animation from "./animation.js";
 import { useDraggable } from "./hooks.js";
+import { swap } from "./utils.js";
 if (typeof window !== "undefined")
@@ -29,3 +30,6 @@ import("drag-drop-touch");
     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);
@@ -70,6 +74,6 @@ useEffect(() => {
     }
-    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();
@@ -89,4 +93,12 @@ setStart(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;
@@ -114,6 +126,6 @@ });
 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) => {
@@ -125,6 +137,6 @@ if (!isValidElement(child))
     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));
 }
@@ -131,0 +143,0 @@ export function ReorderIcon(_a) {

package.json

 {
   "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.",
@@ -32,3 +32,3 @@ "type": "module",
   "devDependencies": {
-    "@types/react": "^18.2.67"
+    "@types/react": "^18.2.69"
   },
@@ -35,0 +35,0 @@ "dependencies": {

README.md

@@ -10,3 +10,4 @@ # react-reorder-list
 - 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)
@@ -129,2 +130,25 @@
 
+#### 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
@@ -131,0 +155,0 @@

No alert changes

Improved metrics

Total package byte prevSize

23471

increased by9.26%

Number of package files

13

increased by18.18%

Lines of code

269

increased by9.8%

Number of lines in readme file

218

increased by12.37%

No dependency changes