feat(useclipboard & useroute): add useClipboardData and useRouter, ad…

…d tabbar about

packages/app/src/app.config.ts

@@ -2,12 +2,16 @@ export default {
   pages: [
     // layout
     'pages/index/index',
+    'pages/about/index',
     'pages/panel/index',
     // env
     'pages/useEnv/index',
     // basic
+    'pages/useRouter/index',
+    'pages/usePromise/index',
     'pages/useBase64ToArrayBuffer/index',
     'pages/useArrayBufferToBase64/index',
+    'pages/useClipboardData/index',
     'pages/useSystemInfo/index',
     'pages/useEvent/index',
     'pages/useVisible/index',
@@ -52,4 +56,23 @@ export default {
     navigationBarTitleText: 'Taro hooks',
     navigationBarTextStyle: 'black',
   },
+  tabBar: {
+    color: '#6a6a77',
+    selectedColor: '#78a4fa',
+    borderStyle: 'white',
+    list: [
+      {
+        pagePath: 'pages/index/index',
+        text: '首页',
+        iconPath: './assets/icon/index.png',
+        selectedIconPath: './assets/icon/index-select.png',
+      },
+      {
+        pagePath: 'pages/about/index',
+        text: '关于',
+        iconPath: './assets/icon/about.png',
+        selectedIconPath: './assets/icon/about-select.png',
+      },
+    ],
+  },
 };

packages/app/src/constant/index.ts

@@ -52,6 +52,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useEvent',
       name: 'useEvent 事件中心',
     },
+    {
+      id: 'useRouter',
+      name: 'useRouter 路由',
+    },
     {
       id: 'useBase64ToArrayBuffer',
       name: 'useBase64ToArrayBuffer 转换base64',
@@ -60,6 +64,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useArrayBufferToBase64',
       name: 'useArrayBufferToBase64 转换ArrayBuffer',
     },
+    {
+      id: 'useClipboardData',
+      name: 'useClipboardData 剪贴板',
+    },
     {
       id: 'useSystemInfo',
       name: 'useSystemInfo 系统信息',
@@ -72,6 +80,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useSelectorQuery',
       name: 'useSelectorQuery 节点查询',
     },
+    {
+      id: 'usePromise',
+      name: 'usePromise 异步',
+    },
   ],
   [APIChildrenName.environment]: [
     {

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

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: 'Taro-hooks',
+  enableShareAppMessage: true,
+};

packages/app/src/pages/about/index.less

@@ -0,0 +1,6 @@
+.start-button {
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  z-index: 1100;
+}

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

@@ -0,0 +1,54 @@
+import React, { useCallback, useState } from 'react';
+import { AtIcon, AtToast, AtFab } from 'taro-ui';
+import { Image, View } from '@tarojs/components';
+
+import { useClipboardData } from 'taro-hooks';
+
+import 'taro-ui/dist/style/components/article.scss';
+import './index.less';
+import '../index/index.less';
+
+import logoImg from '../../../../../public/image/hook.png';
+
+const git = 'https://github.com/innocces/taro-hooks';
+
+const Index = () => {
+  const [visible, changeVisible] = useState(false);
+  const [clipboardData, { set }] = useClipboardData();
+
+  const handleStart = useCallback(() => {
+    set(git).then(() => {
+      changeVisible(true);
+    });
+  }, [set]);
+
+  return (
+    <View className="page page-index">
+      <AtToast
+        isOpened={visible}
+        text="复制成功, 请打开浏览器进行访问"
+        hasMask
+        icon="heart"
+        onClose={() => changeVisible(false)}
+      />
+      <View className="logo">
+        <Image src={logoImg} className="img" mode="widthFix" />
+      </View>
+      <View className="at-article">
+        <View className="at-article__h2" style={{ marginBottom: '20rpx' }}>
+          简介
+        </View>
+        <View className="at-article__info">作者: 阿酱</View>
+        <View className="at-article__p">为Taro而设计的Hooks Library</View>
+        <View className="at-article__p">
+          请点击下方按钮前往github给予一枚星星✨
+        </View>
+      </View>
+      <AtFab className="start-button" onClick={handleStart}>
+        <AtIcon value="star-2" />
+      </AtFab>
+    </View>
+  );
+};
+
+export default Index;

packages/app/src/pages/index/index.less

@@ -4,6 +4,8 @@
 .page-index {
   padding-top: 60px;
   padding-bottom: 100px;
+  min-height: 100vh;
+  box-sizing: border-box;
 
   .logo {
     margin: 0 auto;

packages/app/src/pages/panel/index.less

@@ -10,6 +10,7 @@
   align-items: center;
   padding: 60px;
   height: 180px;
+  box-sizing: border-box;
 
   &__icon {
     display: flex;

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

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

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

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import { View } from '@tarojs/components';
+import { AtButton } from 'taro-ui';
+import DocPage from '@components/DocPage';
+
+import { useClipboardData } from 'taro-hooks';
+import { showModal } from '@tarojs/taro';
+
+export default () => {
+  const [clipboardData, { set, get }] = useClipboardData();
+
+  const getClipboardData = useCallback(() => {
+    get().then((data: any) => {
+      showModal({ content: data, title: '当前剪贴板内容' });
+    });
+  }, [get]);
+
+  return (
+    <>
+      <DocPage title="useClipboardData 剪贴板" panelTitle="useClipboardData">
+        <View>当前剪贴板内容: {clipboardData}</View>
+        <AtButton
+          customStyle={{ margin: '10px 0' }}
+          onClick={() => set('taro hooks nice!')}
+        >
+          设置剪贴板
+        </AtButton>
+        <AtButton onClick={getClipboardData}>获取剪贴板</AtButton>
+      </DocPage>
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { View } from '@tarojs/components';
+import DocPage from '@components/DocPage';
+
+import { usePromise } from 'taro-hooks';
+import Taro, { General } from '@tarojs/taro';
+
+export default () => {
+  const makePhoneCallPromise = usePromise(
+    { phoneNumber: '132111' },
+    'makePhoneCall',
+  );
+
+  useEffect(() => {
+    makePhoneCallPromise
+      .then((res: General.CallbackResult) => {
+        Taro.showModal({
+          content: '拨号成功',
+        });
+      })
+      .catch((e: any) => {
+        Taro.showModal({
+          content: e.errMsg,
+        });
+      })
+      .finally((res: General.CallbackResult) => {
+        console.log(res);
+      });
+  }, [makePhoneCallPromise]);
+
+  return (
+    <>
+      <DocPage title="usePromise 异步" panelTitle="usePromise">
+        <View>请观察是否吊起通话</View>
+      </DocPage>
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { AtButton, AtNoticebar, AtCard } from 'taro-ui';
+import DocPage from '@components/DocPage';
+import { View } from '@tarojs/components';
+
+import { useRouter, useEnv } from 'taro-hooks';
+import { getSystemInfoSync, ENV_TYPE } from '@tarojs/taro';
+
+export default () => {
+  const env = useEnv();
+  const [
+    routeInfo,
+    { switchTab, relaunch, redirectTo, navigateTo, navigateBack },
+  ] = useRouter();
+
+  return (
+    <>
+      <AtNoticebar marquee>
+        由于文档无路由输出。故移步小程序体验或下载包进行体验。
+      </AtNoticebar>
+      <DocPage title="useRouter 路由" panelTitle="useRouter">
+        <AtButton
+          disabled={env === ENV_TYPE.WEB}
+          onClick={() => switchTab('/pages/about/index')}
+        >
+          跳转TabBar
+        </AtButton>
+        <AtButton
+          disabled={env === ENV_TYPE.WEB}
+          onClick={() => relaunch('/pages/useRequest/index')}
+        >
+          重新打开一个页面
+        </AtButton>
+        <AtButton
+          disabled={env === ENV_TYPE.WEB}
+          onClick={() => redirectTo('/pages/useOnline/index')}
+        >
+          重定向页面
+        </AtButton>
+        <AtButton
+          disabled={env === ENV_TYPE.WEB}
+          onClick={() =>
+            navigateTo('/pages/useLaunchOptions/index', { from: 'useRoute' })
+          }
+        >
+          跳转页面
+        </AtButton>
+        <AtButton
+          disabled={env === ENV_TYPE.WEB}
+          onClick={() => navigateBack()}
+        >
+          返回上一页
+        </AtButton>
+        {env !== ENV_TYPE.WEB && (
+          <View>
+            routeInfo:
+            <View style={{ wordBreak: 'break-all' }}>
+              {JSON.stringify(routeInfo)}
+            </View>
+          </View>
+        )}
+      </DocPage>
+    </>
+  );
+};

packages/hooks/package.json

@@ -36,10 +36,11 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
+    "@tarojs/taro": "3.2.15",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "@tarojs/taro": "3.2.15",
-		"react": "^17.0.2"
+    "querystring": "^0.2.1",
+    "react": "^17.0.2"
   },
   "peerDependencies": {
     "@tarojs/taro": ">= 3.x",

packages/hooks/src/index.ts

@@ -2,8 +2,12 @@
 import useEnv from './useEnv';
 
 // basic
+import useLaunchOptions from './useLaunchOptions';
+import useRouter from './useRouter';
+import usePromise from './usePromise';
 import useBase64ToArrayBuffer from './useBase64ToArrayBuffer';
 import useArrayBufferToBase64 from './useArrayBufferToBase64';
+import useClipboardData from './useClipboardData';
 import useSystemInfo from './useSystemInfo';
 import useEvent from './useEvent';
 import useVisible from './useVisible';
@@ -20,8 +24,12 @@ import useRequest from './useRequest';
 
 export {
   useEnv,
+  useLaunchOptions,
+  useRouter,
+  usePromise,
   useBase64ToArrayBuffer,
   useArrayBufferToBase64,
+  useClipboardData,
   useSystemInfo,
   useEvent,
   useVisible,