linkmore-design/es/lm-drag/components/sortableItem.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useMemo } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
var SortableItem = function SortableItem(_ref) {
  var index = _ref.index,
    item = _ref.item,
    instance = _ref.instance;
  var children = instance.children,
    rowKey = instance.rowKey;
  var _useSortable = useSortable({
      id: item[rowKey] || index,
      data: {
        item: item
      }
    }),
    attributes = _useSortable.attributes,
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transform = _useSortable.transform,
    transition = _useSortable.transition;
  var resetStyle = useMemo(function () {
    return {
      transform: CSS.Transform.toString(transform),
      transition: transition
    };
  }, [transform, transition]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
    className: "lm_drag_item",
    ref: setNodeRef,
    style: resetStyle
  }, attributes), children === null || children === void 0 ? void 0 : children({
    item: item,
    listeners: listeners,
    index: index
  })));
};
export default /*#__PURE__*/React.memo(SortableItem);