@gingkoo/pandora-explorer 0.0.1-alpha.90 → 0.0.1-alpha.91

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

@@ -1,3 +1,4 @@
 import './index.less';
 declare function DetailsInfo(props: any): import("react/jsx-runtime").JSX.Element;
 export default DetailsInfo;
+export declare function DetailHeader(info: any): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/tree/components/Indent.d.ts

@@ -1,10 +1,3 @@
 import * as React from 'react';
-interface IndentProps {
-    prefixCls: string;
-    level: number;
-    isStart: boolean[];
-    isEnd: boolean[];
-    width?: number;
-}
-declare const _default: React.NamedExoticComponent<IndentProps>;
+declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/lib/es/components/tree/components/MotionTreeNode.d.ts

@@ -9,6 +9,7 @@ interface MotionTreeNodeProps extends Omit<TreeNodeProps, 'domRef'> {
     onMotionEnd: () => void;
     motionType?: 'show' | 'hide';
     treeNodeRequiredProps: TreeNodeRequiredProps;
+    [key: string]: any;
 }
-declare const RefMotionTreeNode: React.ForwardRefExoticComponent<MotionTreeNodeProps & React.RefAttributes<HTMLDivElement>>;
+declare const RefMotionTreeNode: React.ForwardRefExoticComponent<Omit<MotionTreeNodeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default RefMotionTreeNode;

package/lib/es/components/tree/components/Tree.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NodeDragEventHandler, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams } from './contextTypes';
 import DropIndicator from './DropIndicator';
-import { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, NodeInstance, SafeKey, ScrollTo } from './interface';
+import { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, NodeInstance, ScrollTo } from './interface';
 import { NodeListRef } from './NodeList';
 export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
     event: 'check';
@@ -60,7 +60,7 @@ export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     };
     defaultSelectedKeys?: Key[];
     selectedKeys?: Key[];
-    allowDrop?: AllowDrop<TreeDataType>;
+    allowDrop?: any;
     titleRender?: (node: TreeDataType) => React.ReactNode;
     dropIndicatorRender?: (props: {
         dropPosition: -1 | 0 | 1;
@@ -144,7 +144,7 @@ interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
     loadedKeys: Key[];
     loadingKeys: Key[];
     expandedKeys: Key[];
-    draggingNodeKey: Key;
+    draggingNodeKey: any;
     dragChildrenKeys: Key[];
     dropPosition: -1 | 0 | 1 | null;
     dropLevelOffset: number | null;
@@ -161,7 +161,7 @@ interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
     prevProps: TreeProps;
     fieldNames: FieldNames;
 }
-declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
+declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends React.Component<TreeProps<any>, TreeState<any>> {
     static defaultProps: {
         prefixCls: string;
         showLine: boolean;
@@ -184,19 +184,19 @@ declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> ext
     };
     static TreeNode: React.FC<import("./interface").TreeNodeProps<DataNode>>;
     destroyed: boolean;
-    delayedDragEnterLogic: Record<SafeKey, number>;
-    loadingRetryTimes: Record<SafeKey, number>;
-    state: TreeState<TreeDataType>;
-    dragStartMousePosition: null;
-    dragNode: NodeInstance<TreeDataType>;
-    currentMouseOverDroppableNodeKey: null;
+    delayedDragEnterLogic: Record<any, number>;
+    loadingRetryTimes: Record<any, number>;
+    state: any;
+    dragStartMousePosition: any;
+    dragNode: any;
+    currentMouseOverDroppableNodeKey: any;
     listRef: React.RefObject<NodeListRef>;
     componentDidMount(): void;
     componentDidUpdate(): void;
     onUpdated(): void;
     componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode>>;
-    onNodeDragStart: NodeDragEventHandler<TreeDataType, HTMLDivElement>;
+    static getDerivedStateFromProps(props: any, prevState: any): Partial<TreeState<DataNode>>;
+    onNodeDragStart: NodeDragEventHandler<any, HTMLDivElement>;
     /**
      * [Legacy] Select handler is smaller than node,
      * so that this will trigger when drag enter node or select handler.
@@ -204,18 +204,18 @@ declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> ext
      * Better for use mouse move event to refresh drag state.
      * But let's just keep it to avoid event trigger logic change.
      */
-    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
+    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: any) => void;
     onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
     onNodeDragLeave: NodeDragEventHandler<TreeDataType>;
     onWindowDragEnd: (event: any) => void;
-    onNodeDragEnd: NodeDragEventHandler<TreeDataType>;
+    onNodeDragEnd: any;
     onNodeDrop: (event: React.DragEvent<HTMLDivElement>, node: any, outsideTree?: boolean) => void;
     resetDragState(): void;
     cleanDragState: () => void;
     triggerExpandActionExpand: NodeMouseEventHandler;
     onNodeClick: NodeMouseEventHandler<TreeDataType>;
     onNodeDoubleClick: NodeMouseEventHandler<TreeDataType>;
-    onNodeSelect: NodeMouseEventHandler<TreeDataType>;
+    onNodeSelect: NodeMouseEventHandler<any>;
     onNodeCheck: (e: React.MouseEvent<HTMLSpanElement>, treeNode: EventDataNode<TreeDataType>, checked: boolean) => void;
     onNodeLoad: (treeNode: EventDataNode<TreeDataType>) => Promise<void>;
     onNodeMouseEnter: NodeMouseEventHandler<TreeDataType>;
@@ -224,29 +224,29 @@ declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> ext
     onFocus: React.FocusEventHandler<HTMLDivElement>;
     onBlur: React.FocusEventHandler<HTMLDivElement>;
     getTreeNodeRequiredProps: () => {
-        expandedKeys: React.Key[];
-        selectedKeys: React.Key[];
-        loadedKeys: React.Key[];
-        loadingKeys: React.Key[];
-        checkedKeys: React.Key[];
-        halfCheckedKeys: React.Key[];
-        dragOverNodeKey: React.Key | null;
-        dropPosition: 0 | 1 | -1 | null;
-        keyEntities: KeyEntities<TreeDataType>;
+        expandedKeys: any;
+        selectedKeys: any;
+        loadedKeys: any;
+        loadingKeys: any;
+        checkedKeys: any;
+        halfCheckedKeys: any;
+        dragOverNodeKey: any;
+        dropPosition: any;
+        keyEntities: any;
     };
     /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
     setExpandedKeys: (expandedKeys: Key[]) => void;
-    onNodeExpand: (e: React.MouseEvent<HTMLDivElement>, treeNode: EventDataNode<TreeDataType>) => void;
+    onNodeExpand: (e: React.MouseEvent<HTMLDivElement>, treeNode: any) => void;
     onListChangeStart: () => void;
     onListChangeEnd: () => void;
-    onActiveChange: (newActiveKey: Key | null) => void;
-    getActiveItem: () => FlattenNode<TreeDataType> | null;
+    onActiveChange: (newActiveKey: any) => void;
+    getActiveItem: () => any;
     offsetActiveKey: (offset: number) => void;
     onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
     /**
      * Only update the value which is not in props
      */
-    setUncontrolledState: (state: Partial<TreeState<TreeDataType>>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
+    setUncontrolledState: (state: any, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
     scrollTo: ScrollTo;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/lib/es/components/tree/components/contextTypes.d.ts

@@ -37,7 +37,7 @@ export interface TreeContextProps<TreeDataType extends BasicDataNode = DataNode>
         dropPosition: -1 | 0 | 1;
         dropLevelOffset: number;
         indent: any;
-        prefixCls: any;
+        prefixCls: string;
         direction: Direction;
     }) => React.ReactNode;
     dragOverNodeKey: Key | null;
@@ -61,4 +61,4 @@ export interface TreeContextProps<TreeDataType extends BasicDataNode = DataNode>
     onNodeDragEnd: NodeDragEventHandler<any, any>;
     onNodeDrop: NodeDragEventHandler<any, any>;
 }
-export declare const TreeContext: React.Context<TreeContextProps<any>>;
+export declare const TreeContext: React.Context<any>;

package/lib/es/components/tree/components/util.d.ts

@@ -5,16 +5,16 @@ import React from 'react';
 import { BasicDataNode, DataEntity, DataNode, Direction, FlattenNode, Key, KeyEntities, NodeElement, NodeInstance } from './interface';
 import { AllowDrop, TreeProps } from './Tree';
 export { getPosition, isTreeNode } from './utils/treeUtil';
-export declare function arrDel(list: Key[], value: Key): React.Key[];
-export declare function arrAdd(list: Key[], value: Key): React.Key[];
+export declare function arrDel(list: Key[], value: any): React.Key[];
+export declare function arrAdd(list: Key[], value: any): React.Key[];
 export declare function posToArr(pos: string): string[];
-export declare function getDragChildrenKeys<TreeDataType extends BasicDataNode = DataNode>(dragNodeKey: Key, keyEntities: KeyEntities<TreeDataType>): Key[];
-export declare function isLastChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
+export declare function getDragChildrenKeys<TreeDataType extends BasicDataNode = DataNode>(dragNodeKey: any, keyEntities: KeyEntities<TreeDataType>): Key[];
+export declare function isLastChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: any): boolean;
 export declare function isFirstChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
 export declare function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(event: React.MouseEvent, dragNode: NodeInstance<TreeDataType>, targetNode: NodeInstance<TreeDataType>, indent: number, startMousePosition: {
     x: number;
     y: number;
-}, allowDrop: AllowDrop<TreeDataType>, flattenedNodes: FlattenNode<TreeDataType>[], keyEntities: KeyEntities<TreeDataType>, expandKeys: Key[], direction: Direction): {
+}, allowDrop: AllowDrop<any>, flattenedNodes: FlattenNode<TreeDataType>[], keyEntities: KeyEntities<TreeDataType>, expandKeys: Key[], direction: Direction): {
     dropPosition: -1 | 0 | 1;
     dropLevelOffset: number;
     dropTargetKey: Key;
@@ -30,7 +30,7 @@ export declare function calcDropPosition<TreeDataType extends BasicDataNode = Da
  * @returns [string]
  */
 export declare function calcSelectedKeys(selectedKeys: Key[], props: TreeProps): React.Key[] | undefined;
-export declare function convertDataToTree(treeData: DataNode[], processor?: {
+export declare function convertDataToTree(treeData: DataNode[] | any, processor?: {
     processProps: (prop: DataNode) => any;
 }): NodeElement[];
 /**
@@ -51,4 +51,4 @@ export declare function parseCheckedKeys(keys: Key[] | {
  * @param keyList
  * @param keyEntities
  */
-export declare function conductExpandParent(keyList: Key[], keyEntities: KeyEntities): Key[];
+export declare function conductExpandParent(keyList: any[], keyEntities: KeyEntities): Key[];

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

@@ -1,2 +1 @@
-import type { Key, KeyEntities } from '../interface';
-export default function getEntity<T = any>(keyEntities: KeyEntities<T>, key: Key): import("../interface").DataEntity<T>;
+export default function getEntity<T = any>(keyEntities: any, key: any): any;

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

@@ -7,11 +7,11 @@ export declare function fillFieldNames(fieldNames?: FieldNames): Required<FieldN
 /**
  * Warning if TreeNode do not provides key
  */
-export declare function warningWithoutKey(treeData: DataNode[], fieldNames: FieldNames): void;
+export declare function warningWithoutKey(treeData: DataNode[], fieldNames: any): void;
 /**
  * Convert `children` of Tree into `treeData` structure.
  */
-export declare function convertTreeToData(rootNodes: React.ReactNode): DataNode[];
+export declare function convertTreeToData(rootNodes: React.ReactNode): any[];
 /**
  * Flat nest tree data into flatten list. This is used for virtual list render.
  * @param treeNodeList Origin data node list
@@ -82,5 +82,5 @@ export declare function getTreeNodeProps<TreeDataType extends BasicDataNode = Da
     dragOverGapTop: boolean;
     dragOverGapBottom: boolean;
 };
-export declare function convertNodePropsToEventData<TreeDataType extends BasicDataNode = DataNode>(props: TreeNodeProps<TreeDataType>): EventDataNode<TreeDataType>;
+export declare function convertNodePropsToEventData<TreeDataType extends BasicDataNode = DataNode>(props: TreeNodeProps<TreeDataType>): EventDataNode<any>;
 export {};

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-explorer v0.0.1-alpha.90
+ * @gingkoo/pandora-explorer v0.0.1-alpha.91
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx$1 from 'classnames';
@@ -2577,7 +2577,7 @@ const Indent = ({
     }, i));
   }
   return jsx("span", {
-    "aria-hidden": "true",
+    "aria-hidden": 'true',
     className: `${prefixCls}-indent`,
     children: list
   });
@@ -2740,7 +2740,7 @@ config) {
   function processNode(node, index, parent, pathNodes) {
     const children = node ? node[mergeChildrenPropName] : dataNodes;
     const pos = node ? getPosition(parent.pos, index) : '0';
-    const connectNodes = node ? [...pathNodes, node] : [];
+    const connectNodes = node ? [...(pathNodes || []), node] : [];
     // Process node if is not root
     if (node) {
       const key = syntheticGetKey(node, pos);
@@ -4570,7 +4570,7 @@ let Tree$1 = class Tree extends React.Component {
     this.setState({
       draggingNodeKey: eventKey,
       dragChildrenKeys: getDragChildrenKeys(eventKey, keyEntities),
-      indent: this.listRef.current.getIndentWidth()
+      indent: this.listRef.current?.getIndentWidth?.()
     });
     this.setExpandedKeys(newExpandedKeys);
     window.addEventListener('dragend', this.onWindowDragEnd);
@@ -5373,7 +5373,7 @@ let Tree$1 = class Tree extends React.Component {
     }
   };
   scrollTo = scroll => {
-    this.listRef.current.scrollTo(scroll);
+    this.listRef.current?.scrollTo(scroll);
   };
   render() {
     const {
@@ -8845,7 +8845,7 @@ const Layout$1 = props => {
 var css_248z$1 = ".frame-main-info {\n  height: 100%;\n  width: 100%;\n  border-left: 1px solid #6464641a;\n}\n.frame-main-info * {\n  user-select: none;\n}\n";
 styleInject(css_248z$1);
 
-var css_248z = ".explorer-details {\n  height: 100%;\n  width: 100%;\n  border-left: 1px solid #6464641a;\n}\n.explorer-details .info-header {\n  height: 65px;\n  background: #f6faff;\n  background-image: linear-gradient(190deg, #e5f6ff, #fdfeff);\n  border-bottom: 1px solid #eee;\n  position: relative;\n  z-index: 2;\n}\n.explorer-details .info-header .file-icon {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n  text-align: center;\n  overflow: hidden;\n}\n.explorer-details .info-header .file-icon > span {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.explorer-details .info-header .file-name {\n  font-size: 15px;\n  color: #666;\n  word-break: break-word;\n  padding-right: 30px;\n  vertical-align: middle;\n  height: 60px;\n  padding-left: 65px;\n  line-height: 1.2em;\n}\n.explorer-details .info-header .file-name .title {\n  width: 100%;\n  max-height: 35px;\n  line-height: 1.2em;\n  padding-top: 12px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.explorer-details .info-header .file-name .desc {\n  font-size: 0.9em;\n  color: #aaa;\n  padding-top: 4px;\n  white-space: nowrap;\n}\n.explorer-details .info-content {\n  height: calc(100% - 65px);\n  width: 100%;\n  overflow: hidden;\n  overflow-y: auto;\n}\n.explorer-details .info-content .panel-info {\n  padding: 10px 0;\n}\n.explorer-details .info-content .panel-info .panel-col {\n  padding-left: 15px;\n  padding-right: 10px;\n}\n.explorer-details .info-content .panel-info .panel-col > .title {\n  float: left;\n  color: #999;\n  text-align: left;\n  padding: 0;\n  margin: 0;\n  line-height: 25px;\n  width: 27%;\n  margin-right: 1%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.explorer-details .info-content .panel-info .panel-col > .content {\n  float: left;\n  word-break: break-word;\n  color: #444;\n  width: 72%;\n  margin: 0;\n  line-height: 25px;\n  user-select: text;\n  font-size: 1em;\n}\n.explorer-details .info-content .panel-info .panel-col > .content-content {\n  max-height: 120px;\n  text-overflow: ellipsis;\n  word-break: break-word;\n  overflow: hidden;\n  overflow-y: auto;\n  padding: 4px 2% 5px 2%;\n}\n.explorer-details .info-content .panel-info .panel-col > .content > textarea {\n  border-radius: 5px;\n  outline: none;\n  width: 100%;\n  line-height: 1.2em;\n  padding: 4px 2% 4px 2%;\n  border: 1px solid transparent;\n  box-shadow: 0 0 0 1px #00000014;\n}\n.explorer-details .info-content .panel-info .panel-col > .content textarea:hover {\n  box-shadow: 0 0 0 1px #1890ff;\n}\n.explorer-details .tab-group-line {\n  margin: 0;\n  background: #fafafa;\n  border: none;\n  text-align: center;\n  position: absolute;\n  z-index: 2;\n  bottom: 0;\n  width: 100%;\n  padding: 0;\n  border-top: 1px solid #eee;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02);\n  font-size: 1em;\n}\n.explorer-details.background .info-header-background {\n  user-select: none;\n  position: relative;\n  height: 150px;\n}\n.explorer-details.background .info-header-background img {\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n  max-width: inherit;\n  max-height: inherit;\n  box-shadow: none;\n  object-fit: cover;\n  pointer-events: none;\n}\n.explorer-details.background .info-header-background .title {\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background: #00000030;\n  color: #fff;\n  padding: 0 10px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-details.background .info-content {\n  height: calc(100% - 150px);\n}\n.explorer-details-modal .viewer-modal-header {\n  height: 0;\n  overflow: unset;\n}\n.explorer-details-modal .header-toolbar {\n  background: transparent !important;\n  z-index: 10;\n}\n";
+var css_248z = ".explorer-details {\n  height: 100%;\n  width: 100%;\n  border-left: 1px solid #6464641a;\n}\n.explorer-details .info-header {\n  height: 65px;\n  background: #f6faff;\n  background-image: linear-gradient(190deg, #e5f6ff, #fdfeff);\n  border-bottom: 1px solid #eee;\n  position: relative;\n  z-index: 2;\n}\n.explorer-details .info-header .file-icon {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n  text-align: center;\n  overflow: hidden;\n}\n.explorer-details .info-header .file-icon > span {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.explorer-details .info-header .file-name {\n  font-size: 15px;\n  color: #666;\n  word-break: break-word;\n  padding-right: 30px;\n  vertical-align: middle;\n  height: 60px;\n  padding-left: 65px;\n  line-height: 1.2em;\n}\n.explorer-details .info-header .file-name .title {\n  width: 100%;\n  max-height: 35px;\n  line-height: 1.2em;\n  padding-top: 12px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.explorer-details .info-header .file-name .desc {\n  font-size: 0.9em;\n  color: #aaa;\n  padding-top: 4px;\n  white-space: nowrap;\n}\n.explorer-details .info-content {\n  height: calc(100% - 65px);\n  width: 100%;\n  overflow: hidden;\n  overflow-y: auto;\n}\n.explorer-details .info-content .panel-info {\n  padding: 10px 0;\n}\n.explorer-details .info-content .panel-info .panel-col {\n  padding-left: 15px;\n  padding-right: 10px;\n}\n.explorer-details .info-content .panel-info .panel-col > .title {\n  float: left;\n  color: #999;\n  text-align: left;\n  padding: 0;\n  margin: 0;\n  line-height: 25px;\n  width: 27%;\n  margin-right: 1%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.explorer-details .info-content .panel-info .panel-col > .content {\n  float: left;\n  word-break: break-word;\n  color: #444;\n  width: 72%;\n  margin: 0;\n  line-height: 25px;\n  user-select: text;\n  font-size: 1em;\n}\n.explorer-details .info-content .panel-info .panel-col > .content-content {\n  max-height: 120px;\n  text-overflow: ellipsis;\n  word-break: break-word;\n  overflow: hidden;\n  overflow-y: auto;\n  padding: 4px 2% 5px 2%;\n}\n.explorer-details .info-content .panel-info .panel-col > .content > textarea {\n  border-radius: 5px;\n  outline: none;\n  width: 100%;\n  line-height: 1.2em;\n  padding: 4px 2% 4px 2%;\n  border: 1px solid transparent;\n  box-shadow: 0 0 0 1px #00000014;\n}\n.explorer-details .info-content .panel-info .panel-col > .content textarea:hover {\n  box-shadow: 0 0 0 1px #1890ff;\n}\n.explorer-details .tab-group-line {\n  margin: 0;\n  background: #fafafa;\n  border: none;\n  text-align: center;\n  position: absolute;\n  z-index: 2;\n  bottom: 0;\n  width: 100%;\n  padding: 0;\n  border-top: 1px solid #eee;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02);\n  font-size: 1em;\n}\n.explorer-details.background .info-header-background {\n  user-select: none;\n  position: relative;\n  height: 150px;\n}\n.explorer-details.background .info-header-background img {\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n  max-width: inherit;\n  max-height: inherit;\n  box-shadow: none;\n  object-fit: cover;\n  pointer-events: none;\n}\n.explorer-details.background .info-header-background .title {\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background: #00000030;\n  color: #fff;\n  padding: 0 10px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-details.background .info-content {\n  height: calc(100% - 150px);\n}\n.explorer-details-modal .info-header {\n  width: 100%;\n  height: 65px;\n  background: #f6faff;\n  background-image: linear-gradient(190deg, #e5f6ff, #fdfeff);\n  border-bottom: 1px solid #eee;\n  position: relative;\n  z-index: 2;\n}\n.explorer-details-modal .info-header .file-icon {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n  text-align: center;\n  overflow: hidden;\n}\n.explorer-details-modal .info-header .file-icon > span {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.explorer-details-modal .info-header .file-name {\n  font-size: 15px;\n  color: #666;\n  word-break: break-word;\n  padding-right: 30px;\n  vertical-align: middle;\n  height: 60px;\n  padding-left: 65px;\n  line-height: 1.2em;\n}\n.explorer-details-modal .info-header .file-name .title {\n  width: 100%;\n  max-height: 35px;\n  line-height: 1.2em;\n  padding-top: 12px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.explorer-details-modal .info-header .file-name .desc {\n  font-size: 0.9em;\n  color: #aaa;\n  padding-top: 4px;\n  white-space: nowrap;\n}\n.explorer-details-modal .header-toolbar {\n  z-index: 2 !important;\n}\n.explorer-details-modal .info-header-background {\n  width: 100%;\n  user-select: none;\n  position: relative;\n  height: 150px;\n}\n.explorer-details-modal .info-header-background img {\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n  max-width: inherit;\n  max-height: inherit;\n  box-shadow: none;\n  object-fit: cover;\n  pointer-events: none;\n}\n.explorer-details-modal .info-header-background .title {\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background: #00000030;\n  color: #fff;\n  padding: 0 10px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-details-modal .info-content {\n  height: 100% !important;\n}\n.explorer-details-modal .viewer-modal-header {\n  overflow: unset;\n}\n.explorer-details-modal .header-toolbar {\n  background: transparent !important;\n  z-index: 10;\n}\n";
 styleInject(css_248z);
 
 // const Image = (src: string) => {
@@ -8865,7 +8865,8 @@ styleInject(css_248z);
 function DetailsInfo(props) {
   const {
     info,
-    getIcons
+    getIcons,
+    isheader = true
   } = props;
   const [isEdit, setIsEdit] = useState(false);
   function rednerInfo() {
@@ -8943,45 +8944,11 @@ function DetailsInfo(props) {
       })]
     });
   }
-  function renderHeader() {
-    if (info?.suffix && ImgSuffix.includes(info.suffix)) {
-      return jsxs("div", {
-        className: 'info-header-background',
-        children: [jsx("img", {
-          src: info.pic
-        }), jsx("div", {
-          className: 'title',
-          children: info?.title
-        })]
-      });
-    } else {
-      return jsxs("div", {
-        className: 'info-header',
-        children: [jsx("div", {
-          className: 'file-icon',
-          children: getIcons(info, '')
-        }), jsxs("div", {
-          className: 'file-name',
-          children: [jsx("div", {
-            className: 'title',
-            children: info?.title
-          }), jsxs("div", {
-            className: 'desc',
-            children: [jsx("span", {
-              children: typeof info?.size == 'number' ? convertBytesToSize(info?.size) : info?.size || '-'
-            }), jsx("span", {
-              children: info?.fixTime || ''
-            })]
-          })]
-        })]
-      });
-    }
-  }
   return jsxs("div", {
     className: cx$1('explorer-details', {
       background: ImgSuffix.includes(info?.suffix)
     }),
-    children: [renderHeader(), jsx("div", {
+    children: [isheader && DetailHeader(info), jsx("div", {
       className: 'info-content',
       children: props?.renderFileInfo ? props.renderFileInfo?.(info) : rednerInfo()
     }), jsx("div", {
@@ -8989,6 +8956,40 @@ function DetailsInfo(props) {
     })]
   });
 }
+function DetailHeader(info) {
+  if (info?.suffix && ImgSuffix.includes(info.suffix)) {
+    return jsxs("div", {
+      className: 'info-header-background',
+      children: [jsx("img", {
+        src: info.pic
+      }), jsx("div", {
+        className: 'title',
+        children: info?.title
+      })]
+    });
+  } else {
+    return jsxs("div", {
+      className: 'info-header',
+      children: [jsx("div", {
+        className: 'file-icon',
+        children: Icons(info, '')
+      }), jsxs("div", {
+        className: 'file-name',
+        children: [jsx("div", {
+          className: 'title',
+          children: info?.title
+        }), jsxs("div", {
+          className: 'desc',
+          children: [jsx("span", {
+            children: typeof info?.size == 'number' ? convertBytesToSize(info?.size) : info?.size || '-'
+          }), jsx("span", {
+            children: info?.fixTime || ''
+          })]
+        })]
+      })]
+    });
+  }
+}
 
 function ExplorerInfo(props) {
   const {
@@ -9721,10 +9722,15 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
         className: 'explorer-details-modal',
         modalWidth: 450,
         modalHeight: 620,
-        draggable: true,
+        customHeader: () => {
+          return jsx(DetailHeader, {
+            ...param
+          });
+        },
         content: jsx(DetailsInfo, {
           info: param,
           getIcons: Icons,
+          isheader: false,
           renderFileInfo: props?.renderFileInfo
         })
       });