yann300
4 years ago
committed by
ioedeveloper
parent
5022d93a3a
commit
9c7cf28a00
@ -0,0 +1,4 @@ |
||||
{ |
||||
"presets": ["@nrwl/react/babel"], |
||||
"plugins": [] |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
{ |
||||
"env": { |
||||
"browser": true, |
||||
"es6": true |
||||
}, |
||||
"extends": "../../.eslintrc", |
||||
"globals": { |
||||
"Atomics": "readonly", |
||||
"SharedArrayBuffer": "readonly" |
||||
}, |
||||
"parserOptions": { |
||||
"ecmaVersion": 11, |
||||
"sourceType": "module" |
||||
}, |
||||
"rules": { |
||||
"standard/no-callback-literal": "off" |
||||
} |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
# remix-ui-toaster |
||||
|
||||
This library was generated with [Nx](https://nx.dev). |
||||
|
||||
## Running unit tests |
||||
|
||||
Run `nx test remix-ui-toaster` to execute the unit tests via [Jest](https://jestjs.io). |
||||
@ -0,0 +1 @@ |
||||
export * from './lib/remix-ui-toaster'; |
||||
@ -0,0 +1,43 @@ |
||||
.remixui_tooltip { |
||||
z-index: 1001; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: fixed; |
||||
min-height: 50px; |
||||
padding: 16px 24px 12px; |
||||
border-radius: 3px; |
||||
left: 40%; |
||||
font-size: 14px; |
||||
text-align: center; |
||||
bottom: -0px; |
||||
flex-direction: row; |
||||
} |
||||
@-webkit-keyframes remixui_animatebottom { |
||||
0% {bottom: -300px} |
||||
100% {bottom: 0px} |
||||
} |
||||
@keyframes remixui_animatebottom { |
||||
0% {bottom: -300px} |
||||
100% {bottom: 0px} |
||||
} |
||||
@-webkit-keyframes remixui_animatetop { |
||||
0% {bottom: 0px} |
||||
100% {bottom: -300px} |
||||
} |
||||
@keyframes remixui_animatetop { |
||||
0% {bottom: 0px} |
||||
100% {bottom: -300px} |
||||
} |
||||
.remixui_animateTop { |
||||
-webkit-animation-name: remixui_animatetop; |
||||
-webkit-animation-duration: 2s; |
||||
animation-name: remixui_animatetop; |
||||
animation-duration: 2s; |
||||
} |
||||
.remixui_animateBottom { |
||||
-webkit-animation-name: remixui_animatebottom; |
||||
-webkit-animation-duration: 2s; |
||||
animation-name: remixui_animatebottom; |
||||
animation-duration: 2s; |
||||
} |
||||
@ -0,0 +1,97 @@ |
||||
import React, { useEffect, useState } from 'react' |
||||
|
||||
import './remix-ui-toaster.css'; |
||||
|
||||
/* eslint-disable-next-line */ |
||||
export interface RemixUiToasterProps { |
||||
message: any |
||||
opts?: RemixUiToasterOptions |
||||
} |
||||
|
||||
export interface RemixUiToasterOptions { |
||||
time: number |
||||
} |
||||
|
||||
export const RemixUiToaster = (props: RemixUiToasterProps) => { |
||||
const [state, setState] = useState({ |
||||
timeOutId: null, |
||||
message: '', |
||||
hiding: false |
||||
}) |
||||
|
||||
const opts = defaultOptions(props.opts) |
||||
|
||||
useEffect(() => { |
||||
let timeOutId = null |
||||
if (props.message) { |
||||
timeOutId = setTimeout(() => { |
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
hiding: true |
||||
} |
||||
}) |
||||
}, opts.time) |
||||
}
|
||||
|
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
message: props.message, |
||||
hiding: false, |
||||
timeOutId |
||||
} |
||||
}) |
||||
}, [props.message]) |
||||
|
||||
const shortTooltipText = state.message.length > 201 ? state.message.substring(0, 200) + '...' : state.message |
||||
|
||||
function hide () { |
||||
if (state.timeOutId) clearTimeout(state.timeOutId) |
||||
} |
||||
|
||||
function showFullMessage () { |
||||
alert(state.message) |
||||
} |
||||
|
||||
function closeTheToaster () { |
||||
hide()
|
||||
} |
||||
|
||||
// out()
|
||||
const animate = state.timeOutId ? (state.hiding ? 'remixui_animateBottom' : 'remixui_animateTop') : '' |
||||
const hide = state.timeOutId |
||||
const className = `remixui_tooltip alert alert-info p-2 ${animate}` |
||||
return ( |
||||
<div data-shared="tooltipPopup" className={className} onMouseEnter={() => { }} onMouseLeave={() => { }}> |
||||
<span className="px-2"> |
||||
{shortTooltipText} |
||||
{ state.message.length > 201 ? <button className="btn btn-secondary btn-sm mx-3" style={{whiteSpace: 'nowrap'}} onClick={() => showFullMessage()}>Show full message</button> : ''}
|
||||
</span> |
||||
<span style={{alignSelf: 'baseline'}}> |
||||
<button data-id="tooltipCloseButton" className="fas fa-times btn-info mx-1 p-0" onClick={() => closeTheToaster()}></button> |
||||
</span> |
||||
</div> |
||||
) |
||||
|
||||
// animation(this.tooltip, css.animateBottom.className)
|
||||
}; |
||||
|
||||
export default RemixUiToaster; |
||||
|
||||
const defaultOptions = (opts) : RemixUiToasterOptions => { |
||||
opts = opts || {} |
||||
return { |
||||
time: opts.time || 7000 |
||||
} |
||||
} |
||||
|
||||
/* |
||||
const animation = (tooltip, anim) => { |
||||
tooltip.classList.remove(css.animateTop.className) |
||||
tooltip.classList.remove(css.animateBottom.className) |
||||
// eslint-disable-next-line
|
||||
void tooltip.offsetWidth // trick for restarting the animation
|
||||
tooltip.classList.add(anim) |
||||
} |
||||
*/ |
||||
@ -0,0 +1,16 @@ |
||||
{ |
||||
"extends": "../../../tsconfig.json", |
||||
"compilerOptions": { |
||||
"jsx": "react", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.lib.json" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../../dist/out-tsc", |
||||
"types": ["node"] |
||||
}, |
||||
"files": [ |
||||
"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||
"../../../node_modules/@nrwl/react/typings/image.d.ts" |
||||
], |
||||
"exclude": ["**/*.spec.ts", "**/*.spec.tsx"], |
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
Loading…
Reference in new issue