feat(notification): 支持自定义 notification 配置 (XiaoMi#2832)

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

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

* chore: 修改container类型

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

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

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

---------

Co-authored-by: xiamiao <[email protected]>

.changeset/soft-eggs-hear.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/notification": minor
+---
+
+feat: 支持自定义 notification 配置

.changeset/thick-taxis-retire.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(notification): 支持自定义 notification 配置

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({})

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>
+    </>
+  )
+}

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',