From 8dc9afecb911d53ff8a73d1387f903b1cfae27c0 Mon Sep 17 00:00:00 2001
From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:31:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(notification):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=20notification=20=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=20(#2832)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(notification): 支持指定portal挂载(#2831)

* chore(notification): 生成变更记录文件

* chore: 修改container类型

* feat(notification): 重写自定义portal和zIndex功能(#2831)

* feat(notification): 重写自定义属性示例(#2831)

* feat(notification): 删除toast修改部分

---------

Co-authored-by: xiamiao <xiamiao@xiaomi.com>
---
 .changeset/soft-eggs-hear.md                  |  5 ++
 .changeset/thick-taxis-retire.md              |  5 ++
 .../ui/notification/src/NotificationAPI.tsx   |  6 ++-
 .../notification/stories/custom.stories.tsx   | 54 +++++++++++++++++++
 .../ui/notification/stories/index.stories.tsx |  1 +
 5 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/soft-eggs-hear.md
 create mode 100644 .changeset/thick-taxis-retire.md
 create mode 100644 packages/ui/notification/stories/custom.stories.tsx

diff --git a/.changeset/soft-eggs-hear.md b/.changeset/soft-eggs-hear.md
new file mode 100644
index 000000000..600033f17
--- /dev/null
+++ b/.changeset/soft-eggs-hear.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/notification": minor
+---
+
+feat: 支持自定义 notification 配置
diff --git a/.changeset/thick-taxis-retire.md b/.changeset/thick-taxis-retire.md
new file mode 100644
index 000000000..c4077f17c
--- /dev/null
+++ b/.changeset/thick-taxis-retire.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(notification): 支持自定义 notification 配置
diff --git a/packages/ui/notification/src/NotificationAPI.tsx b/packages/ui/notification/src/NotificationAPI.tsx
index f2725205b..bb5f4d824 100644
--- a/packages/ui/notification/src/NotificationAPI.tsx
+++ b/packages/ui/notification/src/NotificationAPI.tsx
@@ -21,4 +21,8 @@ export interface NotificationAPIOptions extends ToastAPIOptions {}
 
 export interface NotificationOptions extends Omit<NotificationProps, 'destroy' | 'visible'> {}
 
-export const notification = new NotificationAPI({ component: NotificationComponent })
+export const createNotification = (options?: Omit<NotificationAPIOptions, 'component'>) => {
+  return new NotificationAPI({ component: NotificationComponent, ...options })
+}
+
+export const notification = createNotification({})
diff --git a/packages/ui/notification/stories/custom.stories.tsx b/packages/ui/notification/stories/custom.stories.tsx
new file mode 100644
index 000000000..61a48c995
--- /dev/null
+++ b/packages/ui/notification/stories/custom.stories.tsx
@@ -0,0 +1,54 @@
+import React, { useState, useMemo } from 'react'
+import { createNotification } from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title notification 属性自定义
+ */
+export const Custom = () => {
+  const [container, setContainer] = useState<HTMLElement | undefined>()
+
+  const notification = useMemo(
+    () =>
+      createNotification({
+        container: container,
+        zIndex: 2000,
+      }),
+    [container]
+  )
+
+  return (
+    <>
+      <h1>Custom</h1>
+      <div
+        ref={(e) => {
+          setContainer(e)
+        }}
+        id="ddd"
+        style={{
+          width: 400,
+          height: 300,
+          background: 'rgb(245, 247, 250)',
+
+          // Need add it
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      ></div>
+
+      <div className="notification-custom__wrap">
+        <Button
+          onClick={() => {
+            notification.open({
+              title: '数据备份通知',
+              content:
+                '各位同学请注意，将于2019.08.10 00:00:00 -08:00：00 期间进行系统服务器升级维护，请做好数据备份工作，以防丢失。带来不便，敬请谅解！',
+            })
+          }}
+        >
+          Notice
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/notification/stories/index.stories.tsx b/packages/ui/notification/stories/index.stories.tsx
index ca4ab016a..82f816893 100644
--- a/packages/ui/notification/stories/index.stories.tsx
+++ b/packages/ui/notification/stories/index.stories.tsx
@@ -7,6 +7,7 @@ export * from './title.stories'
 export * from './auto-close.stories'
 export * from './action.stories'
 export * from './size.stories'
+export * from './custom.stories'
 
 export default {
   title: 'FeedBack/Notification',