docs: toast doc

WinmezzZ · Apr 6, 2022 · 3adf884 · 3adf884
1 parent aea1dd3
commit 3adf884
Show file tree

Hide file tree

Showing 3 changed files with 205 additions and 12 deletions.
diff --git a/components/toast/index.md b/components/toast/index.md
@@ -36,14 +36,13 @@ export default () => {
     Toast({
       content: 'Hello!',
       duration: 0,
-      hideClose: true,
     });
   };
   return <Button onClick={showToast}>Not autoclose</Button>;
 };
 ```
 
-## toast message type
+## Toast message type
 
 ```jsx
 import React from 'react';
@@ -83,4 +82,54 @@ export default () => {
 };
 ```
 
-<API src="index.ts" />
+## clear toast with javascript api
+
+```tsx
+import React from 'react';
+import { Toast, Button } from 'ultra-design';
+
+export default () => {
+  const showToast = () => {
+    Toast({
+      content: 'I will not be closed!',
+      duration: 0,
+      hideClose: true,
+    });
+  };
+  const clearToast = () => {
+    Toast.clear();
+  };
+  return (
+    <>
+      <Button onClick={showToast}>Alert a Toast</Button>
+      <Button onClick={clearToast}>Click me to clear Toast</Button>
+    </>
+  );
+};
+```
+
+## API
+
+`Toast(content: string, duration?: number, onClose?: () => void)`
+
+| param    | description                                | type         | default |
+| -------- | ------------------------------------------ | ------------ | ------- |
+| content  | Toast content                              | `string`     | `--`    |
+| duration | leave duration                             | `number`     | `2000`  |
+| onClose  | will be triggered when the toast is closed | `() => void` | `--`    |
+
+`Toast(options: ToastOptions)`
+
+<API src="toast.tsx" export="['ToastInternal']" hideTitle />
+
+#### Toast method
+
+- Toast.info: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.success: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.warning: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.error: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.clear: `() => void;`
diff --git a/components/toast/index.zh-CN.md b/components/toast/index.zh-CN.md
@@ -0,0 +1,135 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 反馈
+  order: 4
+---
+
+# Toast 提示消息
+
+## 基本使用
+
+```tsx
+import React from 'react';
+import { Toast, Button } from 'ultra-design';
+
+export default () => {
+  const showToast = () => {
+    Toast('Hello!');
+  };
+  return <Button onClick={showToast}>打开 Toast</Button>;
+};
+```
+
+## 自动关闭时间
+
+将 duration 设置为 0 以始终显示
+
+```tsx
+import React from 'react';
+import { Toast, Button } from 'ultra-design';
+
+export default () => {
+  const showToast = () => {
+    Toast({
+      content: 'Hello!',
+      duration: 0,
+    });
+  };
+  return <Button onClick={showToast}>不会自动关闭</Button>;
+};
+```
+
+## 提示消息类型
+
+```jsx
+import React from 'react';
+import { Toast, Button } from 'ultra-design';
+
+const info = () => {
+  Toast.info('这是一个信息提示');
+};
+const success = () => {
+  Toast.success('这是一个成功提示');
+};
+const error = () => {
+  Toast.error('这是一个错误提示');
+};
+const warning = () => {
+  Toast.warning('这是一个警告提示');
+};
+
+export default () => {
+  const showToast = type => {};
+  return (
+    <>
+      <Button type="primary" onClick={info}>
+        信息
+      </Button>
+      <Button status="success" onClick={success}>
+        成功
+      </Button>
+      <Button status="error" onClick={error}>
+        错误
+      </Button>
+      <Button status="warning" onClick={warning}>
+        警告
+      </Button>
+    </>
+  );
+};
+```
+
+## 使用 JS API 清除 Toast
+
+```tsx
+import React from 'react';
+import { Toast, Button } from 'ultra-design';
+
+export default () => {
+  const showToast = () => {
+    Toast({
+      content: '我不会被自动关闭',
+      duration: 0,
+      hideClose: true,
+    });
+  };
+  const clearToast = () => {
+    Toast.clear();
+  };
+  return (
+    <>
+      <Button onClick={showToast}>打开一个用户无法关闭的 Toast </Button>
+      <Button onClick={clearToast}>点击我清除 Toast</Button>
+    </>
+  );
+};
+```
+
+## API
+
+`Toast(content: string, duration?: number, onClose?: () => void)`
+
+| 属性     | 描述                       | 类型         | 默认   |
+| -------- | -------------------------- | ------------ | ------ |
+| content  | Toast 内容                 | `string`     | `--`   |
+| duration | 自动关闭的时间             | `number`     | `2000` |
+| onClose  | Toast 关闭时触发的回调函数 | `() => void` | `--`   |
+
+`Toast(options: ToastOptions)`
+
+<API src="toast.tsx" export="['ToastInternal']" hideTitle />
+
+#### Toast 方法
+
+- Toast.info: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.success: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.warning: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.error: `(content: React.ReactNode, duration?: number, onClose?: OnClose) => void;`
+
+- Toast.clear: `() => void;`
diff --git a/components/toast/toast.tsx b/components/toast/toast.tsx
@@ -13,14 +13,14 @@ export interface ToastProps {
    */
   content?: React.ReactNode;
   /**
-   * @description.zh-CN 消失时长，默认 2000 ms
+   * @description.zh-CN 自动关闭时长，默认 2000 ms
    * @description.en-US leave duration, default 2000 ms
    * @default '2000'
    */
   duration?: number;
   /**
-   * @description.zh-CN 手动关闭时会触发此方法
-   * @description.en-US trigger when toast closing button clicked
+   * @description.zh-CN 关闭时触发的回调函数
+   * @description.en-US will be triggered when the toast is closed
    */
   onClose?: () => void;
   /**
@@ -72,6 +72,7 @@ export const ToastInternal: FC<ToastProps> = p => {
 
     timer.current = setTimeout(() => {
       setVisible(false);
+      onClose?.();
     }, duration);
   }, [visible]);
 
@@ -105,9 +106,11 @@ const unmountRoot = () => {
   }
 };
 
-function open(content: string): void;
+type OnClose = () => void;
+function open(content: string, duration?: number, onClose?: OnClose): void;
+
 function open(props: ToastProps): void;
-function open(data: any) {
+function open(data: string | ToastProps, duration?: number, onClose?: OnClose) {
   let root = unmountRoot();
 
   if (!root) {
@@ -120,6 +123,9 @@ function open(data: any) {
 
   if (typeof data === 'string') {
     config.content = data;
+    duration && (config.duration = duration);
+    onClose && (config.onClose = onClose);
+    config.content = data;
   } else {
     Object.assign(config, data);
   }
@@ -135,21 +141,24 @@ const iconMap: ToastIconMap = {
   info: <Info theme="outline" size="18" fill="#13c2c2" />,
   success: <Success theme="outline" size="18" fill="#00B42A" />,
   warning: <Info theme="outline" size="18" fill="#FF7D00" />,
-  error: <Error theme="outline" size="12" fill="#F53F3F" />,
+  error: <Error theme="outline" size="18" fill="#F53F3F" />,
 };
 
-type OnClose = () => void;
-
 type ToastInstance = typeof open & {
   info: (content: React.ReactNode, duration?: number, onClose?: OnClose) => void;
   success: (content: React.ReactNode, duration?: number, onClose?: OnClose) => void;
   warning: (content: React.ReactNode, duration?: number, onClose?: OnClose) => void;
   error: (content: React.ReactNode, duration?: number, onClose?: OnClose) => void;
-  destory: () => void;
+  clear: () => void;
 };
 
+/**
+ * toast mesaage component
+ */
 const Toast = open as ToastInstance;
 
+Toast.clear = unmountRoot;
+
 for (const key in iconMap) {
   const k = key as ToastType;