fix #4258: sdk方式下toast配置不生效问题 (#4274)

docs/zh-CN/components/toast.md

@@ -188,7 +188,7 @@ order: 70
 ## 属性表
 
 | 属性名      | 类型               | 默认值                                  | 说明                                                                                                              |
-| ------------ | --------------------- | --------- | ----------------------------------- |
+| ----------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
 | actionType  | `string`           | `"toast"`                               | 指定为 toast 轻提示组件                                                                                           |
 | items       | `Array<ToastItem>` | `[]`                                    | 轻提示内容                                                                                                        |
 | position    | `string`           | `top-center（移动端为center）`          | 提示显示位置，可用'top-right'、'top-center'、'top-left'、'bottom-center'、'bottom-left'、'bottom-right'、'center' |
@@ -196,9 +196,10 @@ order: 70
 | showIcon    | `boolean`          | `true`                                  | 是否展示图标                                                                                                      |
 | timeout     | `number`           | `5000（error类型为6000，移动端为3000）` | 持续时间                                                                                                          |
 
-## ToastItem属性表
+## ToastItem 属性表
+
 | 属性名      | 类型                   | 默认值                                  | 说明                                                                                                              |
-| ------------ | ----------------------- | --------- | ---------------------------------- |
+| ----------- | ---------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
 | title       | `string \| SchemaNode` |                                         | 标题                                                                                                              |
 | body        | `string \| SchemaNode` |                                         | 内容                                                                                                              |
 | level       | `string`               | `info`                                  | 展示图标，可选'info'、'success'、'error'、'warning'                                                               |

examples/embed.tsx

@@ -21,6 +21,8 @@ import '../src/locale/en-US';
 import 'history';
 import attachmentAdpator from '../src/utils/attachmentAdpator';
 
+import type {ToastLevel, ToastConf} from '../src/components/Toast';
+
 export function embed(
   container: string | HTMLElement,
   schema: any,
@@ -94,8 +96,10 @@ export function embed(
   const amisEnv = {
     getModalContainer: () =>
       env?.getModalContainer?.() || document.querySelector('.amis-scope'),
-    notify: (type: 'success' | 'error' | 'warning' | 'info', msg: string) =>
-      toast[type] ? toast[type](msg) : console.warn('[Notify]', type, msg),
+    notify: (type: ToastLevel, msg: string, conf?: ToastConf) =>
+      toast[type]
+        ? toast[type](msg, conf)
+        : console.warn('[Notify]', type, msg),
     alert,
     confirm,
     updateLocation: (to: any, replace: boolean) => {

src/components/Toast.tsx

@@ -40,6 +40,23 @@ const show = (content: string, conf: any = {}, method: string) => {
   toastRef[method](content, {...conf});
 };
 
+export type ToastLevel = 'info' | 'success' | 'error' | 'warning';
+
+/** Toast配置 */
+export type ToastConf = Partial<
+  Pick<
+    ToastComponentProps,
+    | 'position'
+    | 'closeButton'
+    | 'showIcon'
+    | 'timeout'
+    | 'errorTimeout'
+    | 'className'
+    | 'items'
+    | 'useMobileUI'
+  >
+>;
+
 interface ToastComponentProps extends ThemeProps, LocaleProps {
   position:
     | 'top-right'
@@ -61,7 +78,7 @@ interface ToastComponentProps extends ThemeProps, LocaleProps {
 interface Item extends Config {
   title?: string | React.ReactNode;
   body: string | React.ReactNode;
-  level: 'info' | 'success' | 'error' | 'warning';
+  level: ToastLevel;
   id: string;
   onDissmiss?: () => void;
   position?:
@@ -115,8 +132,9 @@ export class ToastComponent extends React.Component<
   }
 
   notifiy(level: string, content: any, config?: any) {
-    const useMobileUI = (config.useMobileUI || this.props.useMobileUI) && isMobile();
-    this.setState((state) => {
+    const useMobileUI =
+      (config.useMobileUI || this.props.useMobileUI) && isMobile();
+    this.setState(state => {
       let items = state.items.concat();
       if (useMobileUI) {
         // 移动端只能存在一个
@@ -128,12 +146,12 @@ export class ToastComponent extends React.Component<
         ...config,
         id: guid(),
         position: config.position || (useMobileUI ? 'center' : config.position),
-        timeout: config.timeout || (useMobileUI ? 3000 : undefined),
+        timeout: config.timeout || (useMobileUI ? 3000 : undefined)
       });
       return {
         items,
         useMobileUI
-      }
+      };
     });
   }
 
@@ -232,7 +250,7 @@ export default themeable(localeable(ToastComponent));
 interface ToastMessageProps {
   title?: string | React.ReactNode;
   body: string | React.ReactNode;
-  level: 'info' | 'success' | 'error' | 'warning';
+  level: ToastLevel;
   timeout: number;
   closeButton?: boolean;
   showIcon?: boolean;
@@ -340,7 +358,7 @@ export class ToastMessage extends React.Component<
         {(status: string) => {
           return (
             <div
-              className={cx(`Toast Toast--${level}`, fadeStyles[status],{
+              className={cx(`Toast Toast--${level}`, fadeStyles[status], {
                 'Toast-mobile--has-icon': useMobileUI && showIcon !== false
               })}
               onMouseEnter={this.handleMouseEnter}

src/env.tsx

@@ -9,26 +9,12 @@ import hoistNonReactStatic from 'hoist-non-react-statics';
 import {IScopedContext} from './Scoped';
 import {RendererEvent} from './utils/renderer-event';
 
+import type {ToastLevel, ToastConf} from './components/Toast';
+
 export interface RendererEnv {
   fetcher: (api: Api, data?: any, options?: object) => Promise<Payload>;
   isCancel: (val: any) => boolean;
-  notify: (
-    type: 'error' | 'success' | 'warning',
-    msg: any,
-    conf?: {
-      title?: any;
-      position?:
-        | 'top-right'
-        | 'top-center'
-        | 'top-left'
-        | 'bottom-center'
-        | 'bottom-left'
-        | 'bottom-right'
-        | 'center';
-      closeButton?: boolean;
-      timeout?: number;
-    }
-  ) => void;
+  notify: (type: ToastLevel, msg: any, conf?: ToastConf) => void;
   jumpTo: (to: string, action?: Action, ctx?: object) => void;
   alert: (msg: string) => void;
   confirm: (msg: string, title?: string) => Promise<boolean>;

src/factory.tsx

@@ -34,6 +34,8 @@ import {envOverwrite} from './envOverwrite';
 import {OnEventProps} from './utils/renderer-event';
 import {enableDebug} from './utils/debug';
 
+import type {ToastLevel, ToastConf} from './components/Toast';
+
 export interface TestFunc {
   (
     path: string,
@@ -107,14 +109,7 @@ export interface RenderOptions {
     onError: (error: any) => void
   ) => void;
   isCancel?: (value: any) => boolean;
-  notify?: (
-    type: 'error' | 'success',
-    msg: string,
-    conf?: {
-      closeButton?: boolean;
-      timeout?: number;
-    }
-  ) => void;
+  notify?: (type: ToastLevel, msg: string, conf?: ToastConf) => void;
   jumpTo?: (to: string, action?: Action, ctx?: object) => void;
   alert?: (msg: string) => void;
   confirm?: (msg: string, title?: string) => boolean | Promise<boolean>;