react-reorder-list 0.2.1 → 0.3.1

package/README.md

@@ -3,7 +3,8 @@ A simple react component that facilitates the reordering of JSX/HTML elements th
 ## Features
 - Reorders list of elements using drag and drop.
 - Easy to use
-- Fully Customizable
+- Smooth transition using animation.
+- Listen to children updates. See [listen to children updates](#listen-to-children-updates)
 - Handles nested lists easily. See [nested list usage](#nested-list-usage)
 ## Installation
 To install react-reorder-list
@@ -34,7 +35,7 @@ export default function App() {
     return <ReorderList>
         {[0, 1, 2, 3, 4].map(i => {
             {/* Having a unique key is important */}
-            return <div key={i}>{i}</div>
+            return <div key={i}>Item {i}</div>
         })}
     </ReorderList>
 }
@@ -63,6 +64,40 @@ export default function App() {
     </ReorderList>
 }
 ```
+#### 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. 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
+import React, { useState } from 'react'
+import ReorderList from 'react-reorder-list'
+
+export default function App() {
+    const [array, setArray] = useState([0, 1, 2, 3, 4])
+
+    function setNewArray() {
+        setArray(prev => {
+            const array = []
+            prev.forEach(_ => {
+                do {
+                    var item = Math.floor(Math.random() * 9)
+                } while (array.includes(item))
+                array.push(item)
+            })
+            return array
+        })
+    }
+
+    return <div>
+        <ReorderList watchChildrenUpdates={true} animationDuration={200}>
+            {array.map(i => <div key={i}>Item {i}</div>)}
+        </ReorderList>
+        <button onClick={setNewArray}>Click me</button>
+    </div>
+}
+```
 #### Nested List Usage
 ```jsx
 import React from 'react'
@@ -93,9 +128,10 @@ Here is the full API for the `<ReorderList>` component, these properties can be
 | - | - | - | - | - |
 | `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. |
+| `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

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, isValidElement, useEffect, useRef } from "react";
+import { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
 function usePrevious(value) {
     const prevChildrenRef = useRef();
     useEffect(() => { prevChildrenRef.current = value; }, [value]);
@@ -7,28 +7,26 @@ function usePrevious(value) {
 ;
 function calculateBoundingBoxes(children) {
     const boundingBoxes = {};
-    Children.forEach(children, (child, i) => {
-        if (isValidElement(child))
-            boundingBoxes[child.key || i] = child.ref.current.getBoundingClientRect();
-    });
+    Children.forEach(children, child => boundingBoxes[child.key.split("/.")[0]] = child.ref.current.getBoundingClientRect());
     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)
-            Children.forEach(children, (child, i) => {
-                if (!isValidElement(child))
-                    return;
+        if (duration > 0 && prevBoundingBox && Object.keys(prevBoundingBox).length)
+            Children.forEach(children, child => {
                 const domNode = child.ref.current;
-                const { left: prevLeft, top: prevTop } = prevBoundingBox[child.key || i];
-                const { left, top } = boundingBox[child.key || i];
+                const key = child.key.split("/.")[0];
+                const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};
+                const { left, top } = boundingBox[key];
                 const changeInX = prevLeft - left, changeInY = prevTop - top;
                 if (changeInX || changeInY)
                     requestAnimationFrame(() => {
@@ -44,6 +42,3 @@ function Animate({ duration, children }) {
     return children;
 }
 ;
-export default function Animation({ duration, children }) {
-    return duration ? React.createElement(Animate, { duration: duration }, children) : children;
-}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
 export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type PositionChangeHandler = (params?: {
     start?: number;
@@ -10,11 +10,12 @@ export type ReorderListProps = {
     useOnlyIconToDrag?: boolean;
     selectedItemOpacity?: number;
     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, 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

@@ -9,36 +9,45 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useMemo, useRef, useState } from 'react';
-import { PiDotsSixVerticalBold } from './icons.js';
-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);
+import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
+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, disabled = false, props, children }) {
+    const ref = useRef(null);
     const [start, setStart] = useState(-1);
     const [selected, setSelected] = useState(-1);
-    const [items, setItems] = useState(children);
+    const [items, setItems] = useState(Children.toArray(children));
     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, ref: createRef(), useOnlyIconToDrag: useOnlyIconToDrag, draggable: draggable, style: { opacity: selected === i ? selectedItemOpacity : 1 }, onDragStart: event => {
+    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 => {
+            var _a;
+            const index = findIndex((_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : child === null || child === void 0 ? void 0 : child.toString());
+            if (index === -1)
+                newItems.push(child);
+            else
+                items[index] = child;
+        });
+        setItems(items.filter(item => item !== undefined).concat(newItems));
+    }, [children]);
+    function handleDragEnd(end) {
+        if (end !== start)
+            onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ start, end, oldItems: temp.items, newItems: 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: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, style: { opacity: selected === i ? selectedItemOpacity : 1 }, onDragStart: event => {
                 event.stopPropagation();
                 setStart(i);
                 setSelected(i);
@@ -61,13 +70,26 @@ 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, 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;
+        const childProps = useOnlyIconToDrag && child.type.name === 'ReorderIcon' ? { onPointerEnter, 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 const ReorderIcon = (_a) => {
     var { children = React.createElement(PiDotsSixVerticalBold, null), style } = _a, props = __rest(_a, ["children", "style"]);
     return React.createElement("span", Object.assign({ style: Object.assign({ cursor: "grab" }, style) }, props), children);

package/package.json

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