mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-08-23 09:35:04 +02:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: mastermindzh:6.2.3
Branches Tags
mastermindzh:master mastermindzh:gh-pages
mastermindzh:9.0.0 mastermindzh:8.0.1 mastermindzh:v8.0.1 mastermindzh:v8.0.0 mastermindzh:7.6.0 mastermindzh:7.5.0 mastermindzh:7.4.1 mastermindzh:7.4.0 mastermindzh:7.3.1 mastermindzh:7.3.0 mastermindzh:7.2.1 mastermindzh:7.2.0 mastermindzh:7.1.1 mastermindzh:7.1.0 mastermindzh:7.0.1 mastermindzh:7.0.0 mastermindzh:6.4.1 mastermindzh:6.4.0 mastermindzh:6.3.0 mastermindzh:6.2.4 mastermindzh:6.2.3 mastermindzh:6.2.2 mastermindzh:6.2.1 mastermindzh:6.2.0 mastermindzh:6.1.0 mastermindzh:6.0.0 mastermindzh:5.2.0 mastermindzh:5.1.4 mastermindzh:5.1.3 mastermindzh:5.1.1
...
compare: mastermindzh:7.2.0
Branches Tags
mastermindzh:master mastermindzh:gh-pages
mastermindzh:9.0.0 mastermindzh:8.0.1 mastermindzh:v8.0.1 mastermindzh:v8.0.0 mastermindzh:7.6.0 mastermindzh:7.5.0 mastermindzh:7.4.1 mastermindzh:7.4.0 mastermindzh:7.3.1 mastermindzh:7.3.0 mastermindzh:7.2.1 mastermindzh:7.2.0 mastermindzh:7.1.1 mastermindzh:7.1.0 mastermindzh:7.0.1 mastermindzh:7.0.0 mastermindzh:6.4.1 mastermindzh:6.4.0 mastermindzh:6.3.0 mastermindzh:6.2.4 mastermindzh:6.2.3 mastermindzh:6.2.2 mastermindzh:6.2.1 mastermindzh:6.2.0 mastermindzh:6.1.0 mastermindzh:6.0.0 mastermindzh:5.2.0 mastermindzh:5.1.4 mastermindzh:5.1.3 mastermindzh:5.1.1

20 Commits
6.2.3 ... 7.2.0

Author SHA1 Message Date
Mastermindzh
2e205f8081 added onOverlayClick and acceptOnOverlayClick 2021-12-20 17:48:43 +01:00
Mastermindzh
086558f463 release 7.1.1 2021-12-20 17:35:57 +01:00
Souchet Céline
712adf9c5b Fix the README.md (#142) 2021-12-20 17:33:35 +01:00
Souchet Céline
ab046db1e8 Fix the TypeScript definition of some properties (#143) 2021-12-20 17:33:12 +01:00
Mastermindzh
775ec9db96 release 7.1.0 2021-12-19 13:30:47 +01:00
Mastermindzh
eaaf6f8797 Added custom attribute props for content and container 2021-12-19 13:30:42 +01:00
Mastermindzh
8c86599f24 release 7.0.1 2021-12-11 11:13:55 +01:00
Rick van Lieshout
719bb2f496 Switch Library Type from CommonJs2 => UMD ( (#135) 
Co-authored-by: Peter Krieg <pkrieg2@gmail.com>
 2021-12-08 17:37:44 +01:00
Mastermindzh
9a0c974b2a release 6.4.1 2021-09-23 19:16:15 +02:00
Mastermindzh
c2f92ec130 added visible prop, and other missing items, to typings 2021-09-23 19:16:02 +02:00
Mastermindzh
7136086602 release 6.4.0 2021-09-17 18:25:41 +02:00
Situ
c3ba87e62f Update cookie value (#125) 
* Chore: resetCookieConsentValue function

* Chore: VISIBLE_OPTIONS enum & render update in order to use it

* Readme review
 2021-09-17 18:22:12 +02:00
Mastermindzh
239001cb19 readme update ... 2021-08-11 11:19:29 +02:00
Mastermindzh
e024961eae release code now escapes variables properly :) 2021-08-11 11:18:44 +02:00
Mastermindzh
a19649bbcf release $npm_package_version 2021-08-11 11:16:03 +02:00
Mastermindzh
696200262e Added the (optional) scrolling effect back in as it is declared legal in some countries now. 2021-08-11 11:14:18 +02:00
Mastermindzh
e52811b3a8 release $npm_package_version 2021-05-24 18:27:42 +02:00
dependabot[bot]
814202780b Bump lodash from 4.17.20 to 4.17.21 (#114) 
Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
 2021-05-12 09:08:43 +02:00
dependabot[bot]
d01995e3b4 Bump ssri from 8.0.0 to 8.0.1 (#111) 
Bumps [ssri](https://github.com/npm/ssri) from 8.0.0 to 8.0.1.
- [Release notes](https://github.com/npm/ssri/releases)
- [Changelog](https://github.com/npm/ssri/blob/latest/CHANGELOG.md)
- [Commits](https://github.com/npm/ssri/compare/v8.0.0...v8.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
 2021-04-12 13:15:52 +02:00
Mastermindzh
56de263dce release $npm_package_version 2021-02-19 10:43:49 +01:00
11 changed files with 10338 additions and 3428 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
node_modules node_modules
build/index.js.LICENSE.txt build/index.js.LICENSE.txt
example/*

37
CHANGELOG.md
View File

@@ -5,6 +5,43 @@ 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/), 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). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [[7.2.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.0)
- Added `onOverlayClick` which allows you to react to a click on the overlay
- Added `acceptOnOverlayClick` which accepts the cookies when the overlay is clicked and runs `onOverlayClick`
## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.1)
- `customContentAttributes` and `customContainerAttributes` are now optional in the typing file as they should be
## [[7.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)]
- Added custom attribute props for content and container
## [[7.0.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.0.1)]
- Configured webpack to remove self from build artefact. Should now work in Nextjs and Gatsby (only tested those..)
## [[7.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.0.0)]
- Switched from CommonJS to UMD module
## [[6.4.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.1))]
- Added missing typing
## [[6.4.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.0))]
- Added visible prop
## [[6.3.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3))]
- Added the (optional) scrolling effect back in as it is declared legal in some countries now.
## [6.2.4]
- version bumps :)
## [[6.2.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3)] ## [[6.2.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3)]
- Added support for IE11, the webpack generated runtime-code should not use arrow functions - Added support for IE11, the webpack generated runtime-code should not use arrow functions

128
README.md
View File

@@ -20,6 +20,7 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
- [Installation](#installation) - [Installation](#installation)
- [Using it](#using-it) - [Using it](#using-it)
- [getting the cookies value in your own code](#getting-the-cookies-value-in-your-own-code)
- [Props](#props) - [Props](#props)
- [Debugging it](#debugging-it) - [Debugging it](#debugging-it)
- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy) - [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy)
@@ -28,9 +29,11 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
- [Changing the bar background to red](#changing-the-bar-background-to-red) - [Changing the bar background to red](#changing-the-bar-background-to-red)
- [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold) - [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
- [Using predefined CSS classes](#using-predefined-css-classes) - [Using predefined CSS classes](#using-predefined-css-classes)
- [Accept on scroll](#accept-on-scroll)
- [Flipping the buttons](#flipping-the-buttons) - [Flipping the buttons](#flipping-the-buttons)
- [Extra cookie options](#extra-cookie-options) - [Extra cookie options](#extra-cookie-options)
- [Rainbows!](#rainbows) - [Rainbows!](#rainbows)
- [Overlay](#overlay)
- [Contributor information](#contributor-information) - [Contributor information](#contributor-information)
- [Projects using react-cookie-consent](#projects-using-react-cookie-consent) - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
@@ -84,12 +87,17 @@ You can optionally set some props like this (next chapter will show all props):
</CookieConsent> </CookieConsent>
``` ```
One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so: One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. It is called with an object containing a boolean property `acceptedByScrolling` to indicate if the acceptance was triggered by the user scrolling You can provide a function like so:
```js ```js
<CookieConsent <CookieConsent
onAccept={() => { onAccept={(acceptedByScrolling) => {
alert("Accept was triggered by clicking the Accept button"); if (acceptedByScrolling) {
// triggered if user scrolls past threshold
alert("Accept was triggered by user scrolling");
} else {
alert("Accept was triggered by clicking the Accept button");
}
}} }}
></CookieConsent> ></CookieConsent>
``` ```
@@ -115,47 +123,66 @@ import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-cons
console.log(getCookieConsentValue()); console.log(getCookieConsentValue());
``` ```
### reset the cookies value in your own code
react-cookie-consent exports a function called `resetCookieConsentValue`. You can use it in order to remove cookie in client-site:
```js
import CookieConsent, { Cookies, resetCookieConsentValue } from "react-cookie-consent";
console.log(resetCookieConsentValue());
```
That option would be interesting if you want to allow user to change their consent. If you want to show again the consent bar, you must force "visible" prop to show again the bar.
## Props ## Props
| Prop | Type | Default value | Description | | Prop | Type | Default value | Description |
| -------------------- | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------- | :-----------------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| location | string, "top", "bottom" or "none" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. | | location | string, "top", "bottom" or "none" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. |
| children | string or React component | | Content to appear inside the bar | | visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. |
| disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) | | children | string or React component | | Content to appear inside the bar |
| hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) | | disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) |
| buttonText | string or React component | "I understand" | Text to appear on the button | | hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) |
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | | buttonText | string or React component | "I understand" | Text to appear on the button |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. | | declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | | cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | | cookieValue | string or boolean or number | true | Value to be saved under the cookieName. |
| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | | declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. |
| onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. | | setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" |
| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. | | onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. |
| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. | | onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. |
| expires | number | 365 | Number of days before the cookie expires. | | debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | | expires | number | 365 | Number of days before the cookie expires. |
| overlay | boolean | false | Whether to show a page obscuring overlay or not. | | extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
| containerClasses | string | "" | CSS classes to apply to the surrounding container | | overlay | boolean | false | Whether to show a page obscuring overlay or not. |
| buttonClasses | string | "" | CSS classes to apply to the button | | containerClasses | string | "" | CSS classes to apply to the surrounding container |
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | | buttonClasses | string | "" | CSS classes to apply to the button |
| declineButtonClasses | string | "" | CSS classes to apply to the decline button | | buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
| buttonId | string | "" | Id to apply to the button | | declineButtonClasses | string | "" | CSS classes to apply to the decline button |
| declineButtonId | string | "" | Id to apply to the decline button | | buttonId | string | "" | Id to apply to the button |
| contentClasses | string | "" | CSS classes to apply to the content | | declineButtonId | string | "" | Id to apply to the decline button |
| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | | contentClasses | string | "" | CSS classes to apply to the content |
| style | object | [look at source][style] | React styling object for the bar. | | overlayClasses | string | "" | CSS classes to apply to the surrounding overlay |
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | | style | object | [look at source][style] | React styling object for the bar. |
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | | buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | | declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | | contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) | | overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. |
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | | disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| ButtonComponent | React component | button | React Component to render as a button. | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | | ButtonComponent | React component | button | React Component to render as a button. |
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. | | sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
| ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button | | cookieSecurity | boolean ¡ | undefined | Cookie security level. Defaults to true unless running on http. |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button | | ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button |
| acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) |
| acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled |
| customContentAttributes | object | `{}` | Allows you to set custom (data) attributes on the content div |
| customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div |
| onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay |
| acceptOnOverlayClick | boolean | false | Determines whether the cookies should be accepted after clicking on the overlay |
## Debugging it ## Debugging it
@@ -229,6 +256,23 @@ Which results in:
![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true) ![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true)
#### Accept on scroll
You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage.
It is legal in some use-cases, [Italy](https://www.garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/9679893) being one of them. Consult your legislation on whether this is allowed.
```js
<CookieConsent
acceptOnScroll={true}
acceptOnScrollPercentage={50}
onAccept={(byScroll) => {
alert(`consent given. \n\n By scrolling? ${byScroll}`);
}}
>
Hello scroller :)
</CookieConsent>
```
#### Flipping the buttons #### Flipping the buttons
If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around: If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:

20
build/index.d.ts vendored
View File

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
export interface CookieConsentProps { export interface CookieConsentProps {
location?: "top" | "bottom" | "none"; location?: "top" | "bottom" | "none";
sameSite?: "strict" | "lax" | "none"; sameSite?: "strict" | "lax" | "none";
visible?: "hidden" | "show" | "byCookieValue";
cookieSecurity?: boolean; cookieSecurity?: boolean;
style?: object; style?: object;
buttonStyle?: object; buttonStyle?: object;
@@ -12,7 +13,7 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
onAccept?: Function; onAccept?: (acceptedByScrolling?: boolean) => void;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
declineButtonText?: Function | React.ReactNode; declineButtonText?: Function | React.ReactNode;
@@ -39,6 +40,10 @@ export interface CookieConsentProps {
overlayStyle?: object; overlayStyle?: object;
ariaAcceptLabel?: string; ariaAcceptLabel?: string;
ariaDeclineLabel?: string; ariaDeclineLabel?: string;
acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number;
customContentAttributes?: object;
customContainerAttributes?: object;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
@@ -51,4 +56,17 @@ export default class CookieConsent extends React.Component<CookieConsentProps, {
*/ */
export function getCookieConsentValue(name?: string): string; export function getCookieConsentValue(name?: string): string;
/**
* Reset the consent cookie
* Remove the cookie on browser in order to allow user to change their consent
* @param {*} name optional name of the cookie
*/
export function resetCookieConsentValue(name?: string);
/**
* Get the legacy cookie name by the regular cookie name
* @param {string} name of cookie to get
*/
export function getLegacyCookieName(name: string);
export { Cookies }; export { Cookies };

809
build/index.js
View File

@@ -1,24 +1,220 @@
/*! For license information please see index.js.LICENSE.txt */ /*! For license information please see index.js.LICENSE.txt */
module.exports = (() => { !(function (e, t) {
var e = { "object" == typeof exports && "object" == typeof module
866: (e, t, n) => { ? (module.exports = t())
: "function" == typeof define && define.amd
? define([], t)
: "object" == typeof exports
? (exports.ReactCookieConsent = t())
: (e.ReactCookieConsent = t());
})("undefined" != typeof self ? self : this, function () {
return (function () {
var e = {
808: function (e, t, n) {
var o, r, i;
void 0 ===
(r =
"function" ==
typeof (o = i =
function () {
function e() {
for (var e = 0, t = {}; e < arguments.length; e++) {
var n = arguments[e];
for (var o in n) t[o] = n[o];
}
return t;
}
function t(e) {
return e.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
}
return (function n(o) {
function r() {}
function i(t, n, i) {
if ("undefined" != typeof document) {
"number" == typeof (i = e({ path: "/" }, r.defaults, i)).expires &&
(i.expires = new Date(1 * new Date() + 864e5 * i.expires)),
(i.expires = i.expires ? i.expires.toUTCString() : "");
try {
var c = JSON.stringify(n);
/^[\{\[]/.test(c) && (n = c);
} catch (e) {}
(n = o.write
? o.write(n, t)
: encodeURIComponent(String(n)).replace(
/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,
decodeURIComponent
)),
(t = encodeURIComponent(String(t))
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
.replace(/[\(\)]/g, escape));
var l = "";
for (var s in i)
i[s] && ((l += "; " + s), !0 !== i[s] && (l += "=" + i[s].split(";")[0]));
return (document.cookie = t + "=" + n + l);
}
}
function c(e, n) {
if ("undefined" != typeof document) {
for (
var r = {}, i = document.cookie ? document.cookie.split("; ") : [], c = 0;
c < i.length;
c++
) {
var l = i[c].split("="),
s = l.slice(1).join("=");
n || '"' !== s.charAt(0) || (s = s.slice(1, -1));
try {
var a = t(l[0]);
if (((s = (o.read || o)(s, a) || t(s)), n))
try {
s = JSON.parse(s);
} catch (e) {}
if (((r[a] = s), e === a)) break;
} catch (e) {}
}
return e ? r[e] : r;
}
}
return (
(r.set = i),
(r.get = function (e) {
return c(e, !1);
}),
(r.getJSON = function (e) {
return c(e, !0);
}),
(r.remove = function (t, n) {
i(t, "", e(n, { expires: -1 }));
}),
(r.defaults = {}),
(r.withConverter = n),
r
);
})(function () {});
})
? o.call(t, n, t, e)
: o) || (e.exports = r),
(e.exports = i());
},
703: function (e, t, n) {
"use strict";
var o = n(414);
function r() {}
function i() {}
(i.resetWarningCache = r),
(e.exports = function () {
function e(e, t, n, r, i, c) {
if (c !== o) {
var l = new Error(
"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
);
throw ((l.name = "Invariant Violation"), l);
}
}
function t() {
return e;
}
e.isRequired = e;
var n = {
array: e,
bool: e,
func: e,
number: e,
object: e,
string: e,
symbol: e,
any: e,
arrayOf: t,
element: e,
elementType: e,
instanceOf: t,
node: e,
objectOf: t,
oneOf: t,
oneOfType: t,
shape: t,
exact: t,
checkPropTypes: i,
resetWarningCache: r,
};
return (n.PropTypes = n), n;
});
},
697: function (e, t, n) {
e.exports = n(703)();
},
414: function (e) {
"use strict";
e.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
},
},
t = {};
function n(o) {
var r = t[o];
if (void 0 !== r) return r.exports;
var i = (t[o] = { exports: {} });
return e[o](i, i.exports, n), i.exports;
}
(n.n = function (e) {
var t =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return n.d(t, { a: t }), t;
}),
(n.d = function (e, t) {
for (var o in t)
n.o(t, o) && !n.o(e, o) && Object.defineProperty(e, o, { enumerable: !0, get: t[o] });
}),
(n.o = function (e, t) {
return Object.prototype.hasOwnProperty.call(e, t);
}),
(n.r = function (e) {
"undefined" != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
Object.defineProperty(e, "__esModule", { value: !0 });
});
var o = {};
return (
(function () {
"use strict"; "use strict";
n.r(t), n.r(o),
n.d(t, { n.d(o, {
Cookies: () => s(), Cookies: function () {
OPTIONS: () => h, return l();
SAME_SITE_OPTIONS: () => m, },
default: () => j, OPTIONS: function () {
getCookieConsentValue: () => g, return h;
},
SAME_SITE_OPTIONS: function () {
return g;
},
VISIBLE_OPTIONS: function () {
return C;
},
default: function () {
return B;
},
getCookieConsentValue: function () {
return S;
},
resetCookieConsentValue: function () {
return k;
},
}); });
const o = require("react"); const e = require("react");
var r = n.n(o), var t = n.n(e),
i = n(697), r = n(697),
c = n.n(i), i = n.n(r),
a = n(808), c = n(808),
s = n.n(a); l = n.n(c);
function l(e) { function s(e) {
return (l = return (s =
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
? function (e) { ? function (e) {
return typeof e; return typeof e;
@@ -32,6 +228,7 @@ module.exports = (() => {
: typeof e; : typeof e;
})(e); })(e);
} }
var a = ["children"];
function u() { function u() {
return (u = return (u =
Object.assign || Object.assign ||
@@ -60,7 +257,7 @@ module.exports = (() => {
var n = null != arguments[t] ? arguments[t] : {}; var n = null != arguments[t] ? arguments[t] : {};
t % 2 t % 2
? p(Object(n), !0).forEach(function (t) { ? p(Object(n), !0).forEach(function (t) {
b(e, t, n[t]); O(e, t, n[t]);
}) })
: Object.getOwnPropertyDescriptors : Object.getOwnPropertyDescriptors
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
@@ -70,20 +267,7 @@ module.exports = (() => {
} }
return e; return e;
} }
function b(e, t, n) { function b(e, t) {
return (
t in e
? Object.defineProperty(e, t, {
value: n,
enumerable: !0,
configurable: !0,
writable: !0,
})
: (e[t] = n),
e
);
}
function y(e, t) {
for (var n = 0; n < t.length; n++) { for (var n = 0; n < t.length; n++) {
var o = t[n]; var o = t[n];
(o.enumerable = o.enumerable || !1), (o.enumerable = o.enumerable || !1),
@@ -99,42 +283,60 @@ module.exports = (() => {
return (e.__proto__ = t), e; return (e.__proto__ = t), e;
})(e, t); })(e, t);
} }
function v(e, t) { function y(e, t) {
return !t || ("object" !== l(t) && "function" != typeof t) if (t && ("object" === s(t) || "function" == typeof t)) return t;
? (function (e) { if (void 0 !== t)
if (void 0 === e) throw new TypeError("Derived constructors may only return object or undefined");
throw new ReferenceError( return v(e);
"this hasn't been initialised - super() hasn't been called"
);
return e;
})(e)
: t;
} }
function O(e) { function v(e) {
return (O = Object.setPrototypeOf if (void 0 === e)
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function m(e) {
return (m = Object.setPrototypeOf
? Object.getPrototypeOf ? Object.getPrototypeOf
: function (e) { : function (e) {
return e.__proto__ || Object.getPrototypeOf(e); return e.__proto__ || Object.getPrototypeOf(e);
})(e); })(e);
} }
function O(e, t, n) {
return (
t in e
? Object.defineProperty(e, t, {
value: n,
enumerable: !0,
configurable: !0,
writable: !0,
})
: (e[t] = n),
e
);
}
var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" }, var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
m = { STRICT: "strict", LAX: "lax", NONE: "none" }, g = { STRICT: "strict", LAX: "lax", NONE: "none" },
g = function () { C = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : C, S = function () {
t = s().get(e); var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j,
return void 0 === t && (t = s().get(S(e))), t; t = l().get(e);
return void 0 === t && (t = l().get(x(e))), t;
}, },
S = function (e) { k = function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j;
l().remove(e);
},
x = function (e) {
return "".concat(e, "-legacy"); return "".concat(e, "-legacy");
}, },
C = "CookieConsent", j = "CookieConsent",
k = function (e) { w = function (e) {
var t = e.condition, var t = e.condition,
n = e.wrapper, n = e.wrapper,
o = e.children; o = e.children;
return t ? n(o) : o; return t ? n(o) : o;
}, },
x = (function (e) { T = (function (e) {
!(function (e, t) { !(function (e, t) {
if ("function" != typeof t && null !== t) if ("function" != typeof t && null !== t)
throw new TypeError("Super expression must either be null or a function"); throw new TypeError("Super expression must either be null or a function");
@@ -142,20 +344,23 @@ module.exports = (() => {
constructor: { value: e, writable: !0, configurable: !0 }, constructor: { value: e, writable: !0, configurable: !0 },
})), })),
t && d(e, t); t && d(e, t);
})(a, e); })(s, e);
var t, var n,
n,
o, o,
r,
i, i,
c = c =
((o = a), ((r = s),
(i = (function () { (i = (function () {
if ("undefined" == typeof Reflect || !Reflect.construct) return !1; if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
if (Reflect.construct.sham) return !1; if (Reflect.construct.sham) return !1;
if ("function" == typeof Proxy) return !0; if ("function" == typeof Proxy) return !0;
try { try {
return ( return (
Date.prototype.toString.call(Reflect.construct(Date, [], function () {})), !0 Boolean.prototype.valueOf.call(
Reflect.construct(Boolean, [], function () {})
),
!0
); );
} catch (e) { } catch (e) {
return !1; return !1;
@@ -163,20 +368,31 @@ module.exports = (() => {
})()), })()),
function () { function () {
var e, var e,
t = O(o); t = m(r);
if (i) { if (i) {
var n = O(this).constructor; var n = m(this).constructor;
e = Reflect.construct(t, arguments, n); e = Reflect.construct(t, arguments, n);
} else e = t.apply(this, arguments); } else e = t.apply(this, arguments);
return v(this, e); return y(this, e);
}); });
function a(e) { function s(e) {
var t; var t;
return ( return (
(function (e, t) { (function (e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function"); if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
})(this, a), })(this, s),
((t = c.call(this, e)).state = { O(v((t = c.call(this, e))), "handleScroll", function () {
var e = t.props.acceptOnScrollPercentage,
n = document.documentElement,
o = document.body,
r = "scrollTop",
i = "scrollHeight";
((n[r] || o[r]) / ((n[i] || o[i]) - n.clientHeight)) * 100 > e && t.accept(!0);
}),
O(v(t), "removeScrollListener", function () {
t.props.acceptOnScroll && window.removeEventListener("scroll", t.handleScroll);
}),
(t.state = {
visible: !1, visible: !1,
style: { style: {
alignItems: "baseline", alignItems: "baseline",
@@ -227,24 +443,36 @@ module.exports = (() => {
); );
} }
return ( return (
(t = a), (n = s),
(n = [ (o = [
{ {
key: "componentDidMount", key: "componentDidMount",
value: function () { value: function () {
var e = this.props.debug; var e = this.props.debug;
(void 0 === this.getCookieValue() || e) && this.setState({ visible: !0 }); (void 0 === this.getCookieValue() || e) &&
(this.setState({ visible: !0 }),
this.props.acceptOnScroll &&
window.addEventListener("scroll", this.handleScroll, { passive: !0 }));
},
},
{
key: "componentWillUnmount",
value: function () {
this.removeScrollListener();
}, },
}, },
{ {
key: "accept", key: "accept",
value: function () { value: function () {
var e = this.props, var e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0],
t = e.cookieName, t = this.props,
n = e.cookieValue, n = t.cookieName,
o = e.hideOnAccept, o = t.cookieValue,
r = e.onAccept; r = t.hideOnAccept,
this.setCookie(t, n), r(), o && this.setState({ visible: !1 }); i = t.onAccept;
this.setCookie(n, o),
i(null != e && e),
r && (this.setState({ visible: !1 }), this.removeScrollListener());
}, },
}, },
{ {
@@ -269,84 +497,91 @@ module.exports = (() => {
i = n.sameSite, i = n.sameSite,
c = this.props.cookieSecurity; c = this.props.cookieSecurity;
void 0 === c && (c = !location || "https:" === location.protocol); void 0 === c && (c = !location || "https:" === location.protocol);
var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c }); var s = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
i === m.NONE && s().set(S(e), t, a), s().set(e, t, a); i === g.NONE && l().set(x(e), t, s), l().set(e, t, s);
}, },
}, },
{ {
key: "getCookieValue", key: "getCookieValue",
value: function () { value: function () {
var e = this.props.cookieName; var e = this.props.cookieName;
return g(e); return S(e);
}, },
}, },
{ {
key: "render", key: "render",
value: function () { value: function () {
var e = this; var e = this;
if (!this.state.visible) return null; switch (this.props.visible) {
var t = this.props, case C.HIDDEN:
n = t.location, return null;
o = t.style, case C.BY_COOKIE_VALUE:
i = t.buttonStyle, if (!this.state.visible) return null;
c = t.declineButtonStyle, }
a = t.contentStyle, var n = this.props,
s = t.disableStyles, o = n.location,
l = t.buttonText, r = n.style,
p = t.declineButtonText, i = n.buttonStyle,
b = t.containerClasses, c = n.declineButtonStyle,
y = t.contentClasses, l = n.contentStyle,
d = t.buttonClasses, s = n.disableStyles,
v = t.buttonWrapperClasses, a = n.buttonText,
O = t.declineButtonClasses, p = n.declineButtonText,
m = t.buttonId, b = n.containerClasses,
g = t.declineButtonId, d = n.contentClasses,
S = t.disableButtonStyles, y = n.buttonClasses,
C = t.enableDeclineButton, v = n.buttonWrapperClasses,
x = t.flipButtons, m = n.declineButtonClasses,
j = t.ButtonComponent, O = n.buttonId,
T = t.overlay, g = n.declineButtonId,
w = t.overlayClasses, S = n.disableButtonStyles,
B = t.overlayStyle, k = n.enableDeclineButton,
P = t.ariaAcceptLabel, x = n.flipButtons,
D = t.ariaDeclineLabel, j = n.ButtonComponent,
E = {}, T = n.overlay,
I = {}, B = n.overlayClasses,
E = n.overlayStyle,
P = n.ariaAcceptLabel,
D = n.ariaDeclineLabel,
I = n.customContainerAttributes,
_ = n.customContentAttributes,
A = {},
N = {}, N = {},
_ = {}, R = {},
R = {}; L = {},
V = {};
switch ( switch (
(s (s
? ((E = u({}, o)), ? ((A = u({}, r)),
(I = u({}, i)), (N = u({}, i)),
(N = u({}, c)), (R = u({}, c)),
(_ = u({}, a)), (L = u({}, l)),
(R = u({}, B))) (V = u({}, E)))
: ((E = u({}, f(f({}, this.state.style), o))), : ((A = u({}, f(f({}, this.state.style), r))),
(_ = u({}, f(f({}, this.state.contentStyle), a))), (L = u({}, f(f({}, this.state.contentStyle), l))),
(R = u({}, f(f({}, this.state.overlayStyle), B))), (V = u({}, f(f({}, this.state.overlayStyle), E))),
S S
? ((I = u({}, i)), (N = u({}, c))) ? ((N = u({}, i)), (R = u({}, c)))
: ((I = u({}, f(f({}, this.state.buttonStyle), i))), : ((N = u({}, f(f({}, this.state.buttonStyle), i))),
(N = u({}, f(f({}, this.state.declineButtonStyle), c))))), (R = u({}, f(f({}, this.state.declineButtonStyle), c))))),
n) o)
) { ) {
case h.TOP: case h.TOP:
E.top = "0"; A.top = "0";
break; break;
case h.BOTTOM: case h.BOTTOM:
E.bottom = "0"; A.bottom = "0";
} }
var A = []; var U = [];
return ( return (
C && k &&
A.push( U.push(
r().createElement( t().createElement(
j, j,
{ {
key: "declineButton", key: "declineButton",
style: N, style: R,
className: O, className: m,
id: g, id: g,
"aria-label": D, "aria-label": D,
onClick: function () { onClick: function () {
@@ -356,39 +591,43 @@ module.exports = (() => {
p p
) )
), ),
A.push( U.push(
r().createElement( t().createElement(
j, j,
{ {
key: "acceptButton", key: "acceptButton",
style: I, style: N,
className: d, className: y,
id: m, id: O,
"aria-label": P, "aria-label": P,
onClick: function () { onClick: function () {
e.accept(); e.accept();
}, },
}, },
l a
) )
), ),
x && A.reverse(), x && U.reverse(),
r().createElement( t().createElement(
k, w,
{ {
condition: T, condition: T,
wrapper: function (e) { wrapper: function (e) {
return r().createElement("div", { style: R, className: w }, e); return t().createElement("div", { style: V, className: B }, e);
}, },
}, },
r().createElement( t().createElement(
"div", "div",
{ className: "".concat(b), style: E }, u({ className: "".concat(b), style: A }, I),
r().createElement("div", { style: _, className: y }, this.props.children), t().createElement(
r().createElement( "div",
u({ style: L, className: d }, _),
this.props.children
),
t().createElement(
"div", "div",
{ className: "".concat(v) }, { className: "".concat(v) },
A.map(function (e) { U.map(function (e) {
return e; return e;
}) })
) )
@@ -397,66 +636,76 @@ module.exports = (() => {
); );
}, },
}, },
]) && y(t.prototype, n), ]) && b(n.prototype, o),
a s
); );
})(o.Component); })(e.Component);
(x.propTypes = { (T.propTypes = {
location: c().oneOf( location: i().oneOf(
Object.keys(h).map(function (e) { Object.keys(h).map(function (e) {
return h[e]; return h[e];
}) })
), ),
sameSite: c().oneOf( visible: i().oneOf(
Object.keys(m).map(function (e) { Object.keys(C).map(function (e) {
return m[e]; return C[e];
}) })
), ),
style: c().object, sameSite: i().oneOf(
buttonStyle: c().object, Object.keys(g).map(function (e) {
declineButtonStyle: c().object, return g[e];
contentStyle: c().object, })
children: c().any, ),
disableStyles: c().bool, style: i().object,
hideOnAccept: c().bool, buttonStyle: i().object,
hideOnDecline: c().bool, declineButtonStyle: i().object,
onAccept: c().func, contentStyle: i().object,
onDecline: c().func, children: i().any,
buttonText: c().oneOfType([c().string, c().func, c().element]), disableStyles: i().bool,
declineButtonText: c().oneOfType([c().string, c().func, c().element]), hideOnAccept: i().bool,
cookieName: c().string, hideOnDecline: i().bool,
cookieValue: c().oneOfType([c().string, c().bool, c().number]), onAccept: i().func,
declineCookieValue: c().oneOfType([c().string, c().bool, c().number]), onDecline: i().func,
setDeclineCookie: c().bool, buttonText: i().oneOfType([i().string, i().func, i().element]),
debug: c().bool, declineButtonText: i().oneOfType([i().string, i().func, i().element]),
expires: c().number, cookieName: i().string,
containerClasses: c().string, cookieValue: i().oneOfType([i().string, i().bool, i().number]),
contentClasses: c().string, declineCookieValue: i().oneOfType([i().string, i().bool, i().number]),
buttonClasses: c().string, setDeclineCookie: i().bool,
buttonWrapperClasses: c().string, debug: i().bool,
declineButtonClasses: c().string, expires: i().number,
buttonId: c().string, containerClasses: i().string,
declineButtonId: c().string, contentClasses: i().string,
extraCookieOptions: c().object, buttonClasses: i().string,
disableButtonStyles: c().bool, buttonWrapperClasses: i().string,
enableDeclineButton: c().bool, declineButtonClasses: i().string,
flipButtons: c().bool, buttonId: i().string,
ButtonComponent: c().elementType, declineButtonId: i().string,
cookieSecurity: c().bool, extraCookieOptions: i().object,
overlay: c().bool, disableButtonStyles: i().bool,
overlayClasses: c().string, enableDeclineButton: i().bool,
overlayStyle: c().object, flipButtons: i().bool,
ariaAcceptLabel: c().string, ButtonComponent: i().elementType,
ariaDeclineLabel: c().string, cookieSecurity: i().bool,
overlay: i().bool,
overlayClasses: i().string,
overlayStyle: i().object,
ariaAcceptLabel: i().string,
ariaDeclineLabel: i().string,
acceptOnScroll: i().bool,
acceptOnScrollPercentage: i().number,
customContentAttributes: i().object,
customContainerAttributes: i().object,
}), }),
(x.defaultProps = { (T.defaultProps = {
disableStyles: !1, disableStyles: !1,
hideOnAccept: !0, hideOnAccept: !0,
hideOnDecline: !0, hideOnDecline: !0,
location: h.BOTTOM, location: h.BOTTOM,
visible: C.BY_COOKIE_VALUE,
onAccept: function () {}, onAccept: function () {},
onDecline: function () {}, onDecline: function () {},
cookieName: C, cookieName: j,
cookieValue: !0, cookieValue: !0,
declineCookieValue: !1, declineCookieValue: !1,
setDeclineCookie: !0, setDeclineCookie: !0,
@@ -475,10 +724,10 @@ module.exports = (() => {
disableButtonStyles: !1, disableButtonStyles: !1,
enableDeclineButton: !1, enableDeclineButton: !1,
flipButtons: !1, flipButtons: !1,
sameSite: m.LAX, sameSite: g.LAX,
ButtonComponent: function (e) { ButtonComponent: function (e) {
var t = e.children, var n = e.children,
n = (function (e, t) { o = (function (e, t) {
if (null == e) return {}; if (null == e) return {};
var n, var n,
o, o,
@@ -499,175 +748,21 @@ module.exports = (() => {
(Object.prototype.propertyIsEnumerable.call(e, n) && (r[n] = e[n])); (Object.prototype.propertyIsEnumerable.call(e, n) && (r[n] = e[n]));
} }
return r; return r;
})(e, ["children"]); })(e, a);
return r().createElement("button", n, t); return t().createElement("button", o, n);
}, },
overlay: !1, overlay: !1,
overlayClasses: "", overlayClasses: "",
ariaAcceptLabel: "Accept cookies", ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies", ariaDeclineLabel: "Decline cookies",
acceptOnScroll: !1,
acceptOnScrollPercentage: 25,
customContentAttributes: {},
customContainerAttributes: {},
}); });
const j = x; const B = T;
}, })(),
808: (e, t, n) => { o
var o, r, i; );
void 0 === })();
(r = });
"function" ==
typeof (o = i = function () {
function e() {
for (var e = 0, t = {}; e < arguments.length; e++) {
var n = arguments[e];
for (var o in n) t[o] = n[o];
}
return t;
}
function t(e) {
return e.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
}
return (function n(o) {
function r() {}
function i(t, n, i) {
if ("undefined" != typeof document) {
"number" == typeof (i = e({ path: "/" }, r.defaults, i)).expires &&
(i.expires = new Date(1 * new Date() + 864e5 * i.expires)),
(i.expires = i.expires ? i.expires.toUTCString() : "");
try {
var c = JSON.stringify(n);
/^[\{\[]/.test(c) && (n = c);
} catch (e) {}
(n = o.write
? o.write(n, t)
: encodeURIComponent(String(n)).replace(
/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,
decodeURIComponent
)),
(t = encodeURIComponent(String(t))
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
.replace(/[\(\)]/g, escape));
var a = "";
for (var s in i)
i[s] && ((a += "; " + s), !0 !== i[s] && (a += "=" + i[s].split(";")[0]));
return (document.cookie = t + "=" + n + a);
}
}
function c(e, n) {
if ("undefined" != typeof document) {
for (
var r = {}, i = document.cookie ? document.cookie.split("; ") : [], c = 0;
c < i.length;
c++
) {
var a = i[c].split("="),
s = a.slice(1).join("=");
n || '"' !== s.charAt(0) || (s = s.slice(1, -1));
try {
var l = t(a[0]);
if (((s = (o.read || o)(s, l) || t(s)), n))
try {
s = JSON.parse(s);
} catch (e) {}
if (((r[l] = s), e === l)) break;
} catch (e) {}
}
return e ? r[e] : r;
}
}
return (
(r.set = i),
(r.get = function (e) {
return c(e, !1);
}),
(r.getJSON = function (e) {
return c(e, !0);
}),
(r.remove = function (t, n) {
i(t, "", e(n, { expires: -1 }));
}),
(r.defaults = {}),
(r.withConverter = n),
r
);
})(function () {});
})
? o.call(t, n, t, e)
: o) || (e.exports = r),
(e.exports = i());
},
703: (e, t, n) => {
"use strict";
var o = n(414);
function r() {}
function i() {}
(i.resetWarningCache = r),
(e.exports = function () {
function e(e, t, n, r, i, c) {
if (c !== o) {
var a = new Error(
"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
);
throw ((a.name = "Invariant Violation"), a);
}
}
function t() {
return e;
}
e.isRequired = e;
var n = {
array: e,
bool: e,
func: e,
number: e,
object: e,
string: e,
symbol: e,
any: e,
arrayOf: t,
element: e,
elementType: e,
instanceOf: t,
node: e,
objectOf: t,
oneOf: t,
oneOfType: t,
shape: t,
exact: t,
checkPropTypes: i,
resetWarningCache: r,
};
return (n.PropTypes = n), n;
});
},
697: (e, t, n) => {
e.exports = n(703)();
},
414: (e) => {
"use strict";
e.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
},
},
t = {};
function n(o) {
if (t[o]) return t[o].exports;
var r = (t[o] = { exports: {} });
return e[o](r, r.exports, n), r.exports;
}
return (
(n.n = (e) => {
var t = e && e.__esModule ? () => e.default : () => e;
return n.d(t, { a: t }), t;
}),
(n.d = (e, t) => {
for (var o in t)
n.o(t, o) && !n.o(e, o) && Object.defineProperty(e, o, { enumerable: !0, get: t[o] });
}),
(n.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)),
(n.r = (e) => {
"undefined" != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
Object.defineProperty(e, "__esModule", { value: !0 });
}),
n(866)
);
})();

1
example Submodule

Submodule example added at bff8dd76c5

12618
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -4,7 +4,7 @@
"name": "Rick van Lieshout", "name": "Rick van Lieshout",
"email": "info@rickvanlieshout.com" "email": "info@rickvanlieshout.com"
}, },
"version": "6.2.2", "version": "7.1.1",
"description": "A small, simple and customizable cookie consent bar for use in React applications.", "description": "A small, simple and customizable cookie consent bar for use in React applications.",
"main": "build/index.js", "main": "build/index.js",
"types": "build/index.d.ts", "types": "build/index.d.ts",
@@ -22,7 +22,7 @@
"minor": "npm --no-git-tag-version version minor", "minor": "npm --no-git-tag-version version minor",
"major": "npm --no-git-tag-version version major", "major": "npm --no-git-tag-version version major",
"preversion": "grep \"\\[$npm_package_version\\]\" CHANGELOG.md > /dev/null || ( echo 'You need to add an entry in CHANGELOG.md for this version.' && false )", "preversion": "grep \"\\[$npm_package_version\\]\" CHANGELOG.md > /dev/null || ( echo 'You need to add an entry in CHANGELOG.md for this version.' && false )",
"release": "npm run build && git add -A && git tag $npm_package_version && git commit -m 'release $npm_package_version' && git push && git push --tags && npm publish", "release": "npm run build && git add -A && git tag $npm_package_version && git commit -m \"release $npm_package_version\" && git push && git push --tags && npm publish",
"release-patch": "npm run patch && npm run release", "release-patch": "npm run patch && npm run release",
"release-minor": "npm run minor && npm run release", "release-minor": "npm run minor && npm run release",
"release-major": "npm run major && npm run release" "release-major": "npm run major && npm run release"

22
src/index.d.ts vendored
View File

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
export interface CookieConsentProps { export interface CookieConsentProps {
location?: "top" | "bottom" | "none"; location?: "top" | "bottom" | "none";
sameSite?: "strict" | "lax" | "none"; sameSite?: "strict" | "lax" | "none";
visible?: "hidden" | "show" | "byCookieValue";
cookieSecurity?: boolean; cookieSecurity?: boolean;
style?: object; style?: object;
buttonStyle?: object; buttonStyle?: object;
@@ -12,7 +13,7 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
onAccept?: Function; onAccept?: (acceptedByScrolling?: boolean) => void;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
declineButtonText?: Function | React.ReactNode; declineButtonText?: Function | React.ReactNode;
@@ -37,8 +38,14 @@ export interface CookieConsentProps {
overlay?: boolean; overlay?: boolean;
overlayClasses?: string; overlayClasses?: string;
overlayStyle?: object; overlayStyle?: object;
onOverlayClick?: () => void;
acceptOnOverlayClick?: boolean;
ariaAcceptLabel?: string; ariaAcceptLabel?: string;
ariaDeclineLabel?: string; ariaDeclineLabel?: string;
acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number;
customContentAttributes?: object;
customContainerAttributes?: object;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
@@ -51,4 +58,17 @@ export default class CookieConsent extends React.Component<CookieConsentProps, {
*/ */
export function getCookieConsentValue(name?: string): string; export function getCookieConsentValue(name?: string): string;
/**
* Reset the consent cookie
* Remove the cookie on browser in order to allow user to change their consent
* @param {*} name optional name of the cookie
*/
export function resetCookieConsentValue(name?: string);
/**
* Get the legacy cookie name by the regular cookie name
* @param {string} name of cookie to get
*/
export function getLegacyCookieName(name: string);
export { Cookies }; export { Cookies };

118
src/index.js
View File

@@ -14,6 +14,12 @@ export const SAME_SITE_OPTIONS = {
NONE: "none", NONE: "none",
}; };
export const VISIBLE_OPTIONS = {
HIDDEN: "hidden",
SHOW: "show",
BY_COOKIE_VALUE: "byCookieValue",
};
/** /**
* Returns the value of the consent cookie * Returns the value of the consent cookie
* Retrieves the regular value first and if not found the legacy one according * Retrieves the regular value first and if not found the legacy one according
@@ -30,6 +36,15 @@ export const getCookieConsentValue = (name = defaultCookieConsentName) => {
return cookieValue; return cookieValue;
}; };
/**
* Reset the consent cookie
* Remove the cookie on browser in order to allow user to change their consent
* @param {*} name optional name of the cookie
*/
export const resetCookieConsentValue = (name = defaultCookieConsentName) => {
Cookies.remove(name);
};
/** /**
* Get the legacy cookie name by the regular cookie name * Get the legacy cookie name by the regular cookie name
* @param {string} name of cookie to get * @param {string} name of cookie to get
@@ -116,35 +131,51 @@ class CookieConsent extends Component {
// if cookie undefined or debug // if cookie undefined or debug
if (this.getCookieValue() === undefined || debug) { if (this.getCookieValue() === undefined || debug) {
this.setState({ visible: true }); this.setState({ visible: true });
// if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
if (this.props.acceptOnScroll) {
window.addEventListener("scroll", this.handleScroll, { passive: true });
}
} }
} }
componentWillUnmount() {
// remove listener if still set
this.removeScrollListener();
}
/** /**
* Set a persistent accept cookie * Set a persistent accept cookie
*/ */
accept() { accept(acceptedByScrolling = false) {
const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props; const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
this.setCookie(cookieName, cookieValue); this.setCookie(cookieName, cookieValue);
onAccept(); onAccept(acceptedByScrolling ?? false);
if (hideOnAccept) { if (hideOnAccept) {
this.setState({ visible: false }); this.setState({ visible: false });
this.removeScrollListener();
} }
} }
/**
* Handle a click on the overlay
*/
overlayClick() {
const { acceptOnOverlayClick, onOverlayClick } = this.props;
if (acceptOnOverlayClick) {
this.accept();
}
onOverlayClick();
}
/** /**
* Set a persistent decline cookie * Set a persistent decline cookie
*/ */
decline() { decline() {
const { const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
cookieName, this.props;
declineCookieValue,
hideOnDecline,
onDecline,
setDeclineCookie,
} = this.props;
if (setDeclineCookie) { if (setDeclineCookie) {
this.setCookie(cookieName, declineCookieValue); this.setCookie(cookieName, declineCookieValue);
@@ -191,10 +222,47 @@ class CookieConsent extends Component {
return getCookieConsentValue(cookieName); return getCookieConsentValue(cookieName);
} }
/**
* checks whether scroll has exceeded set amount and fire accept if so.
*/
handleScroll = () => {
const { acceptOnScrollPercentage } = this.props;
// (top / height) - height * 100
let rootNode = document.documentElement,
body = document.body,
top = "scrollTop",
height = "scrollHeight";
let percentage =
((rootNode[top] || body[top]) /
((rootNode[height] || body[height]) - rootNode.clientHeight)) *
100;
if (percentage > acceptOnScrollPercentage) {
this.accept(true);
}
};
removeScrollListener = () => {
const { acceptOnScroll } = this.props;
if (acceptOnScroll) {
window.removeEventListener("scroll", this.handleScroll);
}
};
render() { render() {
// If the bar shouldn't be visible don't render anything. // If the bar shouldn't be visible don't render anything.
if (!this.state.visible) { switch (this.props.visible) {
return null; case VISIBLE_OPTIONS.HIDDEN:
return null;
case VISIBLE_OPTIONS.BY_COOKIE_VALUE:
if (!this.state.visible) {
return null;
}
break;
default:
break;
} }
const { const {
@@ -222,6 +290,8 @@ class CookieConsent extends Component {
overlayStyle, overlayStyle,
ariaAcceptLabel, ariaAcceptLabel,
ariaDeclineLabel, ariaDeclineLabel,
customContainerAttributes,
customContentAttributes,
} = this.props; } = this.props;
let myStyle = {}; let myStyle = {};
@@ -310,13 +380,19 @@ class CookieConsent extends Component {
<ConditionalWrapper <ConditionalWrapper
condition={overlay} condition={overlay}
wrapper={(children) => ( wrapper={(children) => (
<div style={myOverlayStyle} className={overlayClasses}> <div
style={myOverlayStyle}
className={overlayClasses}
onClick={() => {
this.overlayClick();
}}
>
{children} {children}
</div> </div>
)} )}
> >
<div className={`${containerClasses}`} style={myStyle}> <div className={`${containerClasses}`} style={myStyle} {...customContainerAttributes}>
<div style={myContentStyle} className={contentClasses}> <div style={myContentStyle} className={contentClasses} {...customContentAttributes}>
{this.props.children} {this.props.children}
</div> </div>
<div className={`${buttonWrapperClasses}`}> <div className={`${buttonWrapperClasses}`}>
@@ -332,6 +408,7 @@ class CookieConsent extends Component {
CookieConsent.propTypes = { CookieConsent.propTypes = {
location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])), location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])),
visible: PropTypes.oneOf(Object.keys(VISIBLE_OPTIONS).map((key) => VISIBLE_OPTIONS[key])),
sameSite: PropTypes.oneOf(Object.keys(SAME_SITE_OPTIONS).map((key) => SAME_SITE_OPTIONS[key])), sameSite: PropTypes.oneOf(Object.keys(SAME_SITE_OPTIONS).map((key) => SAME_SITE_OPTIONS[key])),
style: PropTypes.object, style: PropTypes.object,
buttonStyle: PropTypes.object, buttonStyle: PropTypes.object,
@@ -367,8 +444,14 @@ CookieConsent.propTypes = {
overlay: PropTypes.bool, overlay: PropTypes.bool,
overlayClasses: PropTypes.string, overlayClasses: PropTypes.string,
overlayStyle: PropTypes.object, overlayStyle: PropTypes.object,
onOverlayClick: PropTypes.func,
acceptOnOverlayClick: PropTypes.bool,
ariaAcceptLabel: PropTypes.string, ariaAcceptLabel: PropTypes.string,
ariaDeclineLabel: PropTypes.string, ariaDeclineLabel: PropTypes.string,
acceptOnScroll: PropTypes.bool,
acceptOnScrollPercentage: PropTypes.number,
customContentAttributes: PropTypes.object,
customContainerAttributes: PropTypes.object,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@@ -376,6 +459,7 @@ CookieConsent.defaultProps = {
hideOnAccept: true, hideOnAccept: true,
hideOnDecline: true, hideOnDecline: true,
location: OPTIONS.BOTTOM, location: OPTIONS.BOTTOM,
visible: VISIBLE_OPTIONS.BY_COOKIE_VALUE,
onAccept: () => {}, onAccept: () => {},
onDecline: () => {}, onDecline: () => {},
cookieName: defaultCookieConsentName, cookieName: defaultCookieConsentName,
@@ -401,8 +485,14 @@ CookieConsent.defaultProps = {
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>, ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
overlay: false, overlay: false,
overlayClasses: "", overlayClasses: "",
onOverlayClick: () => {},
acceptOnOverlayClick: false,
ariaAcceptLabel: "Accept cookies", ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies", ariaDeclineLabel: "Decline cookies",
acceptOnScroll: false,
acceptOnScrollPercentage: 25,
customContentAttributes: {},
customContainerAttributes: {},
}; };
export default CookieConsent; export default CookieConsent;

8
webpack.config.js
View File

@@ -6,17 +6,21 @@ module.exports = {
output: { output: {
path: path.resolve(__dirname, "build"), path: path.resolve(__dirname, "build"),
filename: "index.js", filename: "index.js",
libraryTarget: "commonjs2", // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide. library: {
name: "ReactCookieConsent",
type: "umd",
},
environment: { environment: {
arrowFunction: false, // the generated runtime-code should not use arrow functions arrowFunction: false, // the generated runtime-code should not use arrow functions
}, },
globalObject: `typeof self !== 'undefined' ? self : this`,
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.js$/, test: /\.js$/,
include: path.resolve(__dirname, "src"), include: path.resolve(__dirname, "src"),
exclude: /(node_modules|bower_components|build)/, exclude: /(node_modules|build)/,
use: { use: {
loader: "babel-loader", loader: "babel-loader",
options: { options: {