@gingkoo/pandora-explorer 0.0.1-alpha.76 → 0.0.1-alpha.77

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-explorer v0.0.1-alpha.76
+ * @gingkoo/pandora-explorer v0.0.1-alpha.77
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx$1 from 'classnames';
@@ -7143,7 +7143,7 @@ const SelectBox = props => {
   });
 };
 
-var css_248z$2 = ".explorer-columns {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n  overflow: auto;\n}\n.explorer-columns .layer {\n  position: relative;\n  flex: 1 0 0;\n  border-right: 1px solid #f5f5f5;\n}\n.explorer-columns .layer.select_col {\n  box-shadow: 0 0 20px #e9f5ff inset;\n}\n.explorer-columns .layer.select_col::after {\n  content: '';\n  position: absolute;\n  height: 4px;\n  bottom: 0px;\n  background: #50afff;\n  left: 0;\n  right: 0;\n}\n.explorer-columns .layer.list {\n  min-width: 200px;\n}\n.explorer-columns .layer.list::before {\n  position: absolute;\n  content: '';\n  top: 50%;\n  right: 1px;\n  width: 1px;\n  height: 18px;\n  margin-left: -1px;\n  margin-top: -9px;\n  border: 1px solid #ddd;\n  border-top: none;\n  border-bottom: none;\n  backdrop-filter: none;\n  border-radius: 0;\n  background: transparent;\n  box-sizing: content-box;\n  -webkit-backdrop-filter: blur(10px);\n}\n.explorer-columns .layer.list .list-main {\n  width: 100%;\n  height: 100%;\n  transition: 0.3s;\n  padding-top: 5px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar-thumb {\n  background-color: transparent;\n  border-radius: 6px;\n  transition: 0.3s;\n}\n.explorer-columns .layer.list .list-main:hover .list-scroll::-webkit-scrollbar-thumb {\n  background-color: #00000030;\n}\n.explorer-columns .layer.list .drag {\n  position: absolute;\n  width: 8px;\n  border-right: 1px solid #f5f5f5;\n  right: -3px;\n  top: 0;\n  bottom: 0;\n  cursor: col-resize;\n  z-index: 10;\n}\n.explorer-columns .layer.list .drag:hover {\n  background: #40a9ff4d;\n}\n.explorer-columns .layer.empty {\n  display: flex;\n  justify-content: center;\n  padding-top: 100px;\n}\n.explorer-columns .layer.empty .empty-is-null {\n  width: 200px;\n}\n.explorer-columns .layer.empty .empty-icon {\n  height: 140px;\n}\n.explorer-columns .layer.empty .empty-desc {\n  display: flex;\n  justify-content: center;\n}\n.explorer-columns .layer.empty .empty-desc > span {\n  display: inline-block;\n  padding: 3px 10px;\n  border-radius: 10px;\n  line-height: 1;\n  background: #a0a0a01a;\n  color: #bbb;\n  font-size: 0.9em;\n}\n.explorer-columns-list {\n  padding-left: 10px;\n  display: flex;\n  height: 30px;\n  margin-bottom: 2px;\n  margin: 0 5px 3px 5px;\n  align-items: center;\n  border: 1px solid transparent;\n  user-select: none;\n  overflow: hidden;\n}\n.explorer-columns-list .columns-list-icon {\n  display: flex;\n  width: 18px;\n  height: 18px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.explorer-columns-list .columns-list-title {\n  width: 100%;\n  display: inline-block;\n  width: calc(100% - 30px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.explorer-columns-list .columns-list-tool {\n  min-width: 30px;\n}\n.explorer-columns-list .columns-list-input {\n  flex: 1;\n  height: 100%;\n  outline: 0;\n  border: 0;\n  margin-right: 10px;\n  background: #fff;\n}\n.explorer-columns-list.acitve {\n  background: #e3f0ff;\n}\n.explorer-columns-list.last {\n  margin-bottom: 100px;\n}\n.explorer-columns-list.checks {\n  background: #cce8ff;\n  border-color: #a8d8ff !important;\n}\n.explorer-columns-list.isedit {\n  background: #cce8ff;\n  border-color: #a8d8ff !important;\n}\n.explorer-columns-list.disable {\n  opacity: 0.4;\n}\n.explorer-columns-list:hover {\n  background: #e3f0ff;\n  border-color: #c9e2ff;\n}\n.explorer-columns-list:hover .edit {\n  opacity: 1;\n}\n.explorer-columns-loading {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.explorer-columns-loading .loading-content {\n  width: 100px;\n  height: 106px;\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.7);\n  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.07);\n  color: #888;\n}\n.explorer-columns-loading .loading-content-icon {\n  display: flex;\n  justify-content: center;\n  margin: 25px auto 6px auto;\n  font-size: 30px;\n}\n.explorer-columns-loading .loading-content-icon > i {\n  animation: rotate 1.5s linear infinite;\n}\n.explorer-columns-loading .loading-content-title {\n  padding-top: 15px;\n  text-align: center;\n}\n.explorer-columns.notdata .explorer-notdata {\n  width: 100%;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z$2 = ".explorer-columns {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n  overflow: auto;\n}\n.explorer-columns .layer {\n  position: relative;\n  min-width: 200px;\n  flex: 1 0 0;\n  border-right: 1px solid #f5f5f5;\n}\n.explorer-columns .layer.select_col {\n  box-shadow: 0 0 20px #e9f5ff inset;\n}\n.explorer-columns .layer.select_col::after {\n  content: '';\n  position: absolute;\n  height: 4px;\n  bottom: 0px;\n  background: #50afff;\n  left: 0;\n  right: 0;\n}\n.explorer-columns .layer.list {\n  min-width: 200px;\n}\n.explorer-columns .layer.list::before {\n  position: absolute;\n  content: '';\n  top: 50%;\n  right: 1px;\n  width: 1px;\n  height: 18px;\n  margin-left: -1px;\n  margin-top: -9px;\n  border: 1px solid #ddd;\n  border-top: none;\n  border-bottom: none;\n  backdrop-filter: none;\n  border-radius: 0;\n  background: transparent;\n  box-sizing: content-box;\n  -webkit-backdrop-filter: blur(10px);\n}\n.explorer-columns .layer.list .list-main {\n  width: 100%;\n  height: 100%;\n  transition: 0.3s;\n  padding-top: 5px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar-thumb {\n  background-color: transparent;\n  border-radius: 6px;\n  transition: 0.3s;\n}\n.explorer-columns .layer.list .list-main:hover .list-scroll::-webkit-scrollbar-thumb {\n  background-color: #00000030;\n}\n.explorer-columns .layer.list .drag {\n  position: absolute;\n  width: 8px;\n  border-right: 1px solid #f5f5f5;\n  right: -3px;\n  top: 0;\n  bottom: 0;\n  cursor: col-resize;\n  z-index: 10;\n}\n.explorer-columns .layer.list .drag:hover {\n  background: #40a9ff4d;\n}\n.explorer-columns .layer.empty {\n  display: flex;\n  justify-content: center;\n  padding-top: 100px;\n}\n.explorer-columns .layer.empty .empty-is-null {\n  width: 200px;\n}\n.explorer-columns .layer.empty .empty-icon {\n  height: 140px;\n}\n.explorer-columns .layer.empty .empty-desc {\n  display: flex;\n  justify-content: center;\n}\n.explorer-columns .layer.empty .empty-desc > span {\n  display: inline-block;\n  padding: 3px 10px;\n  border-radius: 10px;\n  line-height: 1;\n  background: #a0a0a01a;\n  color: #bbb;\n  font-size: 0.9em;\n}\n.explorer-columns-list {\n  padding-left: 10px;\n  display: flex;\n  height: 30px;\n  margin-bottom: 2px;\n  margin: 0 5px 3px 5px;\n  align-items: center;\n  border: 1px solid transparent;\n  user-select: none;\n  overflow: hidden;\n}\n.explorer-columns-list .columns-list-icon {\n  display: flex;\n  width: 18px;\n  height: 18px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.explorer-columns-list .columns-list-title {\n  width: 100%;\n  display: inline-block;\n  width: calc(100% - 30px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.explorer-columns-list .columns-list-input {\n  flex: 1;\n  height: 100%;\n  outline: 0;\n  border: 0;\n  margin-right: 10px;\n  background: #fff;\n}\n.explorer-columns-list.acitve {\n  background: #e3f0ff;\n}\n.explorer-columns-list.last {\n  margin-bottom: 100px;\n}\n.explorer-columns-list.checks {\n  background: #cce8ff;\n  border-color: #a8d8ff !important;\n}\n.explorer-columns-list.isedit {\n  background: #cce8ff;\n  border-color: #a8d8ff !important;\n}\n.explorer-columns-list.disable {\n  opacity: 0.4;\n}\n.explorer-columns-list:hover {\n  background: #e3f0ff;\n  border-color: #c9e2ff;\n}\n.explorer-columns-list:hover .edit {\n  opacity: 1;\n}\n.explorer-columns-loading {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.explorer-columns-loading .loading-content {\n  width: 100px;\n  height: 106px;\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.7);\n  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.07);\n  color: #888;\n}\n.explorer-columns-loading .loading-content-icon {\n  display: flex;\n  justify-content: center;\n  margin: 25px auto 6px auto;\n  font-size: 30px;\n}\n.explorer-columns-loading .loading-content-icon > i {\n  animation: rotate 1.5s linear infinite;\n}\n.explorer-columns-loading .loading-content-title {\n  padding-top: 15px;\n  text-align: center;\n}\n.explorer-columns.notdata .explorer-notdata {\n  width: 100%;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z$2);
 
 function Item(props) {
@@ -7154,7 +7154,8 @@ function Item(props) {
     isedit,
     checks = false,
     icon,
-    parent
+    parent,
+    onDblclick
   } = props;
   const [value, setValue] = useState('');
   useEffect(() => {
@@ -7211,6 +7212,9 @@ function Item(props) {
         key: props.id
       });
     },
+    onDoubleClick: e => {
+      onDblclick?.();
+    },
     children: [icon && icon?.(props, 'columns-list-icon'), isedit ? jsx("input", {
       className: 'columns-list-input',
       autoFocus: true,
@@ -7283,16 +7287,20 @@ function Columns(props) {
     checks = [],
     icons,
     onLoadData,
-    onChange
+    onChange,
+    onDblclick
   } = props;
   const ref = useRef(null);
-  const [layer, setLayer] = useState(new Array(6).fill([])); //文件列表数据
-  const [width, setWidth] = useState(new Array(6).fill(null)); //记录每行的宽度
+  const scroll = useRef({
+    x: 0,
+    y: 0
+  });
+  const [layer, setLayer] = useState(new Array(5).fill([])); //文件列表数据
+  const [width, setWidth] = useState(new Array(5).fill(null)); //记录每行的宽度
   const [select_col, setSelectCol] = useState(0); //选中栏
-  const [select_info, setSelectInfo] = useState(''); //当前选中 key
   const [isdrag, setIsdarg] = useState(false);
   useEffect(() => {
-    let arr = new Array(6).fill('');
+    let arr = new Array(5).fill('');
     //清空
     store.setExpandkey(arr);
   }, [store.curInfo.key]);
@@ -7305,10 +7313,11 @@ function Columns(props) {
   }, [select_col, store?.expandkey]);
   let avg = useMemo(() => {
     if (!_w) return 0;
-    return Math.ceil(_w / 6);
+    let num = Math.ceil(_w / 5);
+    return num < 200 ? 200 : num;
   }, [_w]);
   async function initdata() {
-    let arr = new Array(6).fill([]);
+    let arr = new Array(5).fill([]);
     let {
       layer,
       isApi,
@@ -7324,7 +7333,7 @@ function Columns(props) {
     // 1. 返回 没层用到的数据
     // 2. 返回 是否调用接口
     // 3. 如果掉调用借口 需要记录 数据给到 children 上
-    let arr = new Array(6).fill([]);
+    let arr = new Array(5).fill([]);
     let api = false;
     let child = [];
     if (Array.isArray(data)) {
@@ -7388,9 +7397,15 @@ function Columns(props) {
       }
       return x + 0;
     }, 0);
-    arr[select_col] = e.nativeEvent.clientX - dom.left - data;
+    arr[select_col] = scroll.current.y + e.nativeEvent.clientX - dom.left - data;
     setWidth(arr);
   }
+  function handleScroll(e) {
+    scroll.current = {
+      x: e.target.scrollTop,
+      y: e.target.scrollLeft
+    };
+  }
   function setlevel(data, level) {
     let arr = cloneDeep(store.expandkey);
     arr.fill('', level + 1);
@@ -7453,8 +7468,8 @@ function Columns(props) {
       return jsx("div", {
         className: cx$1('layer', {}),
         style: {
-          flex: ` 0 0 ${width[level]}px`,
-          width: level + 'px'
+          minWidth: avg + 'px',
+          flex: `0 0 ${avg}px`
         }
       });
     }
@@ -7504,7 +7519,6 @@ function Columns(props) {
                 store.closeMenu();
                 store.setCurSelect(v.key);
                 setSelectCol(level);
-                setSelectInfo(v.key);
                 if (v.type == 'folder') {
                   let select = setlevel(v.key, level);
                   let loaddata = null;
@@ -7517,6 +7531,9 @@ function Columns(props) {
                   store.setExpandkey(select);
                 }
               },
+              onDblclick: () => {
+                onDblclick?.(v.key, v);
+              },
               parent: parent
             });
           }
@@ -7537,6 +7554,7 @@ function Columns(props) {
       [className || '']: className
     }),
     onMouseMove: handleMousemove,
+    onScroll: handleScroll,
     onMouseUp: () => {
       setIsdarg(false);
     },
@@ -7697,7 +7715,7 @@ const Layout$1 = props => {
         onClick: onClick,
         onRename: onRename,
         onMenuClick: onMenuClick,
-        onDblclick: onDblclick,
+        onDblclick: _onDblclick,
         height: height,
         width: width,
         onChange: v => {
@@ -8062,9 +8080,7 @@ Object.defineProperty(Array.prototype, 'myforeach', {
       if (index in arr) {
         try {
           await fn.call(context, arr[index], index, arr);
-        } catch (e) {
-          console.log(e);
-        }
+        } catch (e) {}
       }
       index++;
     }