kn-hooks 0.0.9 → 0.0.10

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "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",
     "build:dev": "cross-env env_api=dev env_package=dev webpack",
-    "report": "cross-env env_api=prod env_package=prod report=true webpack --config webpack.test.config.js"
+    "report": "cross-env env_api=prod env_package=prod report=true webpack --config webpack.test.config.js",
+    "doc": "./node_modules/.bin/jsdoc src/**/*.js --configure .jsdoc.json --verbose",
+    "md": "./node_modules/.bin/jsdoc2md --plugin ./dmd/lib/index.js --files src/useRollingPagination/*.js src/useSwitch/*.js > md/api.md"
   },
   "main": "src/index.js",
   "dependencies": {
@@ -32,13 +34,19 @@
     "babel-plugin-import": "^1.13.3",
     "cross-env": "7.0.3",
     "css-loader": "3.4.2",
+    "dmd-bitbucket": "^0.1.10",
+    "dmd-plugin-example": "^0.1.0",
+    "docdash": "^2.0.1",
     "html-webpack-plugin": "4.0.3",
+    "jsdoc": "^4.0.2",
+    "jsdoc-to-markdown": "^8.0.0",
     "mini-css-extract-plugin": "0.9.0",
     "react": "16.13.0",
     "react-dom": "16.13.0",
     "rollup": "^2.50.5",
     "rollup-plugin-jsx": "^1.0.3",
     "rollup-plugin-terser": "^7.0.2",
+    "taffydb": "^2.7.3",
     "terser-webpack-plugin": "4.2.3",
     "webpack": "4.46.0",
     "webpack-bundle-analyzer": "3.6.1",

package/readme.md

@@ -2,11 +2,20 @@
 
 ## 目录
 
-* useSwitch - 开关控制
-* useRefSwitch - 开关控制的ref版本
-* useClipboard - 剪贴板工具
-* useDictionary - 字典管理及下拉选项框渲染
-* 按需打包
+* [使用方法](#start)
+* [按需打包](#package)
+
+* API
+  * [useDictionary - 字典管理及下拉选项框渲染](md/useDictionary.md)
+  * [useSwitch - 开关控制](md/useSwitch.md)
+  * [useClipboard - 剪贴板](md/useClipboard.md)
+  * [useCounter - 计数器](md/useCounter.md)
+  * [usePagination - 分页管理](md/usePagination.md)
+  * [usePaginationWithForm - 支持Antd-From的分页管理](md/usePaginationWithForm.md)
+
+
+
+<a id='start'></a>
 
 ## 使用方法
 
@@ -25,200 +34,12 @@ const Index=()=>{
 ```
 
 
-## @useSwitch
-
-控制开关
-
-#### Demo
-[![codesandbox](http://img.vuedata.cn/codesandboxicon1.png?imageMogr2/thumbnail/!30x)](https://codesandbox.io/s/useswitch-qd7dr?file=/index.js)
-
-
-#### API
-
-```typescript
-const result:Result = useSwitch(switch?:boolean);
-```
-
-#### Params
-
-参数|说明|类型|默认值
---|:--:|:--:|--:
-?switch|默认为打开还是关闭状态|boolean|false
-
-#### Result: Object
-
-参数|说明|类型
---|:--:|--:
-state|当前开关状态|boolean
-count|当前开关计数器|number
-toggle|切换开关|()=>void
-open|打开开关|(force?: boolean)=>void
-close|关闭开关|(force?: boolean)=>void
-
-> 当使用open和close控制开关时为成对计数模式
-> 每次open都会增加`开计数器`，而每次close会减少`开计数器`
-> 当`开计数器`为0时才会真正关闭开关
-
-##### open: (force?: boolean)=>void
-
-参数|说明|类型|默认值
---|:--:|:--:|--:
-?force|是否强制切换到打开状态|boolean|false
-
-##### close: (force?: boolean)=>void
-
-参数|说明|类型|默认值
---|:--:|:--:|--:
-?force|是否强制切换到关闭状态|boolean|false
-
-
-## @useRefSwitch
-
-useSwitch的ref版本，返回的是一个useRef,使用时通过 current 来访问switch对象
-
-```javascript
-const loading = useRefSwitch();
-return (
-  <p>{loading.current.state}</p>
-)
-
-```
-
-## @useClipboard
-
-将字符串复制到剪贴板
-
-####  Demo
-
-[![codesandbox](http://img.vuedata.cn/codesandboxicon1.png?imageMogr2/thumbnail/!30x)](https://codesandbox.io/s/useclipboard-b4ryc?file=/index.js)
-
-
-#### API
-
-```typescript
-const result:Result = useClipboard(onSuccess?: ()=>void);
-```
-
-#### Params
-
-参数|说明|类型|默认值
---|:--:|:--:|--:
-onSuccess|默认的成功回调函数|()=>void|无
-
-#### Result: (text,onSuccess)=>void  
-
-参数|说明|类型
---|:--:|--:
-text|需要复制的字符串|string|无
-?onSuccess|成功回调|()=>void|无
-
-
-
-## @useDictionary
-
-字典管理
-
-#### DEMO
-
-[![codesandbox](http://img.vuedata.cn/codesandboxicon1.png?imageMogr2/thumbnail/!30x)](https://codesandbox.io/s/usedictionary-j7cw8?file=/index.js)
-
-
-#### API
-
-```typescript
-const result:Result = useDictionary({
-  api:()=>Promise,
-});
-```
-
-#### Params
-
-参数|说明|类型|默认值
---|:--:|:--:|--:
-api|获取字典数据的接口函数|()=>Promise|无
-?beforeApi|调用接口前的钩子，用于处理传参|(params)=>any|无
-?afterApi|调用接口后的钩子，用于处理返回结果|(params)=>TypeItem[]|无
-?SelectOption|指定<Select.Option>对象|any|无
-?RadioOption|指定<Radio.Button>对象|any|无
-?idKey|字典项目中id的键值名|string|id
-?nameKey|字典项目中name的键值名|string|name
-?labelKey|字典项目中label的键值名|string|label
-
-#### TypeItem-字典项数据结构
-
-参数|说明|类型|默认值
---|:--:|:--:|--:
-id|数据唯一id|string|无
-name|数据唯一id对应的别名|string|无
-label|展示给用户看的文字|string|无
-
-#### Result: Object
-
-参数|说明|类型
---|:--:|--:
-types|字典项的值|TypeItem[]
-selectOptions|供渲染<Select>的列表，Antd下用|any
-radioOptions|供渲染<Radio>的列表,Antd下用|any
-getId|搜索字典项中,label或name匹配labelOrName的项目，返回其id的值|(labelOrName:string)=>string
-getName|搜索字典项中,id匹配id的项目，返回其name的值|(id:string)=>string
-getLabel|搜索字典项中,id匹配id的项目，返回其label的值|(id:string)=>string
-reload|重新调用字典接口刷新字典列表|()=>void
-
-#### useDictionary.SET({SelectOption,RadioOption})=>void
-全局指定渲染selectbox和radio的组件
-
-参数|说明|类型
---|:--:|--:
-SelectOption|对应Antd里 Select.Option|antd组件
-RadioOption|对应Antd里 Radio.Button|antd组件
-
-#### Example
-
-```typescript
-import {Select,Radio} from 'antd';
-import useDictionary from '@/useDictionary';
-useDictionary.SET({SelectOption:Select.Option,RadioOption:Radio.Button});
-
-const Index=()=>{
-
-  const emCity = useDictionary({
-    api:()=>{
-        return new Promise(resolve=>{
-          resolve({
-            code:0,
-            data:{
-              body:[
-                {id:1,name:'shanghai',label:'上海'},
-                {id:2,name:'beijing',label:'北京'},
-                {id:3,name:'guangzhou',label:'广州'}
-              ]
-            }
-          })
-        })
-      }
-  });
-
-  return (
-    <section >
-      <Select defaultValue={1}>
-        {
-          emCity.selectOptions
-        }
-      </Select>
-      <p>分割线</p>
-      <Radio.Group defaultValue={1}>
-        {
-          emCity.radioOptions
-        }
-      </Radio.Group>
-    </section>
-  )
-}
-```
-
+<a id='package'></a>
 
 ## 按需打包
 
+> webpack4及以上版本无需下面配置
+
 webpack增加`bable-plugin-import`插件，给babel plugins增加配置
 ```javascript
 //  rules: [

package/src/index.js

@@ -1,13 +1,18 @@
 import useClipboard from './useClipboard/index.js';
 import useSwitch from './useSwitch/index.js';
-import useRefSwitch from './useRefSwitch/index.js';
 import useDictionary from './useDictionary/index.js';
+import useCounter from './useCounter/index.js';
+import usePagination from './usePagination/index.js';
+import usePaginationWithForm from './usePaginationWithForm/index.js';
+
 
 export {
   useClipboard,
   useSwitch,
-  useRefSwitch,
   useDictionary,
+  useCounter,
+  usePagination,
+  usePaginationWithForm
 }
 
 

package/src/useClipboard/index.js

@@ -1,17 +1,24 @@
+/** 
+ * @module useClipboard
+*/
 import { useState, useMemo, useEffect, useRef } from 'react';
 import ClipboardJS from 'clipboard';
 
+
 /**
  * 剪贴板工具
- * props:{
- *  onSuccess?: Function;//复制成功后的通用回调
- * }
  * 
- * return clip:(
- *  text: string, //待复制的文案
- *  onSuccess?: Function //复制成功后的回调
- * )=>void
+ * [Demo - CodeSandBox]{@link https://codesandbox.io/s/useclipboard-b4ryc?file=/index.js}
+ * 
+ * @param {Object} [props] - 
+ * @param {callback}  [props.onSuccess] - 成功复制到剪贴板后的回调 ()=>void
+ * @return {UseClipboardResult} 
  * 
+ * @example 
+const clipboard= useClipboard();
+const onCopy=()=>{
+  clipboard.copy('text',()=>{console.log('success')})
+}
  */
 const useClipboard = (props) => {
   const { onSuccess } = props;
@@ -77,4 +84,20 @@ const useClipboard = (props) => {
   return actions;
 };
 
+
+/**
+ * 复制函数
+ * @typedef {callback} FunCopy
+ * @property {string} text - 需要被复制的字符串
+ * @property {callback} onCurSuccess - 复制成功的回调 ()=>void
+ */
+
+
+/**
+ * UseClipboardResult返回的hook
+ * @typedef {Object} UseClipboardResult
+ * @property {FunCopy} copy - 触发复制字符串的函数
+ * 
+ */
+
 export default useClipboard;

package/src/useCounter/index.js

@@ -0,0 +1,34 @@
+/** 
+ * @module useCounter
+*/
+import { useState, useMemo } from 'react';
+
+
+/**
+ * 加法计数器
+ * @return {UseCounterResult}
+ * @example
+const counter= useCounter();
+const onAdd=()=>{counter.addCount()}
+return <span>当前计数器:{counter.count}</span>
+ */
+const useCounter = () => {
+  const [count,setCount] = useState(1);
+  const action = useMemo(()=>{
+    return {
+      count,
+      addCount:()=>{setCount(v=>v+1)}
+    }
+  },[count,setCount]);
+  return action;
+};
+
+/**
+ * @typedef UseCounterResult
+ * @property {Object} req
+ * @property {number} req.count - 当前计数器的值
+ * @property {function} req.addCount - 计数器的值+1。 ()=>void
+ * 
+ */
+
+export default useCounter;

package/src/useDictionary/index.js

@@ -1,3 +1,6 @@
+/**
+ * @module useDictionary
+ */
 import React,{ useState, useMemo, useEffect } from 'react';
 
 const DEFAULT_CONFIG={
@@ -7,37 +10,62 @@ const DEFAULT_CONFIG={
 
 /**
  * 字典管理
- * props:{
- *  api:async ()=>any, 调用字段查询的接口函数，默认返回的数据格式为{ code:0 ,data:{body:[{label:'',id:'',name:''},]}}
- *  beforeApi?: (params:any)=>any , 调用接口前的钩子，用于处理接口的参数
- *  afterApi?: (response:any)=>any[], 接口调用后的钩子，用于处理接口返回的值
- *  SelectOption?: any, 指定<Select.Option>对象是谁
- *  RadioOption?: any, 指定<Radio.Button>对象是谁
- *  idKey?: string,//字段id的key键值
- *  nameKey?: string,//字段name的key键值
- *  labelKey?: string,//字段label的key键值
- * }
- * 字典数据的结构为 
- * {
- *  id:'',数据唯一id
- *  name:'',数据唯一id对应的别名
- *  label:'',展示给用户看的文字
- * } 
  * 
+ * [Demo - CodeSandBox]{@link https://codesandbox.io/s/usedictionary-j7cw8?file=/index.js}
  * 
- * return {
- *  types:any[],具体字典列表
- *  selectOptions:any[],供渲染<Select>的列表
- *  radioOptions:any[],供渲染<Radio>的列表
- *  getId:(labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
- *  getName:(id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值
- *  getLabel:(id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值
- *  reload:()=>void,重新调用字典接口刷新字典列表
- * }
+ * @param {Object} props
+ * @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键值
+ * @param {ReactDom} [props.SelectOption] - 指定\<Select.Option\>对象是谁
+ * @param {ReactDom} [props.RadioOption] - 指定\<Radio.Button\>对象是谁
+ * @param {callback} [props.beforeApi] - (request:object)=>object 接口调用前的参数拦截器
+ * @param {callback} [props.afterApi] -  (reponse:object)=>object[] 接口调用后的拦截器
  * 
- * useDictionary.SET:({SelectOption,RadioOption})=>void,全局设置SelectOption和RadioOption
  * 
+ * @return {UseDictionaryResult}
  * 
+ * @example
+import {Select,Radio} from 'antd';
+import useDictionary from '@/useDictionary';
+useDictionary.SET({SelectOption:Select.Option,RadioOption:Radio.Button});
+
+const Index=()=>{
+
+  const emCity = useDictionary({
+    api:()=>{
+        return new Promise(resolve=>{
+          resolve({
+            code:0,
+            data:{
+              body:[
+                {id:1,name:'shanghai',label:'上海'},
+                {id:2,name:'beijing',label:'北京'},
+                {id:3,name:'guangzhou',label:'广州'}
+              ]
+            }
+          })
+        })
+      }
+  });
+
+  return (
+    <section >
+      <Select defaultValue={1}>
+        {
+          emCity.selectOptions
+        }
+      </Select>
+      <p>分割线</p>
+      <Radio.Group defaultValue={1}>
+        {
+          emCity.radioOptions
+        }
+      </Radio.Group>
+    </section>
+  )
+}
  */
 const useDictionary=(props)=>{
 
@@ -153,4 +181,46 @@ export const SetConfig = ({SelectOption,RadioOption})=>{
   if(RadioOption)DEFAULT_CONFIG.RadioOption = RadioOption;
 };
 
+
+
+/**
+ * @typedef Api
+ * @property {Object} params - 调用接口用到的参数
+ * @returns {Object}
+ */
+
+
+
+/**
+ * @typedef DictionaryItem
+ * 字典数据的结构
+ * @property {string} id  - 数据唯一ID
+ * @property {string} name  - 数据唯一id对应的别名
+ * @property {string} label  - 展示给用户看的文字
+ * 
+ */
+
+/**
+ * @typedef UseDictionaryResult
+ * @property {DictionaryItem[]}  types - 字典数据列表
+ * @property {ReactDOM[]} selectOptions - 供Antd渲染\<Select\>的列表
+ * @property {ReactDOM[]} radioOptions - 供Antd渲染\<Radio\>的列表
+ * @property {function}  getId - (labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
+ * @property {function}  getName - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值
+ * @property {function}  getLabel - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值
+ * @property {function}  reload - ()=>void,重新调用字典接口刷新字典列表
+ * 
+ */
+
+/**
+ * @function SET
+ * @description 全局设置SelectOption和RadioOption  
+ * 
+ * @param {Object} params
+ * @param {ReactDom} params.SelectOption - Antd的SelectOption组件
+ * @param {ReactDom} params.RadioOption - Antd的SelectOption组件
+ * @returns {void}
+ */
+
+
 export default useDictionary

package/src/usePagination/index.js

@@ -0,0 +1,264 @@
+
+/** 
+ * @module usePagination
+*/
+import { useState,useMemo,useRef } from 'react';
+
+/**
+ * 分页管理器
+ * @param {Object} props 
+ * @param {function} props.service - 发送请求的方法,默认分页使用current和pageSize，如有特殊需求通过beforeService拦截处理
+ * @param {Pagination} [props.pagination] - 默认分页信息
+ * @version 1.0.0
+ * 
+ * @example 
+  // 移动端滚动加载案例
+  const page = usePagination({
+    service:GET_LIST,
+    pagination:{pageSize:10},
+    
+  });
+
+  useEffect(()=>{
+    const fnFeforeService = (params)=>{
+      // 假如你这里需要变更接口字段名称的话
+      params.page=params.current;
+      params.keyword='abc';
+      return params;
+    }
+    
+    const fnAfterService = (response)=>{
+      // 这里你可以翻译及二次处理你的接口字段
+      let req={
+        code:response.errorCode
+        data:response.list,
+        page:response.pageInfo
+      };
+      response.code=response;
+      return response;
+    },
+
+    page.addListener('beforeService',fnFeforeService);
+    page.addListener('afterService',fnAfterService);
+    return ()=>{
+      page.removeListener('beforeService',fnFeforeService);
+      page.removeListener('afterService',fnAfterService)
+    }
+  },[])
+
+  const onReset=()=>{page.reset();}
+
+  const onPageChange=()=>{
+    let value=document.querySelector('#inputPage').value;
+    page.update({pagination:{current:+value}})
+  }
+  const onNext=()=>{page.nextPage();}
+
+  const renderTable=()=>{
+    let renderData= [];
+    page?.data?.forEach(list=>{
+      renderData=[...renderData,...list];
+    })
+    
+    return (
+      <ul>
+      {
+        renderData?.map((item,idx)=>{
+          return <li key={idx}>[{idx}]{item}</li>
+        })
+      }
+      </ul>
+    )
+    
+  }
+  return (
+    <ul>
+    {renderTable()}
+    </ul>
+  )
+ * 
+ * @returns {UsePaginationResult} 
+ */
+const usePagination=(props)=>{
+
+  const {service}= props;
+
+  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
+  });
+  const [data,setData] = useState(null);
+  const refListener= useRef({
+    beforeService:[],
+    afterService:[]
+  });
+
+  const update= async ({pagination:_pagination,clear=false}={})=>{
+    _pagination = _pagination ?? pagination;
+    _pagination = {...pagination,..._pagination};
+
+    const {current,pageSize} = _pagination;
+
+    let params = {current,pageSize};
+    let listener=refListener.current;
+    const {beforeService} = listener;
+    if(beforeService){
+      console.log('[usePagination] beforeService',params)
+      for(let i=0;i<beforeService.length;i++){
+        params = beforeService[i](params);
+        if(typeof params?.then == 'function'){
+          params = await params;
+        }
+        if(!params){return;}
+      }
+    }
+    if(!params)requrn;
+    console.log('[usePagination] service',params)
+    let req = await service(params);
+    const {afterService} = listener;
+    if(afterService){
+      console.log('[usePagination] afterService',req)
+      for(let i=0;i<afterService.length;i++){
+        req = afterService[i](req);
+        if( typeof req?.then == 'function' ){
+          req = await req;
+        }
+      }
+    }
+    console.log('[usePagination] response',req)
+    let response={};
+    if(req?.code==0){
+      let {page:{current,pageSize,total},data:reqData} = req;
+      current=+current;
+      pageSize=+pageSize;
+      total=+total;
+      const startIdx= (current-1)*pageSize;
+      const more = current*pageSize<total;
+      response.pagination={
+        current,pageSize,total,startIdx,more
+      };
+      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);
+    }else{
+      setData(data||[]);
+    }
+    return response;
+  }
+
+  const nextPage= async ()=>{
+    if(!pagination.more){
+      return false;
+    }
+    return update({pagination:{current:pagination.current+1}})
+  }
+
+  const reset= ()=>{
+    return update({pagination:{current:1},clear:true})
+  }
+
+  const addListener=(type,fn)=>{
+    if(!refListener.current[type]){
+      refListener.current[type]=[];
+    }
+    
+    const repeat= refListener.current[type].some(callback=>{
+      if(callback==fn){return true;}
+      return false;
+    })
+    if(repeat){return;}
+    refListener.current[type].push(fn);
+  }
+
+  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.spice(i,1);
+      }
+    }
+  }
+
+  const action= useMemo(()=>{
+    return {
+      pagination,
+      update,
+      reset,
+      nextPage,
+      data,
+      addListener,
+      removeListener
+    }
+  },[pagination,data,refListener])
+
+  return action;
+}
+
+
+
+/**
+ * 分页信息
+ * @typedef {Object} Pagination
+ * @property {number} pageSize=20 - 分页大小
+ * @property {number} current=1 - 当前页码
+ * @property {number} total=1 - 总记录数
+ * @property {number} [startIdx=0] - 当前页面下第一条数据的序号
+ * @property {boolean} [more] - 是否还有下一页
+ * 
+ */
+
+
+/**
+ * 分页数据结果
+ * @typedef {Object} PageDataResult
+ * @property {Pagination} pagination - 最新分页信息
+ * @property {Object[][]} data - 分页数据集合
+ */
+
+
+
+/**
+ * 分页查询结果
+ * @typedef {callback} FunUpdate 
+ * @property {Pagination} [pagination] - 最新分页信息
+ * @property {boolean} [clear] - 是否清空数据
+ * @returns {Promise<PageDataResult>} 最新的分页数据结果
+ */
+
+
+/**
+ * usePagination的返回对象
+ * @typedef {Object} UsePaginationResult
+ * @property {Object[][]} data - 分页数据集合
+ * @property {Pagination} paginnation - 分页信息
+ * @property {FunUpdate} update - 查询方法
+ * @property {FunUpdate} next - 获取下一页数据
+ * @property {function} addListener - 监听事件 (type='beforeService'|'afterService',fn:FunListener)=>object
+ * @property {function} removeListener - 移除监听事件 (type,fn:FunListener)=>void
+ */
+
+
+/**
+ * 事件监听方法
+ * @typedef {callback} FunListener
+ * @property {Object} params - 被拦截的数据对象
+ * @returns {Object|Promise<Object>} 处理完毕的数据对象或者Promise
+ */
+
+
+export default usePagination;

package/src/usePaginationWithForm/index.js

@@ -0,0 +1,86 @@
+
+/** 
+ * @module usePaginationWithForm
+*/
+import { useState, useMemo, useEffect, useRef } from 'react';
+import usePagination from '../usePagination';
+
+
+/**
+ * 支持Antd-Form的usePagination
+ * 作用是在查询接口前自动获取form表单内的字段，并作为接口查询参数进行查询
+ * 使用方法及参数字段参考 [usePagination]{@link usePagination.md}
+ * 
+ * @param {Object} props
+ * @param {Object} props.form - Form表单的ref，在接口调用前会校验获取form表单内的数据，提交到接口参数内查询
+ * 
+ * @example 
+const [form] = Form.useForm();
+const page = usePaginationWithForm({
+  service:GET_LIST,
+  pagination:{pageSize:10},
+  form:form
+});
+
+return(
+  <Form form={form} style={{width:'600px'}} layout="inline">
+    <Form.Item label='关键字' name='keyword' rules={[
+      {
+        max:5,
+        message:'最多5个字符'
+      }
+    ]}>
+      <Input />
+    </Form.Item>
+    <Button onClick={onSearch} type='primary'>查询</Button>
+    <Button onClick={onReset} type='primary'>重置</Button>
+  </Form>
+)
+ */
+const usePaginationWithForm = (props) => {
+  const {service,pagination}= props;
+  const [form] = useState(props.form);
+  const page = usePagination({service,pagination})
+
+  useEffect(()=>{
+    const fnFeforeService = async (params)=>{
+      // 假如你这里需要变更接口字段名称的话
+      const values = await getSearchValue();
+      if(!values)return;
+      params= {...params,...values}
+      return params;
+    };
+    page.addListener('beforeService',fnFeforeService);
+    return ()=>{
+      page.removeListener('beforeService',fnFeforeService);
+    }
+  },[])
+
+  const getSearchValue = async () => {
+    try {
+      let value = {};
+      if (form) {
+        value = await form.validateFields();
+      }
+      return value;
+    } catch (ex) {
+      return;
+    }
+  };
+
+
+
+  const reset = () => {
+    if(form){
+      form.resetFields();
+    }
+    page.reset();
+  };
+
+  return {
+    ...page,
+    reset,
+  };
+};
+
+export default usePaginationWithForm

package/src/useSwitch/index.js

@@ -1,16 +1,19 @@
+/** 
+ * useSwitch
+ * @module useSwitch
+*/
 import { useState, useMemo, useRef, useEffect } from 'react';
 
 
+
 /**
  * 控制开关
- * props?: boolean; 默认开关状态
- * return {
- *  state:boolean,当前开关状态
- *  open:(force?:boolean)=>void,手动切换至开
- *  close:(force?:boolean)=>void,手动切换至关，当不指定force为true时，每次open将增加计数器,close将减少计数器，当计数器为0时才真正关闭
- *  toggle:()=>void,切换开关
- *  count: number,当前计数器
- * }
+ * 
+ * [Demo-CodeSandbox]{@link https://codesandbox.io/s/useswitch-qd7dr?file=/index.js}
+ * 
+ * @param  {boolean} [props=false] - 默认的开关状态
+ * @return {UseSwitchResult}
+ * 
  * 
  */
 const useSwitch = (props=false) => {
@@ -62,4 +65,16 @@ const useSwitch = (props=false) => {
   return {state:value,count,...actions};
 };
 
+/**
+ * useSwitchHookResult
+ * @typedef {Object} UseSwitchResult
+ * @property {boolean} state - 当前开关状态
+ * @property {number} count - 当前开关计数器
+ * @property {function} open - 切换至开模式 (force?:boolean)=>void
+ * @property {function} close - 切换至关模式 (force?:boolean)=>void
+ * @property {function} toggle - 切换至反向模式 ()=>void
+ * 
+ */
+
+
 export default useSwitch;

package/test/useCounter/index.jsx

@@ -0,0 +1,15 @@
+import React,{ useState, useMemo, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import useCounter from '@/useCounter';
+
+
+const Index=()=>{
+  const [count,add] = useCounter();
+  return (
+    <section>
+      <h2>计数器:{count}</h2>
+      <button onClick={add}>触发增加计数器</button>
+    </section>
+  )
+}
+ReactDOM.render(<Index />, document.getElementById('main-view'));

package/test/usePagination/index.jsx

@@ -0,0 +1,119 @@
+import React,{ useState, useMemo, useEffect, useRef } from 'react';
+import ReactDOM, { render } from 'react-dom';
+import usePagination from '@/usePagination';
+import {Pagination,Button,Input,Table} from 'antd';
+
+
+
+const GET_LIST=(params)=>{
+  const list=[]
+  const total=200;
+  for(let i=0;i<total;i++){
+    list.push(`数据${i+1}`)
+  }
+  const {current,pageSize,...others}=params;
+  const startIdx = (current-1) * pageSize;
+  let data = list.splice(startIdx,pageSize);
+  data=data.map((item,idx)=>{
+    return {id:`第${current}页-${item}`, value:`第${current}页-${item}`,params:others}
+  })
+  return Promise.resolve({
+    code:0,
+    data,
+    page:{
+      current:current,
+      pageSize:pageSize,
+      total,
+    }
+  })
+}
+
+const Index=()=>{
+  const page = usePagination({
+    service:GET_LIST,
+    pagination:{pageSize:10}
+  });
+
+
+  useEffect(()=>{
+    const fnFeforeService = (params)=>{
+      // 假如你这里需要变更接口字段名称的话
+      params.beforeService='beforeService';
+      return params;
+    };
+    
+    const fnAfterService = (response)=>{
+      // 这里你可以翻译及二次处理你的接口字段
+      response.message='afterService';
+      return response;
+    };
+
+    page.addListener('beforeService',fnFeforeService);
+    page.addListener('afterService',fnAfterService);
+    page.update()
+    return ()=>{
+      page.removeListener('beforeService',fnFeforeService);
+      page.removeListener('afterService',fnAfterService)
+    }
+  },[])
+
+  const onReset=()=>{page.reset();}
+
+
+  const onPageChange=(current,pageSize)=>{
+    page.update({pagination:{current,pageSize}})
+  }
+
+  const onNext=()=>{page.nextPage();}
+
+  const columns=[{
+    dataIndex:'value',
+    title:'数据值',
+    render:(_,record,idx)=>{
+      return `[${idx}]${record.value}`;
+    }
+  },{
+    dataIndex:'params',
+    title:'入参值',
+    render:(_,record,idx)=>{
+      return record.params?JSON.stringify(record.params):'-';
+    }
+  }];
+
+  const getDataSource=()=>{
+    let req=[];
+    if(page?.data && page?.data?.length>0){
+      for(let i=0;i<page.data.length;i++){
+        req= [...req,...page.data[i]];
+      }
+    }
+    return req;
+  }
+  return (
+    <section style={{padding:'12px'}}>
+      <section>
+        <Button onClick={onNext} type='primary'>加载下一页</Button>
+        <Button onClick={onReset} type='primary'>重置</Button>
+        
+        
+        <Table 
+          rowKey={'id'}
+          loading={!page?.data?.length>0}
+          columns={columns}
+          dataSource={getDataSource()}
+          pagination={false}
+        />
+
+      <Pagination 
+        current={page?.pagination?.current} 
+        pageSize={page?.pagination?.pageSize}
+        onChange={onPageChange}
+        total={page?.pagination?.total}
+      />
+
+      </section>
+      
+    </section>
+  )
+}
+ReactDOM.render(<Index />, document.getElementById('main-view'));

package/test/usePaginationWithForm/index.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Form,Button,Input,Table} from 'antd';
+
+import usePaginationWithForm from '@/usePaginationWithForm';
+
+
+
+
+const GET_LIST=(params)=>{
+  const list=[]
+  const total=200;
+  for(let i=0;i<total;i++){
+    list.push(`数据${i+1}`)
+  }
+  const {current,pageSize,...others}=params;
+  const startIdx = (current-1) * pageSize;
+  let data = list.splice(startIdx,pageSize);
+  data=data.map((item,idx)=>{
+    return {id:''+idx, value:`第${current}页-${item}`,params:others}
+  })
+  return Promise.resolve({
+    code:0,
+    data,
+    page:{
+      current:current,
+      pageSize:pageSize,
+      total,
+    }
+  })
+}
+
+const Index=()=>{
+
+  const [form] = Form.useForm();
+  const page = usePaginationWithForm({
+    service:GET_LIST,
+    pagination:{pageSize:10},
+    form:form
+  });
+  
+
+  const onSearch=()=>{
+    page.update();
+  };
+
+  const onReset=()=>{page.reset();}
+
+  const onPageChange=(current,pageSize)=>{
+    page.update({pagination:{current,pageSize}})
+  }
+
+  const columns=[{
+    dataIndex:'value',
+    title:'数据值',
+    render:(_,record,idx)=>{
+      return `[${idx}]${record.value}`;
+    }
+  },{
+    dataIndex:'params',
+    title:'入参值',
+    render:(_,record,idx)=>{
+      return record.params?JSON.stringify(record.params):'-';
+    }
+  }];
+  return (
+    <section style={{padding:'12px'}}>
+      <section>
+        <Form form={form} style={{width:'600px'}} layout="inline">
+          <Form.Item label='关键字' name='keyword' rules={[
+            {
+              max:5,
+              message:'最多5个字符'
+            }
+          ]}>
+            <Input />
+          </Form.Item>
+          <Button onClick={onSearch} type='primary'>查询</Button>
+          <Button onClick={onReset} type='primary'>重置</Button>
+        </Form>
+        
+        
+        <Table 
+          rowKey={'id'}
+          loading={!page?.data?.length>0}
+          columns={columns}
+          dataSource={page?.data? page?.data[page?.pagination?.current-1]:[]}
+          pagination={{
+            current:page?.pagination?.current,
+            pageSize:page?.pagination?.pageSize,
+            total:page?.pagination?.total,
+            onChange:onPageChange
+          }}
+        />
+
+      </section>
+      
+    </section>
+  )
+}
+ReactDOM.render(<Index />, document.getElementById('main-view'));

package/test/useSwitch/index.jsx

@@ -1,16 +1,13 @@
 import React,{ useState, useMemo, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import {useClipboard,useSwitch} from 'kn-hooks';
+import useSwitch from '@/useSwitch';
 
 
 const Index=()=>{
   const loading = useSwitch(false);
-  const clip = useClipboard({onSuccess:()=>{alert('已复制到剪贴板')}});
   return (
     <section>
-      <h1 onClick={()=>{
-        clip('4433')
-      }}>当前状态:{loading.state?"打开":"关闭"}</h1>
+      <h1>当前状态:{loading.state?"打开":"关闭"}</h1>
       <h2>计数器:{loading.count}</h2>
       <button onClick={()=>{loading.toggle();}}>切换</button>
       <button onClick={()=>{loading.open();}}>打开</button>

package/src/useAntdFormTableSearch/index.js

@@ -1,165 +0,0 @@
-import { useState, useMemo, useEffect, useRef } from 'react';
-
-
-const useFormTableSearch = (props) => {
-  const [search] = useState(props.initSearch || {});
-  const [formRef] = useState(props.formRef);
-  const [service] = useState(() => props.service);
-  const [beforeSearch] = useState(() => props.beforeSearch);
-  const [beforeService] = useState(() => props.beforeService);
-  const [loading, setLoading] = useState(props.loading || false);
-
-  const [pagination, setPagination] = useState(() => {
-    const temp = { ...props.pagination, page: 1, pageSize: 10, total: 0, startIdx: 0 };
-    if (props.pagination) {
-      temp.startIdx = temp.pageSize * (temp.page - 1);
-    }
-    return temp;
-  });
-  const [updateData] = useState(() => props.updateData);
-  const [orderInfo, setOrderInfo] = useState({});
-
-  const getSearchValue = async () => {
-    try {
-      let value = {};
-      if (formRef) {
-        value = await formRef.validateFields();
-      } else {
-        value = search;
-      }
-      if (beforeSearch) {
-        value = beforeSearch(value);
-      }
-      return value;
-    } catch (ex) {
-      return;
-    }
-  };
-  const formatSearchValue = async ({ searchValue, pageValue, orderValue }) => {
-    if (!searchValue) {
-      searchValue = await getSearchValue();
-    }
-    searchValue = searchValue || search;
-    pageValue = pageValue || pagination;
-    orderValue = orderValue || orderInfo;
-    const order: any[] = [];
-    if (orderValue) {
-      Object.keys(orderValue).map((name) => {
-        if (orderValue[name] === 'ascend') {
-          order.push({ [`${name}`]: 'ASC' });
-        } else if (orderValue[name] === 'descend') {
-          order.push({ [`${name}`]: 'DESC' });
-        }
-      });
-    }
-    const { page, pageSize } = pageValue;
-    let params = {
-      ...searchValue,
-      page: {
-        pageNum: page,
-        pageSize: pageSize,
-      },
-    };
-    if (order && order.length > 0) {
-      params.page.orders = order;
-    }
-    if (beforeService) params = beforeService(params);
-    return params;
-  };
-  const refresh = async ({ searchValue, pageValue, orderValue }) => {
-    setLoading(true);
-    searchValue = searchValue || search;
-    pageValue = pageValue || pagination;
-    orderValue = orderValue || orderInfo;
-
-    const params = await formatSearchValue({ searchValue, pageValue, orderValue });
-    if (!params) {
-      setLoading(false);
-      return;
-    }
-    const ret: any = await service(params);
-
-    if (ret?.data?.page) {
-      const { pageNum, pageSize: size, totalRows } = ret.data.page;
-      setPagination({
-        page: pageNum || 1,
-        pageSize: size || 10,
-        total: totalRows,
-        startIdx: (pageNum - 1) * size || 0,
-      });
-    }
-
-    if (updateData) updateData(ret);
-    setLoading(false);
-    return ret;
-  };
-
-  const onPaginationChange = async (pageInfo: any, sorterInfo?: any) => {
-    let { page: current, pageSize }: any = pagination;
-    let orderValue = orderInfo;
-    if (pageInfo) {
-      current = pageInfo.current;
-      pageSize = pageInfo.pageSize;
-    }
-
-    if (sorterInfo) {
-      const { field, order } = sorterInfo;
-      if (field) {
-        if (order) {
-          orderInfo[field] = order;
-        } else {
-          delete orderInfo[field];
-        }
-      }
-      orderValue = orderInfo;
-      setOrderInfo({ ...orderInfo });
-    }
-
-    const searchValue: any = await getSearchValue();
-
-    refresh({
-      searchValue,
-      pageValue: { page: current, pageSize },
-      orderValue,
-    });
-  };
-
-  const onSorter = async (sorter: any) => {
-    const { field, order } = sorter;
-    if (field) {
-      if (order) {
-        orderInfo[field] = order;
-      } else {
-        delete orderInfo[field];
-      }
-    }
-    setOrderInfo({ ...orderInfo });
-    console.log(`${JSON.stringify(orderInfo)}`);
-    refresh();
-  };
-
-  const btnSearch = async () => {
-    const value: any = await getSearchValue();
-    if (value) {
-      refresh({ searchValue: value });
-    }
-  };
-
-  const btnReset = () => {
-    formRef.resetFields();
-  };
-
-  return {
-    onPaginationChange,
-    pagination,
-    btnSearch,
-    search,
-    refresh,
-    btnReset,
-    onSorter,
-    loading,
-    formatSearchValue,
-  };
-};
-
-export default useFormTableSearch

package/src/useRefSwitch/index.js

@@ -1,15 +0,0 @@
-
-import { useEffect,useRef, useMemo } from 'react';
-import useSwitch  from '../useSwitch';
-
-const useRefSwitch=(props=false)=>{
-  const loading = useSwitch(props);
-  const ref = useRef();
-  ref.current = loading;
-  useEffect(()=>{
-    ref.current = loading;
-  },[loading]);
-
-  return useMemo(()=>ref,[]);
-}
-export default useRefSwitch;

package/test/useRefSwitch/index.jsx

@@ -1,19 +0,0 @@
-import React,{ useState, useMemo, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import useRefSwitch from '@/useRefSwitch';
-
-const Index=()=>{
-  const loading = useRefSwitch(false);
-  return (
-    <section>
-      <h1>当前状态:{loading.current.state?"打开":"关闭"}</h1>
-      <h2>计数器:{loading.current.count}</h2>
-      <button onClick={()=>{loading.current.toggle();}}>切换</button>
-      <button onClick={()=>{loading.current.open();}}>打开</button>
-      <button onClick={()=>{loading.current.close();}}>关闭</button>
-      <button onClick={()=>{loading.current.open(true);}}>强制打开</button>
-      <button onClick={()=>{loading.current.close(true);}}>强制关闭</button>
-    </section>
-  )
-}
-ReactDOM.render(<Index />, document.getElementById('main-view'));