react-reorder-list - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/animation.d.ts

@@ -1,2 +0,2 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 type AnimationProps = {
@@ -6,3 +6,3 @@ duration: number;
 };
-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 {};

dist/animation.js

@@ -1,2 +0,2 @@
-import React, { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
+import { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
 function usePrevious(value) {
@@ -14,11 +14,13 @@ const prevChildrenRef = useRef();
 ;
-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 => {
@@ -44,4 +46,1 @@ const domNode = child.ref.current;
 ;
-export default function Animation({ duration, children }) {
-    return duration > 0 ? React.createElement(Animate, { duration: duration }, children) : children;
-}

dist/index.d.ts

@@ -15,3 +15,3 @@ import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
     onPositionChange?: PositionChangeHandler;
-    disable?: boolean;
+    disabled?: boolean;
     props?: Props;
@@ -21,3 +21,3 @@ 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;

dist/index.js

@@ -16,5 +16,4 @@ 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, 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);
@@ -25,2 +24,3 @@ const [selected, setSelected] = useState(-1);
     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;
@@ -30,2 +30,4 @@ useEffect(() => {
             return;
+        if (selected !== -1)
+            handleDragEnd(selected);
         const items = [];
@@ -43,5 +45,11 @@ const 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 });
+        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();
@@ -69,13 +77,13 @@ setStart(i);
                 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 => {
@@ -82,0 +90,0 @@ if (!isValidElement(child))

package.json

 {
   "name": "react-reorder-list",
-  "version": "0.3.0",
+  "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.",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -70,3 +70,3 @@ # react-reorder-list
 
-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.
 
@@ -135,3 +135,3 @@ If set to `false`, any updates made in children component except reordering won't reflect.
 | `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. |
@@ -138,0 +138,0 @@ ### Types

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17525

increased by0.66%

Lines of code

179

increased by4.07%

No dependency changes