Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(notify): [notify] refactor notify theme #2311

Merged
merged 7 commits into from
Oct 19, 2024
Merged

refactor(notify): [notify] refactor notify theme #2311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
de89d02
refactor(notify): fix demos
shenjunjian Oct 19, 2024
de91b4d
fix(notify): fix demos
shenjunjian Oct 19, 2024
a6f39a2
refactor(notify): refactor notify's theme
shenjunjian Oct 19, 2024
ae05f68
fix(notify): fix demos and docs
shenjunjian Oct 19, 2024
88f535d
fix(notify): fix
shenjunjian Oct 19, 2024
6ea33e4
fix(notify): fix
shenjunjian Oct 19, 2024
c0484d1
fix(notify): fix e2e test
shenjunjian Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions examples/sites/demos/apis/notify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,12 @@ export default {
{
name: 'duration',
type: 'number',
defaultValue: '4500',
defaultValue: '',
desc: {
'zh-CN': '自动关闭延时毫秒数',
'en-US': 'Automatic shutdown delay in milliseconds'
'zh-CN':
'通知自动关闭时间，单位毫秒数。 默认情况， <code>success info </code> 延时5秒 <code> warning error </code> 延时10秒自动关闭 ',
'en-US':
'Automatic notification shutdown time, in milliseconds. By default, <code>success info </code> Delay is 5 seconds. <code> warning error </code> Delay is 10 seconds'
},
mode: ['pc'],
pcDemo: 'duration'
Expand All @@ -59,11 +61,11 @@ export default {
'en-US': 'Notification message text, which can be customized using JSX.'
},
mode: ['pc'],
pcDemo: 'message'
pcDemo: 'basic-usage'
},
{
name: 'position',
type: "'top-right' | 'bottom-right'",
type: "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'",
defaultValue: "'bottom-right'",
desc: {
'zh-CN': '通知显示位置',
Expand Down Expand Up @@ -115,7 +117,7 @@ export default {
'en-US': 'Notification message title, which can be customized by JSX.'
},
mode: ['pc'],
pcDemo: 'title'
pcDemo: 'basic-usage'
},
{
name: 'type',
Expand Down
16 changes: 15 additions & 1 deletion examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div class="content">
<tiny-button @click="handleClick" :reset-time="0">弹出提示框</tiny-button>
<tiny-button @click="handleClickJxs" :reset-time="0">弹出提示框-jsx</tiny-button>
</div>
</template>

Expand All @@ -10,11 +11,24 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function handleClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
duration: 5000,
customClass: 'my-custom-cls'
})
}

function handleClickJxs() {
Notify({
type: 'info',
title: () => <h4>通知消息的标题</h4>,
message: () => (
<span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
),
position: 'top-right',
duration: 5000,
customClass: 'my-custom-cls'
})
}
</script>
5 changes: 3 additions & 2 deletions examples/sites/demos/pc/app/notify/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('notify#basic-usage')
await page.getByRole('button', { name: '弹出提示框' }).click()

const status = page.locator('.tiny-notify__icon-status')

await page.getByRole('button', { name: '弹出提示框' }).first().click()
await expect(status).toBeVisible()
await expect(page.getByRole('heading', { name: '通知消息的标题' })).toBeVisible()
await expect(
page.getByText('通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文')
).toBeVisible()
Expand Down
15 changes: 14 additions & 1 deletion examples/sites/demos/pc/app/notify/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div class="content">
<tiny-button @click="handleClick" :reset-time="0">弹出提示框</tiny-button>
<tiny-button @click="handleClickJxs" :reset-time="0">弹出提示框-jsx</tiny-button>
</div>
</template>

Expand All @@ -15,12 +16,24 @@ export default {
handleClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right',
duration: 5000,
customClass: 'my-custom-cls'
})
},
handleClickJxs() {
Notify({
type: 'info',
title: () => <h4>通知消息的标题</h4>,
message: () => (
<span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
),
position: 'top-right',
duration: 5000,
customClass: 'my-custom-cls'
})
}
}
}
Expand Down
18 changes: 0 additions & 18 deletions examples/sites/demos/pc/app/notify/message-composition-api.vue
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions examples/sites/demos/pc/app/notify/message.spec.ts
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions examples/sites/demos/pc/app/notify/message.vue
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ function baseClick() {
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
return false
},
duration: 500000,
position: 'top-right'
})
}
Expand All @@ -28,7 +27,6 @@ function baseClick2() {
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
duration: 500000,
position: 'top-right'
})
}
Expand Down
2 changes: 0 additions & 2 deletions examples/sites/demos/pc/app/notify/notify-events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export default {
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
return false
},
duration: 500000,
position: 'top-right'
})
},
Expand All @@ -32,7 +31,6 @@ export default {
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
duration: 500000,
position: 'top-right'
})
}
Expand Down
30 changes: 16 additions & 14 deletions examples/sites/demos/pc/app/notify/position-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
<template>
<div class="content">
<tiny-button @click="infoClick" :reset-time="0">默认 bottom-right</tiny-button>
<tiny-button @click="successClick" :reset-time="0">top-right</tiny-button>
<tiny-button @click="handleClick('top-left')" :reset-time="0">top-left</tiny-button>
<tiny-button @click="handleClick('top-right')" :reset-time="0">top-right</tiny-button>
<br />
<br />
<tiny-button @click="handleClick('bottom-left')" :reset-time="0">bottom-left</tiny-button>
<tiny-button @click="handleClick('bottom-right')" :reset-time="0">bottom-right</tiny-button>
</div>
</template>

<script setup lang="jsx">
<script setup>
import { Notify, Button as TinyButton } from '@opentiny/vue'

function infoClick() {
function handleClick(pos) {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文'
})
}

function successClick() {
Notify({
type: 'success',
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right'
position: pos
})
}
</script>

<style scoped>
.tiny-button {
min-width: 120px;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/notify/position.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
test('显示位置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('notify#position')
await page.getByRole('button', { name: '默认 bottom-right' }).click()
await page.getByRole('button', { name: 'bottom-right' }).click()
await page.getByRole('button', { name: 'top-right' }).click()
const bottom = page.locator('.bottom-right')
const bottomBox = await bottom.boundingBox()
Expand Down
29 changes: 16 additions & 13 deletions examples/sites/demos/pc/app/notify/position.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
<template>
<div class="content">
<tiny-button @click="infoClick" :reset-time="0">默认 bottom-right</tiny-button>
<tiny-button @click="successClick" :reset-time="0">top-right</tiny-button>
<tiny-button @click="handleClick('top-left')" :reset-time="0">top-left</tiny-button>
<tiny-button @click="handleClick('top-right')" :reset-time="0">top-right</tiny-button>
<br />
<br />
<tiny-button @click="handleClick('bottom-left')" :reset-time="0">bottom-left</tiny-button>
<tiny-button @click="handleClick('bottom-right')" :reset-time="0">bottom-right</tiny-button>
</div>
</template>

<script lang="jsx">
<script>
import { Notify, Button } from '@opentiny/vue'

export default {
components: {
TinyButton: Button
},
methods: {
infoClick() {
handleClick(pos) {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文'
})
},
successClick() {
Notify({
type: 'success',
title: '通知消息的标题',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
position: 'top-right'
position: pos
})
}
}
}
Comment on lines +12 to 28
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issues Found: Multiple instances of Notify still use the type property and dynamic JSX for title. Please review these usages to ensure consistency and prevent potential issues.

🔗 Analysis chain

LGTM! Please clarify changes to title and notification type.

The script changes look good overall. The consolidation of notification handling into a single handleClick method improves code organization and maintainability.

I have a couple of questions:

  1. The title is now a static string instead of JSX. Was this intentional? Does it reduce flexibility in any way?
  2. The type property has been removed from the Notify call. How does this affect the appearance or behavior of the notifications?

To help verify the impact of these changes, could you run the following script?

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other usages of Notify with title and type properties
# Expected result: Find other instances of Notify to compare implementation

rg --type vue 'Notify\({' -A 5 -B 1

Length of output: 119

Script:

#!/bin/bash
# Description: Check for other usages of Notify with title and type properties
# Expected result: Find other instances of Notify to compare implementation

rg --type vue 'Notify\(\{' -A 5 -B 1

Length of output: 66

Script:

#!/bin/bash
# Description: Check for other usages of Notify with title and type properties
# Expected result: Find other instances of Notify to compare implementation

rg --glob '*.vue' 'Notify\(\{' -A 5 -B 1

Length of output: 95098

</script>

<style scoped>
.tiny-button {
min-width: 120px;
}
</style>
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/notify/showClose-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ function baseClick() {
title: (h, params) => <h4>通知消息的标题</h4>,
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showClose: false,
position: 'top-right',
duration: 500000
position: 'top-right'
})
}
</script>
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/notify/showClose.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ export default {
title: (h, params) => <h4>通知消息的标题</h4>,
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showClose: false,
position: 'top-right',
duration: 500000
position: 'top-right'
})
}
}
Expand Down
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/notify/showIcon-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ function baseClick() {
title: (h, params) => <h4>通知消息的标题</h4>,
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showIcon: false,
position: 'top-right',
duration: 500000
position: 'top-right'
})
}
</script>
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/notify/showIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ export default {
title: (h, params) => <h4>通知消息的标题</h4>,
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
showIcon: false,
position: 'top-right',
duration: 500000
position: 'top-right'
})
}
}
Expand Down
18 changes: 0 additions & 18 deletions examples/sites/demos/pc/app/notify/title-composition-api.vue
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions examples/sites/demos/pc/app/notify/title.spec.ts
View file
Open in desktop

This file was deleted.

Loading
Loading