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

* feat(message): 支持指定portal挂载(XiaoMi#2715) * chore(message): 生成变更记录文件 * chore(message): 增添示例(XiaoMi#2715) * fix: 修改容器类型 * feat(message): 重写自定义portal和zIndex功能(XiaoMi#2715) * feat(message): 重写示例(XiaoMi#2715) * chore: 修改示例 * chore: 修改示例 --------- Co-authored-by: xiamiao <[email protected]>
yang-x20 · Jun 28, 2024 · fa61ff1 · fa61ff1
1 parent ad02eee
commit fa61ff1
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 13 deletions.
diff --git a/.changeset/eight-items-battle.md b/.changeset/eight-items-battle.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(message): 支持指定 portal 挂载
diff --git a/.changeset/old-doors-sin.md b/.changeset/old-doors-sin.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/message": minor
+"@hi-ui/toast": minor
+---
+
+feat: 支持指定 portal 挂载
diff --git a/packages/ui/message/src/MessageAPI.tsx b/packages/ui/message/src/MessageAPI.tsx
@@ -17,4 +17,8 @@ export interface MessageAPIOptions extends ToastAPIOptions {}
 
 export interface MessageOptions extends Omit<MessageProps, 'destroy' | 'visible'> {}
 
-export const message = new MessageAPI({ component: MessageComponent })
+export const createMessage = (options?: Omit<MessageAPIOptions, 'component'>) => {
+  return new MessageAPI({ component: MessageComponent, ...options })
+}
+
+export const message = createMessage({})
diff --git a/packages/ui/message/stories/custom.stories.tsx b/packages/ui/message/stories/custom.stories.tsx
@@ -0,0 +1,52 @@
+import React, { useMemo, useState } from 'react'
+import { createMessage } from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title message 属性自定义
+ *
+ */
+
+export const Custom = () => {
+  const [container, setContainer] = useState<HTMLElement | null>(null)
+  const message = useMemo(
+    () =>
+      createMessage({
+        container,
+        zIndex: 1000,
+      }),
+    [container]
+  )
+  return (
+    <>
+      <h1>Custom</h1>
+      <div className="message-custom__wrap">
+        <div
+          ref={(e) => {
+            setContainer(e)
+          }}
+          id="ddd"
+          style={{
+            width: 700,
+            height: 400,
+            background: 'rgb(245, 247, 250)',
+            zIndex: 1500,
+            // Need add it
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        ></div>
+        <Button
+          onClick={() => {
+            message.open({
+              title: '欢迎使用 HiUI 组件库',
+              type: 'success',
+            })
+          }}
+        >
+          Toast
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/message/stories/index.stories.tsx b/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 './custom.stories'
 
 export default {
   title: 'FeedBack/Message',

diff --git a/packages/ui/toast/src/ToastAPI.tsx b/packages/ui/toast/src/ToastAPI.tsx
@@ -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(this.options.container)
   }
 
   static create(options: ToastAPIOptions) {
@@ -33,17 +31,17 @@ export class ToastAPI<T = ToastEventOptions> {
     return `.${this.options.prefixCls}__portal__${this.id}`
   }
 
-  initManager() {
-    this.container = Container.getContainer(this.selector)
+  initManager(container?: HTMLElement) {
+    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) => {
     if (!this.container) {
-      this.initManager()
+      this.initManager(this.options.container as HTMLElement)
     }
+
     return this.toastManager.current?.open(props)
   }
 

diff --git a/packages/ui/toast/src/ToastManager.tsx b/packages/ui/toast/src/ToastManager.tsx
@@ -68,7 +68,11 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
     })
   }
 
-  private getStyle = (placement: ToastPlacement): React.CSSProperties => {
+  private getStyle = (
+    placement: ToastPlacement = 'top',
+    container?: HTMLElement,
+    zIndex?: number
+  ): React.CSSProperties => {
     let top: string | undefined
     let bottom: string | undefined
     let transform: string | undefined
@@ -88,8 +92,8 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
 
     return {
       // @DesignToken zIndex: `toast`
-      zIndex: 1010,
-      position: 'fixed',
+      zIndex: zIndex ?? 1010,
+      position: container ? 'absolute' : 'fixed',
       pointerEvents: 'none',
       transform,
       top,
@@ -101,12 +105,12 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
 
   render() {
     const { queue } = this.state
-    const { prefixCls, placement, component: As, render } = this.props
+    const { prefixCls, placement, component: As, render, container, zIndex } = this.props
 
     return (
       <div
         className={cx(`${prefixCls}-manager`, `${prefixCls}-manager--placement-${placement}`)}
-        style={this.getStyle(placement!)}
+        style={this.getStyle(placement, container, zIndex)}
       >
         {queue.map((notice) => {
           if (As) return <As {...notice} />
@@ -140,4 +144,13 @@ export interface ToastManagerProps {
    * 放置 toast 的位置
    */
   placement?: ToastPlacement
+
+  /**
+   * 指定 portal 的容器
+   */
+  container?: HTMLElement
+  /**
+   * 自定义css展示层级
+   */
+  zIndex?: number
 }