Item.mjs 1.8 KB

12345678910111213141516171819202122232425262728293031323334
  1. "use client";
  2. import { jsx } from 'react/jsx-runtime';
  3. import { invariant } from 'motion-utils';
  4. import { forwardRef, useContext } from 'react';
  5. import { ReorderContext } from '../../context/ReorderContext.mjs';
  6. import { motion } from '../../render/components/motion/proxy.mjs';
  7. import { useConstant } from '../../utils/use-constant.mjs';
  8. import { useMotionValue } from '../../value/use-motion-value.mjs';
  9. import { useTransform } from '../../value/use-transform.mjs';
  10. import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
  11. function useDefaultMotionValue(value, defaultValue = 0) {
  12. return isMotionValue(value) ? value : useMotionValue(defaultValue);
  13. }
  14. function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
  15. const Component = useConstant(() => motion[as]);
  16. const context = useContext(ReorderContext);
  17. const point = {
  18. x: useDefaultMotionValue(style.x),
  19. y: useDefaultMotionValue(style.y),
  20. };
  21. const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
  22. invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
  23. const { axis, registerItem, updateOrder } = context;
  24. return (jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
  25. const { velocity } = gesturePoint;
  26. velocity[axis] &&
  27. updateOrder(value, point[axis].get(), velocity[axis]);
  28. onDrag && onDrag(event, gesturePoint);
  29. }, onLayoutMeasure: (measured) => registerItem(value, measured), ref: externalRef, ignoreStrict: true, children: children }));
  30. }
  31. const ReorderItem = /*@__PURE__*/ forwardRef(ReorderItemComponent);
  32. export { ReorderItem, ReorderItemComponent };