@gingkoo/pandora-explorer 0.1.10 → 0.1.11-alpha.2

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 export declare const IconsMap: Map<string, import("react/jsx-runtime").JSX.Element>;
 export declare function FavoriteSvg(): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/menu/menulist.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function getMenu(key: string): import("react").ComponentType<{}>;
 export declare function registerMenu(key: string, component: any): void;
 export declare function addMenuItem(key: string | string[], menu: any[]): void;

package/lib/es/components/tree/components/utils/diffUtil.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Key, FlattenNode } from '../interface';
 export declare function findExpandedKeys(prev?: Key[], next?: Key[]): {
     add: boolean;

package/lib/es/css.d.ts

@@ -1,10 +1,10 @@
-export declare const flush: () => void, hydrate: (ids: string[]) => void, cx: (...classNames: import("@emotion/css/create-instance").ClassNamesArg[]) => string, merge: (className: string) => string, getRegisteredStyles: (registeredStyles: string[], className: string) => string, injectGlobal: {
-    (template: TemplateStringsArray, ...args: import("@emotion/css/create-instance").CSSInterpolation[]): void;
-    (...args: import("@emotion/css/create-instance").CSSInterpolation[]): void;
+export declare const flush: () => void, hydrate: (ids: Array<string>) => void, cx: (...classNames: Array<import("@emotion/css/create-instance").ClassNamesArg>) => string, merge: (className: string) => string, getRegisteredStyles: (registeredStyles: Array<string>, className: string) => string, injectGlobal: {
+    (template: TemplateStringsArray, ...args: Array<import("@emotion/css/create-instance").CSSInterpolation>): void;
+    (...args: Array<import("@emotion/css/create-instance").CSSInterpolation>): void;
 }, keyframes: {
-    (template: TemplateStringsArray, ...args: import("@emotion/css/create-instance").CSSInterpolation[]): string;
-    (...args: import("@emotion/css/create-instance").CSSInterpolation[]): string;
+    (template: TemplateStringsArray, ...args: Array<import("@emotion/css/create-instance").CSSInterpolation>): string;
+    (...args: Array<import("@emotion/css/create-instance").CSSInterpolation>): string;
 }, css: {
-    (template: TemplateStringsArray, ...args: import("@emotion/css/create-instance").CSSInterpolation[]): string;
-    (...args: import("@emotion/css/create-instance").CSSInterpolation[]): string;
+    (template: TemplateStringsArray, ...args: Array<import("@emotion/css/create-instance").CSSInterpolation>): string;
+    (...args: Array<import("@emotion/css/create-instance").CSSInterpolation>): string;
 }, sheet: import("@emotion/css/create-instance").CSSStyleSheet, cache: import("@emotion/css/create-instance").EmotionCache;

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-explorer v0.1.10
+ * @gingkoo/pandora-explorer v0.1.11-alpha.2
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx$1 from 'classnames';
@@ -933,7 +933,7 @@ function UploadSvg() {
   });
 }
 
-var css_248z$d = ".explorer-container .frame-explorer-main {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.explorer-container .frame-explorer-main .frame-left {\n  position: relative;\n  border-right: 1px solid rgba(100, 100, 100, 0.1);\n  height: 100%;\n}\n.explorer-container .frame-explorer-main .frame-left::after {\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  z-index: 2;\n}\n.explorer-container .frame-explorer-main .frame-right {\n  border-right: 1px solid #f5f5f5;\n  height: 100%;\n}\n.explorer-container .frame-explorer-main .frame-right .frame-header {\n  width: 100%;\n  height: 85px;\n  min-width: 400px;\n  position: relative;\n  background: #fff;\n}\n.explorer-container .frame-explorer-main .frame-right .frame-main {\n  position: relative;\n  height: 100%;\n}\n.explorer-container .app-wrapper {\n  height: 100%;\n}\n.explorer-label-icon {\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box !important;\n}\n.explorer-label-icon > div {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 50% !important;\n}\n.explorer-label-icon > div::after {\n  width: 40%;\n  height: 40%;\n  border-radius: 50%;\n  content: ' ';\n  background: linear-gradient(45deg, #ffffff7d, #ffffff00);\n  margin-top: 4px;\n  position: absolute;\n  right: 15%;\n  top: 15%;\n}\n";
+var css_248z$d = ".explorer-container .frame-explorer-main {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.explorer-container .frame-explorer-main .frame-left {\n  position: relative;\n  border-right: 1px solid rgba(100, 100, 100, 0.1);\n  height: 100%;\n}\n.explorer-container .frame-explorer-main .frame-left::after {\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  z-index: 2;\n}\n.explorer-container .frame-explorer-main .frame-right {\n  border-right: 1px solid #f5f5f5;\n  height: 100%;\n}\n.explorer-container .frame-explorer-main .frame-right .frame-header {\n  width: 100%;\n  height: 85px;\n  min-width: 400px;\n  position: relative;\n  background: #fff;\n}\n.explorer-container .frame-explorer-main .frame-right .frame-main {\n  position: relative;\n  height: 100%;\n}\n.explorer-container .app-wrapper {\n  height: 100%;\n}\n.explorer-container .rc-tree-list-holder-inner::-webkit-scrollbar {\n  display: none;\n  width: 0;\n  height: 0;\n}\n.explorer-label-icon {\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box !important;\n}\n.explorer-label-icon > div {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 50% !important;\n}\n.explorer-label-icon > div::after {\n  width: 40%;\n  height: 40%;\n  border-radius: 50%;\n  content: ' ';\n  background: linear-gradient(45deg, #ffffff7d, #ffffff00);\n  margin-top: 4px;\n  position: absolute;\n  right: 15%;\n  top: 15%;\n}\n";
 styleInject(css_248z$d);
 
 const {
@@ -1291,9 +1291,6 @@ var css_248z$9 = "._dropdown_menu {\n  background: #fff;\n  min-width: 45px;\n
 styleInject(css_248z$9);
 
 function returnDocument(element) {
-  if (element) {
-    return element.ownerDocument;
-  }
   return window.document;
 }
 function Dropdown(props) {
@@ -1889,7 +1886,7 @@ function menuIcon(icon) {
       suffix: icon
     }, 'explorer-menu-icon');
   }
-  if ( /*#__PURE__*/React__default.isValidElement(icon)) {
+  if (/*#__PURE__*/React__default.isValidElement(icon)) {
     return jsx("span", {
       className: 'explorer-menu-icon  x-icon',
       children: icon
@@ -4352,9 +4349,7 @@ function cleanConductCheck(keys, halfKeys, levelEntities, maxLevel, syntheticGet
  */
 function conductCheck(keyList, checked, keyEntities, getCheckDisabled) {
   let syntheticGetCheckDisabled;
-  if (getCheckDisabled) {
-    syntheticGetCheckDisabled = getCheckDisabled;
-  } else {
+  {
     syntheticGetCheckDisabled = isCheckDisabled;
   }
   // We only handle exist keys
@@ -5003,7 +4998,6 @@ let Tree$1 = class Tree extends React.Component {
           checkedKeys,
           halfCheckedKeys
         } = conductCheck(Array.from(keySet), {
-          checked: false,
           halfCheckedKeys
         }, keyEntities));
       }
@@ -5758,7 +5752,7 @@ function TableItem(props) {
   });
 }
 
-var TreeItem = (props => {
+var TreeItem = props => {
   const {
     onRename,
     onMenuClick,
@@ -5872,7 +5866,7 @@ var TreeItem = (props => {
       })]
     })
   });
-});
+};
 
 var css_248z$6 = ".explorer-notdata {\n  display: flex;\n  height: 100%;\n  justify-content: center;\n}\n.explorer-notdata .tree-empty {\n  position: relative;\n  top: 100px;\n  width: 200px;\n  height: 135px;\n  text-align: center;\n}\n.explorer-notdata .tree-empty .empty-svg {\n  width: 200px;\n  height: 115px;\n  overflow: hidden;\n}\n.explorer-notdata .tree-empty > span {\n  display: inline-block;\n  background: rgba(160, 160, 160, 0.1);\n  padding: 3px 10px;\n  border-radius: 10px;\n  font-size: 0.9em;\n  margin-top: 10px;\n  line-height: 1;\n  color: #999;\n  user-select: none;\n}\n";
 styleInject(css_248z$6);
@@ -6085,7 +6079,7 @@ var Tree = /*#__PURE__*/forwardRef((props, _ref) => {
   //树s的懒加载
   const getNewTreeData = (treeData, curKey, child, level) => {
     const loop = (data, levelkey) => {
-      if (level < 1 || curKey.length - 3 > level * 2) return;
+      if (curKey.length - 3 > level * 2) return;
       data.forEach((item, index) => {
         let l = levelkey + `-${index}`;
         if (curKey.indexOf(l) === 0) {
@@ -9544,14 +9538,15 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
   const [menutype, setMenutype] = useState('tile');
   const [infoshow, setInfoShow] = useState(false);
   const [loading, setLoading] = useState(ApiStatusEnum.READY);
-  useState(100);
-  useState(1);
+  const [pageNum, setPageNum] = useState(100);
+  const [curpage, setCurPage] = useState(1);
   const [totalNum, setTotalNum] = useState(0);
   const [shift, setShift] = useState(false);
   const [control, setControl] = useState(false);
   const box = useRef(null);
   const boxMenu = useRef(null);
   const menu = useRef(null);
+  const expandedKeysRef = useRef([]);
   useImperativeHandle(ref, () => ({
     removeLog: () => {
       //清空日志
@@ -9571,8 +9566,8 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
         await loadData(curInfo?.key || '', undefined, closeload);
       }
     },
-    updateCurListNode: key => {
-      updateCurlist(key || '');
+    updateCurListNode: async key => {
+      await updateCurlist(key || '');
     },
     createFolder: createFolder,
     setNavSelect: params => {
@@ -9700,7 +9695,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     if (isNavtab) {
       if (!curlist?.length) {
-        setCurList(data || []);
+        setCurList(data?.[0]?.children || []);
       }
     } else {
       if (!curInfo) {
@@ -9712,7 +9707,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
   }, [data, isNavtab]);
   //切换当前 文件目录时 需要清空的内容
   useEffect(() => {
-    if (!curInfo?.key) return;
+    if (!curInfo?.key || curInfo?.key == 'root') return;
     setExpandkey([]);
     onExpand?.([]);
     setCurSelect(null);
@@ -9722,9 +9717,10 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     onChangeCurMap?.(dataMap);
   }, [dataMap]);
   useEffect(() => {
-    if (props?.expandedKeys) {
-      setExpandNavKey(cloneDeep(props?.expandedKeys) || []);
-    }
+    const expandedKeys = cloneDeep(props?.expandedKeys) || [];
+    if (_$3.isEqual(expandedKeysRef.current, expandedKeys)) return;
+    expandedKeysRef.current = expandedKeys;
+    setExpandNavKey(expandedKeys);
   }, [props.expandedKeys]);
   /* ************  加载更新数据   **************** */
   async function loadData(key, param, closeload = true) {
@@ -9739,6 +9735,9 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     }
     //清空加载过的结点记录
     setLoadKey([]);
+    // console.log('🚀 ~ data?.current:', key);
+    // console.log('🚀 ~ data?.fileList:', data?.fileList);
+    // console.log('🚀 ~ data?.current:', data?.current);
     setCurList(data?.fileList || []);
     setCurInfo(data?.current || {});
     setTotalNum(data?.totalNum || 0);
@@ -9752,6 +9751,56 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     let data = await props.loadData?.(key);
     return data?.fileList || [];
   }
+  async function hydrateExpandedList(list = [], expandedKeys = []) {
+    const expandedKeySet = new Set(expandedKeys);
+    const result = [];
+    for (const item of list) {
+      const next = cloneDeep(item);
+      if (next?.type == 'folder' && next?.key && expandedKeySet.has(next.key)) {
+        const data = await props.loadData?.(next.key);
+        next.children = await hydrateExpandedList(data?.fileList || [], expandedKeys);
+        next.api = true;
+        next.isLeaf = false;
+      }
+      result.push(next);
+    }
+    return result;
+  }
+  async function loadExpandedData(key, expandedKeys = []) {
+    if (!props.loadData) return null;
+    const data = await props.loadData?.(key);
+    if (!data || data.status == 'Err') return null;
+    return {
+      ...data,
+      fileList: await hydrateExpandedList(data?.fileList || [], expandedKeys)
+    };
+  }
+  async function refreshCurrentList(key, expandedKeys = expandkey) {
+    const data = await loadExpandedData(key || curInfo?.key || '', expandedKeys);
+    if (!data) return false;
+    setCurList(data?.fileList || []);
+    setCurInfo(data?.current || {});
+    setTotalNum(data?.totalNum || 0);
+    setLoadKey(expandedKeys);
+    setExpandkey(expandedKeys);
+    return true;
+  }
+  async function refreshNavData(expandedKeys = nav_expandkey) {
+    if (!onChange || !Array.isArray(data)) return;
+    const tree = await hydrateExpandedList(data || [], expandedKeys);
+    onChange(tree);
+    setNavLoadKey(expandedKeys);
+    setExpandNavKey(expandedKeys);
+  }
+  async function refreshAfterMove() {
+    const currentExpandKeys = cloneDeep(expandkey || []);
+    const navExpandKeys = cloneDeep(nav_expandkey || []);
+    setLoading(ApiStatusEnum.LOADING);
+    await Promise.all([refreshCurrentList(curInfo?.key || '', currentExpandKeys), refreshNavData(navExpandKeys)]);
+    setCurSelect(null);
+    setCurSelectFile(null);
+    setLoading(ApiStatusEnum.READY);
+  }
   // 直接通过 刷新数节点 达到刷新效果
   const reloadNode = (key, params) => {
     let isfix = false;
@@ -9813,35 +9862,19 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
       item.children = arr;
       return item;
     };
-    const updateinfo = (item, params) => {
-      return {
-        ...item,
-        ...params
-      };
-    };
-    const delNode = (arr, index) => {
-      arr.splice(index, 1);
-      return arr;
-    };
     const filterData = (data, key) => {
       let arr = data;
       let i = 0;
-      let del_index = null;
       while (i < arr.length) {
         let item = arr[i];
         if (key == item.key) {
-          if (type == 'add') item = addNode(item, params);
-          if (type == 'update') item = updateinfo(item, params);
-          if (type == 'del') del_index = i;
+          item = addNode(item, params);
         }
         if (Array.isArray(item.children)) {
           item.children = filterData(item.children, key);
         }
         i++;
       }
-      if (type == 'del' && typeof del_index == 'number') {
-        arr = delNode(arr, del_index);
-      }
       return arr || [];
     };
     let datas = filterData(cloneDeep(data) || [], key);
@@ -9870,29 +9903,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     onChange?.(arr);
   }
   async function updateCurlist(key) {
-    let data = [];
-    data = await reduceGetTreeData(curlist, key || curInfo?.key || '', expandkey);
-    setCurList(data);
-  }
-  async function reduceGetTreeData(data, key, expand) {
-    let res = await loadNode(key);
-    const newData = [];
-    // @ts-ignore
-    await data.myforeach(async v => {
-      let obj = _$3.cloneDeep(v);
-      if (expand.includes(obj.key)) {
-        obj.children = await reduceGetTreeData(obj.children || [], obj.key, expand);
-      }
-      if (obj.type == 'file') {
-        let match = res.filter(it => it.key === obj.key);
-        if (match.length) {
-          newData.push(match[0]);
-          return null;
-        }
-      }
-      newData.push(obj);
-    });
-    return newData;
+    await refreshCurrentList(key || curInfo?.key || '', expandkey);
   }
   /* ************  功能方法   **************** */
   async function uploadFile(param) {
@@ -10224,7 +10235,10 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
         data.push(dataMap?.[v]);
       }
     });
-    _onMoveFile?.(data, info);
+    if (!_onMoveFile) return;
+    const result = await _onMoveFile?.(data, info);
+    if (result === false) return;
+    await refreshAfterMove();
   }
   return jsx(ExampleContext.Provider, {
     value: {