react-reorder-list
Advanced tools
Comparing version 0.6.6 to 0.6.7
import { useState, useLayoutEffect, Children, useEffect, useRef } from "react"; | ||
const getKey = (child) => { var _a; return (_a = child === null || child === void 0 ? void 0 : child.key) === null || _a === void 0 ? void 0 : _a.split("/.")[0]; }; | ||
function calculateBoundingBoxes(children) { | ||
const boundingBoxes = {}; | ||
Children.forEach(children, (child) => { | ||
const key = getKey(child); | ||
if (key) | ||
boundingBoxes[key] = child.ref.current.getBoundingClientRect(); | ||
}); | ||
return boundingBoxes; | ||
} | ||
function usePrevious(value) { | ||
@@ -9,7 +19,2 @@ const prevChildrenRef = useRef(); | ||
} | ||
function calculateBoundingBoxes(children) { | ||
const boundingBoxes = {}; | ||
Children.forEach(children, (child) => (boundingBoxes[child.key.split("/.")[0]] = child.ref.current.getBoundingClientRect())); | ||
return boundingBoxes; | ||
} | ||
export default function Animation({ duration, children }) { | ||
@@ -27,4 +32,7 @@ const [boundingBox, setBoundingBox] = useState({}); | ||
Children.forEach(children, (child) => { | ||
const domNode = child.ref.current; | ||
const key = child.key.split("/.")[0]; | ||
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 { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {}; | ||
@@ -31,0 +39,0 @@ const { left, top } = boundingBox[key]; |
@@ -29,3 +29,3 @@ var __rest = (this && this.__rest) || function (s, e) { | ||
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); | ||
const findIndex = (key) => (key ? items.findIndex((item) => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.split(".$").at(-1)) === key; }) : -1); | ||
useEffect(() => { | ||
@@ -40,4 +40,3 @@ if (!watchChildrenUpdates) | ||
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()); | ||
const index = findIndex(child === null || child === void 0 ? void 0 : child.key); | ||
if (index === -1) | ||
@@ -72,4 +71,5 @@ newItems.push(child); | ||
return (React.createElement("div", Object.assign({ ref: ref }, props), disabled ? (children) : (React.createElement(Animation, { duration: +(start !== -1 && !scroll) && 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: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => { | ||
if (!isValidElement(child)) | ||
return child; | ||
return (React.createElement(ReorderItemRef, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => { | ||
event.stopPropagation(); | ||
@@ -76,0 +76,0 @@ setStart(i); |
{ | ||
"name": "react-reorder-list", | ||
"version": "0.6.6", | ||
"version": "0.6.7", | ||
"description": "A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.", | ||
@@ -32,3 +32,3 @@ "type": "module", | ||
"devDependencies": { | ||
"@types/react": "^18.2.55" | ||
"@types/react": "^18.2.67" | ||
}, | ||
@@ -35,0 +35,0 @@ "dependencies": { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
21481
245