Web: Components: Added CountDown to Snackbar

packages/asc-web-components/package.json

@@ -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",

packages/asc-web-components/snackbar/index.js

@@ -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;

yarn.lock

@@ -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"