feat(feedback): add feedback hooks: useModal useToast useLoading useActionSheet

Author: innocces

packages/app/src/app.config.ts

@@ -21,6 +21,11 @@ export default {
     'pages/useSelectorQuery/getNode/index',
     'pages/useSelectorQuery/getContext/index',
     'pages/useSelectorQuery/getScrollOffset/index',
+    // feedback
+    'pages/useToast/index',
+    'pages/useModal/index',
+    'pages/useLoading/index',
+    'pages/useActionSheet/index',
     // wechat
     'pages/useAPICheck/index',
     'pages/useUpdateManager/index',

packages/app/src/assets/font/iconfont.ttf

@@ -28,3 +28,7 @@
 .iconfont-network:before {
   content: '\e64c';
 }
+
+.iconfont-feedback:before {
+  content: '\e7b5';
+}

packages/app/src/assets/font/iconfont.woff

@@ -13,3 +13,7 @@
   left: auto;
   right: auto;
 }
+
+.gap {
+  margin: 10px 0;
+}

packages/app/src/assets/font/iconfont.woff2

@@ -14,6 +14,12 @@ export const List: APIList = [
     content: '包含事件、调试等',
     icon: 'basic',
   },
+  {
+    id: 'Feedback',
+    title: '操作反馈Hooks',
+    content: '包含Toast, Modal等',
+    icon: 'feedback',
+  },
   {
     id: 'Environment',
     title: '环境Hooks',
@@ -44,6 +50,7 @@ export enum APIChildrenName {
   environment = 'environment',
   wechat = 'wechat',
   network = 'network',
+  feedback = 'feedback',
 }
 
 export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
@@ -85,6 +92,24 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       name: 'usePromise 异步',
     },
   ],
+  [APIChildrenName.feedback]: [
+    {
+      id: 'useToast',
+      name: 'useToast 消息提示框',
+    },
+    {
+      id: 'useModal',
+      name: 'useModal 模态对话框',
+    },
+    {
+      id: 'useLoading',
+      name: 'useLoading 加载提示框',
+    },
+    {
+      id: 'useActionSheet',
+      name: 'useActionSheet 操作菜单',
+    },
+  ],
   [APIChildrenName.environment]: [
     {
       id: 'useEnv',

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

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

packages/app/src/components/DocPage/index.less

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { AtButton } from 'taro-ui';
+import DocPage from '@components/DocPage';
+
+import { useActionSheet, useToast } from 'taro-hooks';
+import { showActionSheet } from '@tarojs/taro';
+
+export default () => {
+  const [showToast] = useToast({ mask: true });
+
+  const onActionItemTap = useCallback(
+    (tapIndex, tapItem) => {
+      showToast({
+        title: tapIndex + ': ' + tapItem,
+      });
+    },
+    [showToast],
+  );
+
+  const [show] = useActionSheet({
+    itemList: ['A', 'B', 'C'],
+    onActionItemTap,
+  });
+
+  const showCustomActionSheet = useCallback(() => {
+    show({
+      itemColor: '#C5D9E8',
+      itemList: ['taro', 'hooks', 'taro-hooks'],
+    }).then((res: showActionSheet.SuccessCallbackResult) => {
+      showToast({
+        title: String(res.tapIndex),
+      });
+    });
+  }, [show, showToast]);
+
+  return (
+    <>
+      <DocPage title="useActionSheet 操作菜单" panelTitle="useActionSheet">
+        <AtButton onClick={show}>展示带初始配置ActionSheet</AtButton>
+        <AtButton className="gap" onClick={showCustomActionSheet}>
+          展示新配置ActionSheet
+        </AtButton>
+      </DocPage>
+    </>
+  );
+};

packages/app/src/constant/index.ts

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

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

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { AtButton } from 'taro-ui';
+import DocPage from '@components/DocPage';
+
+import { useLoading } from 'taro-hooks';
+
+export default () => {
+  const [show, hide] = useLoading({
+    mask: false,
+    title: 'initial title',
+  });
+
+  const showCustomLoading = useCallback(() => {
+    show({
+      title: '点击隐藏按钮进行隐藏',
+    });
+  }, [show]);
+
+  return (
+    <>
+      <DocPage title="useLoading 加载提示框" panelTitle="useLoading">
+        <AtButton onClick={show}>展示带初始配置Loading</AtButton>
+        <AtButton className="gap" onClick={showCustomLoading}>
+          展示新配置Loading
+        </AtButton>
+        <AtButton onClick={hide}>隐藏Loading</AtButton>
+      </DocPage>
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { AtButton } from 'taro-ui';
+import DocPage from '@components/DocPage';
+
+import { useModal } from 'taro-hooks';
+
+export default () => {
+  const [show] = useModal({
+    title: 'initial title',
+    content: 'initial content',
+  });
+
+  const showCustomModal = useCallback(() => {
+    show({
+      title: 'taro hooks',
+      content: 'taro hooks 还不戳！',
+      showCancel: false,
+      confirmText: '确实！',
+      confirmColor: '#4569d4',
+    });
+  }, [show]);
+
+  return (
+    <>
+      <DocPage title="useModal 模态对话框" panelTitle="useModal">
+        <AtButton onClick={show}>展示带初始配置Modal</AtButton>
+        <AtButton className="gap" onClick={showCustomModal}>
+          展示新配置Modal
+        </AtButton>
+      </DocPage>
+    </>
+  );
+};

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

@@ -26,6 +26,7 @@ export default () => {
           跳转TabBar
         </AtButton>
         <AtButton
+          className="gap"
           disabled={env === ENV_TYPE.WEB}
           onClick={() => relaunch('/pages/useRequest/index')}
         >
@@ -38,6 +39,7 @@ export default () => {
           重定向页面
         </AtButton>
         <AtButton
+          className="gap"
           disabled={env === ENV_TYPE.WEB}
           onClick={() =>
             navigateTo('/pages/useLaunchOptions/index', { from: 'useRoute' })

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

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

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

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { AtButton } from 'taro-ui';
+import DocPage from '@components/DocPage';
+
+import { useToast } from 'taro-hooks';
+import image from '../../assets/icon/about-select.png';
+
+export default () => {
+  const [show, hide] = useToast({
+    mask: true,
+    duration: 1000,
+    title: 'initial title',
+    icon: 'success',
+  });
+
+  const showCustomToast = useCallback(() => {
+    show({
+      title: '点击隐藏按钮进行隐藏',
+      image,
+      duration: 3000000,
+      mask: false,
+    });
+  }, [show]);
+
+  return (
+    <>
+      <DocPage title="useToast 消息提示框" panelTitle="useToast">
+        <AtButton onClick={show}>展示带初始配置Toast</AtButton>
+        <AtButton className="gap" onClick={showCustomToast}>
+          展示新配置Toast
+        </AtButton>
+        <AtButton onClick={hide}>隐藏新配置Toast</AtButton>
+      </DocPage>
+    </>
+  );
+};

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

@@ -13,6 +13,12 @@ import useEvent from './useEvent';
 import useVisible from './useVisible';
 import useSelectorQuery from './useSelectorQuery';
 
+// feedback
+import useToast from './useToast';
+import useModal from './useModal';
+import useLoading from './useLoading';
+import useActionSheet from './useActionSheet';
+
 // wechat
 import useAPICheck from './useAPICheck';
 import useUpdateManager from './useUpdateManager';
@@ -39,4 +45,8 @@ export {
   useNetworkType,
   useOnline,
   useRequest,
+  useToast,
+  useModal,
+  useLoading,
+  useActionSheet,
 };

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

@@ -0,0 +1,46 @@
+---
+title: useActionSheet
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 操作反馈
+  path: /feedback
+---
+
+# useActionSheet
+
+显示操作菜单
+
+## 何时使用
+
+当需要使用操作菜单
+
+## API
+
+```jsx | pure
+const [show] = useActionSheet(initialOption);
+```
+
+## 参数说明
+
+| 参数          | 说明                                     | 类型                 | 默认值 |
+| ------------- | ---------------------------------------- | -------------------- | ------ |
+| initialOption | 初始操作菜单(若指定后面可与新的配置合并) | `General.IAnyObject` | -      |
+
+## 返回值说明
+
+| 返回值 | 说明         | 类型                                             |
+| ------ | ------------ | ------------------------------------------------ |
+| show   | 显示操作菜单 | `(options?: General.IAnyObject) => Promise<any>` |
+
+## 代码演示
+
+<code src="@pages/useActionSheet" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     | ✔️  |     ✔️      |

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

@@ -0,0 +1,65 @@
+import { showActionSheet, General } from '@tarojs/taro';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface ActionSheetOption {
+  itemList: string[];
+  itemColor?: string;
+  onActionItemTap?: onActionItemTap;
+}
+
+export type ShowActionSheet = (
+  option?: ActionSheetOption,
+) => Promise<General.CallbackResult>;
+
+export type onActionItemTap = (
+  tapIndex: number,
+  tapItem: string | undefined,
+) => any;
+
+function useActionSheet(option?: ActionSheetOption): [ShowActionSheet] {
+  const initialOption = useRef<ActionSheetOption>();
+
+  useEffect(() => {
+    initialOption.current = option;
+  }, [option]);
+
+  const showActionSheetAsync = useCallback<ShowActionSheet>(
+    (option?: ActionSheetOption) => {
+      return new Promise((resolve, reject) => {
+        try {
+          if (!option && !initialOption.current) {
+            console.warn('please provide a option');
+            return reject(new Error('please provide a option'));
+          } else {
+            const { onActionItemTap, ...options } = Object.assign(
+              {},
+              initialOption.current || {},
+              option || {},
+            ) as ActionSheetOption;
+            showActionSheet({
+              ...options,
+              success: (res) => {
+                if (onActionItemTap) {
+                  const tapIndex = res.tapIndex;
+                  onActionItemTap(
+                    tapIndex,
+                    options.itemList.find((v, i) => i === tapIndex),
+                  );
+                }
+                resolve(res);
+              },
+              fail: reject,
+            }).catch(reject);
+          }
+        } catch (e) {
+          reject(e);
+        }
+      });
+    },
+    [initialOption],
+  );
+
+  return [showActionSheetAsync];
+}
+
+export default useActionSheet;