kn-hooks 0.0.9 → 0.0.11

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>