feat(usebase64toarraybuffer): add useBase64ToArrayBuffer hook and demo

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
+    "base-64": "^1.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

packages/app/src/app.config.ts

@@ -4,6 +4,7 @@ export default {
     'pages/useEnv/index',
     'pages/useAPICheck/index',
     'pages/panel/index',
+    'pages/useBase64ToArrayBuffer/index',
   ],
   window: {
     backgroundTextStyle: 'light',

packages/app/src/constant/index.ts

@@ -38,6 +38,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useAPICheck',
       name: 'useAPICheck 判断是否可用',
     },
+    {
+      id: 'useBase64ToArrayBuffer',
+      name: 'useBase64ToArrayBuffer 转换base64',
+    },
   ],
   [APIChildrenName.environment]: [
     {

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

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

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

@@ -0,0 +1,3 @@
+.use-base64-to-array-buffer {
+  word-break: break-all;
+}

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

@@ -0,0 +1,47 @@
+import React, { useCallback, useState } from 'react';
+
+import { useBase64ToArrayBuffer } from 'taro-hooks';
+import { encode } from 'base-64';
+
+import 'taro-ui/dist/style/components/article.scss';
+
+import { View } from '@tarojs/components';
+import { AtInput } from 'taro-ui';
+import DocPage from '../../components/DocPage';
+
+import './index.less';
+
+export default () => {
+  const [base64, setBase64] = useState('');
+  const buffer = useBase64ToArrayBuffer(base64);
+
+  const translateArrayBuffer = useCallback((value) => {
+    const arrayBuffer = encode(value);
+    setBase64(arrayBuffer);
+    console.log(arrayBuffer, useBase64ToArrayBuffer(arrayBuffer));
+  }, []);
+
+  return (
+    <>
+      <DocPage
+        title="useBase64ToArrayBuffer"
+        panelTitle="useBase64ToArrayBuffer"
+      >
+        <AtInput
+          title="待转换文本"
+          type="text"
+          placeholder="此处输入文本会自动转换为base64"
+          onChange={(value) => translateArrayBuffer(value)}
+        />
+        <View className="at-article__p">当前转换值base64为: </View>
+        <View className="at-article__p use-base64-to-array-buffer">
+          {base64}
+        </View>
+        <View className="at-article__p">当前转换值arrayBuffer为: </View>
+        <View className="at-article__p use-base64-to-array-buffer">
+          Uint8Array({buffer && buffer.byteLength})[{buffer.toString()}]
+        </View>
+      </DocPage>
+    </>
+  );
+};

packages/hooks/src/useBase64ToArrayBuffer/index.md

@@ -0,0 +1,40 @@
+---
+title: useBase64ToArrayBuffer
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 基础
+  path: /basic
+---
+
+# useBase64ToArrayBuffer
+
+将 Base64 字符串转成 ArrayBuffer 数据
+
+## 何时使用
+
+需要将 Base64 和 ArrayBuffer 转换时
+
+## API
+
+```jsx | pure
+(base64: string) => ArrayBuffer;
+```
+
+## 参数说明
+
+| 参数   | 说明                                            | 类型     | 默认值 |
+| ------ | ----------------------------------------------- | -------- | ------ |
+| base64 | 必填，要转化成 ArrayBuffer 对象的 Base64 字符串 | `string` | -      |
+
+## 代码演示
+
+<code src="@pages/useBase64ToArrayBuffer" />
+
+## FAQ
+
+### 1. 更多说明
+
+见[小程序相关文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/wx.base64ToArrayBuffer.html)

packages/hooks/src/useBase64ToArrayBuffer/index.ts

@@ -0,0 +1,12 @@
+import { base64ToArrayBuffer } from '@tarojs/taro';
+import { typeOf } from '../utils/tool';
+
+function useBase64ToArrayBuffer(base64: string = ''): ArrayBuffer {
+  if (!typeOf(base64, 'String')) {
+    console.warn('please enter a string to arrayBuffer, default return null');
+    return new ArrayBuffer(64);
+  }
+  return base64ToArrayBuffer(base64);
+}
+
+export default useBase64ToArrayBuffer;

packages/hooks/src/utils/tool.ts

@@ -1 +1,5 @@
 export const noop = () => {};
+
+export const typeOf = (target: any, type: string): boolean => {
+  return Object.prototype.toString.call(target) === `[object ${type}]`;
+};