react-js-banner 0.7.1 → 0.8.0

package/package.json

@@ -1,49 +1,49 @@
-{
-  "name": "react-js-banner",
-  "version": "0.7.1",
-  "description": "React JS Banner component customizable with auto hide option",
-  "main": "build/index.js",
-  "peerDependencies": {},
-  "dependencies": {
-    "source-map-explorer": "^2.5.3"
-  },
-  "scripts": {
-    "start": "webpack --watch",
-    "build": "webpack"
-  },
-  "author": {
-    "name": "Jose Antonio Ciccio",
-    "email": "jciccio@gmail.com"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.13.14",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^5.2.0",
-    "eslint": "^6.8.0",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "^5.3.1",
-    "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"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jciccio/react-js-banner.git"
-  },
-  "keywords": [
-    "react js banner",
-    "js banner",
-    "banner",
-    "message notification",
-    "notification",
-    "toaster"
-  ],
-  "license": "MIT",
-  "homepage": "https://github.com/jciccio/react-js-banner/blob/master/README.md"
-}
+{
+  "name": "react-js-banner",
+  "version": "0.8.0",
+  "description": "React JS Banner component customizable with auto hide option",
+  "main": "build/index.js",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {},
+  "scripts": {
+    "start": "webpack --watch",
+    "build": "webpack"
+  },
+  "author": {
+    "name": "Jose Antonio Ciccio",
+    "email": "jciccio@gmail.com"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.24.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.0.0",
+    "eslint": "^8.57.0",
+    "html-loader": "^5.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jciccio/react-js-banner.git"
+  },
+  "keywords": [
+    "react js banner",
+    "js banner",
+    "banner",
+    "message notification",
+    "notification",
+    "toaster"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/jciccio/react-js-banner/blob/master/README.md"
+}

package/src/banner.css

@@ -1,61 +1,78 @@
-@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;
-  padding: 10px 10px;
-  font-size: 16px;
-  font-weight: bold;
-  display: flex;
-  margin-bottom: 10px;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  animation: opacityOn 5s normal forwards;
-}
-
-.banner-transition-appear {
-  opacity: 0.01;
-}
-
-.banner-transition-appear.banner-transition-appear-active {
-  opacity: 1;
-  transition: opacity 2s ease;
-}
-
-.banner-transition-leave {
-  opacity: 1;
-}
-
-.banner-transition-leave.banner-transition-leave-active {
-  opacity: 0.01;
-  transition: opacity 2s ease;
-}
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 50px;
+  font-family: Arial, sans-serif;
+  color: #fff;
+  transition: opacity 1s, top 0.5s, bottom 0.5s;
+  z-index: 1000;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  position: relative;
+}
+
+.banner-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: center;
+}
+
+.banner-close-btn {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0 10px;
+  margin-left: auto;
+  opacity: 0.8;
+}
+
+.banner-close-btn:hover {
+  opacity: 1;
+}
+
+/* Positions */
+.banner-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.banner-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+/* Variants */
+.banner-success {
+  background-color: #28a745;
+}
+
+.banner-error {
+  background-color: #dc3545;
+}
+
+.banner-warning {
+  background-color: #ffc107;
+  color: #333;
+}
+
+.banner-info {
+  background-color: #17a2b8;
+}
+
+/* Animations */
+@keyframes opacityOn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes noFadeOut {
+  0% { opacity: 1; }
+  100% { opacity: 1; }
+}

package/src/index.js

@@ -1,133 +1,118 @@
-import React, { Component } from "react";
-import {useState} from 'react';
-import PropTypes from 'prop-types';
-import "./banner.css";
-
-/**
- * Banner component
- * @author [Jose Antonio Ciccio](https://github.com/jciccio)
- */
-class Banner extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showBanner: undefined
-    };
-   
-  }
-
-  componentDidMount() {
-    this.hideBanner();
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.visibleTime !== undefined  && nextProps.visibleTime > 0){
-      let newState = {
-        bannerMessage: nextProps.bannerMessage,
-        showBanner: true
-      };
-
-      return newState;
-    }
-    return null;
-  }
-
-  render() {
-    let appearTime = this.props.transitionAppearTime ? this.props.transitionAppearTime: 1000;
-    let transitionTime = this.props.transitionTime ? this.props.transitionTime: 1000;
-    return (
-      this.renderBanner()
-    );
-  }
-
-  renderImage(){
-    if (this.props.image && this.props.imageClass){
-      return(
-        <img 
-          src={this.props.image} 
-          className={this.props.imageClass}
-        />
-      )
-    }
-    else if(this.props.image){
-      return (
-        <img 
-          src={this.props.image} 
-        />
-      )
-    }
-    else{
-      return null;
-    }
-  }
-
-  async hideBanner() {
-    if(this.props.visibleTime !== undefined && this.props.visibleTime > 0)
-    {
-      this.timeout(this.props.visibleTime);
-    }
-  }
-  
-  renderBanner() {
-    
-    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.showBanner) ) {
-        
-        return (
-          <div key="banner" className="banner" style={{...this.props.css, ...animation}}>
-            {this.renderImage()}
-            {this.renderTitle()}
-          </div>
-        );
-      }
-      else if (this.props.children){
-        return(
-          <div key="banner" className="banner" style={{...this.props.css, ...animation}}>
-            {this.props.children}
-          </div>
-        )
-      } 
-      else {
-        return null;
-      }
-    }
-    return null;
-  }
-
-  renderTitle(){
-    return <div key={`BannerId-${this.props.id}`}>{this.props.title}</div>
-  }
-
-  timeout(ms) {
-    setTimeout(() => {
-      if(this.props.onHideCallback != null){
-        this.props.onHideCallback(this.props.id);  
-      }
-    }, ms);
-  }
-
-}
-
-Banner.propTypes = {
-  title: PropTypes.node,
-  css: PropTypes.object,
-  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,
-  onHideCallback: PropTypes.func
-};
-
-Banner.defaultProps = {
-  onHideCallback: null,
-}
-
-export default Banner;
+import React, { useState, useEffect } from "react";
+import PropTypes from 'prop-types';
+import "./banner.css";
+
+/**
+ * Banner component
+ * @author [Jose Antonio Ciccio](https://github.com/jciccio)
+ */
+const Banner = ({
+  title,
+  css = {},
+  visibleTime = 0,
+  image,
+  imageClass,
+  id,
+  children,
+  onHideCallback,
+  variant,
+  position,
+  dismissible
+}) => {
+  const [showBanner, setShowBanner] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+
+  useEffect(() => {
+    // Show banner on mount
+    setShowBanner(true);
+
+    if (visibleTime > 0) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, visibleTime);
+      return () => clearTimeout(timer);
+    }
+  }, [visibleTime, title, children]); // Re-run if content or timing changes
+
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setShowBanner(false);
+      setIsClosing(false);
+      if (onHideCallback) {
+        onHideCallback(id);
+      }
+    }, 500); // Wait for animation if we add one, or simply unmount
+  };
+
+  if (!showBanner) return null;
+
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'success': return 'banner-success';
+      case 'error': return 'banner-error';
+      case 'warning': return 'banner-warning';
+      case 'info': return 'banner-info';
+      default: return '';
+    }
+  };
+
+  const getPositionClass = () => {
+    switch (position) {
+      case 'top': return 'banner-top';
+      case 'bottom': return 'banner-bottom';
+      default: return '';
+    }
+  };
+
+  // Construct styles and classes
+  const bannerClasses = `banner ${getVariantClass()} ${getPositionClass()}`;
+  const animationStyle = visibleTime > 0
+    ? { animation: `opacityOn ${visibleTime / 1000}s normal forwards` }
+    : { animation: `noFadeOut 3s normal forwards` };
+
+  return (
+    <div
+      key="banner"
+      className={bannerClasses}
+      style={{ ...css, ...animationStyle }}
+    >
+      <div className="banner-content">
+        {image && (
+          <img
+            src={image}
+            className={imageClass}
+            alt="banner icon"
+            style={{ marginRight: 10 }}
+          />
+        )}
+        {title && <div key={`BannerId-${id}`}>{title}</div>}
+        {children}
+      </div>
+
+      {dismissible && (
+        <button className="banner-close-btn" onClick={handleClose}>
+          &times;
+        </button>
+      )}
+    </div>
+  );
+};
+
+Banner.propTypes = {
+  title: PropTypes.node,
+  css: PropTypes.object,
+  visibleTime: PropTypes.number,
+  image: PropTypes.string,
+  imageClass: PropTypes.string,
+  id: PropTypes.string, // Made optional as it's not strictly needed for internal logic anymore unless for callback
+  transitionAppearTime: PropTypes.number,
+  transitionTime: PropTypes.number,
+  children: PropTypes.node,
+  onHideCallback: PropTypes.func,
+  variant: PropTypes.oneOf(['success', 'error', 'warning', 'info']),
+  position: PropTypes.oneOf(['top', 'bottom']),
+  dismissible: PropTypes.bool
+};
+
+export default Banner;

package/webpack.config.js

@@ -1,27 +1,23 @@
-var path = require("path");
-
-module.exports = {
-  mode: "production",
-  entry: "./src/index.js",
-  output: {
-    path: path.resolve("build"),
-    filename: "index.js",
-    libraryTarget: "commonjs2"
-  },
-  module: {
-    rules: [
-      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
-      {
-        test: /\.css$/,
-        loader: "style-loader"
-      },
-      {
-        test: /\.css$/,
-        loader: "css-loader"
-      }
-    ]
-  },
-  externals: {
-    react: "react"
-  }
+var path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/index.js",
+  output: {
+    path: path.resolve("build"),
+    filename: "index.js",
+    libraryTarget: "commonjs2"
+  },
+  module: {
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  externals: {
+    react: "react"
+  }
 };