kn-hooks 0.0.11 → 0.0.12

package/md/useClipboard.md

@@ -46,5 +46,4 @@ UseClipboardResult返回的hook
 | --- | --- | --- |
 | copy | <code>FunCopy</code> | 触发复制字符串的函数 |
 
-**最后更新时间 2023-03-01 14:30:26**
 

package/md/useCounter.md

@@ -25,5 +25,4 @@ return <span>当前计数器:{counter.count}</span>
 | req.count | <code>number</code> | 当前计数器的值 |
 | req.addCount | <code>function</code> | 计数器的值+1。 ()=>void |
 
-**最后更新时间 2023-03-01 14:30:26**
 

package/md/useDictionary.md

@@ -112,5 +112,4 @@ const Index=()=>{
 | getLabel | <code>function</code> | (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值 |
 | reload | <code>function</code> | ()=>void,重新调用字典接口刷新字典列表 |
 
-**最后更新时间 2023-03-01 14:30:26**
 

package/md/usePagination.md

@@ -151,5 +151,4 @@ usePagination的返回对象
 | --- | --- | --- |
 | params | <code>Object</code> | 被拦截的数据对象 |
 
-**最后更新时间 2023-03-01 14:30:26**
 

package/md/usePaginationWithForm.md

@@ -36,5 +36,4 @@ return(
   </Form>
 )
 ```
-**最后更新时间 2023-03-01 14:30:27**
 

package/md/useSwitch.md

@@ -32,5 +32,4 @@ useSwitchHookResult
 | close | <code>function</code> | 切换至关模式 (force?:boolean)=>void |
 | toggle | <code>function</code> | 切换至反向模式 ()=>void |
 
-**最后更新时间 2023-03-01 14:30:27**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "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/readme.md

@@ -6,12 +6,12 @@
 * [按需打包](#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)
+  * [useDictionary - 字典管理及下拉选项框渲染](#module_usedictionary)
+  * [useSwitch - 开关控制](#module_useswitch)
+  * [useClipboard - 剪贴板](#module_useclipboard)
+  * [useCounter - 计数器](#module_usecounter)
+  * [usePagination - 分页管理](#module_usepagination)
+  * [usePaginationWithForm - 支持Antd-From的分页管理](#module_usepaginationwithform)
 
 
 
@@ -63,4 +63,423 @@ webpack增加`bable-plugin-import`插件，给babel plugins增加配置
 //     }
 //  ]
 
-```
+```<a id="module_useclipboard"></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;">G</span>        useClipboard
+
+* [    useClipboard](#module_useclipboard)
+    * [    useClipboard([props])](#module_useclipboard__useclipboard) ⇒ <code>UseClipboardResult</code>
+    * [    FunCopy](#module_useclipboard__funcopy) : <code>callback</code>
+    * [    UseClipboardResult](#module_useclipboard__useclipboardresult) : <code>Object</code>
+
+<a id="module_useclipboard__useclipboard"></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;">M</span>        useClipboard([props]) ⇒ <code>UseClipboardResult</code>
+剪贴板工具
+
+[Demo - CodeSandBox](https://codesandbox.io/s/useclipboard-b4ryc?file=/index.js)
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [props] | <code>Object</code> | - |
+| [props.onSuccess] | <code>callback</code> | 成功复制到剪贴板后的回调 ()=>void |
+
+**Example**  
+```js
+const clipboard= useClipboard();
+const onCopy=()=>{
+  clipboard.copy('text',()=>{console.log('success')})
+}
+```
+<a id="module_useclipboard__funcopy"></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>        FunCopy : <code>callback</code>
+复制函数
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| text | <code>string</code> | 需要被复制的字符串 |
+| onCurSuccess | <code>callback</code> | 复制成功的回调 ()=>void |
+
+<a id="module_useclipboard__useclipboardresult"></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>        UseClipboardResult : <code>Object</code>
+UseClipboardResult返回的hook
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| copy | <code>FunCopy</code> | 触发复制字符串的函数 |
+
+
+<a id="module_usecounter"></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;">G</span>        useCounter
+
+* [    useCounter](#module_usecounter)
+    * [    useCounter()](#module_usecounter__usecounter) ⇒ <code>UseCounterResult</code>
+    * [    UseCounterResult](#module_usecounter__usecounterresult)
+
+<a id="module_usecounter__usecounter"></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;">M</span>        useCounter() ⇒ <code>UseCounterResult</code>
+加法计数器
+
+**Example**  
+```js
+const counter= useCounter();
+const onAdd=()=>{counter.addCount()}
+return <span>当前计数器:{counter.count}</span>
+```
+<a id="module_usecounter__usecounterresult"></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>        UseCounterResult
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| req | <code>Object</code> |  |
+| req.count | <code>number</code> | 当前计数器的值 |
+| req.addCount | <code>function</code> | 计数器的值+1。 ()=>void |
+
+
+<a id="module_usedictionary"></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;">G</span>        useDictionary
+
+* [    useDictionary](#module_usedictionary)
+    * [    useDictionary(props)](#module_usedictionary__usedictionary) ⇒ <code>UseDictionaryResult</code>
+    * [    SET(params)](#module_usedictionary__set) ⇒ <code>void</code>
+    * [    Api](#module_usedictionary__api) ⇒ <code>Object</code>
+    * [    DictionaryItem](#module_usedictionary__dictionaryitem)
+    * [    UseDictionaryResult](#module_usedictionary__usedictionaryresult)
+
+<a id="module_usedictionary__usedictionary"></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;">M</span>        useDictionary(props) ⇒ <code>UseDictionaryResult</code>
+字典管理
+
+[Demo - CodeSandBox](https://codesandbox.io/s/usedictionary-j7cw8?file=/index.js)
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| props | <code>Object</code> |  |  |
+| props.api | <code>Api</code> |  | 用于获取字典列表的接口 |
+| [props.idKey] | <code>string</code> | <code>&quot;&#x27;id&#x27;&quot;</code> | 字段id的key键值 |
+| [props.nameKey] | <code>string</code> | <code>&quot;&#x27;name&#x27;&quot;</code> | 字段name的key键值 |
+| [props.labelKey] | <code>string</code> | <code>&quot;&#x27;label&#x27;&quot;</code> | 字段label的key键值 |
+| [props.SelectOption] | <code>ReactDom</code> |  | 指定\<Select.Option\>对象是谁 |
+| [props.RadioOption] | <code>ReactDom</code> |  | 指定\<Radio.Button\>对象是谁 |
+| [props.beforeApi] | <code>callback</code> |  | (request:object)=>object 接口调用前的参数拦截器 |
+| [props.afterApi] | <code>callback</code> |  | (reponse:object)=>object[] 接口调用后的拦截器 |
+
+**Example**  
+```js
+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="module_usedictionary__set"></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;">M</span>        SET(params) ⇒ <code>void</code>
+全局设置SelectOption和RadioOption
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| params | <code>Object</code> |  |
+| params.SelectOption | <code>ReactDom</code> | Antd的SelectOption组件 |
+| params.RadioOption | <code>ReactDom</code> | Antd的SelectOption组件 |
+
+<a id="module_usedictionary__api"></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>        Api ⇒ <code>Object</code>
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| params | <code>Object</code> | 调用接口用到的参数 |
+
+<a id="module_usedictionary__dictionaryitem"></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>        DictionaryItem
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| id | <code>string</code> | 数据唯一ID |
+| name | <code>string</code> | 数据唯一id对应的别名 |
+| label | <code>string</code> | 展示给用户看的文字 |
+
+<a id="module_usedictionary__usedictionaryresult"></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>        UseDictionaryResult
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| types | <code>Array.&lt;DictionaryItem&gt;</code> | 字典数据列表 |
+| selectOptions | <code>Array.&lt;ReactDOM&gt;</code> | 供Antd渲染\<Select\>的列表 |
+| radioOptions | <code>Array.&lt;ReactDOM&gt;</code> | 供Antd渲染\<Radio\>的列表 |
+| getId | <code>function</code> | (labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值 |
+| getName | <code>function</code> | (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值 |
+| getLabel | <code>function</code> | (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值 |
+| reload | <code>function</code> | ()=>void,重新调用字典接口刷新字典列表 |
+
+
+<a id="module_usepagination"></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;">G</span>        usePagination
+
+* [    usePagination](#module_usepagination)
+    * [    usePagination(props)](#module_usepagination__usepagination) ⇒ <code>UsePaginationResult</code>
+    * [    Pagination](#module_usepagination__pagination) : <code>Object</code>
+    * [    PageDataResult](#module_usepagination__pagedataresult) : <code>Object</code>
+    * [    FunUpdate](#module_usepagination__funupdate) ⇒ <code>Promise.&lt;PageDataResult&gt;</code>
+    * [    UsePaginationResult](#module_usepagination__usepaginationresult) : <code>Object</code>
+    * [    FunListener](#module_usepagination__funlistener) ⇒ <code>Object</code> \| <code>Promise.&lt;Object&gt;</code>
+
+<a id="module_usepagination__usepagination"></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;">M</span>        usePagination(props) ⇒ <code>UsePaginationResult</code>
+分页管理器
+
+**Version**: 1.0.0  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| props | <code>Object</code> |  |
+| props.service | <code>function</code> | 发送请求的方法,默认分页使用current和pageSize，如有特殊需求通过beforeService拦截处理 |
+| [props.pagination] | <code>Pagination</code> | 默认分页信息 |
+
+**Example**  
+```js
+// 移动端滚动加载案例
+  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>
+  )
+```
+<a id="module_usepagination__pagination"></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>        Pagination : <code>Object</code>
+分页信息
+
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| pageSize | <code>number</code> | <code>20</code> | 分页大小 |
+| current | <code>number</code> | <code>1</code> | 当前页码 |
+| total | <code>number</code> | <code>1</code> | 总记录数 |
+| [startIdx] | <code>number</code> | <code>0</code> | 当前页面下第一条数据的序号 |
+| [more] | <code>boolean</code> |  | 是否还有下一页 |
+
+<a id="module_usepagination__pagedataresult"></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>        PageDataResult : <code>Object</code>
+分页数据结果
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| pagination | <code>Pagination</code> | 最新分页信息 |
+| data | <code>Array.&lt;Array.&lt;Object&gt;&gt;</code> | 分页数据集合 |
+
+<a id="module_usepagination__funupdate"></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>        FunUpdate ⇒ <code>Promise.&lt;PageDataResult&gt;</code>
+分页查询结果
+
+**Returns**: <code>Promise.&lt;PageDataResult&gt;</code> - 最新的分页数据结果  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [pagination] | <code>Pagination</code> | 最新分页信息 |
+| [clear] | <code>boolean</code> | 是否清空数据 |
+
+<a id="module_usepagination__usepaginationresult"></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>        UsePaginationResult : <code>Object</code>
+usePagination的返回对象
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| data | <code>Array.&lt;Array.&lt;Object&gt;&gt;</code> | 分页数据集合 |
+| paginnation | <code>Pagination</code> | 分页信息 |
+| update | <code>FunUpdate</code> | 查询方法 |
+| next | <code>FunUpdate</code> | 获取下一页数据 |
+| addListener | <code>function</code> | 监听事件 (type='beforeService'|'afterService',fn:FunListener)=>object |
+| removeListener | <code>function</code> | 移除监听事件 (type,fn:FunListener)=>void |
+
+<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>
+事件监听方法
+
+**Returns**: <code>Object</code> \| <code>Promise.&lt;Object&gt;</code> - 处理完毕的数据对象或者Promise  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| params | <code>Object</code> | 被拦截的数据对象 |
+
+
+<a id="module_usepaginationwithform"></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;">G</span>        usePaginationWithForm
+<a id="module_usepaginationwithform__usepaginationwithform"></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;">M</span>        usePaginationWithForm(props)
+支持Antd-Form的usePagination
+作用是在查询接口前自动获取form表单内的字段，并作为接口查询参数进行查询
+使用方法及参数字段参考 [usePagination](usePagination.md)
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| props | <code>Object</code> |  |
+| props.form | <code>Object</code> | Form表单的ref，在接口调用前会校验获取form表单内的数据，提交到接口参数内查询 |
+
+**Example**  
+```js
+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>
+)
+```
+
+<a id="module_useswitch"></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;">G</span>        useSwitch
+useSwitch
+
+
+* [    useSwitch](#module_useswitch)
+    * [    useSwitch([props])](#module_useswitch__useswitch) ⇒ <code>UseSwitchResult</code>
+    * [    UseSwitchResult](#module_useswitch__useswitchresult) : <code>Object</code>
+
+<a id="module_useswitch__useswitch"></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;">M</span>        useSwitch([props]) ⇒ <code>UseSwitchResult</code>
+控制开关
+
+[Demo-CodeSandbox](https://codesandbox.io/s/useswitch-qd7dr?file=/index.js)
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [props] | <code>boolean</code> | <code>false</code> | 默认的开关状态 |
+
+<a id="module_useswitch__useswitchresult"></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>        UseSwitchResult : <code>Object</code>
+useSwitchHookResult
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| state | <code>boolean</code> | 当前开关状态 |
+| count | <code>number</code> | 当前开关计数器 |
+| open | <code>function</code> | 切换至开模式 (force?:boolean)=>void |
+| close | <code>function</code> | 切换至关模式 (force?:boolean)=>void |
+| toggle | <code>function</code> | 切换至反向模式 ()=>void |
+
+