preact-arco-design/es/_class/Draggable/item.js

Arco Design React UI Library.

var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
      r,
      ar = [],
      e;

  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
      ar.push(r.value);
    }
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }

  return ar;
};

import React, { useEffect, useRef, useState } from "preact/compat";
import cs from "../../_util/classNames";

function Item(props) {
  var _a;

  var prefixCls = props.prefixCls,
      style = props.style,
      children = props.children,
      direction = props.direction,
      disabled = props.disabled,
      droppable = props.droppable,
      _onDrop = props.onDrop,
      _onDragStart = props.onDragStart,
      _onDragEnd = props.onDragEnd,
      _onDragOver = props.onDragOver,
      _onDragLeave = props.onDragLeave;
  var refItem = useRef(null);
  var refDraggedTimer = useRef(null);

  var _b = __read(useState('none'), 2),
      dragStatus = _b[0],
      setDragStatus = _b[1];

  var _c = __read(useState(false), 2),
      dragOver = _c[0],
      setDragOver = _c[1];

  var _d = __read(useState(null), 2),
      dragPosition = _d[0],
      setDragPosition = _d[1];

  useEffect(function () {
    return function () {
      refDraggedTimer.current && clearTimeout(refDraggedTimer.current);
    };
  }, []);
  useEffect(function () {
    if (dragStatus === 'dragged') {
      refDraggedTimer.current = setTimeout(function () {
        return setDragStatus('none');
      }, 1000);
    }
  }, [dragStatus]);
  return React.createElement("li", {
    draggable: true,
    ref: refItem,
    style: style,
    className: cs("".concat(prefixCls, "-item"), (_a = {}, _a["".concat(prefixCls, "-item-").concat(dragStatus)] = dragStatus !== 'none', _a["".concat(prefixCls, "-item-gap-").concat(dragPosition)] = dragPosition, _a["".concat(prefixCls, "-item-disabled")] = disabled, _a["".concat(prefixCls, "-item-dragover")] = dragOver, _a)),
    onDragStart: function onDragStart(event) {
      event.stopPropagation();
      setDragStatus('dragging');

      try {
        // ie throw error
        // firefox-need-it
        event.dataTransfer.setData('text/plain', '');
      } catch (error) {}

      _onDragStart && _onDragStart(event);
    },
    onDragEnd: function onDragEnd(event) {
      event.stopPropagation();
      setDragOver(false);
      setDragStatus('dragged');
      _onDragEnd && _onDragEnd(event);
    },
    onDragOver: function onDragOver(event) {
      if (droppable) {
        event.stopPropagation();
        event.preventDefault();
        var rect = refItem.current.getBoundingClientRect();

        if (direction === 'vertical') {
          setDragPosition(event.pageY > window.pageYOffset + rect.top + rect.height / 2 ? 'bottom' : 'top');
        } else {
          setDragPosition(event.pageX > window.pageXOffset + rect.left + rect.width / 2 ? 'right' : 'left');
        }

        setDragOver(true);
        _onDragOver && _onDragOver(event);
      }
    },
    onDragLeave: function onDragLeave(event) {
      if (droppable) {
        event.stopPropagation();
        setDragOver(false);
        _onDragLeave && _onDragLeave(event);
      }
    },
    onDrop: function onDrop(event) {
      if (droppable) {
        event.stopPropagation();
        event.preventDefault();
        setDragOver(false);
        setDragPosition(null);
        setDragStatus('none');
        _onDrop && _onDrop(event, dragPosition);
      }
    }
  }, children);
}

Item.defaultProps = {
  droppable: true
};
export default Item;