调整jupyter滑动加载

public/react/src/modules/tpm/jupyter/index.js

@@ -279,9 +279,13 @@ function JupyterTPI (props) {
   };
 
   // 分页处理
-  const handleChangePage = (page) => {
+  const handleChangePage = (e) => {
-
+    //滑动到底判断
-    handlePageChange(page);
+    let newscrollTop=parseInt(e.currentTarget.scrollTop);
+    let allclientHeight=e.currentTarget.clientHeight+newscrollTop;
+    if(e.currentTarget.scrollHeight-allclientHeight===0||e.currentTarget.scrollHeight-allclientHeight===1||e.currentTarget.scrollHeight-allclientHeight===-1){
+      handlePageChange(pagination.page+1);
+    }
   }
   // const listCtx = ;
   useEffect(() => {
@@ -310,7 +314,7 @@ function JupyterTPI (props) {
       });
 
       const oUl = (
-        <ul className="jupyter_data_list" >
+        <ul className="jupyter_data_list"  onScroll={(event)=>handleChangePage(event)} >
           { oList }
         </ul>
       );
@@ -420,18 +424,18 @@ function JupyterTPI (props) {
               </div>
               <input id="jupyter_folder_name" className={"file_path_input"} value={jupyter_folder_name}/>
             </h2>
-            { renderCtx }
+              { renderCtx }
-            <div className='jupyter_pagination'>
+            {/*<div className='jupyter_pagination'>*/}
-              {total<20?"":<Pagination
+            {/*  {total<20?"":<Pagination*/}
-                simple
+            {/*    simple*/}
-                current={pagination.page}
+            {/*    current={pagination.page}*/}
-                pageSize={pagination.limit}
+            {/*    pageSize={pagination.limit}*/}
-                total={total}
+            {/*    total={total}*/}
-                onChange={handleChangePage}
+            {/*    onChange={handleChangePage}*/}
-              />}
+            {/*  />}*/}
-            </div>
+            {/*</div>*/}
-
           </div>
+
         </Drawer>
       </div>
     </div>

public/react/src/modules/tpm/jupyter/index.scss

@@ -124,11 +124,17 @@
     padding: 0px;
   }
   .ant-drawer-wrapper-body{
+    overflow: hidden !important;
     padding-top: 60px;
     background: #070F1A;
     padding-bottom: 40px;
   }
 
+  .jupyter_data_list{
+    height:500px;
+    overflow: auto;
+  }
+
   .ant-pagination{
     color:#fff !important;
   }

public/react/src/redux/reducers/jupyterReducer.js

@@ -26,9 +26,13 @@ const JupyterReducer = (state = initState, action) => {
   switch (action.type) {
     case types.GET_JUPYTER_DATA_SETS:
       const { data_sets, data_sets_count,folder_name} = action.payload;
+      let newjupyter_data_set=state.jupyter_data_set;
+      data_sets.map((item,key)=>{
+        newjupyter_data_set.push(item)
+      })
       return {
         ...state,
-        jupyter_data_set: data_sets,
+        jupyter_data_set: newjupyter_data_set,
         jupyter_data_set_count: data_sets_count,
         jupyter_folder_name:folder_name,
       }