kn-hooks 0.0.31 → 0.0.33

package/README.md

@@ -494,6 +494,7 @@ usePagination的返回对象
 | next | <code>FunUpdate</code> | 获取下一页数据 |
 | addListener | <code>function</code> | 监听事件 (type='beforeService'|'afterService',fn:FunListener)=>object |
 | removeListener | <code>function</code> | 移除监听事件 (type,fn:FunListener)=>void |
+| loading | <code>object</code> | loading状态，它是一个useSwitch |
 
 <a id="module_usepagination__funlistener"></a>
 ### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        FunListener ⇒ <code>Object</code> \| <code>Promise.&lt;Object&gt;</code>

package/md/usePagination.md

@@ -170,6 +170,7 @@ usePagination的返回对象
 | next | <code>FunUpdate</code> | 获取下一页数据 |
 | addListener | <code>function</code> | 监听事件 (type='beforeService'|'afterService',fn:FunListener)=>object |
 | removeListener | <code>function</code> | 移除监听事件 (type,fn:FunListener)=>void |
+| loading | <code>object</code> | loading状态，它是一个useSwitch |
 
 <a id="module_usepagination__funlistener"></a>
 ### <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:4px;color:rgb(71, 128, 227);background:#ede6e6;">T</span>        FunListener ⇒ <code>Object</code> \| <code>Promise.&lt;Object&gt;</code>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "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/useDictionary/index.js

@@ -14,7 +14,7 @@ const DEFAULT_CONFIG={
  * [Demo - CodeSandBox]{@link https://codesandbox.io/s/usedictionary-j7cw8?file=/index.js}
  * 
  * @param {Object} props
- * @param {Api} props.api - 用于获取字典列表的接口
+ * @param {Api} [props.api] - 用于获取字典列表的接口
  * @param {string} [props.idKey='id'] - 字段id的key键值
  * @param {string} [props.nameKey='name'] - 字段name的key键值
  * @param {string} [props.labelKey='label'] - 字段label的key键值
@@ -200,7 +200,7 @@ export const SetConfig = ({SelectOption,RadioOption})=>{
  * @function 
  * @description 创建字典hooks工具
  * @param {Object} options
- * @param {Api} options.api - 用于获取字典列表的接口
+ * @param {Api} [options.api] - 用于获取字典列表的接口
  * @param {string} [options.idKey='id'] - 字段id的key键值
  * @param {string} [options.nameKey='name'] - 字段name的key键值
  * @param {string} [options.labelKey='label'] - 字段label的key键值
@@ -356,9 +356,10 @@ export const createDictionary=options=>{
 
 
 /**
- * @typedef Api
- * @property {Object} params - 调用接口用到的参数
- * @returns {Object}
+ * @template [T=object]
+ * @callback Api
+ * @param {Object} params - 调用接口用到的参数
+ * @returns {Promise<T>}
  */
 
 

package/src/usePagination/index.js

@@ -3,6 +3,7 @@
  * @module usePagination
 */
 import { useState,useMemo,useRef } from 'react';
+import useSwitch from '../useSwitch';
 
 /**
  * 分页管理器
@@ -99,6 +100,7 @@ const usePagination=(props)=>{
     beforeService:props?.beforeService??[],
     afterService:props?.afterService??[]
   });
+  const loading = useSwitch();
 
   const update= async ({pagination:_pagination,clear=false}={})=>{
     _pagination = _pagination ?? pagination;
@@ -108,6 +110,8 @@ const usePagination=(props)=>{
 
     let params = {current,pageSize};
     let listener=refListener.current;
+
+    loading.open();
     const {beforeService} = listener;
     if(beforeService){
       console.log('[usePagination] beforeService',params)
@@ -116,10 +120,13 @@ const usePagination=(props)=>{
         if(typeof params?.then == 'function'){
           params = await params;
         }
-        if(!params){return;}
+        if(!params){loading.close();return;}
       }
     }
-    if(!params)return;
+    if(!params){
+      loading.close();
+      return;
+    }
     console.log('[usePagination] service',params)
     let req = await service(params);
     const {afterService} = listener;
@@ -160,6 +167,7 @@ const usePagination=(props)=>{
     }else{
       setData(data||[]);
     }
+    loading.close();
     return response;
   }
 
@@ -207,9 +215,10 @@ const usePagination=(props)=>{
       nextPage,
       data,
       addListener,
-      removeListener
+      removeListener,
+      loading
     }
-  },[pagination,data,refListener])
+  },[pagination,data,refListener,loading])
 
   return action;
 }
@@ -279,6 +288,7 @@ const usePagination=(props)=>{
  * @property {FunUpdate} next - 获取下一页数据
  * @property {function} addListener - 监听事件 (type='beforeService'|'afterService',fn:FunListener)=>object
  * @property {function} removeListener - 移除监听事件 (type,fn:FunListener)=>void
+ * @property {object} loading - loading状态，它是一个useSwitch
  */
 
 

package/test/usePagination/index.jsx

@@ -17,6 +17,19 @@ const GET_LIST=(params)=>{
   data=data.map((item,idx)=>{
     return {id:`第${current}页-${item}`, value:`第${current}页-${item}`,params:others}
   })
+  return new Promise(resolve=>{
+    setTimeout(()=>{
+      resolve({
+        code:0,
+        data,
+        page:{
+          current:current,
+          pageSize:pageSize,
+          total,
+        }
+      })
+    },2000)
+  })
   return Promise.resolve({
     code:0,
     data,
@@ -94,11 +107,11 @@ const Index=()=>{
       <section>
         <Button onClick={onNext} type='primary'>加载下一页</Button>
         <Button onClick={onReset} type='primary'>重置</Button>
-        
+        <span>loading.state={page.loading.state?'1':'0'}, loading.count={page.loading.count}</span>
         
         <Table 
           rowKey={'id'}
-          loading={!page?.data?.length>0}
+          loading={!page?.data?.length>0||page.loading.state}
           columns={columns}
           dataSource={getDataSource()}
           pagination={false}