react-reorder-list 0.2.0 → 0.3.0

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
@@ -25,7 +26,7 @@ To install react-reorder-list
 
 Items in this list can be reordered by simply dragging an item and dropping it in place of another item.
 #### Basic Usage
-An item can be dragged by clicking anywhere inside the item.
+Each `<div>` component inside `<ReorderList>` can now be drag-and-dropped to another `<div>` to reorder them.
 ```jsx
 import React from 'react'
 import ReorderList from 'react-reorder-list'
@@ -34,13 +35,17 @@ 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>
 }
 ```
 #### Usage with ReorderIcon
-An item can be dragged only using the `<ReorderIcon>` present inside the item.
+The dragging behavior can be changed using the `useOnlyIconToDrag` prop of `<ReorderList>` component.
+
+If set to `true`, an item can be dragged only using the `<ReorderIcon>` present inside the item.
+
+If set to `false`, an item can be dragged by clicking anywhere inside the item.
 ```jsx
 import React from 'react'
 import ReorderList, { ReorderIcon } from 'react-reorder-list'
@@ -59,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.
+
+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'
@@ -68,6 +107,7 @@ export default function App() {
     return <ReorderList>
         {[0, 1, 2].map(i => {
             return <div key={i}>
+                <ReorderIcon />
                 <span>{'Parent' + i}</span>
                 <ReorderList useOnlyIconToDrag={true}>
                     {[0, 1, 2].map(j => {
@@ -88,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. |
+| `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. |
 ### Types
 #### PositionChangeHandler

package/dist/animation.js

@@ -1,4 +1,4 @@
-import React, { useState, useLayoutEffect, Children, isValidElement, useEffect, useRef } from "react";
+import React, { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
 function usePrevious(value) {
     const prevChildrenRef = useRef();
     useEffect(() => { prevChildrenRef.current = value; }, [value]);
@@ -7,10 +7,7 @@ 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;
 }
 ;
@@ -23,12 +20,11 @@ function Animate({ duration, children }) {
     }, [children]);
     useLayoutEffect(() => {
         if (prevBoundingBox && Object.keys(prevBoundingBox).length)
-            Children.forEach(children, (child, i) => {
-                if (!isValidElement(child))
-                    return;
+            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(() => {
@@ -45,5 +41,5 @@ function Animate({ duration, children }) {
 }
 ;
 export default function Animation({ duration, children }) {
-    return duration ? React.createElement(Animate, { duration: duration }, children) : children;
+    return duration > 0 ? 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;
     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, disable, props, children }: ReorderListProps): React.JSX.Element;
 export declare const ReorderIcon: ({ children, style, ...props }: Props) => React.JSX.Element;

package/dist/index.js

@@ -9,36 +9,37 @@ 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, disable = 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);
+    const [items, setItems] = useState(Children.toArray(children));
     const [temp, setTemp] = useState({});
     const [isAnimating, setIsAnimating] = useState(false);
+    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;
+        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]);
     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 => {
+        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 => {
                 event.stopPropagation();
                 setStart(i);
                 setSelected(i);
@@ -68,6 +69,19 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
             }, onPointerEnter: () => setDraggable(true), onPointerLeave: () => setDraggable(false) }, 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 });
+    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.0",
+  "version": "0.3.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",