feat(message): 支持自定义message配置

.changeset/eight-items-battle.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(message): 支持指定 portal 挂载

.changeset/old-doors-sin.md

@@ -0,0 +1,6 @@
+---
+"@hi-ui/message": minor
+"@hi-ui/toast": minor
+---
+
+feat: 支持指定 portal 挂载

packages/ui/message/src/Message.tsx

@@ -133,6 +133,10 @@ export interface MessageProps extends Omit<HiBaseHTMLProps<'div'>, 'title'> {
    * 是否开启自动关闭
    */
   autoClose?: boolean
+  /**
+   * 指定 portal 的容器
+   */
+  container?: Element | null
   /**
    * 执行销毁，内部使用，勿覆盖。暂不对外暴露
    * @private

packages/ui/message/stories/container.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import message from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title portal挂载
+ * @desc 挂载在当前div
+ *
+ */
+export const Container = () => {
+  return (
+    <>
+      <h1>Basic</h1>
+      <div className="message-container__wrap">
+        <Button
+          onClick={() => {
+            message.open({
+              title: '欢迎使用 HiUI 组件库',
+              type: 'success',
+              container: document.querySelector('.message-container__wrap'),
+            })
+          }}
+        >
+          Toast
+        </Button>
+      </div>
+    </>
+  )
+}

packages/ui/message/stories/index.stories.tsx

@@ -5,6 +5,7 @@ export * from './basic.stories'
 export * from './type.stories'
 export * from './close.stories'
 export * from './auto-close.stories'
+export * from './container.stories'
 
 export default {
   title: 'FeedBack/Message',

packages/ui/toast/src/ToastAPI.tsx

@@ -6,7 +6,7 @@ import { ToastEventOptions } from './types'
 import { withDefaultProps } from '@hi-ui/react-utils'
 import { uuid } from '@hi-ui/use-id'
 
-export class ToastAPI<T = ToastEventOptions> {
+export class ToastAPI<T extends ToastEventOptions> {
   static defaultOptions = {
     prefixCls: _prefix,
   }
@@ -18,11 +18,9 @@ export class ToastAPI<T = ToastEventOptions> {
 
   constructor(toastAPIOptions: ToastAPIOptions) {
     this.options = withDefaultProps(toastAPIOptions, ToastAPI.defaultOptions)
-
     // Ensure that Toast is a singleton.
     this.id = uuid()
-
-    this.initManager()
+    // this.initManager()
   }
 
   static create(options: ToastAPIOptions) {
@@ -33,17 +31,21 @@ export class ToastAPI<T = ToastEventOptions> {
     return `.${this.options.prefixCls}__portal__${this.id}`
   }
 
-  initManager() {
-    this.container = Container.getContainer(this.selector)
+  initManager(container: Element | undefined) {
+    this.container = Container.getContainer(this.selector, document, container)
     this.toastManager = React.createRef<ToastManager>()
-
     render(<ToastManager {...this.options} ref={this.toastManager} />, this.container)
   }
 
   open = (props: T) => {
+    const container = props.container ?? document.body
+    if (this.container?.parentNode !== container) {
+      this.destroy()
+    }
     if (!this.container) {
-      this.initManager()
+      this.initManager(container)
     }
+
     return this.toastManager.current?.open(props)
   }
 

packages/ui/toast/src/ToastManager.tsx

@@ -89,7 +89,7 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
     return {
       // @DesignToken zIndex: `toast`
       zIndex: 1010,
-      position: 'fixed',
+      position: 'absolute',
       pointerEvents: 'none',
       transform,
       top,

packages/ui/toast/src/types.ts

@@ -15,6 +15,10 @@ export interface ToastEventOptions {
    * toast 默认展示 title
    */
   title?: React.ReactNode
+  /**
+   * 指定 portal 的容器
+   */
+  container?: Element | undefined
 }
 
 export interface ToastOptions extends ToastEventOptions {