mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-01-20 18:41:44 +01:00
Code Issues Projects Releases Wiki Activity

Fix the TypeScript definition of some properties ( (#144)

Browse Source 
Co-authored-by: Souchet Céline <4921914+csouchet@users.noreply.github.com>
This commit is contained in:
Rick van Lieshout 2021-12-20 17:49:36 +01:00 committed by GitHub
parent 775ec9db96
commit 2a1e52b24a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 173 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -5,6 +5,15 @@ 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)] ## [[7.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)]
- Added custom attribute props for content and container - Added custom attribute props for content and container

92
README.md
View File

@ -137,52 +137,52 @@ That option would be interesting if you want to allow user to change their conse
## 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. |
| visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. | | visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. |
| children | string or React component | | Content to appear inside the bar | | children | string or React component | | Content to appear inside the bar |
| disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) | | disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) |
| 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) | | 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) |
| buttonText | string or React component | "I understand" | Text to appear on the button | | buttonText | string or React component | "I understand" | Text to appear on the button |
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | | declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. | | cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | | cookieValue | string or boolean or number | true | Value to be saved under the cookieName. |
| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | | declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. |
| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | | setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" |
| onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. | | onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. |
| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. | | onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. |
| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. | | debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
| expires | number | 365 | Number of days before the cookie expires. | | expires | number | 365 | Number of days before the cookie expires. |
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | | extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
| overlay | boolean | false | Whether to show a page obscuring overlay or not. | | overlay | boolean | false | Whether to show a page obscuring overlay or not. |
| containerClasses | string | "" | CSS classes to apply to the surrounding container | | containerClasses | string | "" | CSS classes to apply to the surrounding container |
| buttonClasses | string | "" | CSS classes to apply to the button | | buttonClasses | string | "" | CSS classes to apply to the button |
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | | buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
| declineButtonClasses | string | "" | CSS classes to apply to the decline button | | declineButtonClasses | string | "" | CSS classes to apply to the decline button |
| buttonId | string | "" | Id to apply to the button | | buttonId | string | "" | Id to apply to the button |
| declineButtonId | string | "" | Id to apply to the decline button | | declineButtonId | string | "" | Id to apply to the decline button |
| contentClasses | string | "" | CSS classes to apply to the content | | contentClasses | string | "" | CSS classes to apply to the content |
| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | | overlayClasses | string | "" | CSS classes to apply to the surrounding overlay |
| style | object | [look at source][style] | React styling object for the bar. | | style | object | [look at source][style] | React styling object for the bar. |
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | | buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | | declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | | contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | | overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. |
| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) | | disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) |
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | | enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| ButtonComponent | React component | button | React Component to render as a button. | | ButtonComponent | React component | button | React Component to render as a button. |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | | sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
| cookieSecurity | boolean ¡ | undefined | Cookie security level. Defaults to true unless running on http. | | cookieSecurity | boolean ¡ | undefined | Cookie security level. Defaults to true unless running on http. |
| ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept 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 | | 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) | | 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 | | 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 |
| customContentAttributes | customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div |
| object | {} | Allows you to set custom (data) attributes on the content div | | onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay |
| customContainerAttributes | object | {} | Allows you to set custom (data) attributes on the container div | | acceptOnOverlayClick | boolean | false | Determines whether the cookies should be accepted after clicking on the overlay |
## Debugging it ## Debugging it

6
build/index.d.ts vendored
View File

@ -38,12 +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; acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number; acceptOnScrollPercentage?: number;
customContentAttributes: object; customContentAttributes?: object;
customContainerAttributes: object; customContainerAttributes?: object;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

147
build/index.js
View File

@ -48,8 +48,8 @@
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent) .replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
.replace(/[\(\)]/g, escape)); .replace(/[\(\)]/g, escape));
var l = ""; var l = "";
for (var s in i) for (var a in i)
i[s] && ((l += "; " + s), !0 !== i[s] && (l += "=" + i[s].split(";")[0])); i[a] && ((l += "; " + a), !0 !== i[a] && (l += "=" + i[a].split(";")[0]));
return (document.cookie = t + "=" + n + l); return (document.cookie = t + "=" + n + l);
} }
} }
@ -61,15 +61,15 @@
c++ c++
) { ) {
var l = i[c].split("="), var l = i[c].split("="),
s = l.slice(1).join("="); a = l.slice(1).join("=");
n || '"' !== s.charAt(0) || (s = s.slice(1, -1)); n || '"' !== a.charAt(0) || (a = a.slice(1, -1));
try { try {
var a = t(l[0]); var s = t(l[0]);
if (((s = (o.read || o)(s, a) || t(s)), n)) if (((a = (o.read || o)(a, s) || t(a)), n))
try { try {
s = JSON.parse(s); a = JSON.parse(a);
} catch (e) {} } catch (e) {}
if (((r[a] = s), e === a)) break; if (((r[s] = a), e === s)) break;
} catch (e) {} } catch (e) {}
} }
return e ? r[e] : r; return e ? r[e] : r;
@ -192,10 +192,10 @@
return h; return h;
}, },
SAME_SITE_OPTIONS: function () { SAME_SITE_OPTIONS: function () {
return g; return C;
}, },
VISIBLE_OPTIONS: function () { VISIBLE_OPTIONS: function () {
return C; return g;
}, },
default: function () { default: function () {
return B; return B;
@ -213,8 +213,8 @@
i = n.n(r), i = n.n(r),
c = n(808), c = n(808),
l = n.n(c); l = n.n(c);
function s(e) { function a(e) {
return (s = return (a =
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
? function (e) { ? function (e) {
return typeof e; return typeof e;
@ -228,7 +228,7 @@
: typeof e; : typeof e;
})(e); })(e);
} }
var a = ["children"]; var s = ["children"];
function u() { function u() {
return (u = return (u =
Object.assign || Object.assign ||
@ -257,7 +257,7 @@
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) {
O(e, t, n[t]); m(e, t, n[t]);
}) })
: Object.getOwnPropertyDescriptors : Object.getOwnPropertyDescriptors
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
@ -276,15 +276,15 @@
Object.defineProperty(e, o.key, o); Object.defineProperty(e, o.key, o);
} }
} }
function d(e, t) { function y(e, t) {
return (d = return (y =
Object.setPrototypeOf || Object.setPrototypeOf ||
function (e, t) { function (e, t) {
return (e.__proto__ = t), e; return (e.__proto__ = t), e;
})(e, t); })(e, t);
} }
function y(e, t) { function d(e, t) {
if (t && ("object" === s(t) || "function" == typeof t)) return t; if (t && ("object" === a(t) || "function" == typeof t)) return t;
if (void 0 !== t) if (void 0 !== t)
throw new TypeError("Derived constructors may only return object or undefined"); throw new TypeError("Derived constructors may only return object or undefined");
return v(e); return v(e);
@ -294,14 +294,14 @@
throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e; return e;
} }
function m(e) { function O(e) {
return (m = Object.setPrototypeOf return (O = 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) { function m(e, t, n) {
return ( return (
t in e t in e
? Object.defineProperty(e, t, { ? Object.defineProperty(e, t, {
@ -315,8 +315,8 @@
); );
} }
var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" }, var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
g = { STRICT: "strict", LAX: "lax", NONE: "none" }, C = { STRICT: "strict", LAX: "lax", NONE: "none" },
C = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" }, g = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
S = function () { S = function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j, var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j,
t = l().get(e); t = l().get(e);
@ -343,14 +343,14 @@
(e.prototype = Object.create(t && t.prototype, { (e.prototype = Object.create(t && t.prototype, {
constructor: { value: e, writable: !0, configurable: !0 }, constructor: { value: e, writable: !0, configurable: !0 },
})), })),
t && d(e, t); t && y(e, t);
})(s, e); })(a, e);
var n, var n,
o, o,
r, r,
i, i,
c = c =
((r = s), ((r = a),
(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;
@ -368,20 +368,20 @@
})()), })()),
function () { function () {
var e, var e,
t = m(r); t = O(r);
if (i) { if (i) {
var n = m(this).constructor; var n = O(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 y(this, e); return d(this, e);
}); });
function s(e) { function a(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, s), })(this, a),
O(v((t = c.call(this, e))), "handleScroll", function () { m(v((t = c.call(this, e))), "handleScroll", function () {
var e = t.props.acceptOnScrollPercentage, var e = t.props.acceptOnScrollPercentage,
n = document.documentElement, n = document.documentElement,
o = document.body, o = document.body,
@ -389,7 +389,7 @@
i = "scrollHeight"; i = "scrollHeight";
((n[r] || o[r]) / ((n[i] || o[i]) - n.clientHeight)) * 100 > e && t.accept(!0); ((n[r] || o[r]) / ((n[i] || o[i]) - n.clientHeight)) * 100 > e && t.accept(!0);
}), }),
O(v(t), "removeScrollListener", function () { m(v(t), "removeScrollListener", function () {
t.props.acceptOnScroll && window.removeEventListener("scroll", t.handleScroll); t.props.acceptOnScroll && window.removeEventListener("scroll", t.handleScroll);
}), }),
(t.state = { (t.state = {
@ -443,7 +443,7 @@
); );
} }
return ( return (
(n = s), (n = a),
(o = [ (o = [
{ {
key: "componentDidMount", key: "componentDidMount",
@ -475,6 +475,15 @@
r && (this.setState({ visible: !1 }), this.removeScrollListener()); r && (this.setState({ visible: !1 }), this.removeScrollListener());
}, },
}, },
{
key: "overlayClick",
value: function () {
var e = this.props,
t = e.acceptOnOverlayClick,
n = e.onOverlayClick;
t && this.accept(), n();
},
},
{ {
key: "decline", key: "decline",
value: function () { value: function () {
@ -497,8 +506,8 @@
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 s = f(f({ expires: r }, o), {}, { sameSite: i, secure: c }); var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
i === g.NONE && l().set(x(e), t, s), l().set(e, t, s); i === C.NONE && l().set(x(e), t, a), l().set(e, t, a);
}, },
}, },
{ {
@ -513,9 +522,9 @@
value: function () { value: function () {
var e = this; var e = this;
switch (this.props.visible) { switch (this.props.visible) {
case C.HIDDEN: case g.HIDDEN:
return null; return null;
case C.BY_COOKIE_VALUE: case g.BY_COOKIE_VALUE:
if (!this.state.visible) return null; if (!this.state.visible) return null;
} }
var n = this.props, var n = this.props,
@ -524,16 +533,16 @@
i = n.buttonStyle, i = n.buttonStyle,
c = n.declineButtonStyle, c = n.declineButtonStyle,
l = n.contentStyle, l = n.contentStyle,
s = n.disableStyles, a = n.disableStyles,
a = n.buttonText, s = n.buttonText,
p = n.declineButtonText, p = n.declineButtonText,
b = n.containerClasses, b = n.containerClasses,
d = n.contentClasses, y = n.contentClasses,
y = n.buttonClasses, d = n.buttonClasses,
v = n.buttonWrapperClasses, v = n.buttonWrapperClasses,
m = n.declineButtonClasses, O = n.declineButtonClasses,
O = n.buttonId, m = n.buttonId,
g = n.declineButtonId, C = n.declineButtonId,
S = n.disableButtonStyles, S = n.disableButtonStyles,
k = n.enableDeclineButton, k = n.enableDeclineButton,
x = n.flipButtons, x = n.flipButtons,
@ -551,7 +560,7 @@
L = {}, L = {},
V = {}; V = {};
switch ( switch (
(s (a
? ((A = u({}, r)), ? ((A = u({}, r)),
(N = u({}, i)), (N = u({}, i)),
(R = u({}, c)), (R = u({}, c)),
@ -581,8 +590,8 @@
{ {
key: "declineButton", key: "declineButton",
style: R, style: R,
className: m, className: O,
id: g, id: C,
"aria-label": D, "aria-label": D,
onClick: function () { onClick: function () {
e.decline(); e.decline();
@ -597,14 +606,14 @@
{ {
key: "acceptButton", key: "acceptButton",
style: N, style: N,
className: y, className: d,
id: O, id: m,
"aria-label": P, "aria-label": P,
onClick: function () { onClick: function () {
e.accept(); e.accept();
}, },
}, },
a s
) )
), ),
x && U.reverse(), x && U.reverse(),
@ -612,8 +621,18 @@
w, w,
{ {
condition: T, condition: T,
wrapper: function (e) { wrapper: function (n) {
return t().createElement("div", { style: V, className: B }, e); return t().createElement(
"div",
{
style: V,
className: B,
onClick: function () {
e.overlayClick();
},
},
n
);
}, },
}, },
t().createElement( t().createElement(
@ -621,7 +640,7 @@
u({ className: "".concat(b), style: A }, I), u({ className: "".concat(b), style: A }, I),
t().createElement( t().createElement(
"div", "div",
u({ style: L, className: d }, _), u({ style: L, className: y }, _),
this.props.children this.props.children
), ),
t().createElement( t().createElement(
@ -637,7 +656,7 @@
}, },
}, },
]) && b(n.prototype, o), ]) && b(n.prototype, o),
s a
); );
})(e.Component); })(e.Component);
(T.propTypes = { (T.propTypes = {
@ -647,13 +666,13 @@
}) })
), ),
visible: i().oneOf( visible: i().oneOf(
Object.keys(C).map(function (e) { Object.keys(g).map(function (e) {
return C[e]; return g[e];
}) })
), ),
sameSite: i().oneOf( sameSite: i().oneOf(
Object.keys(g).map(function (e) { Object.keys(C).map(function (e) {
return g[e]; return C[e];
}) })
), ),
style: i().object, style: i().object,
@ -690,6 +709,8 @@
overlay: i().bool, overlay: i().bool,
overlayClasses: i().string, overlayClasses: i().string,
overlayStyle: i().object, overlayStyle: i().object,
onOverlayClick: i().func,
acceptOnOverlayClick: i().bool,
ariaAcceptLabel: i().string, ariaAcceptLabel: i().string,
ariaDeclineLabel: i().string, ariaDeclineLabel: i().string,
acceptOnScroll: i().bool, acceptOnScroll: i().bool,
@ -702,7 +723,7 @@
hideOnAccept: !0, hideOnAccept: !0,
hideOnDecline: !0, hideOnDecline: !0,
location: h.BOTTOM, location: h.BOTTOM,
visible: C.BY_COOKIE_VALUE, visible: g.BY_COOKIE_VALUE,
onAccept: function () {}, onAccept: function () {},
onDecline: function () {}, onDecline: function () {},
cookieName: j, cookieName: j,
@ -724,7 +745,7 @@
disableButtonStyles: !1, disableButtonStyles: !1,
enableDeclineButton: !1, enableDeclineButton: !1,
flipButtons: !1, flipButtons: !1,
sameSite: g.LAX, sameSite: C.LAX,
ButtonComponent: function (e) { ButtonComponent: function (e) {
var n = e.children, var n = e.children,
o = (function (e, t) { o = (function (e, t) {
@ -748,11 +769,13 @@
(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, a); })(e, s);
return t().createElement("button", o, n); return t().createElement("button", o, n);
}, },
overlay: !1, overlay: !1,
overlayClasses: "", overlayClasses: "",
onOverlayClick: function () {},
acceptOnOverlayClick: !1,
ariaAcceptLabel: "Accept cookies", ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies", ariaDeclineLabel: "Decline cookies",
acceptOnScroll: !1, acceptOnScroll: !1,

4
package-lock.json generated
View File

@ -1,11 +1,11 @@
{ {
"name": "react-cookie-consent", "name": "react-cookie-consent",
"version": "7.1.0", "version": "7.2.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"version": "7.1.0", "version": "7.2.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",

2
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": "7.1.0", "version": "7.2.0",
"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",

6
src/index.d.ts vendored
View File

@ -38,12 +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; acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number; acceptOnScrollPercentage?: number;
customContentAttributes: object; customContentAttributes?: object;
customContainerAttributes: object; customContainerAttributes?: object;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

23
src/index.js
View File

@ -159,6 +159,17 @@ class CookieConsent extends Component {
} }
} }
/**
* 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
*/ */
@ -369,7 +380,13 @@ 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>
)} )}
@ -427,6 +444,8 @@ 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, acceptOnScroll: PropTypes.bool,
@ -466,6 +485,8 @@ 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, acceptOnScroll: false,