feat(useMessage): supports 'default' type

tusen-ai · Feb 27, 2022 · ad3522d · ad3522d
1 parent 4cae2f4
commit ad3522d
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 56 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -11,7 +11,8 @@
 ### Feats
 
 - `n-collapse` add `RTL` support.
-- `n-message` adds `show-icon` prop, closes [#2495](https://github.com/TuSimple/naive-ui/issues/2495).
+- `useMessage` adds `showIcon` prop, closes [#2495](https://github.com/TuSimple/naive-ui/issues/2495).
+- `useMessage` supports `'default'` `type`.
 
 ## 2.25.5 (2022-02-24)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -11,7 +11,8 @@
 ### Feats
 
 - `n-collapse` 添加 `RTL` 支持
-- `n-message` 新增 `show-icon` 属性，关闭 [#2495](https://github.com/TuSimple/naive-ui/issues/2495)
+- `useMessage` 新增 `showIcon` 属性，关闭 [#2495](https://github.com/TuSimple/naive-ui/issues/2495)
+- `useMessage` 支持 `'default'` 的 `type`
 
 ## 2.25.5 (2022-02-24)
 

diff --git a/src/message/demos/enUS/index.demo-entry.md b/src/message/demos/enUS/index.demo-entry.md
@@ -70,14 +70,15 @@ no-icon.vue
 
 #### MessageProvider Injection Methods
 
-| Name | Type | Description |
-| --- | --- | --- |
-| destroyAll | `() => void` | Destroy all popup messages. |
-| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use error type message. |
-| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use info type message. |
-| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use loading type message. |
-| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use success type message. |
-| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use warning type message. |
+| Name | Type | Description | Version |
+| --- | --- | --- | --- |
+| destroyAll | `() => void` | Destroy all popup messages. |  |
+| create | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use error type message. | NEXT_VERSION |
+| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use error type message. |  |
+| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use info type message. |  |
+| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use loading type message. |  |
+| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use success type message. |  |
+| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use warning type message. |  |
 
 #### MessageOption Properties
 
@@ -88,6 +89,8 @@ no-icon.vue
 | icon | `() => VNodeChild` | Message icon. |  |
 | keepAliveOnHover | `boolean` | Messages whether to destroy while hover. |  |
 | render | `MessageRenderMessage` | Render function of the entire message. | 2.24.0 |
+| showIcon | `boolean` | Whether to show icon. | NEXT_VERSION |
+| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading' \| 'default'` | Message type. | `'default'` NEXT_VERSION |
 | onAfterLeave | `() => void` | Callback after message disappeared. |  |
 | onClose | `() => void` | Callback when close icon is clicked. |  |
 | onLeave | `() => void` | Callback when message start to disappear. |  |
@@ -106,16 +109,17 @@ type MessageRenderMessage = (props: {
 
 #### MessageReactive Properties
 
-| Name | Type | Description |
-| --- | --- | --- |
-| closable | `boolean` | Whether to show close icon. |
-| content | `string \| (() => VNodeChild)` | Message content. |
-| destroy | `() => void` | Message destroy method. |
-| icon | `() => VNodeChild` | 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. |
+| Name | Type | Description | Version |
+| --- | --- | --- | --- |
+| closable | `boolean` | Whether to show close icon. |  |
+| content | `string \| (() => VNodeChild)` | Message content. |  |
+| destroy | `() => void` | Message destroy method. |  |
+| icon | `() => VNodeChild` | Message icon. |  |
+| keepAliveOnHover | `boolean` | Messages whether to destroy while hover |  |
+| showIcon | `boolean` | Whether to show icon. | NEXT_VERSION |
+| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading' \| 'default'` | Message type. | `'default'` NEXT_VERSION |
+| onAfterLeave | `() => void` | Callback after message disappeared. |  |
+| onLeave | `() => void` | Callback when message start to disappear. |  |
 
 #### MessageReactive Methods
 

diff --git a/src/message/demos/zhCN/index.demo-entry.md b/src/message/demos/zhCN/index.demo-entry.md
@@ -70,14 +70,15 @@ no-icon.vue
 
 #### MessageProvider Injection Methods
 
-| 名称 | 类型 | 说明 |
-| --- | --- | --- |
-| destroyAll | `() => void` | 销毁所有弹出的信息 |
-| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 error 类型的信息 |
-| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 info 类型的信息 |
-| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 loading 类型的信息 |
-| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 success 类型的信息 |
-| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 warning 类型的信息 |
+| 名称 | 类型 | 说明 | 版本 |
+| --- | --- | --- | --- |
+| destroyAll | `() => void` | 销毁所有弹出的信息 |  |
+| create | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 error 类型的信息 | NEXT_VERSION |
+| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 error 类型的信息 |  |
+| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 info 类型的信息 |  |
+| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 loading 类型的信息 |  |
+| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 success 类型的信息 |  |
+| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 warning 类型的信息 |  |
 
 #### MessageOption Properties
 
@@ -88,6 +89,8 @@ no-icon.vue
 | icon | `() => VNodeChild` | 信息图标 |  |
 | keepAliveOnHover | `boolean` | Hover 到信息上是否不销毁 |  |
 | render | `MessageRenderMessage` | 消息的渲染函数 | 2.24.0 |
+| showIcon | `boolean` | 是否展示图标 | NEXT_VERSION |
+| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading' \| 'default'` | 信息类型 | `'default'` NEXT_VERSION |
 | onAfterLeave | `() => void` | 信息消失动画结束的回调 |  |
 | onClose | `() => void` | 点击关闭图标的回调 |  |
 | onLeave | `() => void` | 信息开始消失的回调 |  |
@@ -106,16 +109,17 @@ type MessageRenderMessage = (props: {
 
 #### MessageReactive Properties
 
-| 名称 | 类型 | 说明 |
-| --- | --- | --- |
-| closable | `boolean` | 是否显示 close 图标 |
-| content | `string \| (() => VNodeChild)` | 信息内容 |
-| destroy | `() => void` | 销毁信息的方法 |
-| icon | `() => VNodeChild` | 信息图标 |
-| keepAliveOnHover | `boolean` | Hover 到信息上是否不销毁 |
-| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | 信息类型 |
-| onAfterLeave | `() => void` | 信息消失动画结束的回调 |
-| onLeave | `() => void` | 信息开始消失的回调 |
+| 名称 | 类型 | 说明 | 版本 |
+| --- | --- | --- | --- |
+| closable | `boolean` | 是否显示 close 图标 |  |
+| content | `string \| (() => VNodeChild)` | 信息内容 |  |
+| destroy | `() => void` | 销毁信息的方法 |  |
+| icon | `() => VNodeChild` | 信息图标 |  |
+| keepAliveOnHover | `boolean` | Hover 到信息上是否不销毁 |  |
+| showIcon | `boolean` | 是否展示图标 | NEXT_VERSION |
+| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading' \| 'default'` | 信息类型 | `'default'` NEXT_VERSION |
+| onAfterLeave | `() => void` | 信息消失动画结束的回调 |  |
+| onLeave | `() => void` | 信息开始消失的回调 |  |
 
 #### MessageReactive Methods
 

diff --git a/src/message/src/Message.tsx b/src/message/src/Message.tsx
@@ -31,7 +31,8 @@ const iconMap = {
   info: <InfoIcon />,
   success: <SuccessIcon />,
   warning: <WarningIcon />,
-  error: <ErrorIcon />
+  error: <ErrorIcon />,
+  default: null
 }
 
 export default defineComponent({
@@ -143,6 +144,7 @@ export default defineComponent({
       showIcon
     } = this
     onRender?.()
+    let iconNode: VNodeChild
     return (
       <div
         class={[`${mergedClsPrefix}-message-wrapper`, themeClass]}
@@ -163,19 +165,18 @@ export default defineComponent({
           <div
             class={`${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type`}
           >
-            {showIcon ? (
+            {(iconNode = createIconVNode(icon, type, mergedClsPrefix)) &&
+            showIcon ? (
               <div
                 class={`${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type`}
               >
                 <NIconSwitchTransition>
                   {{
-                    default: () => [
-                      createIconVNode(icon, type, mergedClsPrefix)
-                    ]
+                    default: () => iconNode
                   }}
                 </NIconSwitchTransition>
               </div>
-            ) : null}
+                ) : null}
             <div class={`${mergedClsPrefix}-message__content`}>
               {render(content)}
             </div>
@@ -201,19 +202,17 @@ function createIconVNode (
   if (typeof icon === 'function') {
     return icon()
   } else {
+    const innerIcon =
+      type === 'loading' ? (
+        <NBaseLoading clsPrefix={clsPrefix} strokeWidth={24} scale={0.85} />
+      ) : (
+        iconMap[type]
+      )
+    if (!innerIcon) return null
     return (
       <NBaseIcon clsPrefix={clsPrefix} key={type}>
         {{
-          default: () =>
-            type === 'loading' ? (
-              <NBaseLoading
-                clsPrefix={clsPrefix}
-                strokeWidth={24}
-                scale={0.85}
-              />
-            ) : (
-              iconMap[type]
-            )
+          default: () => innerIcon
         }}
       </NBaseIcon>
     )

diff --git a/src/message/src/MessageProvider.tsx b/src/message/src/MessageProvider.tsx
@@ -24,6 +24,7 @@ import { messageApiInjectionKey, messageProviderInjectionKey } from './context'
 type ContentType = string | (() => VNodeChild)
 
 export interface MessageApiInjection {
+  create: (content: ContentType, options?: MessageOptions) => MessageReactive
   info: (content: ContentType, options?: MessageOptions) => MessageReactive
   success: (content: ContentType, options?: MessageOptions) => MessageReactive
   warning: (content: ContentType, options?: MessageOptions) => MessageReactive
@@ -95,6 +96,9 @@ export default defineComponent({
     const messageListRef = ref<PrivateMessageReactive[]>([])
     const messageRefs = ref<{ [key: string]: PrivateMessageRef }>({})
     const api: MessageApiInjection = {
+      create (content: ContentType, options?: MessageOptions) {
+        return create(content, { type: 'default', ...options })
+      },
       info (content: ContentType, options?: MessageOptions) {
         return create(content, { ...options, type: 'info' })
       },

diff --git a/src/message/src/styles/index.cssr.ts b/src/message/src/styles/index.cssr.ts
@@ -15,6 +15,7 @@ import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expa
 // --n-text-color
 // --n-color
 // --n-box-shadow
+// --n-icon-color-default
 // --n-icon-color-info
 // --n-icon-color-success
 // --n-icon-color-warning
@@ -75,7 +76,7 @@ export default c([
       font-size: var(--n-icon-size);
       flex-shrink: 0;
     `, [
-      ['info', 'success', 'warning', 'error', 'loading'].map((type) =>
+      ['default', 'info', 'success', 'warning', 'error', 'loading'].map((type) =>
         cM(`${type}-type`, [
           c('> *', `
             color: var(--n-icon-color-${type});

diff --git a/src/message/src/types.ts b/src/message/src/types.ts
@@ -1,7 +1,13 @@
 import { VNodeChild } from 'vue'
 import type { MessageSetupProps } from './message-props'
 
-export type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading'
+export type MessageType =
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'loading'
+  | 'default'
 
 // We should export keepAliveOnHover since it's not managed by users
 export type RenderMessageProps = Pick<

diff --git a/src/message/styles/light.ts b/src/message/styles/light.ts
@@ -21,26 +21,33 @@ export const self = (vars: ThemeCommonVars) => {
   } = vars
   return {
     ...commonVariables,
+    textColor: textColor2,
     textColorInfo: textColor2,
     textColorSuccess: textColor2,
     textColorError: textColor2,
     textColorWarning: textColor2,
     textColorLoading: textColor2,
+    color: popoverColor,
     colorInfo: popoverColor,
     colorSuccess: popoverColor,
     colorError: popoverColor,
     colorWarning: popoverColor,
     colorLoading: popoverColor,
+    boxShadow: boxShadow2,
     boxShadowInfo: boxShadow2,
     boxShadowSuccess: boxShadow2,
     boxShadowError: boxShadow2,
     boxShadowWarning: boxShadow2,
     boxShadowLoading: boxShadow2,
+    iconColor: textColor2,
     iconColorInfo: infoColor,
     iconColorSuccess: successColor,
     iconColorWarning: warningColor,
     iconColorError: errorColor,
     iconColorLoading: primaryColor,
+    closeColor: closeColor,
+    closeColorHover: closeColorHover,
+    closeColorPressed: closeColorPressed,
     closeColorInfo: closeColor,
     closeColorHoverInfo: closeColorHover,
     closeColorPressedInfo: closeColorPressed,