feat(usebrightness): add useBrightness hook

innocces · Jul 24, 2021 · 3c8a6b6 · 3c8a6b6
1 parent 512d159
commit 3c8a6b6
Show file tree

Hide file tree

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

diff --git a/packages/app/src/constant/index.ts b/packages/app/src/constant/index.ts
@@ -183,6 +183,14 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useVibrate',
       name: 'useVibrate 震动反馈',
     },
+    {
+      id: 'useScreen',
+      name: 'useScreen 屏幕相关',
+    },
+    {
+      id: 'useBrightness',
+      name: 'useBrightness 屏幕亮度',
+    },
   ],
   [APIChildrenName.network]: [
     {

diff --git a/packages/app/src/pages/useBrightness/index.config.ts b/packages/app/src/pages/useBrightness/index.config.ts
@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: 'useBrightness',
+  pageOrientation: 'auto',
+};
diff --git a/packages/app/src/pages/useBrightness/index.tsx b/packages/app/src/pages/useBrightness/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { AtProgress, AtSlider } from 'taro-ui';
+import DocPage from '@components/DocPage';
+import { View } from '@tarojs/components';
+
+import { useBrightness } from 'taro-hooks';
+
+export default () => {
+  const [brightness, setBrightness] = useBrightness(true);
+  return (
+    <DocPage title="useBrightness 屏幕亮度" panelTitle="useBrightness">
+      <View className="at-article__h3">当前亮度</View>
+      <AtProgress percent={brightness * 100} />
+      <View className="at-article__h3">设置亮度</View>
+      <AtSlider
+        min={0}
+        max={1}
+        step={0.1}
+        value={brightness}
+        onChange={(value) => setBrightness(value.toFixed(1))}
+      ></AtSlider>
+    </DocPage>
+  );
+};
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
@@ -33,6 +33,8 @@ import useRequest from './useRequest';
 // device
 import useBattery from './useBattery';
 import useVibrate from './useVibrate';
+import useScreen from './useScreen';
+import useBrightness from './useBrightness';
 
 export {
   useEnv,
@@ -59,4 +61,6 @@ export {
   useStorage,
   useBattery,
   useVibrate,
+  useScreen,
+  useBrightness,
 };
diff --git a/packages/hooks/src/useBrightness/index.md b/packages/hooks/src/useBrightness/index.md
@@ -0,0 +1,47 @@
+---
+title: useBrightness
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 设备
+  path: /device
+---
+
+# useBrightness
+
+屏幕亮度
+
+## 何时使用
+
+当需要获取或设置屏幕亮度
+
+## API
+
+```jsx | pure
+const [brightness, setBrightness] = useBrightness(keepon?: boolean);
+```
+
+## 参数说明
+
+| 参数   | 说明     | 类型      | 默认值 |
+| ------ | -------- | --------- | ------ |
+| keepon | 是否常亮 | `boolean` | -      |
+
+## 返回值说明
+
+| 返回值        | 说明                                   | 类型                                         |
+| ------------- | -------------------------------------- | -------------------------------------------- |
+| brightness    | 屏幕亮度值，范围 0 ~ 1，0 最暗，1 最亮 | `number`                                     |
+| setBrightness | 设置屏幕亮度值(0~1)                    | `(value) => Promise<General.CallbackResult>` |
+
+## 代码演示
+
+<code src="@pages/useBrightness" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     |     |     ✔️      |
diff --git a/packages/hooks/src/useBrightness/index.ts b/packages/hooks/src/useBrightness/index.ts
@@ -0,0 +1,60 @@
+import {
+  ENV_TYPE,
+  General,
+  getScreenBrightness,
+  setScreenBrightness,
+  setKeepScreenOn,
+} from '@tarojs/taro';
+import { useCallback, useEffect, useState } from 'react';
+import { useEnv } from '..';
+
+export type IAction = (value: number) => Promise<General.CallbackResult>;
+
+function useBrightness(keepon?: boolean): [number, IAction] {
+  const [brightness, setBrightness] = useState<number>(0);
+  const env = useEnv();
+
+  useEffect(() => {
+    if (env) {
+      getBrightness();
+    }
+  }, [env]);
+
+  const getBrightness = useCallback(async () => {
+    if (env !== ENV_TYPE.WEB) {
+      const { value: brightness } = await getScreenBrightness();
+      setBrightness(brightness);
+      keepon && setKeepScreenOn({ keepScreenOn: keepon });
+    }
+  }, [env, keepon]);
+
+  const setBrightnessAsync = useCallback<IAction>(
+    (value) => {
+      return new Promise((resolve, reject) => {
+        try {
+          if (env === ENV_TYPE.WEB) {
+            reject('please use hook in weapp or app');
+          } else if (value < 0 || value > 1) {
+            reject('please input a valid number');
+          } else {
+            setScreenBrightness({
+              value,
+              success: (res) => {
+                resolve(res);
+                setBrightness(value);
+              },
+              fail: reject,
+            }).catch(reject);
+          }
+        } catch (e) {
+          reject(e);
+        }
+      });
+    },
+    [env],
+  );
+
+  return [brightness, setBrightnessAsync];
+}
+
+export default useBrightness;
diff --git a/packages/hooks/src/utils/tool.ts b/packages/hooks/src/utils/tool.ts
@@ -1,5 +1,7 @@
 export const noop = () => {};
 
+export const promiseNoop = () => Promise.resolve();
+
 export const typeOf = (target: any, type: string | string[]): boolean => {
   return [type]
     .flat()