mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(message): content & option type not correct

Browse Source
This commit is contained in:
07akioni 2021-06-19 01:54:00 +08:00
parent 0fb8f0cc1e
commit 59e02912a9
9 changed files with 94 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.en-US.md
View File

@ -15,6 +15,7 @@
- Fix `n-input` jitter when Chinese and English characters switch input, closes [#174](https://github.com/TuSimple/naive-ui/issues/174).
- Fix `n-icon` use setup script, `$parent` is an empty object by default, and access `$parent.$options` will be `undefined`.
- Fix `n-notification` position not correct.
- Fix `n-message` content & option type not correct.
## 2.12.0 (2020-06-16)

1
CHANGELOG.zh-CN.md
View File

@ -15,6 +15,7 @@
- 修复 `n-input` 中英文字符切换输入时抖动的问题，关闭[#174](https://github.com/TuSimple/naive-ui/issues/174)
- 修复 `n-icon` 在使用 setup script 时，`$parent` 默认是一个空对象，访问 `$parent.$options` 会是 `undefined`
- 修复 `n-notification` 位置不正确
- 修复 `n-message` 的 content & option 类型不正确
## 2.12.0 (2020-06-16)

23
src/_internal/fade-in-expand-transition/src/FadeInExpandTransition.ts
View File

@ -3,24 +3,13 @@ import { h, Transition, TransitionGroup, defineComponent, PropType } from 'vue'
export default defineComponent({
name: 'FadeInExpandTransition',
props: {
appear: {
type: Boolean,
default: false
},
group: {
type: Boolean,
default: false
},
mode: {
type: String as PropType<'in-out' | 'out-in' | 'default' | undefined>,
default: undefined
},
appear: Boolean,
group: Boolean,
mode: String as PropType<'in-out' | 'out-in' | 'default'>,
onLeave: Function,
onAfterLeave: Function,
onAfterEnter: Function,
width: {
type: Boolean,
default: false
},
width: Boolean,
// reverse mode is only used in tree
// it make it from expanded to collapsed after mounted
reverse: Boolean
@ -41,6 +30,8 @@ export default defineComponent({
el.style.maxHeight = '0'
}
void el.offsetWidth
const { onLeave } = props
if (onLeave) onLeave()
}
function handleAfterLeave (el: HTMLElement): void {
if (props.width) {

30
src/message/demos/enUS/index.demo-entry.md
View File

@ -60,21 +60,22 @@ multiple-line
| Name | Type | Description |
| --- | --- | --- |
| error | `(content: string, option?: MessageOption) => MessageReactive` | |
| info | `(content: string, option?: MessageOption) => MessageReactive` | |
| loading | `(content: string, option?: MessageOption) => MessageReactive` | |
| success | `(content: string, option?: MessageOption) => MessageReactive` | |
| warning | `(content: string, option?: MessageOption) => MessageReactive` | |
| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
#### MessageOption Properties
| Name | Type | Description |
| --- | --- | --- |
| closable | `boolean` | |
| content | `string \| number \| boolean \| (() => VNodeChild)` | Message content. |
| icon | `() => VNode` | Message icon. |
| onAfterLeave | `Function` | Callback after message disappeared. |
| onLeave | `Function` | Callback when message start to disappear. |
| Name | Type | Description |
| ------------ | ------------- | ----------------------------------------- |
| closable | `boolean` | |
| duration | `number` | |
| 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. |
#### MessageReactive Properties
@ -82,10 +83,11 @@ multiple-line
| --- | --- | --- |
| closable | `boolean` | |
| content | `string \| (() => VNodeChild)` | Message content. |
| destory | `() => void` | |
| icon | `() => VNode` | Message icon. |
| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | |
| onAfterLeave | `Function` | Callback after message disappeared. |
| onLeave | `Function` | Callback when message start to disappear. |
| onAfterLeave | `() => void` | Callback after message disappeared. |
| onLeave | `() => void` | Callback when message start to disappear. |
#### MessageReactive Methods

32
src/message/demos/zhCN/index.demo-entry.md
View File

@ -60,32 +60,34 @@ multiple-line
| 名称 | 类型 | 说明 |
| --- | --- | --- |
| error | `(content: string, option?: MessageOption) => MessageReactive` | |
| info | `(content: string, option?: MessageOption) => MessageReactive` | |
| loading | `(content: string, option?: MessageOption) => MessageReactive` | |
| success | `(content: string, option?: MessageOption) => MessageReactive` | |
| warning | `(content: string, option?: MessageOption) => MessageReactive` | |
| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
#### MessageOption Properties
| 名称 | 类型 | 说明 |
| ------------ | ------------------------------ | ---------------------- |
| closable | `boolean` | |
| content | `string \| (() => VNodeChild)` | 信息内容 |
| icon | `() => VNode` | 信息图标 |
| onAfterLeave | `Function` | 信息消失动画结束的回调 |
| onLeave | `Function` | 信息开始消失的回调 |
| 名称 | 类型 | 说明 |
| ------------ | ------------- | ---------------------- |
| closable | `boolean` | |
| duration | `number` | |
| icon | `() => VNode` | 信息图标 |
| onAfterLeave | `() => void` | 信息消失动画结束的回调 |
| onClose | `() => void` | 点击关闭图标的回调 |
| onLeave | `() => void` | 信息开始消失的回调 |
#### MessageReactive Properties
| 名称 | 类型 | 说明 |
| --- | --- | --- |
| closable | `boolean` | |
| content | `string \| number \| boolean \| (() => VNodeChild)` | 信息内容 |
| content | `string \| (() => VNodeChild)` | 信息内容 |
| destory | `() => void` | |
| icon | `() => VNode` | 信息图标 |
| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | |
| onAfterLeave | `Function` | 信息消失动画结束的回调 |
| onLeave | `Function` | 信息开始消失的回调 |
| onAfterLeave | `() => void` | 信息消失动画结束的回调 |
| onLeave | `() => void` | 信息开始消失的回调 |
#### MessageReactive Methods

15
src/message/src/MessageEnvironment.tsx
View File

@ -12,6 +12,7 @@ export default defineComponent({
default: 3000
},
onAfterLeave: Function,
onLeave: Function,
internalKey: {
type: String,
required: true
@ -47,12 +48,8 @@ export default defineComponent({
hide()
}
function handleAfterLeave (): void {
const {
onAfterLeave,
onInternalAfterLeave,
onAfterHide,
internalKey
} = props
const { onAfterLeave, onInternalAfterLeave, onAfterHide, internalKey } =
props
if (onAfterLeave) onAfterLeave()
if (onInternalAfterLeave) onInternalAfterLeave(internalKey)
// deprecated
@ -72,7 +69,11 @@ export default defineComponent({
},
render () {
return (
<NFadeInExpandTransition appear onAfterLeave={this.handleAfterLeave}>
<NFadeInExpandTransition
appear
onAfterLeave={this.handleAfterLeave}
onLeave={this.onLeave}
>
{{
default: () => [
this.show ? (

28
src/message/src/MessageProvider.tsx
View File

@ -24,21 +24,25 @@ export interface MessageOptions {
closable?: boolean
icon?: () => VNodeChild
onClose?: () => void
onLeave?: () => void
onAfterLeave?: () => void
}
type ContentType = string | (() => VNodeChild)
export interface MessageApiInjection {
info: (content: string, options?: MessageOptions) => MessageReactive
success: (content: string, options?: MessageOptions) => MessageReactive
warning: (content: string, options?: MessageOptions) => MessageReactive
error: (content: string, options?: MessageOptions) => MessageReactive
loading: (content: string, options?: MessageOptions) => MessageReactive
info: (content: ContentType, options?: MessageOptions) => MessageReactive
success: (content: ContentType, options?: MessageOptions) => MessageReactive
warning: (content: ContentType, options?: MessageOptions) => MessageReactive
error: (content: ContentType, options?: MessageOptions) => MessageReactive
loading: (content: ContentType, options?: MessageOptions) => MessageReactive
}
export const messageApiInjectionKey: InjectionKey<MessageApiInjection> =
Symbol('messageApi')
export interface MessageReactive {
content?: string
content?: ContentType
duration?: number
closable?: boolean
icon?: () => VNodeChild
@ -84,19 +88,19 @@ export default defineComponent({
const messageListRef = ref<PrivateMessageReactive[]>([])
const messageRefs = ref<{ [key: string]: PrivateMessageRef }>({})
const api: MessageApiInjection = {
info (content: string, options?: MessageOptions) {
info (content: ContentType, options?: MessageOptions) {
return create(content, { ...options, type: 'info' })
},
success (content: string, options?: MessageOptions) {
success (content: ContentType, options?: MessageOptions) {
return create(content, { ...options, type: 'success' })
},
warning (content: string, options?: MessageOptions) {
warning (content: ContentType, options?: MessageOptions) {
return create(content, { ...options, type: 'warning' })
},
error (content: string, options?: MessageOptions) {
error (content: ContentType, options?: MessageOptions) {
return create(content, { ...options, type: 'error' })
},
loading (content: string, options?: MessageOptions) {
loading (content: ContentType, options?: MessageOptions) {
return create(content, { ...options, type: 'loading' })
}
}
@ -105,7 +109,7 @@ export default defineComponent({
mergedClsPrefixRef
})
provide(messageApiInjectionKey, api)
function create (content: string, options = {}): MessageReactive {
function create (content: ContentType, options = {}): MessageReactive {
const key = createId()
const messageReactive = reactive({
...options,

8
src/message/tests/Message.spec.ts
View File

@ -1,8 +0,0 @@
import { mount } from '@vue/test-utils'
import { NMessageProvider } from '../index'
describe('n-message', () => {
it('should work with import on demand', () => {
mount(NMessageProvider)
})
})

28
src/message/tests/Message.spec.tsx Normal file
View File

@ -0,0 +1,28 @@
import { mount } from '@vue/test-utils'
import { defineComponent, h } from 'vue'
import { NMessageProvider, useMessage } from '../index'
const Provider = defineComponent({
render () {
return <NMessageProvider>{this.$slots}</NMessageProvider>
}
})
describe('n-message', () => {
it('should work with import on demand', () => {
mount(NMessageProvider)
})
it('should has correct type', () => {
const Test = defineComponent({
setup () {
const message = useMessage()
message.info('string')
message.info(() => 'string')
},
render () {
return null
}
})
mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
})
})