preact-arco-design/es/Transfer/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";
import IconHover from "../_class/icon-hover";
import Checkbox from "../Checkbox";
import IconClose from "../../icon/react-icon/IconClose";
import IconDragDotVertical from "../../icon/react-icon/IconDragDotVertical";

function TransferItem(props) {
  var _a;

  var className = props.className,
      prefixCls = props.prefixCls,
      render = props.render,
      item = props.item,
      selectedKeys = props.selectedKeys,
      disabled = props.disabled,
      draggable = props.draggable,
      droppable = props.droppable,
      allowClear = props.allowClear,
      onItemSelect = props.onItemSelect,
      onItemRemove = props.onItemRemove,
      _onDragStart = props.onDragStart,
      _onDragEnd = props.onDragEnd,
      _onDragLeave = props.onDragLeave,
      _onDragOver = props.onDragOver,
      _onDrop = props.onDrop;
  var baseClassName = "".concat(prefixCls, "-view-item");
  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(0), 2),
      dragPosition = _d[0],
      setDragPosition = _d[1];

  var _disabled = disabled || item.disabled;

  var checked = selectedKeys.indexOf(item.key) > -1;
  var itemContent = render ? render(item) : item.value;
  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", {
    key: item.key,
    ref: refItem,
    className: cs(baseClassName, (_a = {}, _a["".concat(baseClassName, "-disabled")] = _disabled, _a["".concat(baseClassName, "-draggable")] = draggable, _a["".concat(baseClassName, "-gap-top")] = dragOver && dragPosition < 0, _a["".concat(baseClassName, "-gap-bottom")] = dragOver && dragPosition > 0, _a["".concat(baseClassName, "-").concat(dragStatus)] = dragStatus !== 'none', _a), className),
    draggable: draggable,
    onDragStart: function onDragStart(e) {
      e.stopPropagation();
      setDragStatus('dragging');
      _onDragStart && _onDragStart(e, item);

      try {
        // ie throw error
        // firefox-need-it
        e.dataTransfer.setData('text/plain', '');
      } catch (error) {// empty
      }
    },
    onDragEnd: function onDragEnd(e) {
      e.stopPropagation();
      setDragOver(false);
      setDragStatus('dragged');
      _onDragEnd && _onDragEnd(e, item);
    },
    onDragOver: function onDragOver(e) {
      if (droppable) {
        e.stopPropagation();
        e.preventDefault();
        var rect = refItem.current.getBoundingClientRect();
        var threshold = window.pageYOffset + rect.top + rect.height / 2;
        var position = e.pageY > threshold ? 1 : -1;
        setDragOver(true);
        setDragPosition(position);
        _onDragOver && _onDragOver(e, item);
      }
    },
    onDragLeave: function onDragLeave(e) {
      if (droppable) {
        e.stopPropagation();
        setDragOver(false);
        _onDragLeave && _onDragLeave(e, item);
      }
    },
    onDrop: function onDrop(e) {
      if (droppable) {
        e.stopPropagation();
        e.preventDefault();
        setDragOver(false);
        setDragPosition(0);
        setDragStatus('none');
        _onDrop && _onDrop(e, item, dragPosition);
      }
    }
  }, draggable ? React.createElement(IconHover, {
    className: "".concat(baseClassName, "-icon-drag")
  }, React.createElement(IconDragDotVertical, null)) : null, allowClear ? React.createElement(React.Fragment, null, React.createElement("span", {
    className: "".concat(baseClassName, "-content")
  }, itemContent), !_disabled && React.createElement(IconHover, {
    className: "".concat(baseClassName, "-icon-remove"),
    onClick: function onClick() {
      return onItemRemove(item.key);
    }
  }, React.createElement(IconClose, null))) : React.createElement(Checkbox, {
    className: "".concat(baseClassName, "-content"),
    checked: checked,
    disabled: _disabled,
    onChange: function onChange(checked) {
      return onItemSelect(item.key, checked);
    }
  }, itemContent));
}

export default TransferItem;