|
|
@ -1,6 +1,6 @@ |
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
import React, { useEffect, useState } from 'react' // eslint-disable-line
|
|
|
|
|
|
|
|
|
|
|
|
import './toaster.css'; |
|
|
|
import './toaster.css' |
|
|
|
|
|
|
|
|
|
|
|
/* eslint-disable-next-line */ |
|
|
|
/* eslint-disable-next-line */ |
|
|
|
export interface ToasterProps { |
|
|
|
export interface ToasterProps { |
|
|
@ -32,7 +32,7 @@ export const Toaster = (props: ToasterProps) => { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, opts.time) |
|
|
|
}, opts.time) |
|
|
|
}
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setState(prevState => { |
|
|
|
setState(prevState => { |
|
|
|
return { |
|
|
|
return { |
|
|
@ -45,7 +45,7 @@ export const Toaster = (props: ToasterProps) => { |
|
|
|
}, [props.message]) |
|
|
|
}, [props.message]) |
|
|
|
|
|
|
|
|
|
|
|
const shortTooltipText = state.message.length > 201 ? state.message.substring(0, 200) + '...' : state.message |
|
|
|
const shortTooltipText = state.message.length > 201 ? state.message.substring(0, 200) + '...' : state.message |
|
|
|
|
|
|
|
|
|
|
|
function hide () { |
|
|
|
function hide () { |
|
|
|
if (state.timeOutId) clearTimeout(state.timeOutId) |
|
|
|
if (state.timeOutId) clearTimeout(state.timeOutId) |
|
|
|
} |
|
|
|
} |
|
|
@ -55,7 +55,7 @@ export const Toaster = (props: ToasterProps) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function closeTheToaster () { |
|
|
|
function closeTheToaster () { |
|
|
|
hide()
|
|
|
|
hide() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// out()
|
|
|
|
// out()
|
|
|
@ -63,21 +63,20 @@ export const Toaster = (props: ToasterProps) => { |
|
|
|
// 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={() => { }}> |
|
|
|
<span className="px-2"> |
|
|
|
<span className="px-2"> |
|
|
|
{shortTooltipText} |
|
|
|
{shortTooltipText} |
|
|
|
{ state.message.length > 201 ? <button className="btn btn-secondary btn-sm mx-3" style={{whiteSpace: 'nowrap'}} onClick={() => showFullMessage()}>Show full message</button> : ''}
|
|
|
|
{ state.message.length > 201 ? <button className="btn btn-secondary btn-sm mx-3" style={{ whiteSpace: 'nowrap' }} onClick={() => showFullMessage()}>Show full message</button> : ''} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span style={{alignSelf: 'baseline'}}> |
|
|
|
<span style={{ alignSelf: 'baseline' }}> |
|
|
|
<button data-id="tooltipCloseButton" className="fas fa-times btn-info mx-1 p-0" onClick={() => closeTheToaster()}></button> |
|
|
|
<button data-id="tooltipCloseButton" className="fas fa-times btn-info mx-1 p-0" onClick={() => closeTheToaster()}></button> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
// animation(this.tooltip, css.animateBottom.className)
|
|
|
|
// animation(this.tooltip, css.animateBottom.className)
|
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default Toaster; |
|
|
|
export default Toaster |
|
|
|
|
|
|
|
|
|
|
|
const defaultOptions = (opts) : ToasterOptions => { |
|
|
|
const defaultOptions = (opts) : ToasterOptions => { |
|
|
|
opts = opts || {} |
|
|
|
opts = opts || {} |
|
|
|