version bump and build

CHANGELOG.md

@@ -5,11 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Unreleased
+## [5.1.1]
 
 ### changed
 
 - Set cookie value before handling side-effects.
+- The overlay is now conditional. Meaning that the component behaves exactly as it did prior to 5.1.0 when you do not use the overlay
 
 ## [5.1.0]
 

build/index.js

@@ -622,6 +622,21 @@ module.exports = /******/ (function (modules) {
         NONE: "none",
       });
 
+      /**
+       * A function to wrap elements with a "wrapper" on a condition
+       * @param {object} wrappingOptions
+       *  condition == boolean condition, when to wrap
+       *  wrapper == style to wrap. e.g <div>{children}</div>
+       *  children == react passes whatever is between tags as children. Don't supply this yourself.
+       */
+      var ConditionalWrapper = function ConditionalWrapper(_ref) {
+        var condition = _ref.condition,
+          wrapper = _ref.wrapper,
+          children = _ref.children;
+
+        return condition ? wrapper(children) : children;
+      };
+
       var CookieConsent = (function (_Component) {
         _inherits(CookieConsent, _Component);
 
@@ -676,7 +691,7 @@ module.exports = /******/ (function (modules) {
               margin: "15px",
             },
             overlayStyle: {
-              position: "absolute",
+              position: "fixed",
               left: 0,
               top: 0,
               width: "100%",
@@ -744,25 +759,24 @@ module.exports = /******/ (function (modules) {
           },
           {
             key: "accept",
-            value: function accept(_ref) {
-              var _ref$acceptedByScroll = _ref.acceptedByScrolling,
+            value: function accept(_ref2) {
+              var _ref2$acceptedByScrol = _ref2.acceptedByScrolling,
                 acceptedByScrolling =
-                  _ref$acceptedByScroll === undefined ? false : _ref$acceptedByScroll;
+                  _ref2$acceptedByScrol === undefined ? false : _ref2$acceptedByScrol;
               var _props = this.props,
                 cookieName = _props.cookieName,
                 cookieValue = _props.cookieValue,
                 hideOnAccept = _props.hideOnAccept,
                 onAccept = _props.onAccept;
 
-              // fire onAccept
+              this.setCookie(cookieName, cookieValue);
 
+              // fire onAccept
               onAccept({ acceptedByScrolling: acceptedByScrolling });
 
               // remove listener if set
               window.removeEventListener("scroll", this.handleScroll);
 
-              this.setCookie(cookieName, cookieValue);
-
               if (hideOnAccept) {
                 this.setState({ visible: false });
               }
@@ -784,17 +798,16 @@ module.exports = /******/ (function (modules) {
                 extraCookieOptions = _props2.extraCookieOptions,
                 setDeclineCookie = _props2.setDeclineCookie;
 
-              // fire onDecline
+              if (setDeclineCookie) {
+                this.setCookie(cookieName, declineCookieValue);
+              }
 
+              // fire onDecline
               onDecline();
 
               // remove listener if set
               window.removeEventListener("scroll", this.handleScroll);
 
-              if (setDeclineCookie) {
-                this.setCookie(cookieName, declineCookieValue);
-              }
-
               if (hideOnDecline) {
                 this.setState({ visible: false });
               }
@@ -986,20 +999,18 @@ module.exports = /******/ (function (modules) {
                 buttonsToRender.reverse();
               }
 
-              var Wrapper = !overlay
-                ? function (props) {
-                    return _react2.default.createElement("div", props);
-                  }
-                : function (props) {
+              return _react2.default.createElement(
+                ConditionalWrapper,
+                {
+                  condition: overlay,
+                  wrapper: function wrapper(children) {
                     return _react2.default.createElement(
                       "div",
-                      _extends({}, props, { style: myOverlayStyle, className: overlayClasses })
+                      { style: myOverlayStyle, className: overlayClasses },
+                      children
                     );
-                  };
-
-              return _react2.default.createElement(
-                Wrapper,
-                null,
+                  },
+                },
                 _react2.default.createElement(
                   "div",
                   { className: "" + containerClasses, style: myStyle },
@@ -1118,9 +1129,9 @@ module.exports = /******/ (function (modules) {
         enableDeclineButton: false,
         flipButtons: false,
         sameSite: SAME_SITE_OPTIONS.NONE,
-        ButtonComponent: function ButtonComponent(_ref2) {
-          var children = _ref2.children,
-            props = _objectWithoutProperties(_ref2, ["children"]);
+        ButtonComponent: function ButtonComponent(_ref3) {
+          var children = _ref3.children,
+            props = _objectWithoutProperties(_ref3, ["children"]);
 
           return _react2.default.createElement("button", props, children);
         },

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/index.js

@@ -14,6 +14,17 @@ export const SAME_SITE_OPTIONS = {
   NONE: "none",
 };
 
+/**
+ * A function to wrap elements with a "wrapper" on a condition
+ * @param {object} wrappingOptions
+ *  condition == boolean condition, when to wrap
+ *  wrapper == style to wrap. e.g <div>{children}</div>
+ *  children == react passes whatever is between tags as children. Don't supply this yourself.
+ */
+const ConditionalWrapper = ({ condition, wrapper, children }) => {
+  return condition ? wrapper(children) : children;
+};
+
 class CookieConsent extends Component {
   constructor(props) {
     super(props);
@@ -60,7 +71,7 @@ class CookieConsent extends Component {
         margin: "15px",
       },
       overlayStyle: {
-        position: "absolute",
+        position: "fixed",
         left: 0,
         top: 0,
         width: "100%",
@@ -117,7 +128,7 @@ class CookieConsent extends Component {
    */
   accept({ acceptedByScrolling = false }) {
     const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
-    
+
     this.setCookie(cookieName, cookieValue);
 
     // fire onAccept
@@ -144,11 +155,11 @@ class CookieConsent extends Component {
       extraCookieOptions,
       setDeclineCookie,
     } = this.props;
-    
+
     if (setDeclineCookie) {
       this.setCookie(cookieName, declineCookieValue);
     }
-    
+
     // fire onDecline
     onDecline();
 
@@ -320,12 +331,15 @@ class CookieConsent extends Component {
       buttonsToRender.reverse();
     }
 
-    const Wrapper = !overlay
-      ? (props) => <div {...props} />
-      : (props) => <div {...props} style={myOverlayStyle} className={overlayClasses} />;
-
     return (
-      <Wrapper>
+      <ConditionalWrapper
+        condition={overlay}
+        wrapper={(children) => (
+          <div style={myOverlayStyle} className={overlayClasses}>
+            {children}
+          </div>
+        )}
+      >
         <div className={`${containerClasses}`} style={myStyle}>
           <div style={myContentStyle} className={contentClasses}>
             {this.props.children}
@@ -336,7 +350,7 @@ class CookieConsent extends Component {
             })}
           </div>
         </div>
-      </Wrapper>
+      </ConditionalWrapper>
     );
   }
 }