linkmore-design/es/lm-table/components/Item/Item.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["color", "dragOverlay", "dragging", "disabled", "fadeIn", "handle", "handleProps", "height", "index", "listeners", "onRemove", "renderItem", "sorting", "style", "transition", "transform", "value", "wrapperStyle"];
import React, { useEffect } from 'react';
import classNames from 'classnames';
import { Handle, Remove } from "./components";
// import IconFont from '../../../IconFont'

import "./Item.less";
export var Item = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var color = _ref.color,
    dragOverlay = _ref.dragOverlay,
    dragging = _ref.dragging,
    disabled = _ref.disabled,
    fadeIn = _ref.fadeIn,
    handle = _ref.handle,
    handleProps = _ref.handleProps,
    height = _ref.height,
    index = _ref.index,
    listeners = _ref.listeners,
    onRemove = _ref.onRemove,
    renderItem = _ref.renderItem,
    sorting = _ref.sorting,
    style = _ref.style,
    transition = _ref.transition,
    transform = _ref.transform,
    value = _ref.value,
    wrapperStyle = _ref.wrapperStyle,
    props = _objectWithoutProperties(_ref, _excluded);
  useEffect(function () {
    if (!dragOverlay) {
      return undefined;
    }
    document.body.style.cursor = 'grabbing';
    return function () {
      document.body.style.cursor = '';
    };
  }, [dragOverlay]);
  return renderItem ? renderItem({
    dragOverlay: Boolean(dragOverlay),
    dragging: Boolean(dragging),
    sorting: Boolean(sorting),
    index: index,
    fadeIn: Boolean(fadeIn),
    listeners: listeners,
    ref: ref,
    style: style,
    transform: transform,
    transition: transition,
    value: value
  }) : /*#__PURE__*/React.createElement("li", {
    className: classNames('dnd_com_item_Wrapper', fadeIn && 'fadeIn', sorting && 'sorting', dragOverlay && 'dragOverlay'),
    style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
      transition: [transition, wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.transition].filter(Boolean).join(', '),
      // @ts-ignore
      '--translate-x': transform ? "".concat(Math.round(transform.x), "px") : undefined,
      '--translate-y': transform ? "".concat(Math.round(transform.y), "px") : undefined,
      '--scale-x': transform !== null && transform !== void 0 && transform.scaleX ? "".concat(transform.scaleX) : undefined,
      '--scale-y': transform !== null && transform !== void 0 && transform.scaleY ? "".concat(transform.scaleY) : undefined,
      '--index': index,
      '--color': color
    }),
    ref: ref
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('dnd_com_Item', dragging && 'dragging', handle && 'withHandle', dragOverlay && 'dragOverlay', disabled && 'disabled', color && 'color'),
    style: style,
    "data-cypress": "draggable-item"
  }, !handle ? listeners : undefined, props, {
    tabIndex: !handle ? 0 : undefined
  }), /*#__PURE__*/React.createElement("div", null, value), /*#__PURE__*/React.createElement("span", {
    className: "dnd_com_Actions"
  }, onRemove ? /*#__PURE__*/React.createElement(Remove, {
    className: "dnd_com_Remove",
    onClick: onRemove
  }) :
  // <IconFont className={styles.Remove} type="lmweb-close-circle-fill" onClick={onRemove} />
  null, handle ? /*#__PURE__*/React.createElement(Handle, _extends({}, handleProps, listeners)) : null)));
}));