You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.0 KiB
101 lines
2.0 KiB
/* eslint-disable no-console */
|
|
import '../assets/index.less'
|
|
import Notification from '../index'
|
|
let notification = null
|
|
Notification.newInstance({
|
|
maxCount: 10,
|
|
}, (n) => { notification = n })
|
|
|
|
function simpleFn () {
|
|
notification.notice({
|
|
content: (h) => {
|
|
return <span>simple show</span>
|
|
},
|
|
onClose () {
|
|
console.log('simple close')
|
|
},
|
|
})
|
|
}
|
|
|
|
function durationFn () {
|
|
notification.notice({
|
|
content: (h) => {
|
|
return <span>can not close...</span>
|
|
},
|
|
duration: null,
|
|
})
|
|
}
|
|
|
|
function closableFn () {
|
|
notification.notice({
|
|
content: (h) => {
|
|
return <span>closable</span>
|
|
},
|
|
duration: null,
|
|
onClose () {
|
|
console.log('closable close')
|
|
},
|
|
onClick () {
|
|
console.log('clicked!!!')
|
|
},
|
|
closable: true,
|
|
})
|
|
}
|
|
|
|
function close (key) {
|
|
notification.removeNotice(key)
|
|
}
|
|
|
|
function manualClose () {
|
|
const key = Date.now()
|
|
notification.notice({
|
|
content: (h) => {
|
|
return <div>
|
|
<p>click below button to close</p>
|
|
<button onClick={close.bind(null, key)}>close</button>
|
|
</div>
|
|
},
|
|
key,
|
|
duration: null,
|
|
})
|
|
}
|
|
|
|
let counter = 0
|
|
let intervalKey
|
|
function updatableFn () {
|
|
if (counter !== 0) {
|
|
return
|
|
}
|
|
|
|
const key = 'updatable-notification'
|
|
const initialProps = {
|
|
content: `Timer: ${counter}s`,
|
|
key,
|
|
duration: null,
|
|
closable: true,
|
|
onClose () {
|
|
clearInterval(intervalKey)
|
|
counter = 0
|
|
},
|
|
}
|
|
|
|
notification.notice(initialProps)
|
|
intervalKey = setInterval(() => {
|
|
notification.notice({ ...initialProps, content: `Timer: ${++counter}s` })
|
|
}, 1000)
|
|
}
|
|
|
|
export default {
|
|
render () {
|
|
return (
|
|
<div>
|
|
<button onClick={simpleFn}>simple show</button>
|
|
<button onClick={durationFn}>duration=0</button>
|
|
<button onClick={closableFn}>closable</button>
|
|
<button onClick={manualClose}>controlled close</button>
|
|
<button onClick={updatableFn}>updatable</button>
|
|
</div>
|
|
)
|
|
},
|
|
}
|