kn-hooks 0.0.34 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "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/src/useDictionary/index.js

@@ -18,10 +18,10 @@ const DEFAULT_CONFIG={
  * @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[] 接口调用后的拦截器
+ * @param {JSX.Element} [props.SelectOption] - 指定\<Select.Option\>对象是谁
+ * @param {JSX.Element} [props.RadioOption] - 指定\<Radio.Button\>对象是谁
+ * @param {(request:object)=>object} [props.beforeApi] - (request:object)=>object 接口调用前的参数拦截器
+ * @param {(response:object)=>object} [props.afterApi] -  (reponse:object)=>object[] 接口调用后的拦截器
  * @param {DictionaryItem[]} [props.defaultTypes] -  如果字典不是通过api获取，可以在这里设置字典的内容
  * 
  * 
@@ -138,6 +138,41 @@ const useDictionary=(props)=>{
     return '';
   };
 
+  const getOptions=(props)=>{
+    const {onFilter,onDisabled}=props;
+    let req=[];
+    types.forEach(item=>{
+      let show=true;
+      let disabled=false;
+      
+      if(onFilter){
+        show = onFilter(item);
+      }
+      if(onDisabled){
+        disabled = onDisabled(item);
+      }
+      if(show){
+        req.push({
+          ...item,
+          disabled:disabled,
+        })
+      }
+    })
+    return req;
+  }
+
+  const renderOptions=(props)=>{
+    const {options=[],OptionComponent}=props;
+    let req= options.map(item=>{
+      if(OptionComponent){
+        // @ts-ignore
+        return <OptionComponent value={item[idKey]} key={item[idKey]} disabled={item.disabled}>{item[labelKey]}</OptionComponent>
+      }
+    })
+    return req;
+  }
+
+
   const selectOptions = useMemo(() => {
     if(!SelectOption)return <>SelectOption未指定</>;
     return (
@@ -172,7 +207,7 @@ const useDictionary=(props)=>{
   };
 
   const actions = useMemo(() => {
-    return { types, getLabel, getId, getName, selectOptions, isReady, reload, radioOptions };
+    return { types, getLabel, getId, getName, selectOptions, isReady, reload, radioOptions, renderOptions, getOptions };
   }, [types]);
 
   return actions;
@@ -204,13 +239,13 @@ export const SetConfig = ({SelectOption,RadioOption})=>{
  * @param {string} [options.idKey='id'] - 字段id的key键值
  * @param {string} [options.nameKey='name'] - 字段name的key键值
  * @param {string} [options.labelKey='label'] - 字段label的key键值
- * @param {ReactDom} [options.SelectOption] - 指定\<Select.Option\>对象是谁
- * @param {ReactDom} [options.RadioOption] - 指定\<Radio.Button\>对象是谁
- * @param {callback} [options.beforeApi] - (request:object)=>object 接口调用前的参数拦截器
- * @param {callback} [options.afterApi] -  (reponse:object)=>object[] 接口调用后的拦截器
+ * @param {JSX.Element} [options.SelectOption] - 指定\<Select.Option\>对象是谁
+ * @param {JSX.Element} [options.RadioOption] - 指定\<Radio.Button\>对象是谁
+ * @param {(request:object)=>object} [options.beforeApi] - (request:object)=>object 接口调用前的参数拦截器
+ * @param {(response:object)=>object} [options.afterApi] -  (reponse:object)=>object[] 接口调用后的拦截器
  * @param {DictionaryItem[]} [options.defaultTypes] -  如果字典不是通过api获取，可以在这里设置字典的内容
  * 
- * @returns {callback} 
+ * @returns {()=>UseDictionaryResult} 
  * 
  * @example
   // emUserType.jsx
@@ -313,6 +348,40 @@ export const createDictionary=options=>{
       return '';
     };
   
+    const getOptions=(props)=>{
+      const {onFilter,onDisabled}=props;
+      let req=[];
+      types.forEach(item=>{
+        let show=true;
+        let disabled=false;
+        
+        if(onFilter){
+          show = onFilter(item);
+        }
+        if(onDisabled){
+          disabled = onDisabled(item);
+        }
+        if(show){
+          req.push({
+            ...item,
+            disabled:disabled,
+          })
+        }
+      })
+      return req;
+    }
+  
+    const renderOptions=(props)=>{
+      const {options=[],OptionComponent}=props;
+      let req= options.map(item=>{
+        if(OptionComponent){
+          // @ts-ignore
+          return <OptionComponent value={item[idKey]} key={item[idKey]} disabled={item.disabled}>{item[labelKey]}</OptionComponent>
+        }
+      })
+      return req;
+    }
+
     const selectOptions = useMemo(() => {
       if(!SelectOption)return <>SelectOption未指定</>;
       return (
@@ -347,7 +416,7 @@ export const createDictionary=options=>{
     };
   
     const actions = useMemo(() => {
-      return { types, getLabel, getId, getName, selectOptions, isReady, reload, radioOptions };
+      return { types, getLabel, getId, getName, selectOptions, isReady, reload, radioOptions,getOptions,renderOptions };
     }, [types]);
   
     return actions;
@@ -370,7 +439,23 @@ export const createDictionary=options=>{
  * @property {string} id  - 数据唯一ID
  * @property {string} name  - 数据唯一id对应的别名
  * @property {string} label  - 展示给用户看的文字
- * 
+ * @property {boolean} [disabled] - 是否禁用
+ * @property {object} [data] - 原始数据
+ */
+
+
+/**
+ * @typedef GetOptionsProps
+ * @property {object} props
+ * @property {(item:DictionaryItem)=>boolean} [props.onFilter]  - 数据唯一id对应的别名
+ * @property {(item:DictionaryItem)=>boolean} [props.onDisabled]  - 数据唯一id对应的别名
+ */
+
+/**
+ * @typedef RenderOptionsProps
+ * @property {object} props
+ * @property {DictionaryItem[]} [props.options]  - 数据唯一id对应的别名
+ * @property {JSX.Element} [props.OptionComponent]  - 数据唯一id对应的别名
  */
 
 /**
@@ -382,6 +467,8 @@ export const createDictionary=options=>{
  * @property {function}  getName - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值
  * @property {function}  getLabel - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值
  * @property {function}  reload - ()=>void,重新调用字典接口刷新字典列表
+ * @property {(props?:GetOptionsProps)=>DictionaryItem[]} getOptions - 获取选项列表
+ * @property {(props:RenderOptionsProps)=>JSX.Element} renderOptions - 渲染选项列表
  * 
  */
 

package/src/usePagination/index.js

@@ -5,16 +5,19 @@
 import { useState,useMemo,useRef } from 'react';
 import useSwitch from '../useSwitch';
 
+/**
+ * @typedef UsePaginationProps
+ * @property {FunServices} service - 发送请求的方法
+ * @property {Pagination} [pagination] - 默认分页信息
+ * @property {Array<Function>} [beforeService] - api调用前监听方法列表
+ * @property {Array<Function>} [afterService] - api调用后监听方法列表
+ */
+
 /**
  * 分页管理器
  * 
  * 
- * @param {Object} props 
- * @param {FunServices} props.service - 发送请求的方法
- * @param {Pagination} [props.pagination] - 默认分页信息
- * @param {Array<Function>} [props.beforeService] - api调用前监听方法列表
- * @param {Array<Function>} [props.afterService] - api调用后监听方法列表
- *  
+ * @param {UsePaginationProps & *} props 
  * @version 1.0.1
  * 
  * @example 
@@ -252,9 +255,9 @@ const usePagination=(props)=>{
 /**
  * 分页信息
  * @typedef {Object} Pagination
- * @property {number} pageSize=20 - 分页大小
- * @property {number} current=1 - 当前页码
- * @property {number} total=1 - 总记录数
+ * @property {number} [pageSize=20] - 分页大小
+ * @property {number} [current=1] - 当前页码
+ * @property {number} [total=1] - 总记录数
  * @property {number} [startIdx=0] - 当前页面下第一条数据的序号
  * @property {boolean} [more] - 是否还有下一页
  * 

package/src/usePaginationWithForm/index.js

@@ -5,14 +5,17 @@
 import { useState, useMemo, useEffect, useRef } from 'react';
 import usePagination from '../usePagination';
 
+/**
+ * @typedef UsePaginationWithFormProps
+ * @property {Object} form - Form表单的ref，在接口调用前会校验获取form表单内的数据，提交到接口参数内查询
+ */
 
 /**
  * 支持Antd-Form的usePagination
  * 作用是在查询接口前自动获取form表单内的字段，并作为接口查询参数进行查询
  * 使用方法及参数字段参考 [usePagination]{@link usePagination.md}
  * 
- * @param {Object} props
- * @param {Object} props.form - Form表单的ref，在接口调用前会校验获取form表单内的数据，提交到接口参数内查询
+ * @param {import('../usePagination').UsePaginationProps & UsePaginationWithFormProps} props
  * 
  * @example 
 const [form] = Form.useForm();
@@ -102,10 +105,13 @@ const usePaginationWithForm = (props) => {
 
 /**
  * usePaginationWithForm的返回对象
- * @typedef {Object} UsePaginationWithFormResult
+ * @typedef {Object} _UsePaginationWithFormResult
  * @property {Function} reset - 重置方法，返回Promise
  */
 
+/**
+ * @typedef {UsePaginationResult & _UsePaginationWithFormResult} UsePaginationWithFormResult 
+ */
 
 
 export default usePaginationWithForm