feat(message-provider): add duration & maxVisible props (#375)

Co-authored-by: wanli.song@tusimple.ai <wanli.song@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -11,6 +11,7 @@
 - `n-tree-select` pressing arrow down can open menu, ref [#300](https://github.com/TuSimple/naive-ui/issues/300).
 - `n-cascader` pressing arrow down can open menu, ref [#300](https://github.com/TuSimple/naive-ui/issues/300).
 - `n-popover`'s `trigger` prop support `'focus'`, closes [#477](https://github.com/TuSimple/naive-ui/issues/477).
+- `n-message-provider` add `duration` and `max-visible` props.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,7 @@
 - `n-tree-select` 按下箭头会打开菜单，有关 [#300](https://github.com/TuSimple/naive-ui/issues/300)
 - `n-cascader` 按下箭头会打开菜单，有关 [#300](https://github.com/TuSimple/naive-ui/issues/300)
 - `n-popover` 的 `trigger` 属性支持 `'focus'`，关闭 [#477](https://github.com/TuSimple/naive-ui/issues/477)
+- `n-message-provider` 新增 `duration` 和 `max-visible` 属性
 
 ### Fixes
 

src/message/demos/enUS/index.demo-entry.md

@@ -52,6 +52,8 @@ multiple-line
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| duration | `number` | `3000` | All messages's default duration. |
+| max-visible | `number` | `undefined` | Limit the number of message to display. |
 | to | `string \| HTMLElement` | `'body'` | Container node of message container. |
 
 ### MessageProvider Injection API

src/message/demos/zhCN/index.demo-entry.md

@@ -50,9 +50,11 @@ multiple-line
 
 ### MessageProvider Props
 
-| 名称 | 类型                    | 默认值   | 说明                   |
-| ---- | ----------------------- | -------- | ---------------------- |
-| to   | `string \| HTMLElement` | `'body'` | Message 容器节点的位置 |
+| 名称       | 类型                    | 默认值      | 说明                   |
+| ---------- | ----------------------- | ----------- | ---------------------- |
+| duration   | `number`                | `3000`      | 所有 Message 默认的持续时长 |
+| max-visible | `number`                | `undefined` | 限制提示信息显示的个数 |
+| to         | `string \| HTMLElement` | `'body'`    | Message 容器节点的位置 |
 
 ### MessageProvider Injection API
 

src/message/src/MessageProvider.tsx

@@ -10,7 +10,8 @@ import {
   InjectionKey,
   ExtractPropTypes,
   renderSlot,
-  Ref
+  Ref,
+  toRef
 } from 'vue'
 import { createId } from 'seemly'
 import { ExtractPublicPropTypes, omit } from '../../_utils'
@@ -66,7 +67,12 @@ const messageProviderProps = {
   to: {
     type: [String, Object],
     default: undefined
-  }
+  },
+  duration: {
+    type: Number,
+    default: 3000
+  },
+  maxVisible: Number
 }
 
 export type MessageProviderProps = ExtractPublicPropTypes<
@@ -119,6 +125,10 @@ export default defineComponent({
           messageRefs.value[key].hide()
         }
       })
+      const { maxVisible } = props
+      if (maxVisible && messageListRef.value.length >= maxVisible) {
+        messageListRef.value.shift()
+      }
       messageListRef.value.push(messageReactive)
       return messageReactive
     }
@@ -159,6 +169,7 @@ export default defineComponent({
                     internalKey={message.key}
                     onInternalAfterLeave={this.handleAfterLeave}
                     {...omit(message, ['destroy'], undefined)}
+                    duration={this.duration}
                   />
                 )
               })}

src/message/tests/Message.spec.tsx

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, nextTick } from 'vue'
 import { NMessageProvider, useMessage } from '../index'
 
 const Provider = defineComponent({
   render () {
-    return <NMessageProvider>{this.$slots}</NMessageProvider>
+    return <NMessageProvider maxVisible={1}>{this.$slots}</NMessageProvider>
   }
 })
 
@@ -23,6 +23,63 @@ describe('n-message', () => {
         return null
       }
     })
-    mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
+    const wrapper = mount(() => (
+      <Provider>{{ default: () => <Test /> }}</Provider>
+    ))
+    wrapper.unmount()
+  })
+  it('maxVisible work on messageProvider', () => {
+    const Test = defineComponent({
+      setup () {
+        const message = useMessage()
+        message.info('string')
+        message.info('string1')
+        message.info('string2')
+        message.info('string3')
+      },
+      render () {
+        return null
+      }
+    })
+    const wrapper = mount(NMessageProvider, {
+      props: {
+        maxVisible: 2
+      },
+      slots: {
+        default: () => <Test />
+      }
+    })
+    void nextTick(() => {
+      expect(document.querySelectorAll('.n-message').length).toBe(2)
+      wrapper.unmount()
+    })
+  })
+  it('duration work on messageProvider', () => {
+    const Test = defineComponent({
+      setup () {
+        const message = useMessage()
+        message.info('string')
+      },
+      render () {
+        return null
+      }
+    })
+    const wrapper = mount(NMessageProvider, {
+      props: {
+        duration: 1000
+      },
+      slots: {
+        default: () => <Test />
+      }
+    })
+    void nextTick(() => {
+      setTimeout(() => {
+        expect(document.querySelector('.n-message')).toBe(true)
+      }, 500)
+      setTimeout(() => {
+        expect(document.querySelector('.n-message')).toBe(false)
+      }, 1200)
+      wrapper.unmount()
+    })
   })
 })