From ad7cffa650f31d9cf25b4f7dff8bf581e6eab428 Mon Sep 17 00:00:00 2001 From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com> Date: Fri, 28 Jun 2024 15:28:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(message):=20=E6=94=AF=E6=8C=81=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89message=E9=85=8D=E7=BD=AE=20(#2820)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(message): 支持指定portal挂载(#2715) * chore(message): 生成变更记录文件 * chore(message): 增添示例(#2715) * fix: 修改容器类型 * feat(message): 重写自定义portal和zIndex功能(#2715) * feat(message): 重写示例(#2715) * chore: 修改示例 * chore: 修改示例 --------- Co-authored-by: xiamiao --- .changeset/eight-items-battle.md | 5 ++ .changeset/old-doors-sin.md | 6 +++ packages/ui/message/src/MessageAPI.tsx | 6 ++- .../ui/message/stories/custom.stories.tsx | 52 +++++++++++++++++++ packages/ui/message/stories/index.stories.tsx | 1 + packages/ui/toast/src/ToastAPI.tsx | 12 ++--- packages/ui/toast/src/ToastManager.tsx | 23 ++++++-- 7 files changed, 92 insertions(+), 13 deletions(-) create mode 100644 .changeset/eight-items-battle.md create mode 100644 .changeset/old-doors-sin.md create mode 100644 packages/ui/message/stories/custom.stories.tsx diff --git a/.changeset/eight-items-battle.md b/.changeset/eight-items-battle.md new file mode 100644 index 000000000..721a64e10 --- /dev/null +++ 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 new file mode 100644 index 000000000..2444bf145 --- /dev/null +++ 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 index 75afb3d9f..81cefbfde 100644 --- 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 {} -export const message = new MessageAPI({ component: MessageComponent }) +export const createMessage = (options?: Omit) => { + 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 new file mode 100644 index 000000000..8e39442a8 --- /dev/null +++ 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(null) + const message = useMemo( + () => + createMessage({ + container, + zIndex: 1000, + }), + [container] + ) + return ( + <> +

Custom

+
+
{ + setContainer(e) + }} + id="ddd" + style={{ + width: 700, + height: 400, + background: 'rgb(245, 247, 250)', + zIndex: 1500, + // Need add it + position: 'relative', + overflow: 'hidden', + }} + >
+ +
+ + ) +} diff --git a/packages/ui/message/stories/index.stories.tsx b/packages/ui/message/stories/index.stories.tsx index ebfc3d375..83fb40769 100644 --- 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 index f1c4e39a3..1bd58b249 100644 --- a/packages/ui/toast/src/ToastAPI.tsx +++ b/packages/ui/toast/src/ToastAPI.tsx @@ -18,11 +18,9 @@ export class ToastAPI { 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 { 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() - render(, 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 index f3eb426ff..9fe216b37 100644 --- a/packages/ui/toast/src/ToastManager.tsx +++ b/packages/ui/toast/src/ToastManager.tsx @@ -68,7 +68,11 @@ export class ToastManager extends Component { + 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 {queue.map((notice) => { if (As) return @@ -140,4 +144,13 @@ export interface ToastManagerProps { * 放置 toast 的位置 */ placement?: ToastPlacement + + /** + * 指定 portal 的容器 + */ + container?: HTMLElement + /** + * 自定义css展示层级 + */ + zIndex?: number }