From 0cc49de523cc76a4d77ced6d1f745c4c544c06e5 Mon Sep 17 00:00:00 2001 From: innocces <18435105624@163.com> Date: Fri, 9 Jul 2021 00:37:57 +0800 Subject: [PATCH] improvement(alias & demos): add alias @components and add useRequest demos --- .dumi/theme/builtins/index.less | 6 ++ .umirc.ts | 1 + packages/app/config/index.js | 5 ++ packages/app/src/app.config.ts | 3 + packages/app/src/components/DocPage/index.tsx | 2 +- packages/app/src/pages/useAPICheck/index.tsx | 2 +- .../pages/useArrayBufferToBase64/index.tsx | 2 +- .../pages/useBase64ToArrayBuffer/index.tsx | 2 +- packages/app/src/pages/useEnv/index.tsx | 2 +- packages/app/src/pages/useEvent/index.tsx | 2 +- .../app/src/pages/useNetworkType/index.tsx | 2 +- packages/app/src/pages/useOnline/index.tsx | 2 +- .../useRequest/defaultRequest/index.config.ts | 3 + .../pages/useRequest/defaultRequest/index.tsx | 35 +++++++++ packages/app/src/pages/useRequest/index.tsx | 71 ++++++++++--------- .../pages/useRequest/manual/index.config.ts | 3 + .../app/src/pages/useRequest/manual/index.tsx | 52 ++++++++++++++ .../pages/useRequest/polling/index.config.ts | 3 + .../src/pages/useRequest/polling/index.tsx | 43 +++++++++++ .../app/src/pages/useSystemInfo/index.tsx | 2 +- .../app/src/pages/useUpdateManager/index.tsx | 2 +- packages/app/src/pages/useVisible/index.tsx | 2 +- packages/hooks/src/useRequest/index.md | 14 ++++ tsconfig.json | 3 +- typings.d.ts | 2 + 25 files changed, 222 insertions(+), 44 deletions(-) create mode 100644 packages/app/src/pages/useRequest/defaultRequest/index.config.ts create mode 100644 packages/app/src/pages/useRequest/defaultRequest/index.tsx create mode 100644 packages/app/src/pages/useRequest/manual/index.config.ts create mode 100644 packages/app/src/pages/useRequest/manual/index.tsx create mode 100644 packages/app/src/pages/useRequest/polling/index.config.ts create mode 100644 packages/app/src/pages/useRequest/polling/index.tsx diff --git a/.dumi/theme/builtins/index.less b/.dumi/theme/builtins/index.less index b2906560e..fe22ff3d7 100644 --- a/.dumi/theme/builtins/index.less +++ b/.dumi/theme/builtins/index.less @@ -2,6 +2,12 @@ display: none; } +.__dumi-default-mobile-previewer { + .__dumi-default-tabs-nav { + display: none; + } +} + .__dumi-default-mobile-demo-layout { font-size: 0.36rem; padding: 0 !important; diff --git a/.umirc.ts b/.umirc.ts index bfe5a7de2..167291dbf 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -18,6 +18,7 @@ export default defineConfig({ '@tarojs/taro': '@tarojs/taro-h5', '@tarojs/runtime': '@taro-hooks/website-runtime', '@pages': __dirname + '/packages/app/src/pages', + '@components': __dirname + '/packages/app/src/components', }, define: { 'process.env.TARO_ENV': 'h5', diff --git a/packages/app/config/index.js b/packages/app/config/index.js index e04ed7824..915720f0a 100644 --- a/packages/app/config/index.js +++ b/packages/app/config/index.js @@ -1,3 +1,5 @@ +const { resolve } = require('path'); + const config = { projectName: 'taro-hooks', date: '2021-6-24', @@ -16,6 +18,9 @@ const config = { options: {}, }, framework: 'react', + alias: { + '@components': resolve(__dirname, '../', 'src/components'), + }, mini: { postcss: { pxtransform: { diff --git a/packages/app/src/app.config.ts b/packages/app/src/app.config.ts index cc5a3da1a..80414b6b5 100644 --- a/packages/app/src/app.config.ts +++ b/packages/app/src/app.config.ts @@ -16,6 +16,9 @@ export default { 'pages/useUpdateManager/index', // network 'pages/useRequest/index', + 'pages/useRequest/defaultRequest/index', + 'pages/useRequest/manual/index', + 'pages/useRequest/polling/index', 'pages/useNetworkType/index', 'pages/useOnline/index', ], diff --git a/packages/app/src/components/DocPage/index.tsx b/packages/app/src/components/DocPage/index.tsx index ab4554ecf..87db1a59d 100644 --- a/packages/app/src/components/DocPage/index.tsx +++ b/packages/app/src/components/DocPage/index.tsx @@ -29,7 +29,7 @@ const DocPage = ({ children, title, panelTitle }: IDocPageProps) => { - + {panelTitle && } {children} diff --git a/packages/app/src/pages/useAPICheck/index.tsx b/packages/app/src/pages/useAPICheck/index.tsx index 97a7498d9..7c1c3517f 100644 --- a/packages/app/src/pages/useAPICheck/index.tsx +++ b/packages/app/src/pages/useAPICheck/index.tsx @@ -6,7 +6,7 @@ import { AtNoticebar, } from 'taro-ui'; import { View } from '@tarojs/components'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useEnv, useAPICheck } from 'taro-hooks'; import { ENV_TYPE } from '@tarojs/taro'; diff --git a/packages/app/src/pages/useArrayBufferToBase64/index.tsx b/packages/app/src/pages/useArrayBufferToBase64/index.tsx index 2c42b4ba7..bb23cd15b 100644 --- a/packages/app/src/pages/useArrayBufferToBase64/index.tsx +++ b/packages/app/src/pages/useArrayBufferToBase64/index.tsx @@ -6,7 +6,7 @@ import 'taro-ui/dist/style/components/article.scss'; import { View } from '@tarojs/components'; import { AtButton } from 'taro-ui'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import './index.less'; diff --git a/packages/app/src/pages/useBase64ToArrayBuffer/index.tsx b/packages/app/src/pages/useBase64ToArrayBuffer/index.tsx index 4140dc63f..c2ee9d62e 100644 --- a/packages/app/src/pages/useBase64ToArrayBuffer/index.tsx +++ b/packages/app/src/pages/useBase64ToArrayBuffer/index.tsx @@ -7,7 +7,7 @@ import 'taro-ui/dist/style/components/article.scss'; import { View } from '@tarojs/components'; import { AtInput } from 'taro-ui'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import './index.less'; diff --git a/packages/app/src/pages/useEnv/index.tsx b/packages/app/src/pages/useEnv/index.tsx index e16181137..7a3acf6a7 100644 --- a/packages/app/src/pages/useEnv/index.tsx +++ b/packages/app/src/pages/useEnv/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback } from 'react'; import { AtRadio, AtMessage } from 'taro-ui'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useEnv } from 'taro-hooks'; import Taro, { ENV_TYPE } from '@tarojs/taro'; diff --git a/packages/app/src/pages/useEvent/index.tsx b/packages/app/src/pages/useEvent/index.tsx index 566a2379b..93b54a01f 100644 --- a/packages/app/src/pages/useEvent/index.tsx +++ b/packages/app/src/pages/useEvent/index.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import { AtList, AtListItem, AtMessage, AtDivider, AtCard } from 'taro-ui'; import { View } from '@tarojs/components'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useEvent } from 'taro-hooks'; import Taro, { ENV_TYPE } from '@tarojs/taro'; diff --git a/packages/app/src/pages/useNetworkType/index.tsx b/packages/app/src/pages/useNetworkType/index.tsx index 2be82b28d..b59b09c75 100644 --- a/packages/app/src/pages/useNetworkType/index.tsx +++ b/packages/app/src/pages/useNetworkType/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect } from 'react'; import { AtMessage, AtRadio, AtNoticebar } from 'taro-ui'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useNetworkType } from 'taro-hooks'; import Taro from '@tarojs/taro'; diff --git a/packages/app/src/pages/useOnline/index.tsx b/packages/app/src/pages/useOnline/index.tsx index 18eaf8f67..3c6a7a3df 100644 --- a/packages/app/src/pages/useOnline/index.tsx +++ b/packages/app/src/pages/useOnline/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect } from 'react'; import { AtMessage, AtSwitch, AtNoticebar } from 'taro-ui'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useOnline } from 'taro-hooks'; import Taro from '@tarojs/taro'; diff --git a/packages/app/src/pages/useRequest/defaultRequest/index.config.ts b/packages/app/src/pages/useRequest/defaultRequest/index.config.ts new file mode 100644 index 000000000..db014f036 --- /dev/null +++ b/packages/app/src/pages/useRequest/defaultRequest/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useRequest 默认用法', +}; diff --git a/packages/app/src/pages/useRequest/defaultRequest/index.tsx b/packages/app/src/pages/useRequest/defaultRequest/index.tsx new file mode 100644 index 000000000..3d726e0a9 --- /dev/null +++ b/packages/app/src/pages/useRequest/defaultRequest/index.tsx @@ -0,0 +1,35 @@ +/** + * desc: 在这个例子中， useRequest 接收了一个异步函数 `getUsername` ，在组件初次加载时， 自动触发该函数执行。同时 useRequest 会自动管理异步请求的 `loading` , `data` , `error` 等状态。 + */ +import React from 'react'; +import Mock from 'mockjs'; +import { useRequest } from 'taro-hooks'; + +import { View } from '@tarojs/components'; +import DocPage from '@components/DocPage'; + +function getUsername(): Promise { + return new Promise((resolve) => { + setTimeout(() => { + // 兼容小程序写法 + resolve(Mock.mock('@name()')); + }, 1000); + }); +} + +const DefaultRequest = () => { + const { data, error, loading } = useRequest(getUsername); + return ( + + {error ? ( + failed to load + ) : loading ? ( + 'loading...' + ) : ( + Username: {data} + )} + + ); +}; + +export default DefaultRequest; diff --git a/packages/app/src/pages/useRequest/index.tsx b/packages/app/src/pages/useRequest/index.tsx index b62d9cdd8..d9e7f57fa 100644 --- a/packages/app/src/pages/useRequest/index.tsx +++ b/packages/app/src/pages/useRequest/index.tsx @@ -1,44 +1,51 @@ import React, { useCallback } from 'react'; -import { AtMessage } from 'taro-ui'; -import { View } from '@tarojs/components'; -import DocPage from '../../components/DocPage'; -import { useUpdateManager } from 'taro-hooks'; -import Taro from '@tarojs/taro'; +import { navigateTo } from '@tarojs/taro'; + +import { AtList, AtListItem } from 'taro-ui'; +import DocPage from '@components/DocPage'; import 'taro-ui/dist/style/components/icon.scss'; +import { AtListItemProps } from 'taro-ui/types/list'; -export default () => { - const onCheckForUpdate = useCallback((res) => { - Taro.atMessage({ - message: res.hasUpdate ? '有新版本' : '无新版本', - }); - }, []); +interface IListItem extends AtListItemProps { + route: string; +} - const onUpdateReady = useCallback(() => { - Taro.atMessage({ - message: '检查更新成功', - }); - }, []); +const list: IListItem[] = [ + { + title: '默认请求', + note: '在组件初次加载时， 自动触发该函数执行。', + route: 'defaultRequest', + }, + { + title: '手动触发', + note: '通过设置 options.manual = true , 则需要手动调用 run 时才会触发执行异步函数。', + route: 'manual', + }, + { + title: '轮询', + note: '通过设置 options.pollingInterval，进入轮询模式，定时触发函数执行。', + route: 'polling', + }, +]; - const onUpdateFailed = useCallback(() => { - Taro.atMessage({ - message: '检查更新失败', - }); +export default () => { + const routePage = useCallback((route: string) => { + navigateTo({ url: `${route}/index` }); }, []); - const updateManager = useUpdateManager({ - onCheckForUpdate, - onUpdateReady, - onUpdateFailed, - }); - return ( - <> - - - 检查更新中.... - - + + + {list.map((listItem, index) => ( + routePage(listItem.route)} + /> + ))} + + ); }; diff --git a/packages/app/src/pages/useRequest/manual/index.config.ts b/packages/app/src/pages/useRequest/manual/index.config.ts new file mode 100644 index 000000000..e6b89f511 --- /dev/null +++ b/packages/app/src/pages/useRequest/manual/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useRequest 手动触发', +}; diff --git a/packages/app/src/pages/useRequest/manual/index.tsx b/packages/app/src/pages/useRequest/manual/index.tsx new file mode 100644 index 000000000..6616ac215 --- /dev/null +++ b/packages/app/src/pages/useRequest/manual/index.tsx @@ -0,0 +1,52 @@ +/** + * desc: 通过设置 `options.manual = true` , 则需要手动调用 `run` 时才会触发执行异步函数。 + */ +import React, { useState } from 'react'; +import { useRequest } from 'taro-hooks'; +import Taro from '@tarojs/taro'; + +import { AtMessage, AtInput, AtButton } from 'taro-ui'; +import DocPage from '@components/DocPage'; + +type Result = { success: boolean }; + +function changeUsername(username: string): Promise { + console.log(username); + return new Promise((resolve) => { + setTimeout(() => { + resolve({ success: true }); + }, 1000); + }); +} + +const DefaultRequest = () => { + const [state, setState] = useState(''); + + const { loading, run } = useRequest(changeUsername, { + manual: true, + onSuccess: (result: Result, params: string[]) => { + if (result.success) { + setState(''); + Taro.atMessage({ + message: `The username was changed to "${params[0]}" !`, + }); + } + }, + }); + return ( + + + setState(e as string)} + value={state} + placeholder="Please enter username" + /> + run(state)}> + {loading ? 'loading' : 'Edit'} + + + ); +}; + +export default DefaultRequest; diff --git a/packages/app/src/pages/useRequest/polling/index.config.ts b/packages/app/src/pages/useRequest/polling/index.config.ts new file mode 100644 index 000000000..858c8fa24 --- /dev/null +++ b/packages/app/src/pages/useRequest/polling/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useRequest 轮询', +}; diff --git a/packages/app/src/pages/useRequest/polling/index.tsx b/packages/app/src/pages/useRequest/polling/index.tsx new file mode 100644 index 000000000..4ba4cbfe1 --- /dev/null +++ b/packages/app/src/pages/useRequest/polling/index.tsx @@ -0,0 +1,43 @@ +/** + * desc: | + * 通过设置 `options.pollingInterval` ，进入轮询模式，定时触发函数执行。 + * + * - 通过设置 `options.pollingWhenHidden=false` ，在屏幕不可见时，暂时暂停定时任务。 + * - 通过 `run` / `cancel` 来 开启/停止 轮询。 + * - 在 `options.manual=true` 时，需要第一次执行 `run` 后，才开始轮询。 + */ + +import React from 'react'; +import { useRequest } from 'taro-hooks'; +import Mock from 'mockjs'; + +import { View } from '@tarojs/components'; +import DocPage from '@components/DocPage'; +import { AtButton } from 'taro-ui'; + +function getUsername(): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve(Mock.mock('@name()')); + }, 1000); + }); +} + +export default () => { + const { data, loading, run, cancel } = useRequest(getUsername, { + pollingInterval: 1000, + pollingWhenHidden: false, + }); + + return ( + + Username: {loading ? 'loading' : data} + + start + + + stop + + + ); +}; diff --git a/packages/app/src/pages/useSystemInfo/index.tsx b/packages/app/src/pages/useSystemInfo/index.tsx index c126250d1..af20a7e71 100644 --- a/packages/app/src/pages/useSystemInfo/index.tsx +++ b/packages/app/src/pages/useSystemInfo/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback } from 'react'; import { AtRadio } from 'taro-ui'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useSystemInfo } from 'taro-hooks'; import { getSystemInfoSync } from '@tarojs/taro'; diff --git a/packages/app/src/pages/useUpdateManager/index.tsx b/packages/app/src/pages/useUpdateManager/index.tsx index ac369ed8c..49a0d6d0c 100644 --- a/packages/app/src/pages/useUpdateManager/index.tsx +++ b/packages/app/src/pages/useUpdateManager/index.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import { AtMessage, AtNoticebar } from 'taro-ui'; import { View } from '@tarojs/components'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useEnv, useUpdateManager } from 'taro-hooks'; import Taro, { ENV_TYPE } from '@tarojs/taro'; diff --git a/packages/app/src/pages/useVisible/index.tsx b/packages/app/src/pages/useVisible/index.tsx index c4415c6c7..880684536 100644 --- a/packages/app/src/pages/useVisible/index.tsx +++ b/packages/app/src/pages/useVisible/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react'; import { AtNoticebar, AtTimeline } from 'taro-ui'; import { AtTimelineProps } from 'taro-ui/types/timeline'; -import DocPage from '../../components/DocPage'; +import DocPage from '@components/DocPage'; import { useVisible } from 'taro-hooks'; diff --git a/packages/hooks/src/useRequest/index.md b/packages/hooks/src/useRequest/index.md index e77b259b7..5ab77cc57 100644 --- a/packages/hooks/src/useRequest/index.md +++ b/packages/hooks/src/useRequest/index.md @@ -61,6 +61,20 @@ const { data, error, loading, run, params, cancel, refresh, mutate, fetches } = }); ``` +## 代码演示 + +### 默认请求 + + + +### 手动触发 + + + +### 轮询 + + + ## 返回值说明 | 参数 | 说明 | 类型 | diff --git a/tsconfig.json b/tsconfig.json index ac6daf8e8..4128b46ef 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,8 @@ "strict": true, "paths": { "@/*": ["src/*"], - "@@/*": ["src/.umi/*"] + "@@/*": ["src/.umi/*"], + "@components/*": ["packages/app/src/components/*"] }, "allowSyntheticDefaultImports": true, "skipLibCheck": true, diff --git a/typings.d.ts b/typings.d.ts index 607db785c..1e02e1ced 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -3,3 +3,5 @@ declare module '*.less'; declare module 'taro-hooks'; declare module '@tarojs/runtime'; +declare module 'mockjs'; +declare module 'lodash.throttle';