react-reorder-list 0.4.0 → 0.5.0

package/README.md

@@ -43,9 +43,9 @@ export default function App() {
 #### Usage with ReorderIcon
 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.
+
+If set to `true`, an item can be dragged only using the `<ReorderIcon>` present inside the item.
 ```jsx
 import React from 'react'
 import ReorderList, { ReorderIcon } from 'react-reorder-list'
@@ -67,9 +67,13 @@ 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. 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 by user won't reflect.
+
+If set to `true`, updates to children like state changes, additions/omissions of children components will reflect in real time.<br>
+Further if `preserveOrder` is set to false, the order in which new children appear will be maintained.<br>
+Whereas if `preserveOrder` is set to true, the order of existing items will be preserved as before the update occured and new items will be placed at the end irrespective of their order in children. Also, if an item is being dragged and an update occurs at that 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.
+NOTE: The props `watchChildrenUpdates` and `preserveOrder` should be used carefully to avoid any unexpected behaviour
 ```jsx
 import React, { useState } from 'react'
 import ReorderList from 'react-reorder-list'
@@ -130,6 +134,7 @@ Here is the full API for the `<ReorderList>` component, these properties can be
 | `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 (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) |
+| `preserveOrder` | `Boolean` | No | false | Works along woth `watchChildrenUpdates` to determine whether to preserve existing order or not. See [listen to children updates](#listen-to-children-updates) |
 | `onPositionChange` | [`PositionChangeHandler`](#positionchangehandler) | No | - | Function to be executed on item position change. |
 | `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. |

package/dist/index.d.ts

@@ -11,12 +11,13 @@ export type ReorderListProps = {
     useOnlyIconToDrag?: boolean;
     selectedItemOpacity?: number;
     animationDuration?: number;
-    watchChildrenUpdates: boolean;
+    watchChildrenUpdates?: boolean;
+    preserveOrder?: boolean;
     onPositionChange?: PositionChangeHandler;
     disabled?: boolean;
     props?: Props;
     children?: ReactNode;
 };
 export type { IconProps } from './icons.js';
-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;
+export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, watchChildrenUpdates, preserveOrder, onPositionChange, disabled, props, children }: ReorderListProps): React.JSX.Element;
+export declare function ReorderIcon({ children, style, ...props }: Props): React.JSX.Element;

package/dist/index.js

@@ -13,7 +13,7 @@ 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, disabled = false, props, children }) {
+export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 400, watchChildrenUpdates = false, preserveOrder = false, onPositionChange, disabled = false, props, children }) {
     const ref = useRef(null);
     const [start, setStart] = useState(-1);
     const [selected, setSelected] = useState(-1);
@@ -26,21 +26,25 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
         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));
+            handleDragEnd(selected, preserveOrder);
+        if (preserveOrder) {
+            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));
+        }
+        else
+            setItems(Children.toArray(children));
     }, [children]);
-    function handleDragEnd(end) {
-        if (end !== start)
+    function handleDragEnd(end, handlePositionChange = true) {
+        if (handlePositionChange && 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);
@@ -84,13 +88,13 @@ function ReorderItem({ useOnlyIconToDrag, style, onDragStart, onDragEnter, onDra
     const recursiveClone = (children) => Children.map(children, child => {
         if (!isValidElement(child))
             return child;
-        const childProps = useOnlyIconToDrag && child.type.name === 'ReorderIcon' ? { onPointerEnter, onPointerLeave } : {};
+        const childProps = child.type === ReorderIcon ? { onPointerEnter, onPointerLeave } : {};
         return cloneElement(child, Object.assign({ children: recursiveClone(child.props.children) }, childProps));
     });
-    const recursiveChildren = useMemo(() => recursiveClone(children), [children]);
+    const recursiveChildren = useMemo(() => useOnlyIconToDrag ? recursiveClone(children) : children, [children]);
     return React.createElement("div", Object.assign({ ref: ref, style: style }, props), recursiveChildren);
 }
-export const ReorderIcon = (_a) => {
+export function 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.4.0",
+  "version": "0.5.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",