From 297aaae9268c24e7e8a40ab953550d374d3ef26c Mon Sep 17 00:00:00 2001
From: Wanli Song <songwanli2025@163.com>
Date: Sun, 28 Nov 2021 00:26:31 +0800
Subject: [PATCH] feat(notification): max, placement & destroyAll  (#1685)

* feat(notification): add max & placement

* feat(notification): add destroyAll method

* doc: add changelog

* test(notification): fix test lint

Co-authored-by: wanli.song@tusimple.ai <wanli.song@tusimple.ai>
---
 CHANGELOG.en-US.md                            |   5 +
 CHANGELOG.zh-CN.md                            |   5 +
 .../demos/enUS/index.demo-entry.md            |   5 +
 src/notification/demos/enUS/max.demo.md       |  44 ++++++++
 src/notification/demos/enUS/placement.demo.md |  64 +++++++++++
 .../demos/zhCN/index.demo-entry.md            |   5 +
 src/notification/demos/zhCN/max.demo.md       |  44 ++++++++
 src/notification/demos/zhCN/placement.demo.md |  64 +++++++++++
 .../src/NotificationContainer.tsx             |  16 ++-
 src/notification/src/NotificationProvider.tsx |  28 ++++-
 src/notification/src/styles/index.cssr.ts     |  64 +++++++++--
 src/notification/tests/Notification.spec.tsx  | 106 +++++++++++++++++-
 12 files changed, 435 insertions(+), 15 deletions(-)
 create mode 100644 src/notification/demos/enUS/max.demo.md
 create mode 100644 src/notification/demos/enUS/placement.demo.md
 create mode 100644 src/notification/demos/zhCN/max.demo.md
 create mode 100644 src/notification/demos/zhCN/placement.demo.md

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index fb53eae3b70..6f5bb9dade8 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -14,6 +14,11 @@
 - `n-input-number` add `keyboard` prop.
 - Add `tableColorStriped` theme variable, closes [#1686](https://github.com/TuSimple/naive-ui/issues/1686).
 
+### Feats
+
+- `n-notification-provider` add `max` & `placement` prop.
+- `n-notification` add `destroyAll` method, closes [#333](https://github.com/TuSimple/naive-ui/issues/333).
+
 ## 2.21.1 (2021-11-23)
 
 ### Fixes
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index ec89f384915..938734d8a26 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -14,6 +14,11 @@
 - `n-input-number` 新增 `keyboard` 属性
 - 新增 `tableColorStriped` 主题变量，关闭 [#1686](https://github.com/TuSimple/naive-ui/issues/1686)
 
+### Feats
+
+- `n-notification-provider` 新增 `max` & `placement` 属性
+- `n-notification` 新增 `detroyAll` 方法，关闭 [#333](https://github.com/TuSimple/naive-ui/issues/333)
+
 ## 2.21.1 (2021-11-23)
 
 ### Fixes
diff --git a/src/notification/demos/enUS/index.demo-entry.md b/src/notification/demos/enUS/index.demo-entry.md
index c553db64639..bdffc8dfb1c 100644
--- a/src/notification/demos/enUS/index.demo-entry.md
+++ b/src/notification/demos/enUS/index.demo-entry.md
@@ -46,6 +46,8 @@ change-content
 scrollable
 closable
 duration
+max
+placement
 ```
 
 ## API
@@ -54,6 +56,8 @@ duration
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| placement | `'top-right' \| 'top-left' \| 'bottom-left' \| 'bottom -right'` | `'top-right'` | Placement of all notifications. |
+| max | `number` | `undefined` | Limit the number of notifications to display. |
 | scrollable | `boolean` | `true` | Whether notification can be scroll. |
 | to | `string \| HTMLElement` | `'body'` | Container node of notification container. |
 
@@ -62,6 +66,7 @@ duration
 | Name | Type | Description |
 | --- | --- | --- |
 | create | `(option: NotificationOption) => NotificationReactive` | Create a notification. |
+| destroyAll | `() => void` | Destroy all popup notifications. |
 | error | `(option: NotificationOption) => NotificationReactive` | Use `error` type notification. |
 | info | `(option: NotificationOption) => NotificationReactive` | Use `info` type notification. |
 | success | `(option: NotificationOption) => NotificationReactive` | Use `success` type notification. |
diff --git a/src/notification/demos/enUS/max.demo.md b/src/notification/demos/enUS/max.demo.md
new file mode 100644
index 00000000000..4328cc89f14
--- /dev/null
+++ b/src/notification/demos/enUS/max.demo.md
@@ -0,0 +1,44 @@
+# Max
+
+```html
+<n-notification-provider :max="3">
+   <Button />
+</n-notification-provider>
+```
+
+```js
+import { defineComponent, ref, h } from 'vue'
+import { useNotification, NButton } from 'naive-ui'
+
+const Button = {
+  setup () {
+    const notification = useNotification()
+    const number = ref(0)
+    return {
+      notification,
+      number
+    }
+  },
+  render () {
+    return h(
+      NButton,
+      {
+        onClick: () => {
+          this.number++
+          this.notification.info({
+            title: `Notification number: ${this.number}`,
+            content: 'You can limit the number of notifications'
+          })
+        }
+      },
+      { default: 'Max notifications: 3' }
+    )
+  }
+}
+
+export default defineComponent({
+  components: {
+    Button
+  }
+})
+```
\ No newline at end of file
diff --git a/src/notification/demos/enUS/placement.demo.md b/src/notification/demos/enUS/placement.demo.md
new file mode 100644
index 00000000000..25d16ad9011
--- /dev/null
+++ b/src/notification/demos/enUS/placement.demo.md
@@ -0,0 +1,64 @@
+# Placement
+
+```html
+<n-notification-provider :placement="placement">
+  <Buttons @changePlacement="changePlacement" />
+</n-notification-provider>
+```
+
+```js
+import { defineComponent, h, ref } from 'vue'
+import { useNotification, NButton } from 'naive-ui'
+
+const Buttons = {
+  emits: ['changePlacement'],
+  setup () {
+    const notification = useNotification()
+    const placementArray = [
+      { placement: 'top-left', text: 'TopLeft' },
+      { placement: 'top-right', text: 'TopRight' },
+      { placement: 'bottom-left', text: 'BottomLeft' },
+      { placement: 'bottom-right', text: 'BottomRight' }
+    ]
+    return {
+      notification,
+      placementArray
+    }
+  },
+  render () {
+    return this.placementArray.map((item) =>
+      h(
+        NButton,
+        {
+          onClick: () => {
+            this.$emit('changePlacement', item.placement)
+            this.notification.info({
+              title: item.text,
+              content: 'You can change the placement'
+            })
+          },
+          style: {
+            marginRight: '10px'
+          }
+        },
+        { default: () => item.text }
+      )
+    )
+  }
+}
+
+export default defineComponent({
+  components: {
+    Buttons
+  },
+  setup () {
+    const placementRef = ref('top-right')
+    return {
+      placement: placementRef,
+      changePlacement (val) {
+        placementRef.value = val
+      }
+    }
+  }
+})
+```
diff --git a/src/notification/demos/zhCN/index.demo-entry.md b/src/notification/demos/zhCN/index.demo-entry.md
index a501e81b1af..2e53d2e082b 100644
--- a/src/notification/demos/zhCN/index.demo-entry.md
+++ b/src/notification/demos/zhCN/index.demo-entry.md
@@ -46,6 +46,8 @@ change-content
 scrollable
 closable
 duration
+max
+placement
 ```
 
 ## API
@@ -54,6 +56,8 @@ duration
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| max | `number` | `undefined` | 限制通知框显示的个数 |
+| placement | `'top-right' \| 'top-left' \| 'bottom-left' \| 'bottom -right'` | `top-right` | 所有通知框显示的位置 |
 | scrollable | `boolean` | `true` | 通知是否可滚动 |
 | to | `string \| HTMLElement` | `'body'` | `Notification` 容器节点的位置 |
 
@@ -62,6 +66,7 @@ duration
 | 名称 | 类型 | 说明 |
 | --- | --- | --- |
 | create | `(option: NotificationOption) => NotificationReactive` | 创建通知框 |
+| destroyAll | `() => void` | 销毁所有弹出的通知框 |
 | error | `(option: NotificationOption) => NotificationReactive` | 调用 `error` 类型的通知框 |
 | info | `(option: NotificationOption) => NotificationReactive` | 调用 `info` 类型的通知框 |
 | success | `(option: NotificationOption) => NotificationReactive` | 调用 `success` 类型的通知框 |
diff --git a/src/notification/demos/zhCN/max.demo.md b/src/notification/demos/zhCN/max.demo.md
new file mode 100644
index 00000000000..65bf8b0f412
--- /dev/null
+++ b/src/notification/demos/zhCN/max.demo.md
@@ -0,0 +1,44 @@
+# 限制数量
+
+```html
+<n-notification-provider :max="3">
+   <Button />
+</n-notification-provider>
+```
+
+```js
+import { defineComponent, ref, h } from 'vue'
+import { useNotification, NButton } from 'naive-ui'
+
+const Button = {
+  setup () {
+    const notification = useNotification()
+    const number = ref(0)
+    return {
+      notification,
+      number
+    }
+  },
+  render () {
+    return h(
+      NButton,
+      {
+        onClick: () => {
+          this.number++
+          this.notification.info({
+            title: `通知框序号: ${this.number}`,
+            content: '你可以限制通知框的数量'
+          })
+        }
+      },
+      { default: '通知框的最大数: 3' }
+    )
+  }
+}
+
+export default defineComponent({
+  components: {
+    Button
+  }
+})
+```
diff --git a/src/notification/demos/zhCN/placement.demo.md b/src/notification/demos/zhCN/placement.demo.md
new file mode 100644
index 00000000000..653910e76cc
--- /dev/null
+++ b/src/notification/demos/zhCN/placement.demo.md
@@ -0,0 +1,64 @@
+# Placement
+
+```html
+<n-notification-provider :placement="placement">
+  <Buttons @changePlacement="changePlacement" />
+</n-notification-provider>
+```
+
+```js
+import { defineComponent, h, ref } from 'vue'
+import { useNotification, NButton } from 'naive-ui'
+
+const Buttons = {
+  emits: ['changePlacement'],
+  setup () {
+    const notification = useNotification()
+    const placementArray = [
+      { placement: 'top-left', text: '左上' },
+      { placement: 'top-right', text: '右上' },
+      { placement: 'bottom-left', text: '左下' },
+      { placement: 'bottom-right', text: '右下' }
+    ]
+    return {
+      notification,
+      placementArray
+    }
+  },
+  render () {
+    return this.placementArray.map((item) =>
+      h(
+        NButton,
+        {
+          onClick: () => {
+            this.$emit('changePlacement', item.placement)
+            this.notification.info({
+              title: item.placement,
+              content: 'You can change the placement'
+            })
+          },
+          style: {
+            marginRight: '10px'
+          }
+        },
+        { default: () => item.text }
+      )
+    )
+  }
+}
+
+export default defineComponent({
+  components: {
+    Buttons
+  },
+  setup () {
+    const placementRef = ref('top-right')
+    return {
+      placement: placementRef,
+      changePlacement (val) {
+        placementRef.value = val
+      }
+    }
+  }
+})
+```
diff --git a/src/notification/src/NotificationContainer.tsx b/src/notification/src/NotificationContainer.tsx
index b48f16fd3f4..006161061fe 100644
--- a/src/notification/src/NotificationContainer.tsx
+++ b/src/notification/src/NotificationContainer.tsx
@@ -1,4 +1,4 @@
-import { h, defineComponent, inject } from 'vue'
+import { h, defineComponent, inject, PropType } from 'vue'
 import { NScrollbar } from '../../_internal'
 import { notificationProviderInjectionKey } from './NotificationProvider'
 
@@ -8,6 +8,15 @@ export default defineComponent({
     scrollable: {
       type: Boolean,
       required: true
+    },
+    placement: {
+      type: String as PropType<
+      | 'top-left'
+      | 'top-right'
+      | 'bottom-left'
+      | 'bottom-right'
+      >,
+      required: true
     }
   },
   setup () {
@@ -21,12 +30,13 @@ export default defineComponent({
     }
   },
   render () {
-    const { $slots, scrollable, mergedClsPrefix, mergedTheme } = this
+    const { $slots, scrollable, mergedClsPrefix, mergedTheme, placement } = this
     return (
       <div
         class={[
           `${mergedClsPrefix}-notification-container`,
-          scrollable && `${mergedClsPrefix}-notification-container--scrollable`
+          scrollable && `${mergedClsPrefix}-notification-container--scrollable`,
+          `${mergedClsPrefix}-notification-container--${placement}`
         ]}
       >
         {scrollable ? (
diff --git a/src/notification/src/NotificationProvider.tsx b/src/notification/src/NotificationProvider.tsx
index f0532bbff33..7cdaa9c6614 100644
--- a/src/notification/src/NotificationProvider.tsx
+++ b/src/notification/src/NotificationProvider.tsx
@@ -49,6 +49,7 @@ export interface NotificationApiInjection {
   error: TypedCreate
   /** @deprecated */
   open: Create
+  destroyAll: () => void
 }
 
 export type NotificationProviderInst = NotificationApiInjection
@@ -75,6 +76,16 @@ const notificationProviderProps = {
   scrollable: {
     type: Boolean,
     default: true
+  },
+  max: Number,
+  placement: {
+    type: String as PropType<
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    >,
+    default: 'top-right'
   }
 }
 
@@ -99,6 +110,10 @@ export default defineComponent({
         hide: destroy,
         deactivate: destroy
       })
+      const { max } = props
+      if (max && notificationListRef.value.length >= max) {
+        notificationListRef.value.shift()
+      }
       notificationListRef.value.push(notificationReactive)
       return notificationReactive
     }
@@ -130,7 +145,8 @@ export default defineComponent({
       success: apis[1],
       warning: apis[2],
       error: apis[3],
-      open
+      open,
+      destroyAll
     }
     provide(notificationApiInjectionKey, api)
     provide(notificationProviderInjectionKey, {
@@ -141,6 +157,11 @@ export default defineComponent({
     function open (options: NotificationOptions): NotificationReactive {
       return create(options)
     }
+    function destroyAll (): void {
+      Object.values(notificationListRef.value).forEach((notification) => {
+        notification.hide()
+      })
+    }
     return Object.assign(
       {
         mergedClsPrefix: mergedClsPrefixRef,
@@ -157,7 +178,10 @@ export default defineComponent({
         {renderSlot(this.$slots, 'default')}
         {this.notificationList.length ? (
           <Teleport to={this.to ?? 'body'}>
-            <NotificationContainer scrollable={this.scrollable}>
+            <NotificationContainer
+              scrollable={this.scrollable}
+              placement={this.placement}
+            >
               {{
                 default: () => {
                   return this.notificationList.map((notification) => {
diff --git a/src/notification/src/styles/index.cssr.ts b/src/notification/src/styles/index.cssr.ts
index 6ecbd77b69e..4a6224803e0 100644
--- a/src/notification/src/styles/index.cssr.ts
+++ b/src/notification/src/styles/index.cssr.ts
@@ -1,3 +1,4 @@
+import { CNode } from 'css-render'
 import { c, cB, cE, cM } from '../../../_utils/cssr'
 
 // vars:
@@ -28,10 +29,6 @@ export default c([
   cB('notification-container', `
     z-index: 4000;
     position: fixed;
-    top: 12px;
-    left: 0;
-    right: 0;
-    height: 0;
     overflow: visible;
     display: flex;
     flex-direction: column;
@@ -59,18 +56,51 @@ export default c([
         ])
       ])
     ]),
-    cM('scrollable', {
-      top: 0
-    }),
+    cM('top-right', `
+      right: 0;
+      top: 12px;
+    `, [
+      placementTransformStyle('top-right')
+    ]),
+    cM('top-left', `
+      left: 0;
+      top: 12px;
+    `, [
+      placementTransformStyle('top-left')
+    ]),
+    cM('bottom-right', `
+      right: 0;
+      bottom: 12px;
+    `, [
+      placementTransformStyle('bottom-right')
+    ]),
+    cM('bottom-left', `
+      left: 0;
+      bottom: 12px;
+    `, [
+      placementTransformStyle('bottom-left')
+    ]),
+    cM('scrollable', [
+      cM('top-right', `
+        top: 0;
+      `),
+      cM('top-left', `
+        top: 0;
+      `),
+      cM('bottom-right', `
+        bottom: 0;
+      `),
+      cM('bottom-left', `
+        bottom: 0;
+      `)
+    ]),
     cB('notification', [
       c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
         opacity: 0;
         margin-bottom: 0 !important;
-        transform: translateX(calc(100% + 16px));
       `),
       c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
         opacity: 1;
-        transform: translateX(0);
       `),
       c('&.notification-transition-leave-active', `
         transition:
@@ -209,3 +239,19 @@ export default c([
     ])
   ])
 ])
+
+function placementTransformStyle (placement: string): CNode {
+  const [position, direction] = placement.split('-')
+  const transformYEnter = position === 'top' ? '-100%' : '100%'
+  const transformYLeave = position === 'top' ? '0' : '0'
+  const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)'
+  const transformXLeave = '0'
+  return cB('notification', [
+    c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+      transform: translate(${transformXEnter}, ${transformYEnter});
+    `),
+    c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
+      transform: translate(${transformXLeave}, ${transformYLeave});
+    `)
+  ])
+}
diff --git a/src/notification/tests/Notification.spec.tsx b/src/notification/tests/Notification.spec.tsx
index 0ef3de51324..9654db55593 100644
--- a/src/notification/tests/Notification.spec.tsx
+++ b/src/notification/tests/Notification.spec.tsx
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { defineComponent, h, ref, Ref, nextTick } from 'vue'
+import { defineComponent, h, ref, Ref, nextTick, onMounted } from 'vue'
 import {
   NNotificationProvider,
   useNotification,
@@ -105,3 +105,107 @@ describe('n-notification', () => {
     })
   })
 })
+describe('notification-provider', () => {
+  it('props.max', (done) => {
+    const Test = defineComponent({
+      setup () {
+        const notification = useNotification()
+        notification.info({
+          title: 'info',
+          content: 'info'
+        })
+        notification.info({
+          title: 'info',
+          content: 'info'
+        })
+        notification.info({
+          title: 'info',
+          content: 'info'
+        })
+      },
+      render () {
+        return null
+      }
+    })
+    const wrapper = mount(NNotificationProvider, {
+      props: {
+        max: 2
+      },
+      slots: {
+        default: () => <Test />
+      }
+    })
+    void nextTick(() => {
+      expect(document.querySelectorAll('.n-notification').length).toBe(2)
+      wrapper.unmount()
+      done()
+    })
+  })
+  it('should work with `placement` prop', () => {
+    const Test = defineComponent({
+      setup () {
+        const notification = useNotification()
+        notification.info({
+          title: 'info',
+          content: 'info'
+        })
+      },
+      render () {
+        return null
+      }
+    })
+    const wrapper = mount(NNotificationProvider, {
+      slots: {
+        default: () => <Test />
+      }
+    })
+    process.nextTick(async () => {
+      expect(wrapper.find('.notification-container').classes()).toContain(
+        'notification-container--top-right'
+      )
+      await wrapper.setProps({ placement: 'top-left' })
+      expect(wrapper.find('.notification-container').classes()).toContain(
+        'notification-container--top-right'
+      )
+      await wrapper.setProps({ placement: 'bottom-right' })
+      expect(wrapper.find('.notification-container').classes()).toContain(
+        'notification-container--bottom-right'
+      )
+      await wrapper.setProps({ placement: 'bottom-left' })
+      expect(wrapper.find('.notification-container').classes()).toContain(
+        'notification-container--bottom-left'
+      )
+    })
+  })
+  it('should work with `destroyAll` method', () => {
+    const Test = defineComponent({
+      setup () {
+        const notification = useNotification()
+        onMounted(() => {
+          notification.info({
+            title: 'info',
+            content: 'info'
+          })
+          notification.info({
+            title: 'info',
+            content: 'info'
+          })
+          setTimeout(() => {
+            notification.destroyAll()
+          })
+        })
+      },
+      render () {
+        return null
+      }
+    })
+    const wrapper = mount(NNotificationProvider, {
+      slots: {
+        default: () => <Test />
+      }
+    })
+    process.nextTick(async () => {
+      expect(wrapper.find('.notification-container').exists()).toBe(false)
+    })
+  })
+})