You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-reorder-list

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-reorder-list - npm Package Compare versions

Comparing version

0.7.2
to
0.8.0

CHANGELOG.md
dist/constants.d.ts
dist/constants.js

5

dist/animation.js

@@ -9,3 +9,3 @@ import { useState, useLayoutEffect, Children } from "react";

if (key)
boundingBoxes[key] = child.ref.current.getBoundingClientRect();
boundingBoxes[key] = child.props.ref.current.getBoundingClientRect();
});

@@ -26,7 +26,6 @@ return boundingBoxes;

Children.forEach(children, (child) => {
var _a;
const domNode = (_a = child === null || child === void 0 ? void 0 : child.ref) === null || _a === void 0 ? void 0 : _a.current;
const key = getKey(child);
if (!key)
return;
const domNode = child.props.ref.current;
const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};

@@ -33,0 +32,0 @@ const { left, top } = boundingBox[key];

2

dist/hooks.d.ts

@@ -7,2 +7,2 @@ export declare function useDraggable(initValue?: boolean): readonly [boolean, {

}];
export declare function usePrevious<T>(value: T): T | undefined;
export declare function usePrevious<T>(value: T): T | null;

2

dist/hooks.js

@@ -10,3 +10,3 @@ import { useEffect, useRef, useState } from "react";

export function usePrevious(value) {
const prevChildrenRef = useRef();
const prevChildrenRef = useRef(null);
useEffect(() => {

@@ -13,0 +13,0 @@ prevChildrenRef.current = value;

7

dist/index.d.ts

@@ -1,2 +0,2 @@

import React, { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, ReactNode, TouchEventHandler } from "react";
import { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, JSX, ReactNode, RefObject, TouchEventHandler } from "react";
export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

@@ -26,2 +26,3 @@ export type PositionChangeHandler = (params?: {

disable: boolean;
ref: RefObject<HTMLDivElement | null>;
style: CSSProperties;

@@ -36,3 +37,3 @@ onDragStart?: DivDragEventHandler;

export type { IconProps } from "./icons.js";
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;
export declare function ReorderIcon({ children, style, ...props }: Props): JSX.Element;
export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, watchChildrenUpdates, preserveOrder, onPositionChange, disabled, props, children }: ReorderListProps): JSX.Element;

52

dist/index.js

@@ -12,11 +12,30 @@ var __rest = (this && this.__rest) || function (s, e) {

};
import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
import React, { Children, cloneElement, createRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
import Animation from "./animation.js";
import { scrollThreshold } from "./constants.js";
import { useDraggable } from "./hooks.js";
import { PiDotsSixVerticalBold } from "./icons.js";
import { useDraggable } from "./hooks.js";
import { swap } from "./utils.js";
if (typeof window !== "undefined")
import("drag-drop-touch");
const scrollThreshold = { x: 10, y: 100 };
const ReorderItemRef = forwardRef(ReorderItem);
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));
}
function ReorderItem(_a) {
var { useOnlyIconToDrag, disable, ref, style, children, onTouchEnd: propOnTouchEnd } = _a, events = __rest(_a, ["useOnlyIconToDrag", "disable", "ref", "style", "children", "onTouchEnd"]);
const [draggable, _b] = useDraggable(), { onTouchEnd: draggableOnTouchEnd } = _b, draggableProps = __rest(_b, ["onTouchEnd"]);
if (!draggable)
events.onDragStart = undefined;
const recursiveClone = (children) => Children.map(children, (child) => {
if (!isValidElement(child))
return child;
return cloneElement(child, child.type === ReorderIcon ? draggableProps : {}, recursiveClone(child.props.children));
});
const recursiveChildren = useMemo(() => (useOnlyIconToDrag ? recursiveClone(children) : children), [useOnlyIconToDrag, children]);
return (React.createElement("div", Object.assign({ ref: ref, draggable: !disable && draggable, style: style }, (!disable && Object.assign(Object.assign(Object.assign({}, events), (!useOnlyIconToDrag && draggableProps)), { onTouchEnd: (event) => {
draggableOnTouchEnd();
propOnTouchEnd(event);
} }))), recursiveChildren));
}
export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 400, watchChildrenUpdates = false, preserveOrder = false, onPositionChange, disabled = false, props, children }) {

@@ -76,7 +95,8 @@ const ref = useRef(null);

return child;
return (React.createElement(ReorderItemRef, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, disable: disableArr[i], style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
return (React.createElement(ReorderItem, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, disable: disableArr[i], style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
var _a, _b;
event.stopPropagation();
setStart(i);
setSelected(i);
setTemp({ items, rect: ref.current.children[i].getBoundingClientRect() });
setTemp({ items, rect: ((_b = (_a = ref.current.childNodes[i]).getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a)) || {} });
}, onDragEnter: (event) => {

@@ -123,21 +143,1 @@ event.stopPropagation();

}
function ReorderItem(_a, ref) {
var { useOnlyIconToDrag, disable, style, children, onTouchEnd: propOnTouchEnd } = _a, events = __rest(_a, ["useOnlyIconToDrag", "disable", "style", "children", "onTouchEnd"]);
const [draggable, _b] = useDraggable(), { onTouchEnd: draggableOnTouchEnd } = _b, draggableProps = __rest(_b, ["onTouchEnd"]);
if (!draggable)
events.onDragStart = undefined;
const recursiveClone = (children) => Children.map(children, (child) => {
if (!isValidElement(child))
return child;
return cloneElement(child, child.type === ReorderIcon ? draggableProps : {}, recursiveClone(child.props.children));
});
const recursiveChildren = useMemo(() => (useOnlyIconToDrag ? recursiveClone(children) : children), [useOnlyIconToDrag, children]);
return (React.createElement("div", Object.assign({ ref: ref, draggable: !disable && draggable, style: style }, (!disable && Object.assign(Object.assign(Object.assign({}, events), (!useOnlyIconToDrag && draggableProps)), { onTouchEnd: (event) => {
draggableOnTouchEnd();
propOnTouchEnd(event);
} }))), recursiveChildren));
}
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));
}

6

package.json
{
"name": "react-reorder-list",
"version": "0.7.2",
"version": "0.8.0",
"description": "A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.",

@@ -35,3 +35,3 @@ "type": "module",

"devDependencies": {
"@types/react": "^18.2.79"
"@types/react": "^19.0.0"
},

@@ -41,2 +41,2 @@ "dependencies": {

}
}
}