Web: Components: Added CountDown to Snackbar
This commit is contained in:
parent
948e0b4bf3
commit
f2913339d3
@ -27,6 +27,7 @@
|
||||
"punycode": "^2.1.1",
|
||||
"rc-tree": "^2.1.4",
|
||||
"react-autosize-textarea": "^7.1.0",
|
||||
"react-countdown": "2.3.2",
|
||||
"react-custom-scrollbars": "^4.2.1",
|
||||
"react-device-detect": "^1.17.0",
|
||||
"react-dropzone": "^11.2.4",
|
||||
|
@ -2,6 +2,7 @@ import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import PropType from "prop-types";
|
||||
import PropTypes from "prop-types";
|
||||
import Countdown, { zeroPad } from "react-countdown";
|
||||
import StyledSnackBar from "./styled-snackbar";
|
||||
import StyledCrossIcon from "./styled-snackbar-action";
|
||||
import StyledLogoIcon from "./styled-snackbar-logo";
|
||||
@ -40,6 +41,24 @@ class SnackBar extends React.Component {
|
||||
this.props.onAction && this.props.onAction(e);
|
||||
};
|
||||
|
||||
// Renderer callback with condition
|
||||
countDownRenderer = ({ minutes, seconds, completed }) => {
|
||||
if (completed) return <></>;
|
||||
const { textColor, fontSize, fontWeight } = this.props;
|
||||
|
||||
// Render a countdown
|
||||
return (
|
||||
<Text
|
||||
as="p"
|
||||
color={textColor}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
>
|
||||
{zeroPad(minutes)}:{zeroPad(seconds)}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
text,
|
||||
@ -52,6 +71,7 @@ class SnackBar extends React.Component {
|
||||
textAlign,
|
||||
htmlContent,
|
||||
style,
|
||||
countDownTime,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
@ -97,6 +117,14 @@ class SnackBar extends React.Component {
|
||||
<Text color={textColor}>{btnText}</Text>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{countDownTime > -1 && (
|
||||
<Countdown
|
||||
date={Date.now() + countDownTime}
|
||||
renderer={this.countDownRenderer}
|
||||
onComplete={this.onActionClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
</>
|
||||
@ -106,7 +134,6 @@ class SnackBar extends React.Component {
|
||||
<StyledCrossIcon size="medium" />
|
||||
</button>
|
||||
)}
|
||||
)
|
||||
</StyledSnackBar>
|
||||
);
|
||||
}
|
||||
@ -126,6 +153,7 @@ SnackBar.propTypes = {
|
||||
textAlign: PropType.string,
|
||||
htmlContent: PropType.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
countDownTime: PropType.number,
|
||||
};
|
||||
|
||||
SnackBar.defaultProps = {
|
||||
@ -136,6 +164,7 @@ SnackBar.defaultProps = {
|
||||
fontWeight: "400",
|
||||
textAlign: "left",
|
||||
htmlContent: "",
|
||||
countDownTime: -1,
|
||||
};
|
||||
|
||||
export default SnackBar;
|
||||
|
@ -14584,6 +14584,13 @@ react-content-loader@^5.1.4:
|
||||
resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-5.1.4.tgz#854bafe4415dd9de07174621375bc308edd0ebb5"
|
||||
integrity sha512-hTq7pZi2GKCK6a9d3u6XStozm0QGCEjw8cSqQReiWnh2up6IwCha5R5TF0o6SY5qUDpByloEZEZtnFxpJyENFw==
|
||||
|
||||
react-countdown@2.3.2:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.2.tgz#4cc27f28f2dcd47237ee66e4b9f6d2a21fc0b0ad"
|
||||
integrity sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-custom-scrollbars@^4.2.1:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
|
||||
|
Loading…
Reference in New Issue
Block a user