z-react-ui/lib/drag-list/index.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _react = _interopRequireDefault(require("react"));

var _reactBeautifulDnd = require("react-beautiful-dnd");

// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------
function defaultSetDropStyleFn(isDraggingOver) {
  return {
    background: isDraggingOver ? '#e6f7ff' : 'transparent'
  };
}

function defaultSetDrapStyleFn(isDragging, draggableStyle) {
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, draggableStyle), {}, {
    background: isDragging ? '#91d5ff' : '#fff',
    opacity: isDragging ? 0.5 : 1
  });
}

var DragList = function DragList(_ref) {
  var onDragEnd = _ref.onDragEnd,
      dropClassName = _ref.dropClassName,
      _ref$dropStyle = _ref.dropStyle,
      dropStyle = _ref$dropStyle === void 0 ? {} : _ref$dropStyle,
      _ref$setDropStyleFn = _ref.setDropStyleFn,
      setDropStyleFn = _ref$setDropStyleFn === void 0 ? defaultSetDropStyleFn : _ref$setDropStyleFn,
      drapClassName = _ref.drapClassName,
      _ref$drapStyle = _ref.drapStyle,
      drapStyle = _ref$drapStyle === void 0 ? {} : _ref$drapStyle,
      _ref$setDrapStyleFn = _ref.setDrapStyleFn,
      setDrapStyleFn = _ref$setDrapStyleFn === void 0 ? defaultSetDrapStyleFn : _ref$setDrapStyleFn,
      _ref$dataSource = _ref.dataSource,
      dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
      renderItem = _ref.renderItem,
      _ref$droppableId = _ref.droppableId,
      droppableId = _ref$droppableId === void 0 ? 'droppable' : _ref$droppableId,
      _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
      _ref$draggableId = _ref.draggableId,
      draggableId = _ref$draggableId === void 0 ? 'draggable' : _ref$draggableId;
  return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
    onDragEnd: onDragEnd
  }, /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Droppable, {
    droppableId: droppableId,
    direction: direction
  }, function (provided, snapshot) {
    return /*#__PURE__*/_react.default.createElement("div", Object.assign({
      ref: provided.innerRef
    }, provided.droppableProps, {
      className: dropClassName,
      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, setDropStyleFn(snapshot.isDraggingOver)), dropStyle)
    }), Array.isArray(dataSource) ? dataSource.map(function (item, index) {
      return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Draggable, {
        draggableId: "".concat(draggableId, "-").concat(item.id),
        key: (item === null || item === void 0 ? void 0 : item.id) || index,
        index: index,
        isDragDisabled: (item === null || item === void 0 ? void 0 : item.disabled) || false
      }, function (provided, snapshot) {
        return /*#__PURE__*/_react.default.createElement("div", Object.assign({
          ref: provided.innerRef
        }, provided.draggableProps, provided.dragHandleProps, {
          className: drapClassName,
          style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
            width: '100%',
            height: '100%',
            // some basic styles to make the items look a bit nicer
            userSelect: 'none'
          }, setDrapStyleFn(snapshot.isDragging, provided.draggableProps.style)), drapStyle)
        }), typeof renderItem === 'function' ? renderItem(item, index) : null);
      });
    }) : null);
  }));
};

var _default = DragList;
exports.default = _default;