|
|
@ -1,18 +1,18 @@ |
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
|
|
|
|
|
|
|
|
import './remix-ui-toaster.css'; |
|
|
|
import './toaster.css'; |
|
|
|
|
|
|
|
|
|
|
|
/* eslint-disable-next-line */ |
|
|
|
/* eslint-disable-next-line */ |
|
|
|
export interface RemixUiToasterProps { |
|
|
|
export interface ToasterProps { |
|
|
|
message: any |
|
|
|
message: any |
|
|
|
opts?: RemixUiToasterOptions |
|
|
|
opts?: ToasterOptions |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export interface RemixUiToasterOptions { |
|
|
|
export interface ToasterOptions { |
|
|
|
time: number |
|
|
|
time: number |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const RemixUiToaster = (props: RemixUiToasterProps) => { |
|
|
|
export const Toaster = (props: ToasterProps) => { |
|
|
|
const [state, setState] = useState({ |
|
|
|
const [state, setState] = useState({ |
|
|
|
timeOutId: null, |
|
|
|
timeOutId: null, |
|
|
|
message: '', |
|
|
|
message: '', |
|
|
@ -51,7 +51,7 @@ export const RemixUiToaster = (props: RemixUiToasterProps) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function showFullMessage () { |
|
|
|
function showFullMessage () { |
|
|
|
alert(state.message) |
|
|
|
// alert(state.message)
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function closeTheToaster () { |
|
|
|
function closeTheToaster () { |
|
|
@ -60,7 +60,7 @@ export const RemixUiToaster = (props: RemixUiToasterProps) => { |
|
|
|
|
|
|
|
|
|
|
|
// out()
|
|
|
|
// out()
|
|
|
|
const animate = state.timeOutId ? (state.hiding ? 'remixui_animateBottom' : 'remixui_animateTop') : '' |
|
|
|
const animate = state.timeOutId ? (state.hiding ? 'remixui_animateBottom' : 'remixui_animateTop') : '' |
|
|
|
const hide = state.timeOutId |
|
|
|
// const hide = state.timeOutId
|
|
|
|
const className = `remixui_tooltip alert alert-info p-2 ${animate}` |
|
|
|
const className = `remixui_tooltip alert alert-info p-2 ${animate}` |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div data-shared="tooltipPopup" className={className} onMouseEnter={() => { }} onMouseLeave={() => { }}> |
|
|
|
<div data-shared="tooltipPopup" className={className} onMouseEnter={() => { }} onMouseLeave={() => { }}> |
|
|
@ -77,9 +77,9 @@ export const RemixUiToaster = (props: RemixUiToasterProps) => { |
|
|
|
// animation(this.tooltip, css.animateBottom.className)
|
|
|
|
// animation(this.tooltip, css.animateBottom.className)
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default RemixUiToaster; |
|
|
|
export default Toaster; |
|
|
|
|
|
|
|
|
|
|
|
const defaultOptions = (opts) : RemixUiToasterOptions => { |
|
|
|
const defaultOptions = (opts) : ToasterOptions => { |
|
|
|
opts = opts || {} |
|
|
|
opts = opts || {} |
|
|
|
return { |
|
|
|
return { |
|
|
|
time: opts.time || 7000 |
|
|
|
time: opts.time || 7000 |