react-reorder-list 0.3.0 → 0.4.0

package/README.md

@@ -67,7 +67,7 @@ export default function App() {
 #### Listen to Children Updates
 `<ReorderList>` can listen to updates to it's children components using the `watchChildrenUpdates` prop as shown below.
 
-If set to `true`, updates to children like state changes, additions/omissions of children components will reflect in real time.
+If set to `true`, updates to children like state changes, additions/omissions of children components will reflect in real time. Note that if an item is being dragged and an update occurs at the moment, that item will be placed at respective location and `onPositionChange` will be called to prevent any inconsistency.
 
 If set to `false`, any updates made in children component except reordering won't reflect.
 ```jsx
@@ -131,13 +131,21 @@ Here is the full API for the `<ReorderList>` component, these properties can be
 | `animationDuration` | `Number` | No | 400 | The duration (in ms) of swapping animation between items. If set to 0, animation will be disabled. |
 | `watchChildrenUpdates` | `Boolean` | No | false | Enable this to listen to any updates in children of `<ReorderList>` and update the state accordingly. See [listen to children updates](#listen-to-children-updates) |
 | `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. |
+| `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 PositionChangeHandler = (params?: { start?: number, end?: number, oldItems?: ReactNode, newItems?: ReactNode }) => void
+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)

package/dist/animation.d.ts

@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react";
+import { 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 default function Animation({ duration, children }: AnimationProps): ReactNode;
 export {};

package/dist/animation.js

@@ -1,4 +1,4 @@
-import React, { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
+import { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
 function usePrevious(value) {
     const prevChildrenRef = useRef();
     useEffect(() => { prevChildrenRef.current = value; }, [value]);
@@ -11,15 +11,17 @@ function calculateBoundingBoxes(children) {
     return boundingBoxes;
 }
 ;
-function Animate({ duration, children }) {
+export default function Animation({ duration, children }) {
     const [boundingBox, setBoundingBox] = useState({});
     const prevBoundingBox = usePrevious(boundingBox);
     useLayoutEffect(() => {
-        const newBoundingBox = calculateBoundingBoxes(children);
-        setBoundingBox(newBoundingBox);
+        if (duration > 0)
+            setBoundingBox(calculateBoundingBoxes(children));
+        else
+            setBoundingBox({});
     }, [children]);
     useLayoutEffect(() => {
-        if (prevBoundingBox && Object.keys(prevBoundingBox).length)
+        if (duration > 0 && prevBoundingBox && Object.keys(prevBoundingBox).length)
             Children.forEach(children, child => {
                 const domNode = child.ref.current;
                 const key = child.key.split("/.")[0];
@@ -40,6 +42,3 @@ function Animate({ duration, children }) {
     return children;
 }
 ;
-export default function Animation({ duration, children }) {
-    return duration > 0 ? React.createElement(Animate, { duration: duration }, children) : children;
-}

package/dist/index.d.ts

@@ -3,8 +3,9 @@ export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivEle
 export type PositionChangeHandler = (params?: {
     start?: number;
     end?: number;
-    oldItems?: ReactNode;
-    newItems?: ReactNode;
+    oldItems?: ReactNode[];
+    newItems?: ReactNode[];
+    revert?: () => void;
 }) => void;
 export type ReorderListProps = {
     useOnlyIconToDrag?: boolean;
@@ -12,10 +13,10 @@ export type ReorderListProps = {
     animationDuration?: number;
     watchChildrenUpdates: boolean;
     onPositionChange?: PositionChangeHandler;
-    disable?: boolean;
+    disabled?: boolean;
     props?: Props;
     children?: ReactNode;
 };
 export type { IconProps } from './icons.js';
-export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, watchChildrenUpdates, onPositionChange, disable, props, children }: ReorderListProps): React.JSX.Element;
+export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, watchChildrenUpdates, onPositionChange, disabled, props, children }: ReorderListProps): React.JSX.Element;
 export declare const ReorderIcon: ({ children, style, ...props }: Props) => React.JSX.Element;

package/dist/index.js

@@ -13,18 +13,20 @@ import React, { Children, cloneElement, createRef, forwardRef, isValidElement, u
 import { PiDotsSixVerticalBold } from "./icons.js";
 import Animation from "./animation.js";
 const ReorderItemRef = forwardRef(ReorderItem);
-export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 400, watchChildrenUpdates = false, onPositionChange, disable = false, props, children }) {
+export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 400, watchChildrenUpdates = false, onPositionChange, disabled = false, props, children }) {
     const ref = useRef(null);
-    const [draggable, setDraggable] = useState(false);
     const [start, setStart] = useState(-1);
     const [selected, setSelected] = useState(-1);
     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;
     useEffect(() => {
         if (!watchChildrenUpdates)
             return;
+        if (selected !== -1)
+            handleDragEnd(selected);
         const items = [];
         const newItems = [];
         Children.forEach(children, child => {
@@ -37,9 +39,15 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
         });
         setItems(items.filter(item => item !== undefined).concat(newItems));
     }, [children]);
-    return React.createElement("div", Object.assign({ ref: ref }, props), disable ? children : React.createElement(Animation, { duration: +draggable && animationDuration }, Children.map(items, (child, i) => {
+    function handleDragEnd(end) {
+        if (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) => {
         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: createRef(), useOnlyIconToDrag: useOnlyIconToDrag, draggable: draggable, 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 }, onDragStart: event => {
                 event.stopPropagation();
                 setStart(i);
                 setSelected(i);
@@ -62,17 +70,17 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
                 setTimeout(() => setIsAnimating(false), animationDuration);
             }, onDragEnd: event => {
                 event.stopPropagation();
-                if (i !== start)
-                    onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ start, end: i, oldItems: temp.items, newItems: items });
-                setStart(-1);
-                setSelected(-1);
-            }, onPointerEnter: () => setDraggable(true), onPointerLeave: () => setDraggable(false) }, child);
+                handleDragEnd(i);
+            } }, child);
     })));
 }
-function ReorderItem({ useOnlyIconToDrag, draggable, style, onDragStart, onDragEnter, onDragEnd, onPointerEnter, onPointerLeave, children }, ref) {
-    let props = useOnlyIconToDrag ? {} : { onPointerEnter, onPointerLeave };
-    if (draggable)
-        props = Object.assign(Object.assign({}, props), { draggable, onDragStart, onDragEnter, onDragEnd });
+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 => {
         if (!isValidElement(child))
             return child;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.3.0",
+  "version": "0.4.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",