feat(message): add keepAliveOnHover option (#1039)

* feat(message): hover message not auto close * feat(message): update docs * feat(n-message): optimization * update changelog * Apply suggestions from code review Co-authored-by: Jiwen Bai <56228105@qq.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Sep 4, 2021 · 4ac6287 · 4ac6287
1 parent 986c0be
commit 4ac6287
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 24 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -23,6 +23,8 @@
 - `n-dropdown` option add `props` prop, closes [#813](https://github.com/TuSimple/naive-ui/issues/813).
 - `n-data-table` supports multi-selection by holding down `shift`, closes [#554](https://github.com/TuSimple/naive-ui/issues/554).
 - `n-tree-select` add `check-strategy` prop, closes [#624](https://github.com/TuSimple/naive-ui/issues/624).
+- `n-message` option add `keepAliveOnHover`, closes [#1036](https://github.com/TuSimple/naive-ui/issues/1036).
+- `n-message-provider` add `keep-alive-on-hover` prop, closes [#1036](https://github.com/TuSimple/naive-ui/issues/1036).
 - `n-upload` export `UploadFile` type.
 - `n-cascader` export `CascaderOption` type.
 - `n-mention` export `MentionOption` type.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -23,6 +23,8 @@
 - `n-dropdown` 选项新增 `props` 属性，关闭 [#813](https://github.com/TuSimple/naive-ui/issues/813)
 - `n-data-table` 支持按住 `shift` 进行多选操作，关闭 [#554](https://github.com/TuSimple/naive-ui/issues/554)
 - `n-tree-select` 增加 `check-strategy` 属性，关闭 [#624](https://github.com/TuSimple/naive-ui/issues/624)
+- `n-message` 选项增加 `keepAliveOnHover` 属性，关闭 [#1036](https://github.com/TuSimple/naive-ui/issues/1036).
+- `n-message-provider` 新增 `keep-alive-on-hover` 属性，关闭 [#1036](https://github.com/TuSimple/naive-ui/issues/1036).
 - `n-upload` 导出 `UploadFile` 类型
 - `n-cascader` 导出 `CascaderOption` 类型
 - `n-mention` 导出 `MentionOption` 类型

diff --git a/src/message/demos/enUS/basic.demo.md b/src/message/demos/enUS/basic.demo.md
@@ -2,7 +2,7 @@
 
 ```html
 <n-space>
-  <n-button @click="info"> Info </n-button>
+  <n-button @click="info"> Info(Hover will keep alive) </n-button>
   <n-button @click="error"> Error </n-button>
   <n-button @click="warning"> Warning </n-button>
   <n-button @click="success"> Success </n-button>
@@ -18,7 +18,12 @@ export default {
     const message = useMessage()
     return {
       info () {
-        message.info("I don't know why nobody told you how to unfold your love")
+        message.info(
+          "I don't know why nobody told you how to unfold your love",
+          {
+            keepAliveOnHover: true
+          }
+        )
       },
       error () {
         message.error('Once upon a time you dressed so fine')

diff --git a/src/message/demos/enUS/index.demo-entry.md b/src/message/demos/enUS/index.demo-entry.md
@@ -56,6 +56,7 @@ placement
 | --- | --- | --- | --- |
 | closable | `boolean` | All messages whether to show close icon. |
 | duration | `number` | `3000` | All messages's default duration. |
+| keepAliveOnHover | `boolean` | `false` | All messages whether to destroy while hover |
 | max | `number` | `undefined` | Limit the number of message to display. |
 | placement | `top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right ` | `top` | All message's placement. |
 | to | `string \| HTMLElement` | `'body'` | Container node of message container. |
@@ -75,14 +76,15 @@ placement
 
 #### MessageOption Properties
 
-| Name         | Type          | Description                               |
-| ------------ | ------------- | ----------------------------------------- |
-| closable     | `boolean`     | Whether to show close icon.               |
-| duration     | `number`      | The duration of the message.              |
-| icon         | `() => VNode` | Message icon.                             |
-| onAfterLeave | `() => void`  | Callback after message disappeared.       |
-| onClose      | `() => void`  | Callback when close icon is clicked.      |
-| onLeave      | `() => void`  | Callback when message start to disappear. |
+| Name             | Type          | Description                               |
+| ---------------- | ------------- | ----------------------------------------- |
+| closable         | `boolean`     | Whether to show close icon.               |
+| duration         | `number`      | The duration of the message.              |
+| icon             | `() => VNode` | Message icon.                             |
+| keepAliveOnHover | `boolean`     | Messages whether to destroy while hover   |
+| onAfterLeave     | `() => void`  | Callback after message disappeared.       |
+| onClose          | `() => void`  | Callback when close icon is clicked.      |
+| onLeave          | `() => void`  | Callback when message start to disappear. |
 
 #### MessageReactive Properties
 
@@ -92,6 +94,7 @@ placement
 | content | `string \| (() => VNodeChild)` | Message content. |
 | destroy | `() => void` | Message destroy method. |
 | icon | `() => VNode` | Message icon. |
+| keepAliveOnHover | `boolean` | Messages whether to destroy while hover |
 | type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | Message type. |
 | onAfterLeave | `() => void` | Callback after message disappeared. |
 | onLeave | `() => void` | Callback when message start to disappear. |

diff --git a/src/message/demos/zhCN/basic.demo.md b/src/message/demos/zhCN/basic.demo.md
@@ -2,7 +2,7 @@
 
 ```html
 <n-space>
-  <n-button @click="info"> 信息 </n-button>
+  <n-button @click="info"> 信息（Hover不消失）</n-button>
   <n-button @click="error"> 错误 </n-button>
   <n-button @click="warning"> 警告 </n-button>
   <n-button @click="success"> 成功 </n-button>
@@ -18,7 +18,12 @@ export default {
     const message = useMessage()
     return {
       info () {
-        message.info("I don't know why nobody told you how to unfold your love")
+        message.info(
+          "I don't know why nobody told you how to unfold your love",
+          {
+            keepAliveOnHover: true
+          }
+        )
       },
       error () {
         message.error('Once upon a time you dressed so fine')

diff --git a/src/message/demos/zhCN/index.demo-entry.md b/src/message/demos/zhCN/index.demo-entry.md
@@ -56,6 +56,7 @@ placement
 | --- | --- | --- | --- |
 | closable | `boolean` | 所有 Message 是否显示 close 图标 |
 | duration | `number` | `3000` | 所有 Message 默认的持续时长 |
+| keepAliveOnHover | `boolean` | `false` | 所有 Message 在 Hover 到信息上时是否不销毁 |
 | max | `number` | `undefined` | 限制提示信息显示的个数 |
 | placement | `top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right ` | `top` | 所有 Message 显示的位置 |
 | to | `string \| HTMLElement` | `'body'` | Message 容器节点的位置 |
@@ -75,14 +76,15 @@ placement
 
 #### MessageOption Properties
 
-| 名称         | 类型          | 说明                   |
-| ------------ | ------------- | ---------------------- |
-| closable     | `boolean`     | 是否显示 close 图标    |
-| duration     | `number`      | 信息展示的时长         |
-| icon         | `() => VNode` | 信息图标               |
-| onAfterLeave | `() => void`  | 信息消失动画结束的回调 |
-| onClose      | `() => void`  | 点击关闭图标的回调     |
-| onLeave      | `() => void`  | 信息开始消失的回调     |
+| 名称             | 类型          | 说明                     |
+| ---------------- | ------------- | ------------------------ |
+| closable         | `boolean`     | 是否显示 close 图标      |
+| duration         | `number`      | 信息展示的时长           |
+| icon             | `() => VNode` | 信息图标                 |
+| keepAliveOnHover | `boolean`     | Hover 到信息上是否不销毁 |
+| onAfterLeave     | `() => void`  | 信息消失动画结束的回调   |
+| onClose          | `() => void`  | 点击关闭图标的回调       |
+| onLeave          | `() => void`  | 信息开始消失的回调       |
 
 #### MessageReactive Properties
 
@@ -92,6 +94,7 @@ placement
 | content | `string \| (() => VNodeChild)` | 信息内容 |
 | destroy | `() => void` | 销毁信息的方法 |
 | icon | `() => VNode` | 信息图标 |
+| keepAliveOnHover | `boolean` | Hover 到信息上是否不销毁 |
 | type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | 信息类型 |
 | onAfterLeave | `() => void` | 信息消失动画结束的回调 |
 | onLeave | `() => void` | 信息开始消失的回调 |

diff --git a/src/message/src/Message.tsx b/src/message/src/Message.tsx
@@ -123,6 +123,8 @@ export default defineComponent({
     return (
       <div
         class={`${mergedClsPrefix}-message-wrapper`}
+        onMouseenter={this.onMouseenter}
+        onMouseleave={this.onMouseleave}
         style={{
           ...(cssVars as CSSProperties),
           alignItems: this.placement.startsWith('top')

diff --git a/src/message/src/MessageEnvironment.tsx b/src/message/src/MessageEnvironment.tsx
@@ -27,11 +27,20 @@ export default defineComponent({
     const timerIdRef = ref<number | null>(null)
     const showRef = ref<boolean>(true)
     onMounted(() => {
-      const { duration } = props
-      if (duration) {
+      setHideTimeout()
+    })
+    function setHideTimeout (): void {
+      const { duration, keepAliveOnHover } = props
+      if (duration && (timerIdRef.value === null || keepAliveOnHover)) {
         timerIdRef.value = window.setTimeout(hide, duration)
       }
-    })
+    }
+    function clearHideTimeout (): void {
+      const { value: timerId } = timerIdRef
+      if (timerId && props.keepAliveOnHover) {
+        window.clearTimeout(timerId)
+      }
+    }
     function hide (): void {
       const { value: timerId } = timerIdRef
       const { onHide } = props
@@ -59,11 +68,14 @@ export default defineComponent({
     function deactivate (): void {
       hide()
     }
+
     return {
       show: showRef,
       hide,
       handleClose,
       handleAfterLeave,
+      handleMouseLeave: setHideTimeout,
+      handleMouseEnter: clearHideTimeout,
       deactivate
     }
   },
@@ -83,6 +95,8 @@ export default defineComponent({
                 icon={this.icon}
                 closable={this.closable}
                 onClose={this.handleClose}
+                onMouseenter={this.handleMouseEnter}
+                onMouseleave={this.handleMouseLeave}
               />
             ) : null
           ]

diff --git a/src/message/src/MessageProvider.tsx b/src/message/src/MessageProvider.tsx
@@ -24,6 +24,7 @@ import { MessageTheme } from '../styles'
 export interface MessageOptions {
   duration?: number
   closable?: boolean
+  keepAliveOnHover?: boolean
   icon?: () => VNodeChild
   onClose?: () => void
   onLeave?: () => void
@@ -48,6 +49,7 @@ export interface MessageReactive {
   content?: ContentType
   duration?: number
   closable?: boolean
+  keepAliveOnHover?: boolean
   icon?: () => VNodeChild
   onClose?: () => void
   destroy: () => void
@@ -71,6 +73,7 @@ const messageProviderProps = {
     type: Number,
     default: 3000
   },
+  keepAliveOnHover: Boolean,
   max: Number,
   placement: {
     type: String as PropType<
@@ -200,6 +203,11 @@ export default defineComponent({
                         ? this.duration
                         : message.duration
                     }
+                    keepAliveOnHover={
+                      message.keepAliveOnHover === undefined
+                        ? this.keepAliveOnHover
+                        : message.keepAliveOnHover
+                    }
                     closable={
                       message.closable === undefined
                         ? this.closable

diff --git a/src/message/src/message-props.ts b/src/message/src/message-props.ts
@@ -12,5 +12,8 @@ export const messageProps = {
   string | number | (() => VNodeChild)
   >,
   closable: Boolean,
-  onClose: Function as PropType<() => void>
+  keepAliveOnHover: Boolean,
+  onClose: Function as PropType<() => void>,
+  onMouseenter: Function as PropType<() => void>,
+  onMouseleave: Function as PropType<() => void>
 } as const