react-reorder-list 0.6.6 → 0.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/animation.js +15 -7
  2. package/dist/index.js +5 -5
  3. package/package.json +2 -2
package/dist/animation.js CHANGED
@@ -1,4 +1,14 @@
1
1
  import { useState, useLayoutEffect, Children, useEffect, useRef } from "react";
2
+ 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]; };
3
+ function calculateBoundingBoxes(children) {
4
+ const boundingBoxes = {};
5
+ Children.forEach(children, (child) => {
6
+ const key = getKey(child);
7
+ if (key)
8
+ boundingBoxes[key] = child.ref.current.getBoundingClientRect();
9
+ });
10
+ return boundingBoxes;
11
+ }
2
12
  function usePrevious(value) {
3
13
  const prevChildrenRef = useRef();
4
14
  useEffect(() => {
@@ -6,11 +16,6 @@ function usePrevious(value) {
6
16
  }, [value]);
7
17
  return prevChildrenRef.current;
8
18
  }
9
- function calculateBoundingBoxes(children) {
10
- const boundingBoxes = {};
11
- Children.forEach(children, (child) => (boundingBoxes[child.key.split("/.")[0]] = child.ref.current.getBoundingClientRect()));
12
- return boundingBoxes;
13
- }
14
19
  export default function Animation({ duration, children }) {
15
20
  const [boundingBox, setBoundingBox] = useState({});
16
21
  const prevBoundingBox = usePrevious(boundingBox);
@@ -23,8 +28,11 @@ export default function Animation({ duration, children }) {
23
28
  useLayoutEffect(() => {
24
29
  if (duration > 0 && prevBoundingBox && Object.keys(prevBoundingBox).length)
25
30
  Children.forEach(children, (child) => {
26
- const domNode = child.ref.current;
27
- const key = child.key.split("/.")[0];
31
+ var _a;
32
+ const domNode = (_a = child === null || child === void 0 ? void 0 : child.ref) === null || _a === void 0 ? void 0 : _a.current;
33
+ const key = getKey(child);
34
+ if (!key)
35
+ return;
28
36
  const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};
29
37
  const { left, top } = boundingBox[key];
30
38
  const changeInX = prevLeft - left, changeInY = prevTop - top;
package/dist/index.js CHANGED
@@ -26,7 +26,7 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
26
26
  const [isAnimating, setIsAnimating] = useState(false);
27
27
  const [scroll, setScroll] = useState();
28
28
  const refs = useMemo(() => items.map((_) => createRef()), [items]);
29
- 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);
29
+ 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);
30
30
  useEffect(() => {
31
31
  if (!watchChildrenUpdates)
32
32
  return;
@@ -36,8 +36,7 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
36
36
  const items = [];
37
37
  const newItems = [];
38
38
  Children.forEach(children, (child) => {
39
- var _a;
40
- 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());
39
+ const index = findIndex(child === null || child === void 0 ? void 0 : child.key);
41
40
  if (index === -1)
42
41
  newItems.push(child);
43
42
  else
@@ -67,8 +66,9 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
67
66
  setSelected(-1);
68
67
  }
69
68
  return (React.createElement("div", Object.assign({ ref: ref }, props), disabled ? (children) : (React.createElement(Animation, { duration: +(start !== -1 && !scroll) && animationDuration }, Children.map(items, (child, i) => {
70
- var _a;
71
- 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) => {
69
+ if (!isValidElement(child))
70
+ return child;
71
+ return (React.createElement(ReorderItemRef, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
72
72
  event.stopPropagation();
73
73
  setStart(i);
74
74
  setSelected(i);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-reorder-list",
3
- "version": "0.6.6",
3
+ "version": "0.6.7",
4
4
  "description": "A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -29,7 +29,7 @@
29
29
  "react": ">=17.0.0"
30
30
  },
31
31
  "devDependencies": {
32
- "@types/react": "^18.2.55"
32
+ "@types/react": "^18.2.67"
33
33
  },
34
34
  "dependencies": {
35
35
  "drag-drop-touch": "^1.3.1"