react-reorder-list - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.d.ts

@@ -14,3 +14,4 @@ import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
     animationDuration?: number;
-    watchChildrenUpdates: boolean;
+    watchChildrenUpdates?: boolean;
+    preserveOrder?: boolean;
     onPositionChange?: PositionChangeHandler;
@@ -22,3 +23,3 @@ disabled?: boolean;
 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;

dist/index.js

@@ -16,3 +16,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 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);
@@ -30,17 +30,21 @@ const [start, setStart] = useState(-1);
         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) });
@@ -89,11 +93,11 @@ setStart(-1);
             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.json

 {
   "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.",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -46,5 +46,5 @@ # react-reorder-list
 
+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.
-
-If set to `false`, an item can be dragged by clicking anywhere inside the item.
 ```jsx
@@ -71,5 +71,9 @@ import React from 'react'
 
-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 `false`, any updates made in children component except reordering 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.
+
+NOTE: The props `watchChildrenUpdates` and `preserveOrder` should be used carefully to avoid any unexpected behaviour
 ```jsx
@@ -135,2 +139,3 @@ import React, { useState } from 'react'
 | `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. |
@@ -137,0 +142,0 @@ | `disabled` | `Boolean` | No | false | When set to true, `<ReorderList>` will work as a plain `div` with no functionality. |

No alert changes

Improved metrics

Total package byte prevSize

18864

increased by5.15%

Lines of code

185

increased by2.78%

Number of lines in readme file

156

increased by3.31%

No dependency changes