react-js-banner 0.6.1 → 0.7.0

package/build/index.jsx

@@ -0,0 +1,25 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/index.jsx":
+/*!***********************!*\
+  !*** ./src/index.jsx ***!
+  \***********************/
+/***/ (() => {
+
+throw new Error("Module parse failed: Unexpected token (42:8)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n|     if (this.props.image && this.props.imageClass){\n|       return(\n>         <img \n|           src={this.props.image} \n|           className={this.props.imageClass}");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module doesn't tell about it's top-level declarations so it can't be inlined
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./src/index.jsx"]();
+/******/ 	module.exports = __webpack_exports__;
+/******/ 	
+/******/ })()
+;

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "react-js-banner",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "React JS Banner component customizable with auto hide option",
   "main": "build/index.js",
-  "peerDependencies": {
-    "react": "^16.8.0"
-  },
+  "peerDependencies": {},
   "dependencies": {
-   
+    
   },
   "scripts": {
     "start": "webpack --watch",
@@ -27,11 +25,12 @@
     "eslint": "^6.8.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "style-loader": "^3.3.4",
     "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "prop-types": "^15.8.1"
   },
   "repository": {
     "type": "git",

package/src/banner.css

@@ -1,3 +1,33 @@
+@keyframes opacityOn {
+    0% {
+        opacity: 0;
+    }
+    25% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    85% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes noFadeOut {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
 .banner{
   background-color: orange;
   text-align: center;
@@ -9,6 +39,7 @@
   text-align: center;
   align-items: center;
   justify-content: center;
+  animation: opacityOn 5s normal forwards;
 }
 
 .banner-transition-appear {

package/src/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-
+import {useState} from 'react';
 import PropTypes from 'prop-types';
 import "./banner.css";
 
@@ -7,22 +7,26 @@ import "./banner.css";
  * Banner component
  * @author [Jose Antonio Ciccio](https://github.com/jciccio)
  */
-
 class Banner extends Component {
   constructor(props) {
     super(props);
-     this.state = {
-      visibleTime: 0,
-      show: undefined
+    this.state = {
+      showBanner: undefined
     };
+   
+  }
+
+  componentDidMount() {
+    this.hideBanner();
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.visibleTime !== undefined  && nextProps.visibleTime > 0){
       let newState = {
         bannerMessage: nextProps.bannerMessage,
-        visibleTime: nextProps.visibleTime
+        showBanner: true
       };
+
       return newState;
     }
     return null;
@@ -60,18 +64,21 @@ class Banner extends Component {
   async hideBanner() {
     if(this.props.visibleTime !== undefined && this.props.visibleTime > 0)
     {
-      await this.timeout(1000 + this.props.visibleTime);
-      await this.setState({ show: false });
+      this.timeout(this.props.visibleTime);
     }
   }
   
   renderBanner() {
-    let showBanner = this.props.showBanner !== undefined ? this.props.showBanner : true;
+    
+    const showBanner = this.state.showBanner !== undefined ? this.state.showBanner : true;
+    
+    const visibleTimeAnim = (this.props.visibleTime > 0) ? `opacityOn ${this.props.visibleTime/1000}s` : `noFadeOut 3s`;
+    const animation = {"animation": `${visibleTimeAnim} normal forwards`}
     if(showBanner){
-      if (this.props.title && (this.state.show === undefined || this.state.show) ) {
-        {this.hideBanner()}
+      if (this.props.title && (this.state.show === undefined || this.state.showBanner) ) {
+        
         return (
-          <div key="banner" className="banner" style={this.props.css}>
+          <div key="banner" className="banner" style={{...this.props.css, ...animation}}>
             {this.renderImage()}
             {this.renderTitle()}
           </div>
@@ -79,7 +86,7 @@ class Banner extends Component {
       }
       else if (this.props.children){
         return(
-          <div key="banner" className="banner" style={this.props.css}>
+          <div key="banner" className="banner" style={{...this.props.css, ...animation}}>
             {this.props.children}
           </div>
         )
@@ -92,11 +99,15 @@ class Banner extends Component {
   }
 
   renderTitle(){
-    return <div>{this.props.title}</div>
+    return <div key={`BannerId-${this.props.id}`}>{this.props.title}</div>
   }
 
   timeout(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    setTimeout(() => {
+      if(this.props.onHideCallback != null){
+        this.props.onHideCallback(this.props.id);  
+      }
+    }, ms);
   }
 
 }
@@ -107,10 +118,16 @@ Banner.propTypes = {
   visibleTime: PropTypes.number,
   image: PropTypes.string,
   imageClass: PropTypes.string,
+  id: PropTypes.string.isRequired,
   transitionAppearTime: PropTypes.number,
   transitionTime: PropTypes.number,
   showBanner: PropTypes.bool,
-  children: PropTypes.node
+  children: PropTypes.node,
+  onHideCallback: PropTypes.func
 };
 
+Banner.defaultProps = {
+  onHideCallback: null,
+}
+
 export default Banner;