react-js-banner 0.6.1 → 0.7.1

package/build/index.js.LICENSE.txt

@@ -0,0 +1,11 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

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

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;

package/webpack.config.js

@@ -1,41 +1,27 @@
-const path = require('path');
+var path = require("path");
 
 module.exports = {
-  entry: './src/index.js',
-  mode: 'development',
+  mode: "production",
+  entry: "./src/index.js",
   output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'index.js',
-    libraryTarget: 'commonjs2',
+    path: path.resolve("build"),
+    filename: "index.js",
+    libraryTarget: "commonjs2"
   },
   module: {
     rules: [
+      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
       {
-        test: /\.js$/,
-        include: path.resolve(__dirname, 'src'),
-        exclude: /(node_modules|bower_components|build)/,
-        use: {
-          loader: 'babel-loader'
-        }
-      },
-      {
-        test:/\.html$/i,
-        use: [
-          {
-            loader: 'html-loader'
-          }
-        ]
+        test: /\.css$/,
+        loader: "style-loader"
       },
       {
         test: /\.css$/,
-        include: path.resolve(__dirname, 'src'),
-        exclude: /(node_modules|bower_components|build)/,
-        use:['style-loader','css-loader']
+        loader: "css-loader"
       }
     ]
   },
-  resolve: {
-    extensions: [".js",".jsx", '.json']
-  },
-  devtool: 'inline-source-map'
+  externals: {
+    react: "react"
+  }
 };