kn-hooks v0.0.32

kn-hooks

目录

• 使用方法

• 按需打包

• API

  • useDictionary - 字典管理及下拉选项框渲染
  • useSwitch - 开关控制
  • useClipboard - 剪贴板
  • useCounter - 计数器
  • usePagination - 分页管理
  • usePaginationWithForm - 支持Antd-From的分页管理

使用方法

npm i kn-hooks

// 务必使用 {指定模块名} 来引用触发tree-shake 
import {useClipboard} from 'kn-hooks';

const Index=()=>{
  const clip = useClipboard();
}

按需打包

webpack4及以上版本无需下面配置

webpack增加bable-plugin-import插件，给babel plugins增加配置

//  rules: [
//     {
//       test: /\.js[x]?$/,
//       exclude: /node_modules/,
//       use: {
//         loader:'babel-loader',
//         options:{
//           plugins: [
              [
                import, { 
                  libraryName: "kn-hooks" ,
                  camel2DashComponentName:false,
                  libraryDirectory:"src",
                }
              ]
//           ]
//         }
//       }
//     }
//  ]

API

G useClipboard

• useClipboard
  • useClipboard([props]) ⇒ UseClipboardResult
  • FunCopy : callback
  • UseClipboardResult : Object

M useClipboard(props) ⇒ UseClipboardResult

剪贴板工具

Demo - CodeSandBox

Example

const clipboard= useClipboard();
const onCopy=()=>{
  clipboard.copy('text',()=>{console.log('success')})
}

T FunCopy : callback

复制函数

Properties

T UseClipboardResult : Object

UseClipboardResult返回的hook

Properties

G useCounter

• useCounter
  • useCounter() ⇒ UseCounterResult
  • UseCounterResult

M useCounter() ⇒ UseCounterResult

加法计数器

Example

const counter= useCounter();
const onAdd=()=>{counter.addCount()}
return <span>当前计数器:{counter.count}</span>

T UseCounterResult

Properties

G useDictionary

• useDictionary
  • static
    • SetConfig(params) ⇒ void
    • createDictionary(options) ⇒ callback
  • inner
    • useDictionary(props) ⇒ UseDictionaryResult
    • Api ⇒ Object
    • DictionaryItem
    • UseDictionaryResult

M SetConfig(params) ⇒ void

全局设置SelectOption和RadioOption

Example

import {useDictionary} from 'kn-hooks';
  import {Select,Radio} from 'antd';
  useDictionary.SetConfig(Select.Option,Radio.Option);

M createDictionary(options) ⇒ callback

创建字典hooks工具

Example

// emUserType.jsx
    import {useDictionary} from 'kn-hooks';
  export const userType = useDictionary.createDictionary({
    api:()=>Promise.resolve([{id:'1001',label:'项目1001',name:'pm1001'},]),
    afterApi:(response)=>{
      return response?.data;
    }
  });
  // index.jsx
  import {userType} from './emUserType.jsx'
  const Page=()=>{
    const emUserType = userType();
    return (
      <section>
        <Select defaultValue={emUserType.getId('项目1001')}>
        {emUserType.selectOptions}
        </Select>
      </section>
    )
  }

M useDictionary(props) ⇒ UseDictionaryResult

字典管理

Demo - CodeSandBox

Example

import {Select,Radio} from 'antd';
import useDictionary,{SetConfig} from '@/useDictionary';
SetConfig({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>
  )
}

T Api ⇒ Object

Properties

T DictionaryItem

Properties

T UseDictionaryResult

Properties

G usePagination

• usePagination
  • usePagination(props) ⇒ UsePaginationResult
  • FunServices() ⇒ FunServicesCallback
  • FunServicesCallback : Object
  • Pagination : Object
  • PageDataResult : Object
  • FunUpdate ⇒ Promise.<PageDataResult>
  • UsePaginationResult : Object
  • FunListener ⇒ Object | Promise.<Object>

M usePagination(props) ⇒ UsePaginationResult

分页管理器

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
      };
      return req;
    },

    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>
  )

M FunServices() ⇒ FunServicesCallback

分页请求接口格式要求

Properties

T FunServicesCallback : Object

分页接口请求结果

Properties

T Pagination : Object

分页信息

Properties

T PageDataResult : Object

分页数据结果

Properties

T FunUpdate ⇒ Promise.<PageDataResult>

分页查询结果

Returns: Promise.<PageDataResult> - 最新的分页数据结果
Properties

T UsePaginationResult : Object

usePagination的返回对象

Properties

T FunListener ⇒ Object | Promise.<Object>

事件监听方法

Returns: Object | Promise.<Object> - 处理完毕的数据对象或者Promise
Properties

G usePaginationWithForm

M usePaginationWithForm(props)

支持Antd-Form的usePagination 作用是在查询接口前自动获取form表单内的字段，并作为接口查询参数进行查询 使用方法及参数字段参考 usePagination

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>
)

G useSwitch

useSwitch

• useSwitch
  • useSwitch([props]) ⇒ UseSwitchResult
  • UseSwitchResult : Object

M useSwitch(props) ⇒ UseSwitchResult

控制开关

Demo-CodeSandbox

T UseSwitchResult : Object

useSwitchHookResult

Properties