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

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-explorer v0.0.1-alpha.75
+ * @gingkoo/pandora-explorer v0.0.1-alpha.76
  */
 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  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";
 styleInject(css_248z$2);
 
 function Item(props) {
@@ -7141,15 +7160,20 @@ function Item(props) {
   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();
@@ -7406,6 +7430,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 +7451,11 @@ function Columns(props) {
     }
     if (!Array.isArray(list) || !list.length) {
       return jsx("div", {
-        className: cx$1('layer', {})
+        className: cx$1('layer', {}),
+        style: {
+          flex: ` 0 0 ${width[level]}px`,
+          width: level + 'px'
+        }
       });
     }
     return jsxs("div", {
@@ -7433,6 +7464,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 +7485,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,9 +7497,13 @@ function Columns(props) {
                 await props?.onRename?.(key, value, info);
               },
               onMenuClick: props?.onMenuClick,
-              onClick: async () => {
+              onClick: async e => {
                 //shift 键按下 进行展开
                 if (store.shift) return;
+                e.stopPropagation();
+                store.closeMenu();
+                store.setCurSelect(v.key);
+                setSelectCol(level);
                 setSelectInfo(v.key);
                 if (v.type == 'folder') {
                   let select = setlevel(v.key, level);
@@ -7617,8 +7658,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);
       }
     },
@@ -8093,6 +8134,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     isUpload = true,
     isEdit = true,
     isDownload = true,
+    isOpenMenu = true,
     isNavtab = true,
     checks,
     accept,
@@ -8369,6 +8411,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 +8494,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     setCurList(list);
   }
   function openMenu(props, param) {
+    if (!isOpenMenu) return;
     closeMenu();
     let {
       x = 0,
@@ -8505,7 +8549,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     `;
     }, 100);
   }
-  /* ***********  拦截进行特殊处理     *********** */
+  /* ***********  拦截进行特殊处理  *********** */
   async function onMenuClick(key, param, type) {
     if (key == 'remove') {
       if (type == 'menu') {