feat(usenetwork/useonline/usevisible): add useNetworkType useOnline u…

…seVisible hooks

packages/app/src/app.config.ts

@@ -1,14 +1,23 @@
 export default {
   pages: [
+    // layout
     'pages/index/index',
-    'pages/useEnv/index',
-    'pages/useAPICheck/index',
     'pages/panel/index',
+    // env
+    'pages/useEnv/index',
+    // basic
     'pages/useBase64ToArrayBuffer/index',
     'pages/useArrayBufferToBase64/index',
     'pages/useSystemInfo/index',
     'pages/useEvent/index',
+    'pages/useVisible/index',
+    // wechat
+    'pages/useAPICheck/index',
     'pages/useUpdateManager/index',
+    // network
+    'pages/useRequest/index',
+    'pages/useNetworkType/index',
+    'pages/useOnline/index',
   ],
   window: {
     backgroundTextStyle: 'light',

packages/app/src/assets/style/icon.less

@@ -24,3 +24,7 @@
 .iconfont-wechat:before {
   content: '\e609';
 }
+
+.iconfont-network:before {
+  content: '\e64c';
+}

packages/app/src/constant/index.ts

@@ -26,6 +26,12 @@ export const List: APIList = [
     content: '包含管理器、API等',
     icon: 'wechat',
   },
+  {
+    id: 'Network',
+    title: '网络Hooks',
+    content: '包含请求、下载等',
+    icon: 'network',
+  },
 ];
 
 export interface APIChildrenItem {
@@ -37,6 +43,7 @@ export enum APIChildrenName {
   basic = 'basic',
   environment = 'environment',
   wechat = 'wechat',
+  network = 'network',
 }
 
 export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
@@ -57,6 +64,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useSystemInfo',
       name: 'useSystemInfo 系统信息',
     },
+    {
+      id: 'useVisible',
+      name: 'useVisible 页面状态',
+    },
   ],
   [APIChildrenName.environment]: [
     {
@@ -74,4 +85,18 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       name: 'useUpdateManager 更新',
     },
   ],
+  [APIChildrenName.network]: [
+    {
+      id: 'useRequest',
+      name: 'useRequest 请求',
+    },
+    {
+      id: 'useNetworkType',
+      name: 'useNetworkType 网络类型',
+    },
+    {
+      id: 'useOnline',
+      name: 'useOnline 网络状态',
+    },
+  ],
 };

packages/app/src/pages/useNetworkType/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useNetworkType',
+};

packages/app/src/pages/useNetworkType/index.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect } from 'react';
+import { AtMessage, AtRadio, AtNoticebar } from 'taro-ui';
+import DocPage from '../../components/DocPage';
+
+import { useNetworkType } from 'taro-hooks';
+import Taro from '@tarojs/taro';
+
+import 'taro-ui/dist/style/components/icon.scss';
+
+const networkGroup = ['wifi', '2g', '3g', '4g', '5g', 'unknown', 'none'];
+
+export default () => {
+  const networkType = useNetworkType();
+
+  const computedNetworkOption = useCallback(() => {
+    return networkGroup.map((type) => ({
+      label: type,
+      value: type,
+      desc: '网络类型: ' + type,
+      disabled: type !== networkType,
+    }));
+  }, [networkType]);
+
+  const handleRadioClick = useCallback((type) => {
+    Taro.atMessage({
+      message: '当前网络类型为: ' + type,
+      type: 'info',
+    });
+  }, []);
+
+  useEffect(() => {
+    if (networkType) handleRadioClick(networkType);
+  }, [handleRadioClick, networkType]);
+
+  return (
+    <>
+      <AtNoticebar marquee>
+        当前hook自动监听网络类型变化。可尝试更改设备网络类型测试。
+      </AtNoticebar>
+      <AtMessage />
+      <DocPage title="useNetworkType 网络类型" panelTitle="useNetworkType">
+        <AtRadio
+          options={computedNetworkOption()}
+          value={networkType}
+          onClick={(value) => handleRadioClick(value)}
+        />
+      </DocPage>
+    </>
+  );
+};

packages/app/src/pages/useOnline/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useOnline',
+};

packages/app/src/pages/useOnline/index.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback, useEffect } from 'react';
+import { AtMessage, AtSwitch, AtNoticebar } from 'taro-ui';
+import DocPage from '../../components/DocPage';
+
+import { useOnline } from 'taro-hooks';
+import Taro from '@tarojs/taro';
+
+import 'taro-ui/dist/style/components/icon.scss';
+
+export default () => {
+  const online = useOnline();
+
+  const handleOnlineStatusChange = useCallback((status) => {
+    Taro.atMessage({
+      message: '当前网络状态为: ' + (status ? '开启' : '关闭'),
+      type: 'info',
+    });
+  }, []);
+
+  useEffect(() => {
+    if (typeof online === 'boolean') handleOnlineStatusChange(online);
+  }, [online, handleOnlineStatusChange]);
+
+  return (
+    <>
+      <AtNoticebar marquee>
+        当前hook自动监听网络状态变化。可尝试更改设备网络状态测试。
+      </AtNoticebar>
+      <AtMessage />
+      <DocPage title="useOnline 网络状态" panelTitle="useOnline">
+        <AtSwitch title="当前网络状态" checked={online} disabled />
+      </DocPage>
+    </>
+  );
+};

packages/app/src/pages/useRequest/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest',
+};

packages/app/src/pages/useRequest/index.tsx

@@ -0,0 +1,44 @@
+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 'taro-ui/dist/style/components/icon.scss';
+
+export default () => {
+  const onCheckForUpdate = useCallback((res) => {
+    Taro.atMessage({
+      message: res.hasUpdate ? '有新版本' : '无新版本',
+    });
+  }, []);
+
+  const onUpdateReady = useCallback(() => {
+    Taro.atMessage({
+      message: '检查更新成功',
+    });
+  }, []);
+
+  const onUpdateFailed = useCallback(() => {
+    Taro.atMessage({
+      message: '检查更新失败',
+    });
+  }, []);
+
+  const updateManager = useUpdateManager({
+    onCheckForUpdate,
+    onUpdateReady,
+    onUpdateFailed,
+  });
+
+  return (
+    <>
+      <AtMessage />
+      <DocPage title="useRequest 请求" panelTitle="useRequest">
+        <View>检查更新中....</View>
+      </DocPage>
+    </>
+  );
+};

packages/app/src/pages/useVisible/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useVisible',
+};

packages/app/src/pages/useVisible/index.tsx

@@ -0,0 +1,37 @@
+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 { useVisible } from 'taro-hooks';
+
+import 'taro-ui/dist/style/components/icon.scss';
+
+export default () => {
+  const visible = useVisible();
+  const [statusStack, setStatusStack] = useState<AtTimelineProps['items']>([]);
+
+  useEffect(() => {
+    setStatusStack((prevStack) => [
+      ...prevStack,
+      {
+        title: visible ? '页面显示' : '页面隐藏',
+        content: ['时间: ' + Date.now()],
+        color: visible ? 'green' : 'red',
+        icon: visible ? 'clock' : 'blocked',
+      },
+    ]);
+  }, [visible]);
+
+  return (
+    <>
+      <AtNoticebar marquee>
+        当前hook自动监听页面状态变化。可尝试打开小程序设置或切换后台测试。
+      </AtNoticebar>
+      <DocPage title="useVisible 页面状态" panelTitle="useVisible">
+        <AtTimeline items={statusStack} />
+      </DocPage>
+    </>
+  );
+};

packages/hooks/package.json

@@ -7,7 +7,11 @@
     "hooks",
     "taro",
     "react",
-    "javascript"
+    "javascript",
+    "lerna",
+    "monorepo",
+    "wechat",
+    "miniprograme"
   ],
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -21,7 +25,7 @@
     "registry": "https://registry.npmjs.com/"
   },
   "repository": "https://github.com/innocces/taro-hooks",
-  "homepage": "https://github.com/innocces/taro-hooks",
+  "homepage": "https://innocces.github.io/taro-hooks/",
   "scripts": {},
   "files": [
     "dist",

packages/hooks/src/index.ts

@@ -1,13 +1,30 @@
+// env
 import useEnv from './useEnv';
-import useAPICheck from './useAPICheck';
+
+// basic
 import useBase64ToArrayBuffer from './useBase64ToArrayBuffer';
 import useArrayBufferToBase64 from './useArrayBufferToBase64';
 import useSystemInfo from './useSystemInfo';
+import useEvent from './useEvent';
+
+// wechat
+import useAPICheck from './useAPICheck';
+import useUpdateManager from './useUpdateManager';
+
+// network
+import useNetworkType from './useNetworkType';
+import useOnline from './useOnline';
+import useRequest from './useRequest';
 
 export {
   useEnv,
-  useAPICheck,
   useBase64ToArrayBuffer,
   useArrayBufferToBase64,
   useSystemInfo,
+  useEvent,
+  useAPICheck,
+  useUpdateManager,
+  useNetworkType,
+  useOnline,
+  useRequest,
 };

packages/hooks/src/useNetworkType/index.md

@@ -0,0 +1,54 @@
+---
+title: useNetworkType
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 网络
+  path: /network
+---
+
+<Alert>由于获取网络信息为异步, 故初始值为<code>undefined</code>。若业务中可做初始判空处理。 此外改 hook 会自动监听当前环境 networkType</Alert>
+
+# useNetworkType
+
+获取网络类型
+
+## 何时使用
+
+当需要根据当前网络类型做判断时
+
+## API
+
+```jsx | pure
+const networkType: NetworkType = useNetworkType();
+```
+
+## 返回值说明
+
+| 返回值      | 说明         | 类型          |
+| ----------- | ------------ | ------------- |
+| networkType | 当前网络类型 | `NetworkType` |
+
+### NetworkType
+
+| 类型    | 值      |
+| ------- | ------- |
+| wifi    | wifi    |
+| 2g      | 2g      |
+| 3g      | 3g      |
+| 4g      | 4g      |
+| 5g      | 5g      |
+| unknown | unknown |
+| none    | none    |
+
+## 代码演示
+
+<code src="@pages/useNetworkType" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     | ✔️  |     ✔️      |