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: [email protected] <[email protected]>
tusen-ai · Nov 27, 2021 · 297aaae · 297aaae
1 parent db4cbc0
commit 297aaae
Show file tree

Hide file tree

Showing 12 changed files with 435 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
+  }
+})
+```
diff --git a/src/notification/demos/enUS/placement.demo.md 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
@@ -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
@@ -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
@@ -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
@@ -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 ? (