Add ButtonWrapperClass from v4 to type definition (#80)

Added an explanation of the legacy cookie to the readme.

CHANGELOG.md

@@ -5,6 +5,19 @@ 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).
 
+## [5.1.3]
+
+### changed
+
+- Fix missing buttonWrapperClasses prop in type definition
+
+## [5.1.2]
+
+### 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]
 
 A new feature! This time it's an "overlay" on the entire website to block access whilst the cookiebar is displayed.

README.md

@@ -22,6 +22,7 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
 - [Using it](#using-it)
 - [Props](#props)
 - [Debugging it](#debugging-it)
+- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies--one-of-which-named--legacy-)
 - [Styling it](#styling-it)
   - [Examples](#examples)
     - [changing the bar background to red](#changing-the-bar-background-to-red)
@@ -163,6 +164,23 @@ Because the cookie consent bar will be hidden once accepted, you will have to se
 
 **Note:** Don't forget to remove the `debug`-property for production.
 
+## Why are there two cookies? One of which named "Legacy"
+
+The short story is that some browsers don't support the SameSite=None attribute.
+The modern browsers force you to have SameSite set to something other than none.
+
+So react-cookie-consent fixes this like so:
+
+- set the fallback cookie (e.g -legacy) first, this will always succeed (on all browsers)
+- set the correct cookie second (this will work on modern browsers, fail on older ones)
+
+This happens on lines [186-192](https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L186-L192)
+
+When checking the cookie it'll do it in reverse. If the regular cookie exists, it'll use that. If no regular cookie exists it'll check whether the legacy cookie exists. If both are non-existent no consent was given.
+
+The long story can be found here: [pull-request#68](https://github.com/Mastermindzh/react-cookie-consent/pull/68)
+
+
 ## Styling it
 
 You can provide styling for the bar, the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children "content" and "button".

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) {
+            value: function accept(_ref2) {
-              var _ref$acceptedByScroll = _ref.acceptedByScrolling,
+              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
+              return _react2.default.createElement(
-                ? function (props) {
+                ConditionalWrapper,
-                    return _react2.default.createElement("div", props);
+                {
-                  }
+                  condition: overlay,
-                : function (props) {
+                  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) {
+        ButtonComponent: function ButtonComponent(_ref3) {
-          var children = _ref2.children,
+          var children = _ref3.children,
-            props = _objectWithoutProperties(_ref2, ["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.d.ts

@@ -24,6 +24,7 @@ export interface CookieConsentProps {
   expires?: number;
   containerClasses?: string;
   contentClasses?: string;
+  buttonWrapperClasses?: string,
   buttonClasses?: string;
   declineButtonClasses?: string;
   buttonId?: string;

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%",
@@ -118,14 +129,14 @@ class CookieConsent extends Component {
   accept({ acceptedByScrolling = false }) {
     const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
 
+    this.setCookie(cookieName, cookieValue);
+
     // fire onAccept
     onAccept({ acceptedByScrolling });
 
     // remove listener if set
     window.removeEventListener("scroll", this.handleScroll);
 
-    this.setCookie(cookieName, cookieValue);
-
     if (hideOnAccept) {
       this.setState({ visible: false });
     }
@@ -145,16 +156,16 @@ class CookieConsent extends Component {
       setDeclineCookie,
     } = this.props;
 
+    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 });
     }
@@ -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>
     );
   }
 }