kn-hooks 0.0.8 → 0.0.10

package/package.json

@@ -1,31 +1,19 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.8",
+  "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.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": {
     "clipboard": "2.0.8"
   },
   "devDependencies": {
-    "@babel/preset-react": "7.12.13",
-    "antd": "4.16.13",
-    "css-loader": "3.4.2",
-    "html-webpack-plugin": "4.0.3",
-    "mini-css-extract-plugin": "0.9.0",
-    "react": "16.13.0",
-    "react-dom": "16.13.0",
-    "babel-loader": "8.2.2",
-    "cross-env": "7.0.3",
-    "terser-webpack-plugin": "4.2.3",
-    "webpack": "4.46.0",
-    "webpack-bundle-analyzer": "3.6.1",
-    "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.11.2",
     "@babel/core": "7.13.10",
     "@babel/plugin-proposal-class-properties": "7.8.3",
     "@babel/plugin-proposal-decorators": "7.8.3",
@@ -36,13 +24,34 @@
     "@babel/plugin-transform-react-jsx": "^7.14.3",
     "@babel/plugin-transform-runtime": "7.13.10",
     "@babel/preset-env": "7.13.10",
+    "@babel/preset-react": "7.12.13",
     "@babel/runtime-corejs3": "7.13.10",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "antd": "4.16.13",
+    "babel-loader": "8.2.2",
+    "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",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0"
+    "taffydb": "^2.7.3",
+    "terser-webpack-plugin": "4.2.3",
+    "webpack": "4.46.0",
+    "webpack-bundle-analyzer": "3.6.1",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.11.2"
   },
   "files": [
     "test",

package/readme.md

@@ -2,9 +2,20 @@
 
 ## 目录
 
-* useSwitch - 开关控制
-* 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>
 
 ## 使用方法
 
@@ -23,181 +34,33 @@ 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
-
-
-## @useClipboard
-
-将字符串复制到剪贴板
-
-####  Demo
-
-[![codesandbox](http://img.vuedata.cn/codesandboxicon1.png?imageMogr2/thumbnail/!30x)](https://codesandbox.io/s/useclipboard-b4ryc?file=/index.js)
+<a id='package'></a>
 
+## 按需打包
 
-#### API
+> webpack4及以上版本无需下面配置
 
-```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:'广州'}
+webpack增加`bable-plugin-import`插件，给babel plugins增加配置
+```javascript
+//  rules: [
+//     {
+//       test: /\.js[x]?$/,
+//       exclude: /node_modules/,
+//       use: {
+//         loader:'babel-loader',
+//         options:{
+//           plugins: [
+              [
+                import, { 
+                  libraryName: "kn-hooks" ,
+                  camel2DashComponentName:false,
+                  libraryDirectory:"src",
+                }
               ]
-            }
-          })
-        })
-      }
-  });
-
-  return (
-    <section >
-      <Select defaultValue={1}>
-        {
-          emCity.selectOptions
-        }
-      </Select>
-      <p>分割线</p>
-      <Radio.Group defaultValue={1}>
-        {
-          emCity.radioOptions
-        }
-      </Radio.Group>
-    </section>
-  )
-}
-```
+//           ]
+//         }
+//       }
+//     }
+//  ]
+
+```

package/src/index.js

@@ -1,8 +1,23 @@
 import useClipboard from './useClipboard/index.js';
 import useSwitch from './useSwitch/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,
-  useDictionary
+  useDictionary,
+  useCounter,
+  usePagination,
+  usePaginationWithForm
 }
+
+
+// export {default as useClipboard} from './useClipboard';
+// export {default as useSwitch} from './useSwitch';
+// export {default as useRefSwitch} from './useRefSwitch';
+// export {default as useDictionary} from './useDictionary';
+

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={
@@ -5,43 +8,67 @@ const DEFAULT_CONFIG={
   RadioOption:null
 };
 
-
-
 /**
  * 字典管理
- * 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)=>{
+
   const { 
     api, 
     idKey = 'id', 
@@ -148,8 +175,52 @@ const useDictionary=(props)=>{
   return actions;
 
 }
-useDictionary.SET=({SelectOption,RadioOption})=>{
+
+export const SetConfig = ({SelectOption,RadioOption})=>{
   if(SelectOption)DEFAULT_CONFIG.SelectOption = SelectOption;
   if(RadioOption)DEFAULT_CONFIG.RadioOption = RadioOption;
-}
-export default useDictionary;
+};
+
+
+
+/**
+ * @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