优化右键菜单的显示高度

dlink-web/src/components/Studio/StudioEdit/index.tsx

@@ -3,7 +3,6 @@ import * as _monaco from "monaco-editor";
 import MonacoEditor from "react-monaco-editor";
 import {BaseDataSourceField, BaseDataSourceHeader, CompletionItem} from "./data";
 import styles from './index.less';
-
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
 import {DocumentStateType} from "@/pages/Document/model";
@@ -15,13 +14,6 @@ let provider = {
   dispose: () => {},
 };
 
-interface IRightContent {
-  key: string;
-  value: any;
-  handleCheck: () => Promise<boolean>;
-  secondRightData: (BaseDataSourceField|BaseDataSourceHeader)[];
-}
-
 interface ISuggestions {
   label: string;
   kind: string;
@@ -31,6 +23,7 @@ interface ISuggestions {
 
 const FlinkSqlEditor = (props:any) => {
   const {
+      tabsKey,
       height = '100%',
       width = '100%',
       language = 'sql',
@@ -42,13 +35,9 @@ const FlinkSqlEditor = (props:any) => {
     tabs,
     fillDocuments,
     dispatch,
-    } = props
-  ;
-
-  const { tabsKey, value, handleCheck, secondRightData = [] }: IRightContent = props;
+    } = props;
 
   const editorInstance:any = useRef<any>();
-
   const monacoInstance: any = useRef();
 
   const getTabIndex = ():number=>{

dlink-web/src/components/Studio/StudioTree/index.tsx

@@ -14,16 +14,17 @@ import UpdateCatalogueForm from './components/UpdateCatalogueForm';
 import {ActionType} from "@ant-design/pro-table";
 import UpdateTaskForm from "@/components/Studio/StudioTree/components/UpdateTaskForm";
 import { Scrollbars } from 'react-custom-scrollbars';
-
 const { DirectoryTree } = Tree;
-
 const {Search} = Input;
 
+
 type StudioTreeProps = {
   rightClickMenu:StateType['rightClickMenu'];
   dispatch:any;
   tabs:StateType['tabs'];
   current:StateType['current'];
+  toolHeight:number;
+  refs:any;
 };
 
 type RightClickMenu = {
@@ -50,7 +51,6 @@ const getParentKey = (key, tree) => {
 
 const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const {rightClickMenu,dispatch,tabs,refs,toolHeight} = props;
-
   const [treeData, setTreeData] = useState<TreeDataNode[]>();
   const [dataList, setDataList] = useState<[]>();
   const [expandedKeys, setExpandedKeys] = useState<[]>();
@@ -62,6 +62,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const [taskFormValues, setTaskFormValues] = useState({});
   const [rightClickNode, setRightClickNode] = useState<TreeDataNode>();
   const [available, setAvailable] = useState<boolean>(true);
+  let sref = React.createRef<Scrollbars>();
 
   const getTreeData = async () => {
     const result = await getCatalogueTreeData();
@@ -95,9 +96,6 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     getTreeData();
   }, []);
 
-  const onChange = (e:any) => {
-
-  };
 
   const handleMenuClick=(key:string)=>{
     if(key=='Open'){
@@ -308,13 +306,18 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     return (treeData&&treeData.length==0)?empty:'';
   };
 
-  const onRightClick = (e:any) => {
-    setRightClickNode(e.node);
+  const handleContextMenu = (e: React.MouseEvent, node: TreeDataNode) => {
+    console.log('top:',sref.current.getScrollTop());
+    console.log('node:',node);
+    console.log('e:',e.pageY);
+    let position = e.currentTarget.getBoundingClientRect();
+    console.log('p:',position);
+    setRightClickNode(node);
     setRightClickNodeTreeItem({
-      pageX: e.event.pageX,
-      pageY: e.event.pageY,
-      id: e.node.id,
-      categoryName: e.node.name
+      pageX: e.pageX,
+      pageY: position.top+sref.current.getScrollTop(),
+      id: node.id,
+      categoryName: node.name
     });
     dispatch&&dispatch({
       type: "Studio/showRightClickMenu",
@@ -360,11 +363,13 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
         </Tooltip>
         </Col>
       </Row>
-      <Scrollbars  style={{height:(toolHeight-32)}}>
+      <Scrollbars  style={{height:(toolHeight-32)}} ref={sref}>
       {/*<Search style={{marginBottom: 8}} placeholder="Search" onChange={onChange}/>*/}
         <DirectoryTree
           multiple
-          onRightClick={onRightClick}
+          onRightClick={({event, node}: any) => {
+            handleContextMenu(event, node)
+          }}
           onSelect={onSelect}
           switcherIcon={<DownOutlined/>}
           treeData={treeData}