kn-hooks 0.0.40 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.40",
+  "version": "0.0.43",
   "scripts": {
     "dev": "cross-env env_api=dev env_package=dev webpack-dev-server --progress",
     "build": "cross-env env_api=prod env_package=prod webpack --config webpack.config.js",

package/src/usePagination/index.js

@@ -1,8 +1,7 @@
-
-/** 
+/**
  * @module usePagination
-*/
-import { useState,useMemo,useRef } from 'react';
+ */
+import { useState, useMemo, useRef, useEffect } from 'react';
 import useSwitch from '../useSwitch';
 
 /**
@@ -13,12 +12,13 @@ import useSwitch from '../useSwitch';
  * @property {Array<Function>} [afterService] - api调用后监听方法列表
  * @property {string} [mode='pagination'] - pagination普通分页形式， scrollLoad 滚动加载,取值来源usePagination.MODE
  * @property {boolean} [debug=false] - 是否进入调试模式
+ * @property {string} [debugName=''] 
  */
 
-const MODE={
-  pagination:'pagination',
-  scrollLoad:'scrollLoad',
-}
+const MODE = {
+  pagination: 'pagination',
+  scrollLoad: 'scrollLoad',
+};
 /**
  * 分页管理器
  * 
@@ -94,152 +94,191 @@ const MODE={
  * 
  * @returns {UsePaginationResult} 
  */
-const usePagination=(props)=>{
+const usePagination = (props) => {
+  const { service, mode = MODE.pagination, debug = false,debugName='' } = props;
+  const refDestory = useRef(0);
 
-  const {service,mode=MODE.pagination,debug=false}= props;
-
-  const DEFAULT_PAGE_SIZE=20;
-  const DEFAULT_PAGE_CURRENT=1; 
-  const [pagination,setPagination] = useState({
+  const DEFAULT_PAGE_SIZE = 20;
+  const DEFAULT_PAGE_CURRENT = 1;
+  const [pagination, setPagination] = useState({
     current: DEFAULT_PAGE_CURRENT,
-    pageSize: props?.pagination?.pageSize??DEFAULT_PAGE_SIZE
+    pageSize: props?.pagination?.pageSize ?? DEFAULT_PAGE_SIZE,
   });
-  const [data,setData] = useState(null);
-  const [scrollData,setScrollData] = useState(null);
+  const [data, setData] = useState(null);
+  const [scrollData, setScrollData] = useState(null);
 
-  const refListener= useRef({
-    beforeService:props?.beforeService??[],
-    afterService:props?.afterService??[]
+  const refListener = useRef({
+    beforeService: props?.beforeService ?? [],
+    afterService: props?.afterService ?? [],
   });
   const loading = useSwitch();
 
-  const update= async ({pagination:_pagination,clear=false}={})=>{
+  const update = async ({ pagination: _pagination, clear = false } = {}) => {
     _pagination = _pagination ?? pagination;
-    _pagination = {...pagination,..._pagination};
+    _pagination = { ...pagination, ..._pagination };
+
+    const { current, pageSize } = _pagination;
 
-    const {current,pageSize} = _pagination;
+    let params = { pageSize };
+    if (mode == MODE.scrollLoad) {
+      params.cursor = _pagination.cursor;
+    } else {
+      params.current = current;
+    }
 
-    let params = {current,pageSize};
-    let listener=refListener.current;
+    let listener = refListener.current;
 
     loading.open();
-    const {beforeService} = listener;
-    if(beforeService){
-      if(debug)console.log('[usePagination] beforeService',params)
-      for(let i=0;i<beforeService.length;i++){
+    const { beforeService } = listener;
+    if (beforeService) {
+      if (debug) console.log('[usePagination] beforeService', params);
+      for (let i = 0; i < beforeService.length; i++) {
         params = beforeService[i](params);
-        if(typeof params?.then == 'function'){
+        if (typeof params?.then == 'function') {
           params = await params;
         }
-        if(!params){loading.close();return;}
+        if (!params) {
+          loading.close();
+          return;
+        }
       }
     }
-    if(!params){
+    if (!params) {
       loading.close();
       return;
     }
-    if(debug)console.log('[usePagination] service',params)
+
+    if(refDestory.current){return;}
+    if (debug) console.log('[usePagination] service', params,debugName);
     let req = await service(params);
-    const {afterService} = listener;
-    if(afterService){
-      if(debug)console.log('[usePagination] afterService',req)
-      for(let i=0;i<afterService.length;i++){
+        
+    if(refDestory.current){return;}
+    const { afterService } = listener;
+    if (afterService) {
+      if (debug) console.log('[usePagination] afterService', req,debugName);
+      for (let i = 0; i < afterService.length; i++) {
         req = afterService[i](req);
-        if( typeof req?.then == 'function' ){
+        if (typeof req?.then == 'function') {
           req = await req;
         }
       }
     }
-    if(debug)console.log('[usePagination] response',req)
-    let response={};
-    if(req?.code==0){
-      let {page:{current,total=0},data:reqData} = req;
-      let _pageSize=pageSize;
+    if (debug) console.log('[usePagination] response', req,debugName);
+    let response = {};
+    if (req?.code == 0) {
+      let {
+        page: { current = 1, total = 0, cursor = undefined },
+        data: reqData,
+      } = req;
+      let _pageSize = pageSize;
       // 兼容没数据的时候如果pageSize为0会导致接下来刷新的时候也按0的pageSize来写入
-      if(req?.page?.pageSize){
-        _pageSize=+req?.page?.pageSize;
+      if (req?.page?.pageSize) {
+        _pageSize = +req?.page?.pageSize;
       }
-      current=+current;
-      total=+total;
-      const startIdx= (current-1)*_pageSize;
+      total = +total;
+      let startIdx = 0;
       let more;
-      if(mode==MODE.pagination){
-        more = current*_pageSize<total;
-      }else{
+      if (mode == MODE.pagination) {
+        current = +current;
+        startIdx = (current - 1) * _pageSize;
+        more = current * _pageSize < total;
+      } else {
         more = req.page.more;
       }
-      response.pagination={
-        current,pageSize:_pageSize,total,startIdx,more
+      response.pagination = {
+        current,
+        pageSize: _pageSize,
+        total,
+        startIdx,
+        more,
+        cursor,
       };
       setPagination(response.pagination);
-      response.data= clear?[]:(data||[]);
 
-      if(response.data.length<current){
-        for(let i=0;i<current;i++){
-          response.data[i]=response.data[i]||[];
-        }
-      }
-      let pageIdx= current-1;
-      response.data[pageIdx]= response.data[pageIdx]||[];
-      response.data[pageIdx]= reqData||[];
-      response.data=[...response.data];
-      setData(response.data);
-
-      // 滚动加载模式的数据组装
-      if(mode==MODE.scrollLoad){
-        let _scrollData=[];
-        for(let data of response.data ){
-          if(data!=null && Array.isArray(data) ){
-            _scrollData = [..._scrollData,...data];
+      if (mode == MODE.pagination) {
+        response.data = clear ? [] : data || [];
+        if (response.data.length < current) {
+          for (let i = 0; i < current; i++) {
+            response.data[i] = response.data[i] || [];
           }
         }
-        setScrollData(_scrollData)
+        let pageIdx = current - 1;
+        response.data[pageIdx] = response.data[pageIdx] || [];
+        response.data[pageIdx] = reqData || [];
+        response.data = [...response.data];
+        setData(response.data);
+      } else if (mode == MODE.scrollLoad) {
+        // 滚动加载模式的数据组装
+        let _scrollData = clear ? [] : scrollData || [];
+        _scrollData = [..._scrollData, ...reqData];
+        // for(let data of response.data ){
+        //   if(data!=null && Array.isArray(data) ){
+        //     _scrollData = [..._scrollData,...data];
+        //   }
+        // }
+        setScrollData(_scrollData);
       }
-    }else{
-      setScrollData(scrollData||[]);
-      setData(data||[]);
+    } else {
+      setScrollData(scrollData || []);
+      setData(data || []);
     }
     loading.close();
     return response;
-  }
+  };
 
-  const nextPage= async ()=>{
-    if(!pagination.more){
+  const nextPage = async () => {
+    if (!pagination.more) {
       return false;
     }
-    return update({pagination:{current:pagination.current+1}})
-  }
+    return update({ pagination: { current: pagination.current + 1 } });
+  };
 
-  const reset= ()=>{
-    return update({pagination:{current:1},clear:true})
-  }
+  const reset = () => {
+    return update({ pagination: { current: 1, cursor: '' }, clear: true });
+  };
 
-  const addListener=(type,fn)=>{
-    if(!refListener.current[type]){
-      refListener.current[type]=[];
+  const addListener = (type, fn) => {
+    if (!refListener.current[type]) {
+      refListener.current[type] = [];
     }
-    
-    const repeat= refListener.current[type].some(callback=>{
-      if(callback==fn){return true;}
+
+    const repeat = refListener.current[type].some((callback) => {
+      if (callback == fn) {
+        return true;
+      }
       return false;
-    })
-    if(repeat){return;}
+    });
+    if (repeat) {
+      return;
+    }
     refListener.current[type].push(fn);
-  }
+  };
 
-  const removeListener=(type,fn)=>{
-    if(!refListener.current[type]){
-      refListener.current[type]=[];
+  const removeListener = (type, fn) => {
+    if (!refListener.current[type]) {
+      refListener.current[type] = [];
     }
     let list = refListener.current[type];
-    for(let i=0;i<list.length;i++){
-      if(list[i] == fn){
-        list.splice(i,1);
+    for (let i = 0; i < list.length; i++) {
+      if (list[i] == fn) {
+        list.splice(i, 1);
       }
     }
-  }
+  };
+
+  useEffect(() => {
+    if (props.debug) {
+      console.log(`[usePagination]新建：`, debugName || props);
+    }
+    return () => {
+      refDestory.current = 1;
+      if (props.debug) {
+        console.log(`[usePagination]销毁：`, debugName || props);
+      }
+    };
+  }, []);
 
-  const action= useMemo(()=>{
+  const action = useMemo(() => {
     return {
       pagination,
       update,
@@ -250,14 +289,13 @@ const usePagination=(props)=>{
       removeListener,
       loading,
       mode,
-      scrollData
-    }
-  },[pagination,data,refListener,loading,mode,scrollData])
+      scrollData,
+    };
+  }, [pagination, data, refListener, loading, mode, scrollData]);
 
   return action;
-}
-usePagination.MODE=MODE;
-
+};
+usePagination.MODE = MODE;
 
 /**
  * 分页接口请求结果
@@ -268,12 +306,11 @@ usePagination.MODE=MODE;
  * @property {number} page.current - 页码
  * @property {number} page.pageSize - 分页大小
  * @property {number} page.total - 数据总量
- * 
+ *
  */
 
-
 /**
- * @function  
+ * @function
  * @name FunServices
  * @description 分页请求接口格式要求
  * @property {number} current=1 - 页码
@@ -282,7 +319,6 @@ usePagination.MODE=MODE;
  * @return {FunServicesCallback}
  */
 
-
 /**
  * 分页信息
  * @typedef {Object} Pagination
@@ -291,10 +327,9 @@ usePagination.MODE=MODE;
  * @property {number} [total=1] - 总记录数
  * @property {number} [startIdx=0] - 当前页面下第一条数据的序号
  * @property {boolean} [more] - 是否还有下一页
- * 
+ *
  */
 
-
 /**
  * 分页数据结果
  * @typedef {Object} PageDataResult
@@ -302,17 +337,14 @@ usePagination.MODE=MODE;
  * @property {Object[][]} data - 分页数据集合
  */
 
-
-
 /**
  * 分页查询结果
- * @typedef {callback} FunUpdate 
+ * @typedef {callback} FunUpdate
  * @property {Pagination} [pagination] - 最新分页信息
  * @property {boolean} [clear] - 是否清空数据
  * @returns {Promise<PageDataResult>} 最新的分页数据结果
  */
 
-
 /**
  * usePagination的返回对象
  * @typedef {Object} UsePaginationResult
@@ -325,10 +357,9 @@ usePagination.MODE=MODE;
  * @property {object} loading - loading状态，它是一个useSwitch
  * @property {string} [mode='pagination'] - pagination普通分页形式， scrollLoad 滚动加载
  * @property {Object[]} scrollData - 滚动加载模式下的数据集合
- * 
+ *
  */
 
-
 /**
  * 事件监听方法
  * @typedef {callback} FunListener
@@ -336,5 +367,4 @@ usePagination.MODE=MODE;
  * @returns {Object|Promise<Object>} 处理完毕的数据对象或者Promise
  */
 
-
 export default usePagination;