@gingkoo/pandora-explorer 0.0.1-alpha.33 → 0.0.1-alpha.35

package/lib/es/components/Dropdown/index.d.ts

@@ -15,6 +15,7 @@ interface DropdownProps {
         y?: number;
     };
     style?: any;
+    onContextMenu?: any;
 }
 export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/es/index.js

@@ -1,10 +1,10 @@
 /**
- * @gingkoo/pandora-explorer v0.0.1-alpha.33
+ * @gingkoo/pandora-explorer v0.0.1-alpha.35
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx$1 from 'classnames';
 import * as React from 'react';
-import React__default, { createContext, useRef, useState, useImperativeHandle, useEffect, useMemo, useLayoutEffect, useContext, createElement } from 'react';
+import React__default, { createContext, useRef, useState, useImperativeHandle, useEffect, useMemo, useLayoutEffect, useContext, createElement, forwardRef } from 'react';
 import createEmotion from '@emotion/css/create-instance';
 import { cx as cx$2 } from '@emotion/css';
 import { createRoot } from 'react-dom/client';
@@ -1262,7 +1262,8 @@ function Dropdown(props) {
     destroyPopupOnHide = false,
     capture,
     position,
-    style
+    style,
+    onContextMenu
   } = props;
   const [expand, setExpand] = useState(false);
   const [newDiv, setNewDiv] = useState(null);
@@ -1520,7 +1521,7 @@ function Dropdown(props) {
     },
     onContextMenu: e => {
       e.preventDefault();
-      e.stopPropagation();
+      onContextMenu?.(e);
       if (trigger == 'contextMenu') {
         let x = 0;
         let y = 0;
@@ -1834,6 +1835,14 @@ function Slider(props) {
   const ref = useRef(null);
   const [isdarg, setDarg] = useState(false);
   const [size, setSize] = useState(null);
+  useEffect(() => {
+    document.addEventListener('mousemove', handleBodyMousemove);
+    document.addEventListener('mouseup', handleBodyMouseup);
+    return () => {
+      document.removeEventListener('mousemove', handleBodyMousemove);
+      document.removeEventListener('mouseup', handleBodyMouseup);
+    };
+  }, [isdarg, ref.current]);
   useEffect(() => {
     if (!size) return;
     let d_value = max - min;
@@ -1845,22 +1854,25 @@ function Slider(props) {
     let data = value - min;
     setSize(data / d_value * 100);
   }, [value]);
+  function handleBodyMousemove(e) {
+    if (!isdarg) return;
+    if (!ref.current) return;
+    e.preventDefault();
+    let dom = ref.current.getBoundingClientRect();
+    let cur = dom.top + 15;
+    let num = e.clientY - cur;
+    num > 100 ? num = 100 : null;
+    num < 0 ? num = 0 : null;
+    setSize(num);
+  }
+  function handleBodyMouseup(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setDarg(false);
+  }
   return jsx("div", {
     className: '_slider',
     ref: ref,
-    onMouseOut: () => {
-      setDarg(false);
-    },
-    onMouseMove: e => {
-      if (!isdarg) return;
-      if (!ref.current) return;
-      let dom = ref.current.getBoundingClientRect();
-      let cur = dom.top + 15;
-      let num = e.clientY - cur;
-      num > 100 ? num = 100 : null;
-      num < 0 ? num = 0 : null;
-      setSize(num);
-    },
     children: jsx("div", {
       className: '_slider-link',
       onClick: e => {
@@ -1876,11 +1888,8 @@ function Slider(props) {
           top: size + 'px'
         },
         className: '_slider-drop',
-        onMouseDown: () => {
+        onMouseDown: e => {
           setDarg(true);
-        },
-        onMouseUp: () => {
-          setDarg(false);
         }
       })
     })
@@ -1890,7 +1899,7 @@ function Slider(props) {
 var css_248z$7 = ".explorer-menu {\n  height: 100%;\n}\n";
 styleInject(css_248z$7);
 
-var css_248z$6 = ".explorer-tree {\n  width: 100%;\n  height: 100%;\n}\n.explorer-tree-switch {\n  height: 31px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: top !important;\n  color: #aaa;\n  border-radius: 2px;\n}\n.explorer-tree-switch:hover {\n  color: #1890ff;\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.explorer-tree-switch.open {\n  color: #1890ff;\n}\n.explorer-tree-switch.open > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-switch.loading {\n  background: transparent;\n  animation: rotate 1s linear infinite;\n}\n.explorer-tree-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  margin: 6px 0px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 5px;\n  font-style: normal;\n  pointer-events: none;\n  vertical-align: top;\n}\n.explorer-tree-node {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-node .node-title {\n  flex: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-node .node-menu {\n  display: none;\n  flex-shrink: 0;\n  width: 30px;\n  justify-content: center;\n  align-items: center;\n}\n.explorer-tree-node .node-menu .node-menu-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 14px;\n  height: 14px;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  cursor: pointer;\n  z-index: 50;\n  background: #fff;\n  color: #ccc;\n  font-size: 7px;\n  transition: 0.3s;\n}\n.explorer-tree-node .node-menu .node-menu-icon > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-node .node-menu .node-menu-icon:hover {\n  border: 1px solid #1890ff;\n  color: #1890ff;\n}\n.explorer-tree-node .node-input {\n  display: inline-block;\n  width: 100%;\n  height: 24px;\n  outline: 0;\n  border: 1px solid #eee;\n  border-radius: 3px;\n  transition: 0.3s;\n  padding: 0 5px;\n}\n.explorer-tree-node .node-input:hover {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node .node-input:focus {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node:hover .node-menu {\n  display: flex;\n}\n.explorer-tree-row {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-row .row-item {\n  display: flex;\n  padding: 0 10px;\n  flex: 1 0 0;\n  user-select: none;\n}\n.explorer-tree-row .row-item .row-item-content {\n  flex: 1 0 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-row .row-item .row-item-content > input {\n  height: 24px;\n  outline: none;\n  width: 100%;\n  outline: 0;\n  border: 0;\n}\n.explorer-tree-row .row-item-check {\n  display: flex;\n  width: 19px;\n  align-items: center;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n.explorer-tree-row .row-item-check .btn-check {\n  display: inline-block;\n  height: 19px;\n  width: 19px;\n  flex-shrink: 0;\n  z-index: 11;\n  font-size: 20px;\n  text-align: center;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.05);\n  color: #fff;\n  line-height: 0;\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity 0.3s;\n  margin: 2px;\n}\n.explorer-tree-row .row-item-check .btn-check > svg {\n  position: relative;\n  width: 23px;\n  height: 23px;\n  left: -2px;\n  top: -2px;\n}\n.explorer-tree-row .row-item-check.active .btn-check {\n  opacity: 1;\n  background: #3b8cff;\n}\n.explorer-tree.table .tree-scroll-x {\n  width: 100%;\n  overflow: hidden;\n  overflow-x: auto;\n}\n.explorer-tree.table .tree-scroll-x::-webkit-scrollbar {\n  display: none;\n}\n.explorer-tree.table .tree-scroll {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 10;\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree {\n  height: calc(100% - 26px);\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree-list {\n  height: 100%;\n}\n.explorer-tree.table .rc-tree-checkbox {\n  display: none !important;\n}\n.explorer-tree.table .rc-tree-treenode {\n  border-radius: 2px;\n  width: fit-content;\n  opacity: 0.8;\n  z-index: 100;\n  pointer-events: all;\n}\n.explorer-tree.table .rc-tree-treenode:nth-child(odd) {\n  background: #4664780d;\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  padding: 8px 0 0 8px;\n}\n.explorer-tree.table .rc-tree-treenode-leaf-last:last-child {\n  height: 200px;\n  width: 1px;\n}\n.explorer-tree.table .rc-tree-treenode-checkbox-checked {\n  background: #cce8ff !important;\n  border: 1px solid #99d1ff;\n}\n.explorer-tree .rc-tree-iconEle {\n  height: 31px !important;\n  vertical-align: top !important;\n  width: auto !important;\n}\n.explorer-tree .rc-tree-treenode {\n  position: relative;\n  height: 31px;\n  line-height: 31px;\n  border: 1px solid transparent;\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-content-wrapper {\n  height: 31px !important;\n  display: flex !important;\n  flex: 1;\n  margin-left: calc(24px - 20px);\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-selected {\n  background-color: transparent;\n  box-shadow: none;\n  opacity: 1;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected {\n  background-color: #cce8ff !important;\n  border: 1px solid #1890ff;\n  opacity: 0.8;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected .node-menu {\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode:hover {\n  background: #e5f3ff !important;\n  box-shadow: 0 0 0 1px transparent;\n}\n.explorer-tree .rc-tree-treenode.hover {\n  background: #e5f3ff !important;\n}\n.explorer-tree .rc-tree-switcher {\n  flex-shrink: 0;\n  width: 20px !important;\n  height: 31px !important;\n  vertical-align: top !important;\n  background-image: none !important;\n}\n.explorer-tree .rc-tree-title {\n  display: inline-block;\n  height: 31px;\n  width: 100%;\n}\n.explorer-tree.showLine .rc-tree-indent {\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-indent-unit {\n  width: 20px;\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  width: 8px;\n  top: calc(31px / 2);\n  left: 10px;\n  height: 1px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  top: 0;\n  height: calc(31px / 2);\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::before {\n  display: none;\n  content: '';\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.explorer-checks .rc-tree-treenode:hover .row-item-check .btn-check {\n  opacity: 1;\n}\n.explorer-tree .rc-tree-list-scrollbar-thumb {\n  background: #bbb !important;\n}\n.explorer-tree .rc-tree-list-scrollbar {\n  width: 5px !important;\n}\n.explorer-tree .node-motion {\n  transition: all 0.3s;\n  overflow-y: hidden;\n}\n.explorer-tree .rc-tree-child-tree {\n  display: block;\n}\n.explorer-table-header {\n  display: flex;\n  width: fit-content;\n  min-width: 100%;\n  height: 25px;\n  line-height: 25px;\n  color: #448;\n  border-bottom: 1px solid #e3e3e3;\n  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.05);\n  background: #fff;\n}\n.explorer-table-header .item {\n  padding: 0 10px 0 0;\n  flex: 1 0 0;\n  margin-left: -10px;\n  border-right: 1px solid #eee;\n  user-select: none;\n  min-width: 80px;\n}\n.explorer-table-header .item:first-child {\n  padding-left: 20px;\n}\n.explorer-table-header .resize {\n  position: relative;\n  flex: 0 0 20px;\n  width: 20px;\n  z-index: 10;\n  cursor: col-resize;\n  left: -10px;\n  transition: background 0.2s;\n}\n.explorer-table-header .resize::before {\n  content: '';\n  position: fixed;\n  width: 1px;\n  height: 2000px;\n  z-index: 10;\n  margin-left: 10px;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.2s;\n}\n.explorer-table-header .resize:hover {\n  background: #1890ff30;\n}\n.explorer-table-header .resize.resize-focus {\n  z-index: 9999;\n}\n.explorer-table-header .resize.resize-focus:before {\n  opacity: 1;\n  background: #1890ff;\n  visibility: visible;\n}\n.explorer-table-header .resize:last-child {\n  flex: 0 0 10px;\n  width: 10px;\n}\n.explorer-table-header.item-resize {\n  z-index: 10;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z$6 = ".explorer-tree {\n  width: 100%;\n  height: 100%;\n}\n.explorer-tree-switch {\n  height: 31px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: top !important;\n  color: #aaa;\n  border-radius: 2px;\n}\n.explorer-tree-switch:hover {\n  color: #1890ff;\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.explorer-tree-switch.open {\n  color: #1890ff;\n}\n.explorer-tree-switch.open > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-switch.loading {\n  background: transparent;\n  animation: rotate 1s linear infinite;\n}\n.explorer-tree-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  margin: 6px 0px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 5px;\n  font-style: normal;\n  pointer-events: none;\n  vertical-align: top;\n}\n.explorer-tree-node {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-node .node-title {\n  flex: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-node .node-menu {\n  display: none;\n  flex-shrink: 0;\n  width: 30px;\n  justify-content: center;\n  align-items: center;\n}\n.explorer-tree-node .node-menu .node-menu-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 14px;\n  height: 14px;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  cursor: pointer;\n  z-index: 50;\n  background: #fff;\n  color: #ccc;\n  font-size: 7px;\n  transition: 0.3s;\n}\n.explorer-tree-node .node-menu .node-menu-icon > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-node .node-menu .node-menu-icon:hover {\n  border: 1px solid #1890ff;\n  color: #1890ff;\n}\n.explorer-tree-node .node-input {\n  display: inline-block;\n  width: 100%;\n  height: 24px;\n  outline: 0;\n  border: 1px solid #eee;\n  border-radius: 3px;\n  transition: 0.3s;\n  padding: 0 5px;\n}\n.explorer-tree-node .node-input:hover {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node .node-input:focus {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node:hover .node-menu {\n  display: flex;\n}\n.explorer-tree-row {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-row .row-item {\n  display: flex;\n  padding: 0 10px;\n  flex: 1 0 0;\n  user-select: none;\n}\n.explorer-tree-row .row-item .row-item-content {\n  flex: 1 0 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-row .row-item .row-item-content > input {\n  height: 24px;\n  outline: none;\n  width: 100%;\n  outline: 0;\n  border: 0;\n}\n.explorer-tree-row .row-item-check {\n  display: flex;\n  width: 19px;\n  align-items: center;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n.explorer-tree-row .row-item-check .btn-check {\n  display: inline-block;\n  height: 19px;\n  width: 19px;\n  flex-shrink: 0;\n  z-index: 11;\n  font-size: 20px;\n  text-align: center;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.05);\n  color: #fff;\n  line-height: 0;\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity 0.3s;\n  margin: 2px;\n}\n.explorer-tree-row .row-item-check .btn-check > svg {\n  position: relative;\n  width: 23px;\n  height: 23px;\n  left: -2px;\n  top: -2px;\n}\n.explorer-tree-row .row-item-check.active .btn-check {\n  opacity: 1;\n  background: #3b8cff;\n}\n.explorer-tree.table .tree-scroll-x {\n  width: 100%;\n  overflow: hidden;\n  overflow-x: auto;\n}\n.explorer-tree.table .tree-scroll-x::-webkit-scrollbar {\n  display: none;\n}\n.explorer-tree.table .tree-scroll {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 10;\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree {\n  height: calc(100% - 26px);\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree-list {\n  height: 100%;\n}\n.explorer-tree.table .rc-tree-checkbox {\n  display: none !important;\n}\n.explorer-tree.table .rc-tree-treenode {\n  border-radius: 2px;\n  width: fit-content;\n  opacity: 0.8;\n  z-index: 100;\n  pointer-events: all;\n}\n.explorer-tree.table .rc-tree-treenode.rc-tree-treenode-selected {\n  background: #4581a60d !important;\n}\n.explorer-tree.table .rc-tree-treenode:nth-child(odd) {\n  background: #4664780d;\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  padding: 8px 0 0 8px;\n}\n.explorer-tree.table .rc-tree-treenode-leaf-last:last-child {\n  height: 200px;\n  width: 1px;\n}\n.explorer-tree.table .rc-tree-treenode-checkbox-checked {\n  background: #cce8ff !important;\n  border: 1px solid #99d1ff;\n}\n.explorer-tree .rc-tree-iconEle {\n  height: 31px !important;\n  vertical-align: top !important;\n  width: auto !important;\n}\n.explorer-tree .rc-tree-treenode {\n  position: relative;\n  height: 31px;\n  line-height: 31px;\n  border: 1px solid transparent;\n  user-select: none;\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-content-wrapper {\n  height: 31px !important;\n  display: flex !important;\n  flex: 1;\n  margin-left: calc(24px - 20px);\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-selected {\n  background-color: transparent;\n  box-shadow: none;\n  opacity: 1;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected {\n  background-color: #cce8ff !important;\n  border: 1px solid #1890ff;\n  opacity: 0.8;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected .node-menu {\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode:hover {\n  background: #e5f3ff !important;\n  box-shadow: 0 0 0 1px transparent;\n}\n.explorer-tree .rc-tree-treenode.hover {\n  background: #e5f3ff !important;\n}\n.explorer-tree .rc-tree-switcher {\n  flex-shrink: 0;\n  width: 20px !important;\n  height: 31px !important;\n  vertical-align: top !important;\n  background-image: none !important;\n}\n.explorer-tree .rc-tree-title {\n  display: inline-block;\n  height: 31px;\n  width: 100%;\n}\n.explorer-tree.showLine .rc-tree-indent {\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-indent-unit {\n  width: 20px;\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  width: 8px;\n  top: calc(31px / 2);\n  left: 10px;\n  height: 1px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  top: 0;\n  height: calc(31px / 2);\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::before {\n  display: none;\n  content: '';\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.explorer-checks .rc-tree-treenode:hover .row-item-check .btn-check {\n  opacity: 1;\n}\n.explorer-tree .rc-tree-list-scrollbar-thumb {\n  background: #bbb !important;\n}\n.explorer-tree .rc-tree-list-scrollbar {\n  width: 5px !important;\n}\n.explorer-tree .node-motion {\n  transition: all 0.3s;\n  overflow-y: hidden;\n}\n.explorer-tree .rc-tree-child-tree {\n  display: block;\n}\n.explorer-table-header {\n  display: flex;\n  width: fit-content;\n  min-width: 100%;\n  height: 25px;\n  line-height: 25px;\n  color: #448;\n  border-bottom: 1px solid #e3e3e3;\n  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.05);\n  background: #fff;\n}\n.explorer-table-header .item {\n  padding: 0 10px 0 0;\n  flex: 1 0 0;\n  margin-left: -10px;\n  border-right: 1px solid #eee;\n  user-select: none;\n  min-width: 80px;\n}\n.explorer-table-header .item:first-child {\n  padding-left: 20px;\n}\n.explorer-table-header .resize {\n  position: relative;\n  flex: 0 0 20px;\n  width: 20px;\n  z-index: 10;\n  cursor: col-resize;\n  left: -10px;\n  transition: background 0.2s;\n}\n.explorer-table-header .resize::before {\n  content: '';\n  position: fixed;\n  width: 1px;\n  height: 2000px;\n  z-index: 10;\n  margin-left: 10px;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.2s;\n}\n.explorer-table-header .resize:hover {\n  background: #1890ff30;\n}\n.explorer-table-header .resize.resize-focus {\n  z-index: 9999;\n}\n.explorer-table-header .resize.resize-focus:before {\n  opacity: 1;\n  background: #1890ff;\n  visibility: visible;\n}\n.explorer-table-header .resize:last-child {\n  flex: 0 0 10px;\n  width: 10px;\n}\n.explorer-table-header.item-resize {\n  z-index: 10;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z$6);
 
 /**
@@ -5183,6 +5192,9 @@ function TableItem(props) {
     style: {
       height: '100%'
     },
+    onContextMenu: e => {
+      e.stopPropagation();
+    },
     dropdownRender: ({
       onClone
     }) => {
@@ -5258,7 +5270,16 @@ function TableItem(props) {
                 autoFocus: true,
                 defaultValue: param[v?.key],
                 placeholder: '\u8BF7\u8F93\u5165',
+                onFocus: e => {
+                  let i = param[v?.key]?.lastIndexOf('.');
+                  if (props?.suffix == 'folder') {
+                    e.target.setSelectionRange(0, param[v?.key]?.length);
+                  } else if (i !== -1) {
+                    e.target.setSelectionRange(0, i);
+                  }
+                },
                 onBlur: e => {
+                  if (e.target.value === param[v?.key]) return;
                   onRename?.(e.target.value);
                 }
               })
@@ -5336,6 +5357,14 @@ var TreeItem = (props => {
         autoFocus: true,
         value: title,
         placeholder: '\u8BF7\u8F93\u5165',
+        onFocus: e => {
+          let i = title.lastIndexOf('.');
+          if (props?.suffix == 'folder') {
+            e.target.setSelectionRange(0, title.length);
+          } else if (i !== -1) {
+            e.target.setSelectionRange(0, i);
+          }
+        },
         onChange: v => {
           setTitle?.(v.target.value);
         },
@@ -5867,13 +5896,17 @@ const ExplorerMenu = props => {
     loadData,
     loadNode,
     onMenuClick,
-    onChange
+    onChange,
+    onRename
   } = props;
   const store = useContext(ExampleContext);
   const [eventKey, setEventKey] = useState([]);
   const [loadKey, setLoadKey] = useState([]);
   return jsx("div", {
     className: 'frame-left',
+    onContextMenu: e => {
+      e.preventDefault();
+    },
     children: jsx(Tree, {
       isload: true,
       treeData: data,
@@ -5887,6 +5920,7 @@ const ExplorerMenu = props => {
       onMenuClick: onMenuClick,
       loadData: loadNode,
       onChange: onChange,
+      onRename: onRename,
       onSelect: v => {
         store.setPathDisplay(v?.pathDisplay);
         loadData(v.key);
@@ -5953,6 +5987,7 @@ const VirtualScroll = ({
     ref: containerRef,
     children: jsx("div", {
       style: {
+        position: 'relative',
         height: `${data.length * itemHeight}px`,
         paddingTop: `${startIdx * itemHeight}px`
       },
@@ -6013,7 +6048,7 @@ function Tile(props) {
       [className || '']: className
     }),
     style: {
-      height: '100%'
+      height: height + 'px'
     },
     onContextMenu: e => {
       e.preventDefault();
@@ -6085,17 +6120,14 @@ function Tile(props) {
                     width: w + 'px',
                     height: w + 'px',
                     lineHeight: w + 'px'
-                  }) : jsx("div", {
-                    className: 'picture',
-                    children: jsx("img", {
-                      className: 'picture-show',
-                      draggable: 'false',
-                      src: v.pic,
-                      style: {
-                        width: w + 'px',
-                        height: w + 'px'
-                      }
-                    })
+                  }) : jsx("img", {
+                    className: 'picture-show',
+                    draggable: 'false',
+                    src: v.pic,
+                    style: {
+                      width: w + 'px',
+                      height: w + 'px'
+                    }
                   })
                 }), jsx("div", {
                   className: 'title-type-name',
@@ -7150,8 +7182,9 @@ const Layout$1 = props => {
         },
         onSelect: v => {
           if (v?.type == 'folder' && v.expanded) {
-            store.setCurSelect(v.key);
+            store.setCurSelectFile(v.key);
           }
+          store.setCurSelect(v.key);
         },
         onRename: onRename,
         onMenuClick: onMenuClick,
@@ -7192,9 +7225,12 @@ function ExplorerInfo(props) {
   const {
     infoshow,
     getIcons,
-    curInfo
+    curInfo,
+    dataMap,
+    curSelect
   } = useContext(ExampleContext);
   const [isEdit, setIsEdit] = useState(false);
+  const [info, setInfo] = useState({});
   useEffect(() => {
     if (infoshow) {
       props?.setSize(285);
@@ -7202,6 +7238,13 @@ function ExplorerInfo(props) {
       props?.onMinimize();
     }
   }, [infoshow]);
+  useEffect(() => {
+    if (curSelect) {
+      setInfo(dataMap?.[curSelect]);
+    } else {
+      setInfo(curInfo);
+    }
+  }, [curInfo, dataMap]);
   function rednerInfo() {
     return jsxs("div", {
       className: 'panel-info',
@@ -7212,7 +7255,7 @@ function ExplorerInfo(props) {
           children: "\u8DEF\u5F84:"
         }), jsx("div", {
           className: 'content',
-          children: curInfo?.pathDisplay || '-'
+          children: info?.pathDisplay || '-'
         })]
       }), jsxs("div", {
         className: 'panel-col',
@@ -7221,7 +7264,7 @@ function ExplorerInfo(props) {
           children: "\u5927\u5C0F:"
         }), jsx("div", {
           className: 'content',
-          children: typeof curInfo?.size == 'number' ? convertBytesToSize(curInfo?.size) : curInfo?.size || '-'
+          children: typeof info?.size == 'number' ? convertBytesToSize(info?.size) : info?.size || '-'
         })]
       }), jsxs("div", {
         className: 'panel-col',
@@ -7230,7 +7273,7 @@ function ExplorerInfo(props) {
           children: "\u521B\u5EFA\u65F6\u95F4 :"
         }), jsx("div", {
           className: 'content',
-          children: DateFormat(curInfo?.createTime)
+          children: DateFormat(info?.createTime)
         })]
       }), jsxs("div", {
         className: 'panel-col',
@@ -7239,7 +7282,7 @@ function ExplorerInfo(props) {
           children: "\u4FEE\u6539\u65F6\u95F4 :"
         }), jsx("div", {
           className: 'content',
-          children: DateFormat(curInfo?.createTime)
+          children: DateFormat(info?.createTime)
         })]
       }), jsxs("div", {
         className: 'panel-col',
@@ -7283,18 +7326,18 @@ function ExplorerInfo(props) {
       className: 'info-header',
       children: [jsx("div", {
         className: 'file-icon',
-        children: getIcons(curInfo, '')
+        children: getIcons(info, '')
       }), jsxs("div", {
         className: 'file-name',
         children: [jsx("div", {
           className: 'title',
-          children: curInfo?.title
+          children: info?.title
         }), jsxs("div", {
           className: 'desc',
           children: [jsx("span", {
-            children: typeof curInfo?.size == 'number' ? convertBytesToSize(curInfo?.size) : curInfo?.size || '-'
+            children: typeof info?.size == 'number' ? convertBytesToSize(info?.size) : info?.size || '-'
           }), jsx("span", {
-            children: curInfo?.fixTime || '-'
+            children: info?.fixTime || '-'
           })]
         })]
       })]
@@ -7327,7 +7370,7 @@ const Layout = props => {
     children: jsxs(Draggable, {
       placement: 'horizontal',
       poi: isNavtab ? [200] : [0, 'max'],
-      fix: [false, true],
+      fix: [true, false],
       rang: [10, 350],
       children: [jsx(ExplorerMenu, {
         ...props
@@ -7398,7 +7441,7 @@ const defaultColumns = [{
     });
   }
 }];
-const Explorer = props => {
+const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     data,
     columns,
@@ -7413,7 +7456,8 @@ const Explorer = props => {
   const [curlist, setCurList] = useState([]);
   const [curInfo, setCurInfo] = useState(null);
   const [dataMap, setDataMap] = useState({});
-  const [curSelect, setCurSelect] = useState('');
+  const [curSelect, setCurSelect] = useState(null); //当前选中信息
+  const [curSelectFile, setCurSelectFile] = useState(''); //当前选中的文件
   const [menuSize, setMenuSize] = useState(80);
   const [reamekey, setReName] = useState(null);
   const [logindex, setLogIndex] = useState(0); //前进
@@ -7422,6 +7466,17 @@ const Explorer = props => {
   const [menutype, setMenutype] = useState('tile');
   const [infoshow, setInfoShow] = useState(false);
   const [loading, setLoading] = useState(ApiStatusEnum.READY);
+  useImperativeHandle(ref, () => ({
+    removeLog: () => {
+      //清空日志
+      setLog([]);
+    },
+    updateData: () => {
+      if (curInfo?.key) {
+        loadData(curInfo.key, curInfo);
+      }
+    }
+  }));
   const Icons = (v, className, style) => {
     const IconMap = new Map([['favorite', jsx(FavoriteSvg, {})], ['space', jsx(SpaceSvg, {})], ['netdisk', jsx(NetdiskSvg, {})], ['album', jsx(AlbumSvg, {})], ['recycle', jsx(RecycleSvg, {})], ['recently', jsx(RecentlySvg, {})], ['coordination', jsx(LinkSvg, {})], ['text', jsx(TextSvg, {})], ['share', jsx(ShareLinkSvg, {})]]);
     if (v?.label) {
@@ -7447,12 +7502,33 @@ const Explorer = props => {
       });
     }
     let _file = ['folder', 'xls', 'xlsx', 'doc', 'docx', 'pptx', 'md', 'txt', 'js', 'css', 'pdf', 'html', 'json'];
+    let css = ['css', 'less'];
+    let js = ['js', 'jsx'];
+    let ts = ['ts', 'tsx'];
     if (v?.pic && typeof v?.pic == 'string') {
       return jsx("img", {
         className: cx$1(`${className || ''}`),
         src: v.pic
       });
     }
+    if (css.includes(v?.suffix)) {
+      return jsx(SuffixIcon, {
+        className: cx$1(`${className || ''}`),
+        suffix: 'css'
+      });
+    }
+    if (js.includes(v.suffix)) {
+      return jsx(SuffixIcon, {
+        className: cx$1(`${className || ''}`),
+        suffix: 'js'
+      });
+    }
+    if (ts.includes(v.suffix)) {
+      return jsx(SuffixIcon, {
+        className: cx$1(`${className || ''}`),
+        suffix: 'txt'
+      });
+    }
     if (_file.includes(v?.suffix)) {
       return jsx(SuffixIcon, {
         className: cx$1(`${className || ''}`),
@@ -7537,13 +7613,20 @@ const Explorer = props => {
   function createFolder() {
     const addData = (data, key, child) => {
       let arr = data;
+      let file = [];
+      let folder = [];
       if (key) {
         let i = 0;
         while (i < arr.length) {
           let item = arr[i];
           if (item.key == key) {
             if (Array.isArray(item.children)) {
-              item.children.unshift(child);
+              item.children.forEach(v => {
+                if (v.type == 'folder') folder.push(v);
+                if (v.type == 'file') file.push(v);
+              });
+              folder.push(child);
+              item.children = [...folder, ...file];
             } else {
               item.children = [child];
             }
@@ -7556,7 +7639,16 @@ const Explorer = props => {
           i++;
         }
       } else {
-        arr.unshift(child);
+        if (arr.length) {
+          arr.forEach(v => {
+            if (v.type == 'folder') folder.push(v);
+            if (v.type == 'file') file.push(v);
+          });
+          folder.push(child);
+          arr = [...folder, ...file];
+        } else {
+          arr.push(child);
+        }
       }
       return arr || [];
     };
@@ -7567,6 +7659,7 @@ const Explorer = props => {
       title: '新建文件夹',
       create_file: true
     });
+    console.log(list, 123);
     setCurList(list);
   }
   return jsx(ExampleContext.Provider, {
@@ -7588,6 +7681,7 @@ const Explorer = props => {
       checkMode,
       reamekey,
       curSelect,
+      curSelectFile,
       loadkey,
       //icon
       getIcons: Icons,
@@ -7606,6 +7700,7 @@ const Explorer = props => {
       setLoading,
       setReName,
       setCurSelect,
+      setCurSelectFile,
       setLoadKey
     },
     children: jsx("div", {
@@ -7618,7 +7713,7 @@ const Explorer = props => {
       })
     })
   });
-};
+});
 
 export { ApiStatusEnum, Explorer as default, registerMenu };
 //# sourceMappingURL=index.js.map