import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import React__default, { useRef, useState, useMemo } from 'react';
import { TextField } from '../TextField/index.js';
import { Button } from '../Button/index.js';
import { DeepClone } from '@iam-com/lib';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/typeof-498dd2b1.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Label/index.js';
import '../Help/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '@iam-com/icons/Help';
import '@iam-com/icons/PreviewClose';
import '@iam-com/icons/PreviewOpen';
import '@iam-com/icons/CloseCircle';
import '../AutoTips/index.js';
import '../Loading/index.js';
import '@iam-com/icons/LoadingF';
import '../HelperText/index.js';
import '../_verture/useGlobalProps-1b846a65.js';
import '@para-ui/core/GlobalContext';
import '../_verture/index-fac03ce3.js';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';
import '@iam-com/icons/Forbid';
import '@iam-com/icons/Down';
import '../_verture/useFormatMessage-703f8b20.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-desktop {\n  width: 100%;\n  height: 100%;\n}\n.paraui-v3-desktop .desktop-title {\n  display: flex;\n  height: 40px;\n  line-height: 40px;\n  font-size: 17px;\n  margin: 15px 0;\n}\n.paraui-v3-desktop .desktop-title > .desktop-backlist {\n  float: left;\n  width: 110px;\n  margin: 5px;\n}\n.paraui-v3-desktop .desktop-title > div {\n  width: 100%;\n  text-align: center;\n}\n.paraui-v3-desktop .desktop-title > div > span {\n  cursor: pointer;\n  font-weight: bold;\n}\n.paraui-v3-desktop .desktop-box {\n  position: relative;\n  width: 100%;\n  height: calc(100% - 50px);\n}\n.paraui-v3-desktop .desktop-box .desktop-item {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: #efefef;\n  transition: top 0.5s, left 0.5s;\n  user-select: none;\n  box-shadow: 4px 4px 6px #dcdde3, -4px -4px 6px #f0f0f0;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #5b5b5b;\n}\n.paraui-v3-desktop .desktop-box .desktop-item .item-name {\n  text-align: center;\n  position: absolute;\n  bottom: 10px;\n  width: 100%;\n  font-size: 14px;\n}\n.paraui-v3-desktop .desktop-box .desktop-item .item-dir-name {\n  overflow: hidden;\n  font-size: 17px;\n  font-weight: bold;\n  padding: 25px 15px;\n  word-break: break-word;\n}\n.paraui-v3-desktop .desktop-box .desktop-item .item-body {\n  text-align: center;\n}\n.paraui-v3-desktop .desktop-box .desktop-item .item-body img {\n  height: 80px;\n  margin-top: 25px;\n  pointer-events: none;\n}\n.paraui-v3-desktop .desktop-box .item-disable {\n  box-shadow: none;\n  background-color: #dbdbdb;\n  cursor: not-allowed;\n}\n.paraui-v3-desktop .desktop-box .item-disable img {\n  opacity: 0.3;\n}\n.paraui-v3-desktop .desktop-box [drag-item=true] {\n  z-index: 2;\n  transition: none;\n}\n.paraui-v3-desktop .desktop-box [impact=true] {\n  background-color: #E9EFFD;\n}\n.paraui-v3-desktop .desktop-box [in-dir=true] {\n  display: none !important;\n}\n.paraui-v3-desktop .desktop-box .img-box {\n  display: inline-block;\n  width: 100%;\n  text-align: center;\n  margin-top: 10px;\n}\n.paraui-v3-desktop .desktop-box .img-box > img {\n  width: 100px;\n  height: 100px;\n  user-drag: none;\n}\n.paraui-v3-desktop .desktop-box .desktop-dir .img-box {\n  display: inline-block;\n}\n.paraui-v3-desktop .desktop-box .desktop-dir .img-box > img {\n  width: 40px;\n  height: 40px;\n  margin: 5px 15px;\n}\n.paraui-v3-desktop .menu-list {\n  position: absolute;\n  box-shadow: 4px 4px 6px #dcdde3;\n  background-color: #ffffff;\n  font-size: 14px;\n  border-radius: 4px;\n  z-index: 10;\n  display: none;\n  transition: background-color 0.2s;\n}\n.paraui-v3-desktop .menu-list .menu-item {\n  padding: 5px 15px;\n  cursor: pointer;\n}\n.paraui-v3-desktop .menu-list .menu-item:hover {\n  background-color: rgb(246, 246, 246);\n}";
styleInject(css_248z);

/** 默认图标 */
var Icon = 'data:image/png;base64, ';
var defaultMatrix = {
  width: 200,
  height: 150,
  gapX: 20,
  gapY: 20
};
/** 当前页面渲染map对象 */
var map = [];
var resizeTimeout;
var saveTimeout;
var dragData;
var impactBorder = 0.3; // 左右碰撞边界阈值 < 0.5，当0.5时则无中心碰撞 | impactBorder | 100% - impactBorder * 2 | impactBorder |
var dragLock = false;
var dirItem;
var contextMenuData;
var Desktop = function Desktop(props) {
  var desktopRef = useRef();
  var menuRef = useRef();
  var _props$sort = props.sort,
    sort = _props$sort === void 0 ? {} : _props$sort;
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    line = _useState2[0],
    setLine = _useState2[1]; // 每行个数
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    data = _useState4[0],
    setData = _useState4[1]; // 数据源
  var _useState5 = useState('_'),
    _useState6 = _slicedToArray(_useState5, 2),
    dir = _useState6[0],
    setDir = _useState6[1]; // _ 显示列表页, key显示文件夹
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    showInput = _useState8[0],
    setShowInput = _useState8[1]; // 显示文件夹名字输入框
  var _useState9 = useState(''),
    _useState10 = _slicedToArray(_useState9, 2),
    inputValue = _useState10[0],
    setInputValue = _useState10[1]; // 文件夹名字
  var sortJson = sort[dir] || {};
  React__default.useEffect(function () {
    document.addEventListener('resize', function () {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(function () {
        setLine(getLine());
      }, 200);
    });
    window.addEventListener('mousedown', function (e) {
      if (e.target.closest('.menu-list')) return;
      if (menuRef.current) menuRef.current.style.display = 'none';
    });
  }, []);
  React__default.useEffect(function () {
    setLine(getLine());
    setData(props.data);
  }, [props.data]);
  /**
   * 计算每行个数
   * @return number
   */
  var getLine = function getLine() {
    var desktop = desktopRef.current;
    if (desktop) {
      var rect = desktop.getBoundingClientRect();
      var itemLine = rect.width / (defaultMatrix.width + defaultMatrix.gapX) | 0;
      return itemLine;
    }
    return 1;
  };
  /**
   * 点击事件
   * @param e 元素
   */
  var onClick = function onClick(e) {
    if (dragLock) return;
    var key = e.currentTarget.getAttribute('data-key');
    var mapItem = getMapItem(key);
    if (mapItem.disable) return false;
    if (mapItem.type !== 'dir') {
      props.onClick && props.onClick(mapItem);
      return false;
    }
    dirItem = mapItem;
    setDir(mapItem.key);
  };
  /**
   * 右键菜单
   * @param e 元素
   */
  var onContextMenu = function onContextMenu(e) {
    if (dir === '_') return;
    e.preventDefault();
    if (dragLock) return;
    var key = e.currentTarget.getAttribute('data-key');
    contextMenuData = getMapItem(key);
    setPoint(menuRef.current, e.pageX, e.pageY);
    menuRef.current.style.display = 'block';
  };
  /**
   * 移出文件夹
   * @param e 元素
   */
  var outDir = function outDir(e) {
    if (dir === '_') return;
    var sortItem = getSortRootItem(dirItem.key);
    sortItem.children = sortItem.children.filter(function (key) {
      return key !== contextMenuData.key;
    });
    onSort();
    if (sortItem.children.length > 0) {
      var dom = getItemByKey(contextMenuData.key);
      if (dom) dom.style.display = 'none';
      var i = contextMenuData.index;
      var l = map.length - 1;
      for (; i < l; i++) {
        var item = map[i + 1];
        setNewPoint(item, i);
      }
      map.pop();
    } else {
      // 目录微空退出目录
      map.pop();
      delete sort[dirItem.key];
      backList();
    }
    menuRef.current.style.display = 'none';
  };
  /**
   * 返回列表
   */
  var backList = function backList() {
    dirItem = null;
    setDir('_');
  };
  /**
   * 应用节点
   * @param item 数据
   * @param index 下标
   * @param type 文件夹 / 单个组件
   * @return ReactNode
   */
  var getItem = function getItem(item, index, type) {
    map[index] = getItemData(item, index, type);
    item = map[index];
    var style = {
      left: map[index].point.x + 'px',
      top: map[index].point.y + 'px',
      width: defaultMatrix.width,
      height: defaultMatrix.height
    };
    return jsx("div", Object.assign({
      className: "desktop-item".concat(item.type === 'dir' ? ' desktop-dir' : '').concat(item.disable ? ' item-disable' : ''),
      onContextMenu: onContextMenu,
      onClick: onClick,
      style: style,
      "data-key": item.key,
      "data-index": index
    }, {
      children: type === 'dir' ? jsx("div", Object.assign({
        className: 'item-dir-name'
      }, {
        children: item.displayName
      })) : jsxs(Fragment, {
        children: [jsx("div", Object.assign({
          className: 'item-body'
        }, {
          children: jsx("img", {
            src: item.icon || Icon
          })
        })), jsx("div", Object.assign({
          className: 'item-name'
        }, {
          children: item.displayName
        }))]
      })
    }), dir + item.key + index + line);
  };
  /**
   * 节点数据
   * @param item 当前数据
   * @param index 下标
   * @param type 文件夹 / 单个组件
   */
  var getItemData = function getItemData(item, index, type) {
    return {
      index: index,
      data: item,
      key: item.key,
      icon: item.icon,
      disable: item.disable || false,
      type: type || 'item',
      displayName: item.displayName || item.name,
      point: getPoint(index),
      children: item.children || []
    };
  };
  /**
   * 获取位置大小
   * @param index 下标
   */
  var getPoint = function getPoint(index) {
    var w = defaultMatrix.width + defaultMatrix.gapX;
    var h = defaultMatrix.height + defaultMatrix.gapY;
    var indexX = index % line; // X行
    var indexY = index / line | 0; // Y行
    return {
      x: indexX * w,
      y: indexY * h,
      width: defaultMatrix.width,
      height: defaultMatrix.height
    };
  };
  var getAppMap = function getAppMap() {
    var appmap = {};
    props.data.forEach(function (item) {
      if (dir === '_') {
        appmap[item.key] = item;
      } else {
        if (dirItem.children.indexOf(item.key) !== -1) appmap[item.key] = item;
      }
    });
    return appmap;
  };
  /**
   * 渲染应用列表
   * @return ReactNode
   */
  var getList = React__default.useMemo(function () {
    if (line === 0) return null;
    map = [];
    // 存在排序数据
    if (sortJson.length > 0) {
      //dataMap
      var appmap = getAppMap();
      var index = 0;
      var list1 = sortJson.map(function (sortItem) {
        var key = sortItem.key,
          type = sortItem.type;
        if (!appmap[key] && type !== 'dir') return;
        var item = Object.assign({}, appmap[key]);
        delete appmap[key];
        var app;
        if (type === 'dir') {
          var isNull = true;
          sortItem.children.forEach(function (child) {
            if (appmap[child]) {
              isNull = false;
              delete appmap[child];
            }
          });
          if (isNull) return null; // 文件夹为空则不渲染
          app = getItem(sortItem, index, type);
        } else app = getItem(item, index);
        index++;
        return app;
      });
      //if (dir === '_') {
      // 是否存在排序列表之外的应用
      var newapp = Object.keys(appmap);
      if (newapp.length > 0) {
        var list2 = newapp.map(function (key) {
          var item = appmap[key];
          return getItem(item, map.length);
        });
        list1 = [].concat(_toConsumableArray(list1), _toConsumableArray(list2));
      }
      //}
      return list1;
    }
    // 文件夹内部渲染
    if (dir !== '_' && dirItem) {
      var _appmap = getAppMap();
      var _index = 0;
      return dirItem.children.map(function (key) {
        if (!_appmap[key]) return null; // 过滤已经不存在的应用
        var app = getItem(_appmap[key], _index);
        _index++;
        return app;
      });
    }
    // 默认渲染
    return props.data.map(function (item, index) {
      return getItem(item, index);
    });
  }, [data, line, dir]);
  /**
   * mouseDown
   * @param e 元素
   */
  var onMouseDown = function onMouseDown(e) {
    if (dragLock) return;
    //reset();
    var target = e.target.closest('.desktop-item');
    if (!target) return;
    var index = target.getAttribute('data-index');
    dragData = Object.assign(Object.assign({}, map[index]), {
      target: target,
      start: {
        x: e.pageX,
        y: e.pageY
      }
    });
    target.setAttribute('drag-item', 'true');
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  };
  /**
   * 拖拽目标
   * @param e {MouseEvent} 元素
   */
  var onMouseMove = function onMouseMove(e) {
    if (Math.abs(dragData.start.x - e.pageX) > 3) dragLock = true;
    var x = dragData.point.x + (e.pageX - dragData.start.x);
    var y = dragData.point.y + (e.pageY - dragData.start.y) + desktopRef.current.scrollTop;
    setPoint(dragData.target, x, y);
    // 计算光标碰撞
    //const list = Object.keys(map);
    var dragRect = {
      x: x,
      y: y,
      w: dragData.point.x + dragData.point.width,
      h: dragData.point.y + dragData.point.height,
      width: dragData.point.width,
      height: dragData.point.height
    };
    var dragCentre = {
      x: dragRect.x + dragRect.width / 2,
      y: dragRect.y + dragRect.height / 2
    };
    for (var i = 0, l = map.length; i < l; i++) {
      var item = map[i];
      if (!item || String(item.key) === String(dragData.key)) continue;
      if (item.parent && dir !== item.parent) continue;
      /*
      * x,y_____
      * |       |
      * |_____w,h
      */
      var rect = {
        x: item.point.x,
        y: item.point.y,
        w: item.point.x + item.point.width,
        h: item.point.y + item.point.height
      };
      var border = impactBorder;
      // 中心点矩阵碰撞检测
      if (checkPointRange(dragCentre, rect)) {
        var impactDom = getItemByKey(item.key);
        if (!impactDom) continue;
        reset('impact');
        impactDom.setAttribute('impact', 'true');
        dragData.impact = {
          data: item,
          rect: rect
        };
        dragData.impact = {
          data: item,
          rect: rect
        };
        if (dragData.data.type === 'dir' || dir !== '_') {
          border = 0.5;
        }
        // 计算碰撞位置，左，中，右
        var _dragCentre = {
          x: dragRect.x + dragRect.width / 2,
          y: dragRect.y + dragRect.height / 2
        };
        var width = item.point.width;
        if (_dragCentre.x < rect.x + width * border) {
          dragData.position = 'left';
          setPoint(impactDom, rect.x + 50);
        } else if (_dragCentre.x > rect.w - width * border) {
          dragData.position = 'right';
          setPoint(impactDom, rect.x - 50);
        } else {
          dragData.position = 'centre';
          setPoint(impactDom, rect.x);
        }
        break;
      } else reset('impact');
    }
  };
  /**
   * 校验位置
   * @param point {x: number, y: number}
   * @param rect {x: number, y: number, w: number, h: number}
   */
  var checkPointRange = function checkPointRange(point, rect) {
    if (point.x > rect.x && point.y > rect.y && point.x < rect.w && point.y < rect.h) return point;
  };
  /**
   * 拖拽目标
   * @param e {MouseEvent} 元素
   */
  var onMouseUp = function onMouseUp(e) {
    window.removeEventListener('mousemove', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
    setTimeout(function () {
      dragLock = false;
      //ckeckPoint();
    }, 100);
    if (dragData.impact) {
      var dragMapData = Object.assign({}, map[dragData.index]);
      var impact = dragData.impact.data;
      var impactDom = getItemByKey(impact.key);
      if (impact.index - dragData.index === -1 && dragData.position === 'right' ||
      // 相邻右侧碰撞
      impact.index - dragData.index === 1 && dragData.position === 'left' ||
      // 相邻左侧碰撞
      dragData.type === 'dir' && dragData.position === 'centre') {
        // 不做任何处理复位拖拽
        setPoint(dragData.target, dragData.point.x, dragData.point.y);
        reset();
        return;
      }
      var index = impact.index;
      var t;
      var l = dragData.index;
      var i = index;
      if (index > dragData.index) {
        // 碰撞目标在拖拽目标右侧
        t = 'R';
        //l++;
        if (dragData.position === 'left') {
          i--;
          // 碰撞目标右侧，无需移位
          setPoint(impactDom, impact.point.x, impact.point.y);
          index--;
        }
      } else {
        // 碰撞目标在拖拽目标左侧
        t = 'L';
        //l--;
        if (dragData.position === 'right') {
          i++;
          // 碰撞目标右侧，无需移位
          setPoint(impactDom, impact.point.x, impact.point.y);
          index++;
        }
      }
      Object.assign({}, map[index]);
      // 顺延坐标
      var temp;
      if (dragData.position === 'centre') {
        // 文件夹处理
        i = dragData.index;
        l = map.length - 1;
        for (; i < l; i++) {
          var item = map[i + 1];
          setNewPoint(item, i);
        }
        map.pop();
      } else {
        temp = Object.assign({}, map[l]); // 备份移动节点
        if (t === 'R') {
          for (; l < i; l++) {
            var _item = map[l + 1];
            setNewPoint(_item, l);
          }
        }
        if (t === 'L') {
          for (; l > i; l--) {
            var _item2 = map[l - 1];
            setNewPoint(_item2, l);
          }
        }
        setNewPoint(temp, i);
      }
      // 拖拽对象坐标设置
      if (dragData.position === 'centre') {
        // 文件夹处理
        if (impact.type === 'dir') addDir(impact, dragMapData);else newDir(impact, dragMapData, t);
      }
      reset('end');
      return;
    } else setPoint(dragData.target, dragData.point.x, dragData.point.y);
    reset();
  };
  /**
   * 新建文件夹
   * @param item {mapProps} 当前数据
   * @param dragMapData 碰撞对象
   * @param t 方向
   */
  var newDir = function newDir(item, dragMapData, t) {
    if (t === 'R') item.index--;
    var key = 'dir_' + item.key + (Math.random() * 1000000 | 0);
    map[item.index] = Object.assign(Object.assign({}, item), {
      key: key,
      point: getPoint(item.index),
      type: 'dir',
      displayName: '新建文件夹',
      children: [item.key, dragMapData.key]
    });
    var dirDom = getItemByKey(item.key);
    dirDom === null || dirDom === void 0 ? void 0 : dirDom.setAttribute('data-key', key);
    dirDom === null || dirDom === void 0 ? void 0 : dirDom.classList.add('desktop-dir');
    dirDom.innerHTML = "<div class=\"item-dir-name\">".concat(map[item.index].displayName, "</div>");
    var dragDataDom = getItemByKey(dragData.key);
    dragDataDom === null || dragDataDom === void 0 ? void 0 : dragDataDom.setAttribute('in-dir', 'true');
  };
  /**
   * 添加child
   * @param item {mapProps} 当前数据
   * @param dragMapData 碰撞对象
   */
  var addDir = function addDir(item, dragMapData) {
    var mapItem = getMapItem(item.key);
    if (!mapItem) return;
    mapItem.children.push(dragMapData.key);
    var dragDataDom = getItemByKey(dragData.key);
    dragDataDom === null || dragDataDom === void 0 ? void 0 : dragDataDom.setAttribute('in-dir', 'true');
  };
  /**
   * 获取数据
   * @param key 键值
   */
  var getMapItem = function getMapItem(key) {
    if (!key) return null;
    for (var i = 0, l = map.length; i < l; i++) {
      if (map[i].key === key) return map[i];
    }
    return null;
  };
  /**
   * 设置位置
   * @param item 当前数据
   * @param next 下一个节点索引
   * @param point 位置
   */
  var setNewPoint = function setNewPoint(item, next, point) {
    if (!item) return;
    if (!point) point = getPoint(next);
    var dom = getItemByKey(item.key);
    if (!dom) return;
    setPoint(dom, point === null || point === void 0 ? void 0 : point.x, point === null || point === void 0 ? void 0 : point.y);
    // 重新创建索引
    map[next] = Object.assign({}, item);
    map[next].index = next;
    map[next].point = point;
    dom === null || dom === void 0 ? void 0 : dom.setAttribute('data-index', next);
  };
  /**
   * 复位
   */
  var reset = function reset(type) {
    var _a, _b, _c;
    switch (type) {
      case "impact":
        var impactDom = document.querySelector('[impact="true"]');
        if (!impactDom) return;
        if (dragData && dragData.impact) {
          setPoint(impactDom, dragData.impact.rect.x, dragData.impact.rect.y);
          delete dragData.impact;
        }
        impactDom === null || impactDom === void 0 ? void 0 : impactDom.removeAttribute('impact');
        break;
      case "end":
        dragData = null;
        (_a = document.querySelector('[impact="true"]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('impact');
        (_b = document.querySelector('[drag-item="true"]')) === null || _b === void 0 ? void 0 : _b.removeAttribute('drag-item');
        clearTimeout(saveTimeout);
        onSort();
        break;
      default:
        reset('impact');
        dragData = null;
        (_c = document.querySelector('[drag-item="true"]')) === null || _c === void 0 ? void 0 : _c.removeAttribute('drag-item');
        window.removeEventListener('mousemove', onMouseMove);
        window.removeEventListener('mouseup', onMouseUp);
    }
  };
  /**
   * 设置dom坐标
   * @param dom {HTMLElement | null | undefined} 元素
   * @param x 左
   * @param y 上
   */
  var setPoint = function setPoint(dom, x, y) {
    if (!dom) return;
    if (x !== undefined || x !== null) dom.style.left = x + 'px';
    if (y !== undefined || y !== null) dom.style.top = y + 'px';
  };
  /** 排序 */
  var onSort = function onSort() {
    if (!props.onSort) return;
    var data = [];
    var index = 0;
    map.forEach(function (item) {
      data[index] = {
        key: item.key,
        type: item.type
      };
      if (item.displayName !== undefined) data[index].displayName = item.displayName;
      if (item.children.length > 0) data[index].children = item.children;
      if (item.parent !== undefined) data[index].parent = item.parent;
      index++;
    });
    var sortData = DeepClone(sort);
    if (data.length > 0) sortData[dir] = data;
    props.onSort && props.onSort(sortData);
  };
  /**
   * 点击文件夹名字
   */
  var clickDirName = function clickDirName() {
    setShowInput(true);
    setInputValue(dirItem.displayName || '文件夹');
  };
  /**
   * 失去焦点设置文件夹名字
   */
  var blurInput = function blurInput() {
    dirItem.displayName = inputValue;
    setShowInput(false);
    var sortItem = getSortRootItem(dirItem.key);
    sortItem.displayName = inputValue;
    onSort();
  };
  /**
   * 通过key查询排序对象所在节点
   */
  var getSortRootItem = function getSortRootItem(key) {
    var sortList = sort['_'] || [];
    for (var i = 0, l = sortList.length; i < l; i++) {
      var sortItem = sortList[i];
      if (sortItem.key === key) return sortItem;
    }
  };
  /**
   * 改变输入框
   */
  var changeInput = function changeInput(event) {
    setInputValue(event.target.value);
  };
  /**
   * 文件夹头部
   */
  var DirTitleMemo = useMemo(function () {
    return dir !== '_' && jsxs("div", Object.assign({
      className: "desktop-title"
    }, {
      children: [jsx(Button, Object.assign({
        className: "desktop-backlist",
        onClick: backList
      }, {
        children: "\u8FD4\u56DE\u4E0A\u7EA7"
      })), jsx("div", {
        children: showInput ? jsx(TextField, {
          value: inputValue,
          autoFocus: true,
          onChange: changeInput,
          onBlur: blurInput
        }) : jsx("span", Object.assign({
          onClick: clickDirName
        }, {
          children: dirItem.displayName
        }))
      })]
    }));
  }, [dir, showInput, inputValue]);
  /**
   * 拖拽内容
   */
  var DragMemo = useMemo(function () {
    return jsx("div", Object.assign({
      ref: desktopRef,
      className: 'desktop-box',
      onMouseDown: onMouseDown
    }, {
      children: getList
    }));
  }, [line, data, dir, sort]);
  /**
   * 处理class
   * @return {string}
   */
  var handClass = function handClass() {
    var str = $prefixCls + '-desktop';
    if (props.className) str += ' ' + props.className;
    return str;
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: props.style
  }, {
    children: [DirTitleMemo, DragMemo, jsx("div", Object.assign({
      ref: menuRef,
      className: 'menu-list'
    }, {
      children: jsx("div", Object.assign({
        className: 'menu-item',
        onClick: outDir
      }, {
        children: "\u79FB\u51FA\u6587\u4EF6\u5939"
      }))
    }))]
  }));
};
var getItemByKey = function getItemByKey(key) {
  return document.querySelector("[data-key=\"".concat(key, "\"]"));
};

export { Desktop, Desktop as default };
