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

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-explorer v0.0.1-alpha.75
+ * @gingkoo/pandora-explorer v0.0.1-alpha.77
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx$1 from 'classnames';
@@ -7000,6 +7000,21 @@ const SelectBox = props => {
     setSelect(ids);
     onChange(ids);
   }
+  /*************** control 选中  ******************* */
+  function controlSelectColumns(key) {
+    if (store?.menutype != 'column') return false;
+    if (!store?.dataMap) return false;
+    let _start = store.dataMap?.[key]?.level || '';
+    let num = _start.split('-').length;
+    let is = checks.some(v => {
+      let curlevel = store.dataMap?.[v]?.level || '';
+      let curnum = curlevel.split('-').length;
+      if (num != curnum) {
+        return v;
+      }
+    });
+    return is;
+  }
   return jsxs("div", {
     ref: ref,
     className: cx$1(`file-select-box ${className}`),
@@ -7024,12 +7039,16 @@ const SelectBox = props => {
           onChange(arr);
         } else {
           let arr = [];
-          if (!checks.includes(type?.[0])) {
-            arr = [...selects, ...type];
-            setSelect(arr);
-            onChange(arr);
+          let is = controlSelectColumns(type[0]);
+          if (is) {
+            setSelect(type);
+            onChange(type);
             return;
           }
+          arr = [...selects, ...type];
+          setSelect(arr);
+          onChange(arr);
+          return;
         }
         return;
       }
@@ -7124,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: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) {
@@ -7135,21 +7154,27 @@ function Item(props) {
     isedit,
     checks = false,
     icon,
-    parent
+    parent,
+    onDblclick
   } = props;
   const [value, setValue] = useState('');
   useEffect(() => {
     setValue(props?.title);
   }, [props?.title]);
+  let disable = false;
+  if (Array.isArray(props.selectedSuffix)) {
+    disable = !props.selectedSuffix.includes(props.suffix) && !props.selectedSuffix?.includes(props?.type);
+  }
   return jsxs("div", {
     className: cx$1('explorer-columns-list', {
       last: props?.end,
       acitve: acitve,
       checks: checks,
-      isedit: isedit
+      isedit: isedit,
+      disable
     }),
-    "data-id": props.id,
-    "data-type": props.type,
+    "data-id": !disable ? props.id : null,
+    "data-type": !disable ? props.type : null,
     onClick: onClick,
     onContextMenu: e => {
       e.preventDefault();
@@ -7187,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,
@@ -7259,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]);
@@ -7281,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,
@@ -7300,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)) {
@@ -7364,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);
@@ -7406,6 +7445,9 @@ function Columns(props) {
         }),
         onClick: e => {
           setSelectCol(level);
+          if (store.expandkey[level - 1]) {
+            store.setCurSelect(store.expandkey[level - 1]);
+          }
         },
         children: jsxs("div", {
           className: 'empty-is-null',
@@ -7424,7 +7466,11 @@ function Columns(props) {
     }
     if (!Array.isArray(list) || !list.length) {
       return jsx("div", {
-        className: cx$1('layer', {})
+        className: cx$1('layer', {}),
+        style: {
+          minWidth: avg + 'px',
+          flex: `0 0 ${avg}px`
+        }
       });
     }
     return jsxs("div", {
@@ -7433,6 +7479,11 @@ function Columns(props) {
       }),
       onClick: e => {
         setSelectCol(level);
+        if (store.expandkey[level - 1]) {
+          store.setCurSelect(store.expandkey[level - 1]);
+        } else {
+          store.setCurSelect(null);
+        }
       },
       style: {
         flex: ` 0 0 ${width[level]}px`,
@@ -7449,10 +7500,11 @@ function Columns(props) {
               ...v,
               key: level + '-' + i,
               icon: icons,
-              acitve: store.expandkey[level] == v.key || select_info == v.key,
+              acitve: store.expandkey[level] == v.key,
               id: v.key,
               end: end,
               checks: checks?.includes(v.key),
+              selectedSuffix: store.selectedSuffix,
               isedit: store.reamekey == v.key || v.create_file,
               store: store,
               openMenu: store.openMenu,
@@ -7460,10 +7512,13 @@ function Columns(props) {
                 await props?.onRename?.(key, value, info);
               },
               onMenuClick: props?.onMenuClick,
-              onClick: async () => {
+              onClick: async e => {
                 //shift 键按下 进行展开
                 if (store.shift) return;
-                setSelectInfo(v.key);
+                e.stopPropagation();
+                store.closeMenu();
+                store.setCurSelect(v.key);
+                setSelectCol(level);
                 if (v.type == 'folder') {
                   let select = setlevel(v.key, level);
                   let loaddata = null;
@@ -7476,6 +7531,9 @@ function Columns(props) {
                   store.setExpandkey(select);
                 }
               },
+              onDblclick: () => {
+                onDblclick?.(v.key, v);
+              },
               parent: parent
             });
           }
@@ -7496,6 +7554,7 @@ function Columns(props) {
       [className || '']: className
     }),
     onMouseMove: handleMousemove,
+    onScroll: handleScroll,
     onMouseUp: () => {
       setIsdarg(false);
     },
@@ -7617,8 +7676,8 @@ const Layout$1 = props => {
   return jsxs("div", {
     className: 'file-continer-main',
     onClick: () => {
-      store.setCurSelect(null);
       if (store?.menutype !== 'column') {
+        store.setCurSelect(null);
         store.setCurSelectFile(null);
       }
     },
@@ -7656,7 +7715,7 @@ const Layout$1 = props => {
         onClick: onClick,
         onRename: onRename,
         onMenuClick: onMenuClick,
-        onDblclick: onDblclick,
+        onDblclick: _onDblclick,
         height: height,
         width: width,
         onChange: v => {
@@ -8021,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++;
     }
@@ -8093,6 +8150,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     isUpload = true,
     isEdit = true,
     isDownload = true,
+    isOpenMenu = true,
     isNavtab = true,
     checks,
     accept,
@@ -8369,6 +8427,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     if (!curInfo) return;
     let input = document.createElement('input');
     input.type = 'file';
+    input.accept = accept || '';
     input.multiple = true;
     input?.click();
     input.onchange = async e => {
@@ -8451,6 +8510,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     setCurList(list);
   }
   function openMenu(props, param) {
+    if (!isOpenMenu) return;
     closeMenu();
     let {
       x = 0,
@@ -8505,7 +8565,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     `;
     }, 100);
   }
-  /* ***********  拦截进行特殊处理     *********** */
+  /* ***********  拦截进行特殊处理  *********** */
   async function onMenuClick(key, param, type) {
     if (key == 'remove') {
       if (type == 'menu') {