feat(usevibrate): add useVibrate hook

innocces · Jul 22, 2021 · 512d159 · 512d159
1 parent 08596d3
commit 512d159
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 0 deletions.
diff --git a/packages/app/src/app.config.ts b/packages/app/src/app.config.ts
@@ -57,6 +57,7 @@ export default {
     'pages/useOnline/index',
     // device
     'pages/useBattery/index',
+    'pages/useVibrate/index',
   ],
   window: {
     backgroundTextStyle: 'light',

diff --git a/packages/app/src/constant/index.ts b/packages/app/src/constant/index.ts
@@ -179,6 +179,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useBattery',
       name: 'useBattery 电量',
     },
+    {
+      id: 'useVibrate',
+      name: 'useVibrate 震动反馈',
+    },
   ],
   [APIChildrenName.network]: [
     {

diff --git a/packages/app/src/pages/useVibrate/index.config.ts b/packages/app/src/pages/useVibrate/index.config.ts
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useVibrate',
+};
diff --git a/packages/app/src/pages/useVibrate/index.tsx b/packages/app/src/pages/useVibrate/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { AtButton } from 'taro-ui';
+import DocPage from '@components/DocPage';
+
+import { useVibrate } from 'taro-hooks';
+
+export default () => {
+  const [vibrateAction] = useVibrate();
+  const [vibrateIntervalAction, stopVibrateAction] = useVibrate(true);
+
+  return (
+    <DocPage title="useVibrate 震动反馈" panelTitle="useVibrate">
+      <AtButton onClick={() => vibrateAction()}>短震动触感按钮</AtButton>
+      <AtButton className="gap" onClick={() => vibrateAction(true)}>
+        长震动触感按钮
+      </AtButton>
+      <AtButton onClick={() => vibrateIntervalAction()}>
+        持续短震动触感按钮
+      </AtButton>
+      <AtButton
+        className="gap"
+        onClick={() => {
+          stopVibrateAction();
+          vibrateIntervalAction(true);
+        }}
+      >
+        持续长震动触感按钮
+      </AtButton>
+      <AtButton onClick={() => stopVibrateAction()}>关闭持续震动</AtButton>
+    </DocPage>
+  );
+};
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
@@ -32,6 +32,7 @@ import useRequest from './useRequest';
 
 // device
 import useBattery from './useBattery';
+import useVibrate from './useVibrate';
 
 export {
   useEnv,
@@ -57,4 +58,5 @@ export {
   useNavigationBar,
   useStorage,
   useBattery,
+  useVibrate,
 };
diff --git a/packages/hooks/src/useVibrate/index.md b/packages/hooks/src/useVibrate/index.md
@@ -0,0 +1,48 @@
+---
+title: useVibrate
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 设备
+  path: /device
+---
+
+# useVibrate
+
+提供震动反馈
+
+## 何时使用
+
+当需要操作或者使用震动时
+
+## API
+
+```jsx | pure
+const [vibrateAction, stopVibrateAction] = useVibrate(interval?: boolean, gap?: number);
+```
+
+## 参数说明
+
+| 参数     | 说明         | 类型      | 默认值 |
+| -------- | ------------ | --------- | ------ |
+| interval | 是否持续震动 | `boolean` | -      |
+| gap      | 持续震动间隔 | `number`  | 200    |
+
+## 返回值说明
+
+| 返回值            | 说明                             | 类型                                                  |
+| ----------------- | -------------------------------- | ----------------------------------------------------- |
+| vibrateAction     | 操作函数, 可根据参数执行长短震动 | `(long?: boolean) => Promise<General.CallbackResult>` |
+| stopVibrateAction | 若为持续震动可取消震动           | `(long?: boolean) => Promise<General.CallbackResult>` |
+
+## 代码演示
+
+<code src="@pages/useVibrate" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     | ✔️  |     ✔️      |
diff --git a/packages/hooks/src/useVibrate/index.ts b/packages/hooks/src/useVibrate/index.ts
@@ -0,0 +1,49 @@
+import { General, vibrateLong, vibrateShort } from '@tarojs/taro';
+import { useCallback, useRef } from 'react';
+
+export type VibrateAction = (
+  long?: boolean,
+) => Promise<General.CallbackResult | undefined>;
+
+export type StopVibrateAction = () => void;
+
+const SHORTINTERVAL = 15;
+const LONGINTERVAL = 400;
+const DEFAULTGAP = 200;
+
+function useVibrate(
+  interval?: boolean,
+  gap?: number,
+): [VibrateAction, StopVibrateAction] {
+  const timer = useRef<NodeJS.Timeout>();
+  const vibrateAction = useCallback<VibrateAction>((long) => {
+    return new Promise((resolve, reject) => {
+      try {
+        const vibrateMethod = long ? vibrateLong : vibrateShort;
+        vibrateMethod({
+          success: (res) => {
+            const computedGap =
+              (gap || DEFAULTGAP) + (long ? LONGINTERVAL : SHORTINTERVAL);
+            if (interval) {
+              timer.current = setTimeout(() => {
+                vibrateAction(long);
+              }, computedGap);
+            }
+            resolve(res);
+          },
+          fail: reject,
+        }).catch(reject);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }, []);
+
+  const stopVibrateAction = useCallback(() => {
+    timer.current && clearTimeout(timer.current);
+  }, [timer]);
+
+  return [vibrateAction, stopVibrateAction];
+}
+
+export default useVibrate;