kn-hooks 0.0.12 → 0.0.14

package/md/useDictionary.md

@@ -2,12 +2,66 @@
 ## <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)
+    * _static_
+        * [    SetConfig(params)](#module_usedictionary_setconfig) ⇒ <code>void</code>
+        * [    createDictionary(options)](#module_usedictionary_createdictionary) ⇒ <code>callback</code>
+    * _inner_
+        * [    useDictionary(props)](#module_usedictionary__usedictionary) ⇒ <code>UseDictionaryResult</code>
+        * [    Api](#module_usedictionary__api) ⇒ <code>Object</code>
+        * [    DictionaryItem](#module_usedictionary__dictionaryitem)
+        * [    UseDictionaryResult](#module_usedictionary__usedictionaryresult)
+
+<a id="module_usedictionary_setconfig"></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>        SetConfig(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_createdictionary"></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>        createDictionary(options) ⇒ <code>callback</code>
+创建字典hooks工具
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| options | <code>Object</code> |  |  |
+| options.api | <code>Api</code> |  | 用于获取字典列表的接口 |
+| [options.idKey] | <code>string</code> | <code>&quot;&#x27;id&#x27;&quot;</code> | 字段id的key键值 |
+| [options.nameKey] | <code>string</code> | <code>&quot;&#x27;name&#x27;&quot;</code> | 字段name的key键值 |
+| [options.labelKey] | <code>string</code> | <code>&quot;&#x27;label&#x27;&quot;</code> | 字段label的key键值 |
+| [options.SelectOption] | <code>ReactDom</code> |  | 指定\<Select.Option\>对象是谁 |
+| [options.RadioOption] | <code>ReactDom</code> |  | 指定\<Radio.Button\>对象是谁 |
+| [options.beforeApi] | <code>callback</code> |  | (request:object)=>object 接口调用前的参数拦截器 |
+| [options.afterApi] | <code>callback</code> |  | (reponse:object)=>object[] 接口调用后的拦截器 |
+| [options.defaultTypes] | <code>Array.&lt;DictionaryItem&gt;</code> |  | 如果字典不是通过api获取，可以在这里设置字典的内容 |
 
+**Example**  
+```js
+// emUserType.jsx
+  export const userType = 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>
+    )
+  }
+```
 <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>
 字典管理
@@ -26,12 +80,13 @@
 | [props.RadioOption] | <code>ReactDom</code> |  | 指定\<Radio.Button\>对象是谁 |
 | [props.beforeApi] | <code>callback</code> |  | (request:object)=>object 接口调用前的参数拦截器 |
 | [props.afterApi] | <code>callback</code> |  | (reponse:object)=>object[] 接口调用后的拦截器 |
+| [props.defaultTypes] | <code>Array.&lt;DictionaryItem&gt;</code> |  | 如果字典不是通过api获取，可以在这里设置字典的内容 |
 
 **Example**  
 ```js
 import {Select,Radio} from 'antd';
-import useDictionary from '@/useDictionary';
-useDictionary.SET({SelectOption:Select.Option,RadioOption:Radio.Button});
+import useDictionary,{SetConfig} from '@/useDictionary';
+SetConfig({SelectOption:Select.Option,RadioOption:Radio.Button});
 
 const Index=()=>{
 
@@ -69,17 +124,6 @@ const Index=()=>{
   )
 }
 ```
-<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**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-hooks",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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

@@ -63,7 +63,14 @@ webpack增加`bable-plugin-import`插件，给babel plugins增加配置
 //     }
 //  ]
 
-```<a id="module_useclipboard"></a>
+```
+
+
+
+## API 
+
+
+<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)
@@ -144,12 +151,66 @@ return <span>当前计数器:{counter.count}</span>
 ## <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)
+    * _static_
+        * [    SetConfig(params)](#module_usedictionary_setconfig) ⇒ <code>void</code>
+        * [    createDictionary(options)](#module_usedictionary_createdictionary) ⇒ <code>callback</code>
+    * _inner_
+        * [    useDictionary(props)](#module_usedictionary__usedictionary) ⇒ <code>UseDictionaryResult</code>
+        * [    Api](#module_usedictionary__api) ⇒ <code>Object</code>
+        * [    DictionaryItem](#module_usedictionary__dictionaryitem)
+        * [    UseDictionaryResult](#module_usedictionary__usedictionaryresult)
+
+<a id="module_usedictionary_setconfig"></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>        SetConfig(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_createdictionary"></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>        createDictionary(options) ⇒ <code>callback</code>
+创建字典hooks工具
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| options | <code>Object</code> |  |  |
+| options.api | <code>Api</code> |  | 用于获取字典列表的接口 |
+| [options.idKey] | <code>string</code> | <code>&quot;&#x27;id&#x27;&quot;</code> | 字段id的key键值 |
+| [options.nameKey] | <code>string</code> | <code>&quot;&#x27;name&#x27;&quot;</code> | 字段name的key键值 |
+| [options.labelKey] | <code>string</code> | <code>&quot;&#x27;label&#x27;&quot;</code> | 字段label的key键值 |
+| [options.SelectOption] | <code>ReactDom</code> |  | 指定\<Select.Option\>对象是谁 |
+| [options.RadioOption] | <code>ReactDom</code> |  | 指定\<Radio.Button\>对象是谁 |
+| [options.beforeApi] | <code>callback</code> |  | (request:object)=>object 接口调用前的参数拦截器 |
+| [options.afterApi] | <code>callback</code> |  | (reponse:object)=>object[] 接口调用后的拦截器 |
+| [options.defaultTypes] | <code>Array.&lt;DictionaryItem&gt;</code> |  | 如果字典不是通过api获取，可以在这里设置字典的内容 |
 
+**Example**  
+```js
+// emUserType.jsx
+  export const userType = 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>
+    )
+  }
+```
 <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>
 字典管理
@@ -168,12 +229,13 @@ return <span>当前计数器:{counter.count}</span>
 | [props.RadioOption] | <code>ReactDom</code> |  | 指定\<Radio.Button\>对象是谁 |
 | [props.beforeApi] | <code>callback</code> |  | (request:object)=>object 接口调用前的参数拦截器 |
 | [props.afterApi] | <code>callback</code> |  | (reponse:object)=>object[] 接口调用后的拦截器 |
+| [props.defaultTypes] | <code>Array.&lt;DictionaryItem&gt;</code> |  | 如果字典不是通过api获取，可以在这里设置字典的内容 |
 
 **Example**  
 ```js
 import {Select,Radio} from 'antd';
-import useDictionary from '@/useDictionary';
-useDictionary.SET({SelectOption:Select.Option,RadioOption:Radio.Button});
+import useDictionary,{SetConfig} from '@/useDictionary';
+SetConfig({SelectOption:Select.Option,RadioOption:Radio.Button});
 
 const Index=()=>{
 
@@ -211,17 +273,6 @@ const Index=()=>{
   )
 }
 ```
-<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**

package/src/useDictionary/index.js

@@ -22,14 +22,15 @@ const DEFAULT_CONFIG={
  * @param {ReactDom} [props.RadioOption] - 指定\<Radio.Button\>对象是谁
  * @param {callback} [props.beforeApi] - (request:object)=>object 接口调用前的参数拦截器
  * @param {callback} [props.afterApi] -  (reponse:object)=>object[] 接口调用后的拦截器
+ * @param {DictionaryItem[]} [props.defaultTypes] -  如果字典不是通过api获取，可以在这里设置字典的内容
  * 
  * 
  * @return {UseDictionaryResult}
  * 
  * @example
 import {Select,Radio} from 'antd';
-import useDictionary from '@/useDictionary';
-useDictionary.SET({SelectOption:Select.Option,RadioOption:Radio.Button});
+import useDictionary,{SetConfig} from '@/useDictionary';
+SetConfig({SelectOption:Select.Option,RadioOption:Radio.Button});
 
 const Index=()=>{
 
@@ -76,12 +77,14 @@ const useDictionary=(props)=>{
     labelKey = 'label',
     beforeApi,
     afterApi,
+    defaultTypes,
     SelectOption= DEFAULT_CONFIG.SelectOption,
     RadioOption= DEFAULT_CONFIG.RadioOption } = props;
 
-  const [types, setTypes] = useState(null);
+  const [types, setTypes] = useState(defaultTypes||null);
 
   const init = async () => {
+    if(!api)return;
     let params={};
     if(beforeApi){
       params = beforeApi();
@@ -176,11 +179,166 @@ const useDictionary=(props)=>{
 
 }
 
+/**
+ * @function 
+ * @description 全局设置SelectOption和RadioOption  
+ * @param {Object} params
+ * @param {ReactDom} params.SelectOption - Antd的SelectOption组件
+ * @param {ReactDom} params.RadioOption - Antd的SelectOption组件
+ * @returns {void}
+ */
 export const SetConfig = ({SelectOption,RadioOption})=>{
   if(SelectOption)DEFAULT_CONFIG.SelectOption = SelectOption;
   if(RadioOption)DEFAULT_CONFIG.RadioOption = RadioOption;
 };
 
+/**
+ * @function 
+ * @description 创建字典hooks工具
+ * @param {Object} options
+ * @param {Api} options.api - 用于获取字典列表的接口
+ * @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 {DictionaryItem[]} [options.defaultTypes] -  如果字典不是通过api获取，可以在这里设置字典的内容
+ * 
+ * @returns {callback} 
+ * 
+ * @example
+  // emUserType.jsx
+  export const userType = 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>
+    )
+  }
+ */
+export const createDictionary=options=>{
+  const { 
+    api, 
+    idKey = 'id', 
+    nameKey = 'name', 
+    labelKey = 'label',
+    beforeApi,
+    afterApi,
+    defaultTypes=null,
+    SelectOption= DEFAULT_CONFIG.SelectOption,
+    RadioOption= DEFAULT_CONFIG.RadioOption } = options;
+
+  return (props)=>{
+    const [types, setTypes] = useState(defaultTypes||null);
+
+    const init = async () => {
+      if(!api)return;
+      let params={};
+      if(beforeApi){
+        params = beforeApi();
+      }
+      const ret = await api(params);
+      if(afterApi){
+        ret = afterApi(ret);
+        setTypes(ret||[]);
+      }else{
+        if (+ret?.code === 0) {
+          setTypes(ret.data.body || []);
+        }
+      }
+    };
+  
+    useEffect(() => {
+      init();
+    }, []);
+  
+    const getLabel = (id) => {
+      if (types) {
+        for (let i = 0; i < types.length; i++) {
+          if ('' + types[i][idKey] === '' + id) {
+            return types[i][labelKey];
+          }
+        }
+      }
+      return '';
+    };
+    const getName = (id) => {
+      if (types) {
+        for (let i = 0; i < types.length; i++) {
+          if ('' + types[i][idKey] === '' + id) {
+            return types[i][nameKey];
+          }
+        }
+      }
+      return '';
+    };
+    const getId = (labelOrName) => {
+      if (types) {
+        for (let i = 0; i < types.length; i++) {
+          const label = '' + types[i][labelKey];
+          const name = '' + types[i][nameKey];
+          const txt = '' + labelOrName;
+          if (label === txt || name === txt) {
+            return types[i][idKey];
+          }
+        }
+      }
+      return '';
+    };
+  
+    const selectOptions = useMemo(() => {
+      if(!SelectOption)return <>SelectOption未指定</>;
+      return (
+        types?.map((item) => {
+          return (
+            <SelectOption key={item[idKey]} value={item[idKey]} data-keyname={item[nameKey]}>
+              {item[labelKey]}
+            </SelectOption>
+          );
+        }) || ''
+      );
+    }, [types,SelectOption]);
+  
+    const radioOptions = useMemo(() => {
+      if(!RadioOption)return <>RadioOption没指定</>;
+      return (
+        types?.map((item) => {
+          return (
+            <RadioOption key={item[idKey]} value={item[idKey]} data-keyname={item[nameKey]}>
+              {item[labelKey]}
+            </RadioOption>
+          );
+        }) || ''
+      );
+    }, [types,RadioOption]);
+  
+    const isReady = () => {
+      return types !== null;
+    };
+    const reload = () => {
+      init();
+    };
+  
+    const actions = useMemo(() => {
+      return { types, getLabel, getId, getName, selectOptions, isReady, reload, radioOptions };
+    }, [types]);
+  
+    return actions;
+  }
+}
 
 
 /**
@@ -212,15 +370,7 @@ export const SetConfig = ({SelectOption,RadioOption})=>{
  * 
  */
 
-/**
- * @function SET
- * @description 全局设置SelectOption和RadioOption  
- * 
- * @param {Object} params
- * @param {ReactDom} params.SelectOption - Antd的SelectOption组件
- * @param {ReactDom} params.RadioOption - Antd的SelectOption组件
- * @returns {void}
- */
+
 
 
 export default useDictionary