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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Item = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _components = require("./components");
require("./Item.less");
// import IconFont from '../../../IconFont'

const Item = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  color,
  dragOverlay,
  dragging,
  disabled,
  fadeIn,
  handle,
  handleProps,
  height,
  index,
  listeners,
  onRemove,
  renderItem,
  sorting,
  style,
  transition,
  transform,
  value,
  wrapperStyle,
  ...props
}, ref) => {
  (0, _react.useEffect)(() => {
    if (!dragOverlay) {
      return undefined;
    }
    document.body.style.cursor = 'grabbing';
    return () => {
      document.body.style.cursor = '';
    };
  }, [dragOverlay]);
  return renderItem ? renderItem({
    dragOverlay: Boolean(dragOverlay),
    dragging: Boolean(dragging),
    sorting: Boolean(sorting),
    index,
    fadeIn: Boolean(fadeIn),
    listeners,
    ref,
    style,
    transform,
    transition,
    value
  }) : /*#__PURE__*/_react.default.createElement("li", {
    className: (0, _classnames.default)('dnd_com_item_Wrapper', fadeIn && 'fadeIn', sorting && 'sorting', dragOverlay && 'dragOverlay'),
    style: {
      ...wrapperStyle,
      transition: [transition, wrapperStyle?.transition].filter(Boolean).join(', '),
      // @ts-ignore
      '--translate-x': transform ? `${Math.round(transform.x)}px` : undefined,
      '--translate-y': transform ? `${Math.round(transform.y)}px` : undefined,
      '--scale-x': transform?.scaleX ? `${transform.scaleX}` : undefined,
      '--scale-y': transform?.scaleY ? `${transform.scaleY}` : undefined,
      '--index': index,
      '--color': color
    },
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames.default)('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.default.createElement("div", null, value), /*#__PURE__*/_react.default.createElement("span", {
    className: "dnd_com_Actions"
  }, onRemove ? /*#__PURE__*/_react.default.createElement(_components.Remove, {
    className: "dnd_com_Remove",
    onClick: onRemove
  }) :
  // <IconFont className={styles.Remove} type="lmweb-close-circle-fill" onClick={onRemove} />
  null, handle ? /*#__PURE__*/_react.default.createElement(_components.Handle, (0, _extends2.default)({}, handleProps, listeners)) : null)));
}));
exports.Item = Item;