kn-hooks 0.0.36 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.36",
+  "version": "0.0.40",
   "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_new.js

@@ -0,0 +1,293 @@
+/**
+ * @module useDictionary
+ */
+import React,{ useState, useMemo, useEffect } from 'react';
+
+
+/**
+ * @template [T=object]
+ * @callback Api
+ * @param {Object} params - 调用接口用到的参数
+ * @returns {Promise<T>}
+ */
+
+
+/**
+ * @typedef DictionaryItem
+ * 字典数据的结构
+ * @property {string} id  - 数据唯一ID
+ * @property {string} name  - 数据唯一id对应的别名
+ * @property {string} label  - 展示给用户看的文字
+ * @property {boolean} [disabled] - 是否禁用
+ * @property {object} [data] - 原始数据
+ * @property {string} [subLabel]  - 副标题
+ * @property {string} [type]  - 是不是多选框
+ */
+
+
+/**
+ * @typedef CreateOptions
+ * @property {DictionaryItem[]}  types - 字典数据列表
+ * @property {string} [idKey='id'] - id的字段名
+ * @property {string} [nameKey='name'] - id的字段名
+ * @property {string} [labelKey='label'] - id的字段名
+ */
+
+
+/**
+ * @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对应的别名
+ */
+
+
+/**
+ * @typedef RenderOptions
+ * @property {(item:DictionaryItem)=>ReactDOM} onRender - 渲染拦截器
+ */
+
+/**
+ * @typedef EnumResult
+ * @property {DictionaryItem[]}  types - 字典数据列表
+ * @property {(labelOrName:string)=>string}  getId - 搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
+ * @property {(id:string)=>string}  getName - 匹配id复合的对象，返回其name的值
+ * @property {(id:string)=>string}  getLabel - 匹配id复合的对象，返回其label的值
+ * @property {(idOrNameOrLabel:string)=>DictionaryItem}  getItem - 匹配id,label,name只要符合的返回对象
+ * @property {(props?:GetOptionsProps)=>DictionaryItem[]} getOptions - 获取选项列表
+ * @property {(props?:RenderOptions)=>ReactDOM[]} render - 触发渲染
+ * 
+ */
+
+
+/**
+ * @typedef CreateApiDictionaryOptions
+ * @property {Api} [api] - 用于获取字典列表的接口
+ * @property {(request:object)=>object} [beforeApi] - (request:object)=>object 接口调用前的参数拦截器
+ * @property {(response:object)=>object} [afterApi] -  (reponse:object)=>object[] 接口调用后的拦截器
+ * @property {DictionaryItem[]} [defaultTypes] -  如果字典不是通过api获取，可以在这里设置字典的内容
+ */
+
+/**
+ * @typedef {CreateOptions & CreateApiDictionaryOptions}  CreateDictionaryOptions
+ */
+
+/**
+ * @typedef  CreateDictoryResult
+ * @property {()=>boolean} isReady - 是否加载完毕
+ * @property {()=>void} reload - 重新加载
+ * 
+ */
+
+/**
+ * @typedef {CreateDictoryResult & EnumResult} UseDictionaryResult
+ */
+
+
+const DEFAULT_CONFIG={
+  beforeApi:null,
+  afterApi:null,
+  idKey:'id',
+  nameKey:'name',
+  labelKey:'label'
+};
+
+
+/**
+ * @function 
+ * @description 全局设置SelectOption和RadioOption  
+ * @param {Object} params
+ * 
+ * @returns {void}
+ */
+export const SetConfig = ({beforeApi,afterApi,idKey,nameKey,labelKey})=>{
+  if(beforeApi)DEFAULT_CONFIG.beforeApi = beforeApi;
+  if(afterApi)DEFAULT_CONFIG.afterApi = afterApi;
+  if(idKey)DEFAULT_CONFIG.idKey = idKey;
+  if(nameKey)DEFAULT_CONFIG.nameKey = nameKey;
+  if(labelKey)DEFAULT_CONFIG.labelKey = labelKey;
+};
+
+
+/**
+ * 创建一个静态的字典
+ * @param {CreateOptions} props 
+ * @returns {EnumResult}
+ */
+export const createEnum=props=>{
+  const { 
+    idKey = DEFAULT_CONFIG.idKey, 
+    nameKey = DEFAULT_CONFIG.nameKey, 
+    labelKey = DEFAULT_CONFIG.labelKey,
+    types,
+  } = props;
+
+  const idMap={};
+  const labelMap={};
+  const nameMap={};
+
+  if(types){
+    types.forEach(item=>{
+      idMap[''+item[idKey]] = item;
+      labelMap[''+item[labelKey]] = item;
+      nameMap[''+item[nameKey]] = item;
+    })
+  }
+
+  const getLabel = (id) => {
+    let key = ''+id;
+    if(!types)return '';
+    if(idMap[key]){
+      return idMap[key][labelKey]
+    }
+    return '';
+  };
+  const getName = (id) => {
+    let key = ''+id;
+    if(!types)return '';
+    if(idMap[key]){
+      return idMap[key][nameKey]
+    }
+    return '';
+  };
+  const getId = (labelOrName) => {
+    let key = ''+labelOrName;
+    if(!types)return '';
+    if(nameMap[key]){
+      return nameMap[key][idKey]
+    }
+    if(labelMap[key]){
+      return labelMap[key][idKey]
+    }
+    return '';
+  };
+  const getItem=(idOrNameOrLabel)=>{
+    let key = ''+idOrNameOrLabel;
+    if(!types)return null;
+    if(idMap[key]){
+      return idMap[key]
+    }
+    if(nameMap[key]){
+      return nameMap[key]
+    }
+    if(labelMap[key]){
+      return labelMap[key]
+    }
+    return null;
+  };
+  const getOptions=(props)=>{
+    const {onFilter,onDisabled}=props;
+    let req=[];
+    if(!types)return 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 render=(props)=>{
+    const {onRender} = props;
+    let req=[];
+    if(!onRender)return req;
+    types.forEach(item=>{
+      if(onRender){
+        let component=onRender(item);
+        if(component){
+          req.push(component);
+        }
+      }
+    })
+    return req;
+  }
+  return { types, getLabel, getId, getName,getItem,getOptions,render };
+}
+
+
+/**
+ * @function 
+ * @description 创建字典hooks工具
+ * @param {CreateDictionaryOptions} options
+ * 
+ * @returns {()=>UseDictionaryResult} 
+ */
+export const createDictionary=options=>{
+  const { 
+    api, 
+    beforeApi = DEFAULT_CONFIG.beforeApi,
+    afterApi = DEFAULT_CONFIG.afterApi,
+  } = options;
+  const defaultTypes = options.defaultTypes || options.types || null;
+  return ()=>{
+    /**
+     * @type {[EnumResult,React.Dispatch<EnumResult>]}
+     */
+    const [enumItem, setEnumItem] = useState(()=>{
+      if(!api)return createEnum({...options,types:defaultTypes||[]})
+      return {types:null}
+    });
+
+    const init = async () => {
+      if(!api)return;
+      let params={};
+      let items=[];
+      if(beforeApi){
+        params = beforeApi();
+      }
+      let ret = await api(params);
+      if(afterApi){
+        items = afterApi(ret);
+      }else{
+        if (+ret?.code === 0) {
+          items = ret.data.body;
+        }
+      }
+      let value=createEnum({...options,types:items||[]});
+      setEnumItem(value);
+    };
+  
+    const isReady = () => {
+      return enumItem?.types !== null;
+    };
+    const reload = () => {
+      init();
+    };
+  
+    useEffect(() => {
+      init();
+    }, [api,beforeApi,afterApi]);
+
+    const actions = useMemo(() => {
+      return { isReady, reload,...enumItem };
+    }, [enumItem]);
+  
+    return actions;
+  }
+}
+
+
+
+
+useDictionary.createDictionary=createDictionary;
+useDictionary.SetConfig = SetConfig;
+
+export default useDictionary

package/src/usePagination/index.js

@@ -11,8 +11,14 @@ import useSwitch from '../useSwitch';
  * @property {Pagination} [pagination] - 默认分页信息
  * @property {Array<Function>} [beforeService] - api调用前监听方法列表
  * @property {Array<Function>} [afterService] - api调用后监听方法列表
+ * @property {string} [mode='pagination'] - pagination普通分页形式， scrollLoad 滚动加载,取值来源usePagination.MODE
+ * @property {boolean} [debug=false] - 是否进入调试模式
  */
 
+const MODE={
+  pagination:'pagination',
+  scrollLoad:'scrollLoad',
+}
 /**
  * 分页管理器
  * 
@@ -90,7 +96,7 @@ import useSwitch from '../useSwitch';
  */
 const usePagination=(props)=>{
 
-  const {service}= props;
+  const {service,mode=MODE.pagination,debug=false}= props;
 
   const DEFAULT_PAGE_SIZE=20;
   const DEFAULT_PAGE_CURRENT=1; 
@@ -99,6 +105,8 @@ const usePagination=(props)=>{
     pageSize: props?.pagination?.pageSize??DEFAULT_PAGE_SIZE
   });
   const [data,setData] = useState(null);
+  const [scrollData,setScrollData] = useState(null);
+
   const refListener= useRef({
     beforeService:props?.beforeService??[],
     afterService:props?.afterService??[]
@@ -117,7 +125,7 @@ const usePagination=(props)=>{
     loading.open();
     const {beforeService} = listener;
     if(beforeService){
-      console.log('[usePagination] beforeService',params)
+      if(debug)console.log('[usePagination] beforeService',params)
       for(let i=0;i<beforeService.length;i++){
         params = beforeService[i](params);
         if(typeof params?.then == 'function'){
@@ -130,11 +138,11 @@ const usePagination=(props)=>{
       loading.close();
       return;
     }
-    console.log('[usePagination] service',params)
+    if(debug)console.log('[usePagination] service',params)
     let req = await service(params);
     const {afterService} = listener;
     if(afterService){
-      console.log('[usePagination] afterService',req)
+      if(debug)console.log('[usePagination] afterService',req)
       for(let i=0;i<afterService.length;i++){
         req = afterService[i](req);
         if( typeof req?.then == 'function' ){
@@ -142,20 +150,26 @@ const usePagination=(props)=>{
         }
       }
     }
-    console.log('[usePagination] response',req)
+    if(debug)console.log('[usePagination] response',req)
     let response={};
     if(req?.code==0){
-      let {page:{current,total},data:reqData} = req;
+      let {page:{current,total=0},data:reqData} = req;
+      let _pageSize=pageSize;
       // 兼容没数据的时候如果pageSize为0会导致接下来刷新的时候也按0的pageSize来写入
       if(req?.page?.pageSize){
-        pageSize=+pageSize;
+        _pageSize=+req?.page?.pageSize;
       }
       current=+current;
       total=+total;
-      const startIdx= (current-1)*pageSize;
-      const more = current*pageSize<total;
+      const startIdx= (current-1)*_pageSize;
+      let more;
+      if(mode==MODE.pagination){
+        more = current*_pageSize<total;
+      }else{
+        more = req.page.more;
+      }
       response.pagination={
-        current,pageSize,total,startIdx,more
+        current,pageSize:_pageSize,total,startIdx,more
       };
       setPagination(response.pagination);
       response.data= clear?[]:(data||[]);
@@ -170,7 +184,19 @@ const usePagination=(props)=>{
       response.data[pageIdx]= reqData||[];
       response.data=[...response.data];
       setData(response.data);
+
+      // 滚动加载模式的数据组装
+      if(mode==MODE.scrollLoad){
+        let _scrollData=[];
+        for(let data of response.data ){
+          if(data!=null && Array.isArray(data) ){
+            _scrollData = [..._scrollData,...data];
+          }
+        }
+        setScrollData(_scrollData)
+      }
     }else{
+      setScrollData(scrollData||[]);
       setData(data||[]);
     }
     loading.close();
@@ -222,13 +248,15 @@ const usePagination=(props)=>{
       data,
       addListener,
       removeListener,
-      loading
+      loading,
+      mode,
+      scrollData
     }
-  },[pagination,data,refListener,loading])
+  },[pagination,data,refListener,loading,mode,scrollData])
 
   return action;
 }
-
+usePagination.MODE=MODE;
 
 
 /**
@@ -295,6 +323,9 @@ const usePagination=(props)=>{
  * @property {function} addListener - 监听事件 (type='beforeService'|'afterService',fn:FunListener)=>object
  * @property {function} removeListener - 移除监听事件 (type,fn:FunListener)=>void
  * @property {object} loading - loading状态，它是一个useSwitch
+ * @property {string} [mode='pagination'] - pagination普通分页形式， scrollLoad 滚动加载
+ * @property {Object[]} scrollData - 滚动加载模式下的数据集合
+ * 
  */
 
 

package/src/usePaginationWithForm/index.js

@@ -2,7 +2,7 @@
 /** 
  * @module usePaginationWithForm
 */
-import { useState, useMemo, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import usePagination from '../usePagination';
 
 /**
@@ -102,6 +102,7 @@ const usePaginationWithForm = (props) => {
   };
 };
 
+usePaginationWithForm.MODE=usePagination.MODE;
 
 /**
  * usePaginationWithForm的返回对象