From 2a1e52b24a736e0083cad63391e2d61e8c69ffbb Mon Sep 17 00:00:00 2001 From: Rick van Lieshout Date: Mon, 20 Dec 2021 17:49:36 +0100 Subject: [PATCH] Fix the TypeScript definition of some properties ( (#144) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Souchet Céline <4921914+csouchet@users.noreply.github.com> --- CHANGELOG.md | 9 +++ README.md | 92 ++++++++++++++--------------- build/index.d.ts | 6 +- build/index.js | 147 +++++++++++++++++++++++++++------------------- package-lock.json | 4 +- package.json | 2 +- src/index.d.ts | 6 +- src/index.js | 23 +++++++- 8 files changed, 173 insertions(+), 116 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b78c569..ef00c08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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/), 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 diff --git a/README.md b/README.md index 6a12508..35f82be 100644 --- a/README.md +++ b/README.md @@ -137,52 +137,52 @@ That option would be interesting if you want to allow user to change their conse ## Props -| 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. | -| 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 | -| 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) | -| 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 | -| 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. | -| 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" | -| 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. | -| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. | -| expires | number | 365 | Number of days before the cookie expires. | -| 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. | -| containerClasses | string | "" | CSS classes to apply to the surrounding container | -| buttonClasses | string | "" | CSS classes to apply to the button | -| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | -| declineButtonClasses | string | "" | CSS classes to apply to the decline button | -| buttonId | string | "" | Id to apply to the button | -| declineButtonId | string | "" | Id to apply to the decline button | -| contentClasses | string | "" | CSS classes to apply to the content | -| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | -| style | object | [look at source][style] | React styling object for the bar. | -| 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. | -| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | -| 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) | -| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | -| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | -| ButtonComponent | React component | button | React Component to render as a button. | -| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | -| 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 | -| 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 | +| 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. | +| 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 | +| 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) | +| 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 | +| 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. | +| 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" | +| 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. | +| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. | +| expires | number | 365 | Number of days before the cookie expires. | +| 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. | +| containerClasses | string | "" | CSS classes to apply to the surrounding container | +| buttonClasses | string | "" | CSS classes to apply to the button | +| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | +| declineButtonClasses | string | "" | CSS classes to apply to the decline button | +| buttonId | string | "" | Id to apply to the button | +| declineButtonId | string | "" | Id to apply to the decline button | +| contentClasses | string | "" | CSS classes to apply to the content | +| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | +| style | object | [look at source][style] | React styling object for the bar. | +| 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. | +| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | +| 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) | +| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | +| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | +| ButtonComponent | React component | button | React Component to render as a button. | +| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | +| 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 | +| 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 diff --git a/build/index.d.ts b/build/index.d.ts index 27d571b..fa67e8a 100644 --- a/build/index.d.ts +++ b/build/index.d.ts @@ -38,12 +38,14 @@ export interface CookieConsentProps { overlay?: boolean; overlayClasses?: string; overlayStyle?: object; + onOverlayClick?: () => void; + acceptOnOverlayClick?: boolean; ariaAcceptLabel?: string; ariaDeclineLabel?: string; acceptOnScroll?: boolean; acceptOnScrollPercentage?: number; - customContentAttributes: object; - customContainerAttributes: object; + customContentAttributes?: object; + customContainerAttributes?: object; } export default class CookieConsent extends React.Component {} diff --git a/build/index.js b/build/index.js index 996e6f3..87a0175 100644 --- a/build/index.js +++ b/build/index.js @@ -48,8 +48,8 @@ .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])); + for (var a in i) + i[a] && ((l += "; " + a), !0 !== i[a] && (l += "=" + i[a].split(";")[0])); return (document.cookie = t + "=" + n + l); } } @@ -61,15 +61,15 @@ c++ ) { var l = i[c].split("="), - s = l.slice(1).join("="); - n || '"' !== s.charAt(0) || (s = s.slice(1, -1)); + a = l.slice(1).join("="); + n || '"' !== a.charAt(0) || (a = a.slice(1, -1)); try { - var a = t(l[0]); - if (((s = (o.read || o)(s, a) || t(s)), n)) + var s = t(l[0]); + if (((a = (o.read || o)(a, s) || t(a)), n)) try { - s = JSON.parse(s); + a = JSON.parse(a); } catch (e) {} - if (((r[a] = s), e === a)) break; + if (((r[s] = a), e === s)) break; } catch (e) {} } return e ? r[e] : r; @@ -192,10 +192,10 @@ return h; }, SAME_SITE_OPTIONS: function () { - return g; + return C; }, VISIBLE_OPTIONS: function () { - return C; + return g; }, default: function () { return B; @@ -213,8 +213,8 @@ i = n.n(r), c = n(808), l = n.n(c); - function s(e) { - return (s = + function a(e) { + return (a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e; @@ -228,7 +228,7 @@ : typeof e; })(e); } - var a = ["children"]; + var s = ["children"]; function u() { return (u = Object.assign || @@ -257,7 +257,7 @@ var n = null != arguments[t] ? arguments[t] : {}; t % 2 ? p(Object(n), !0).forEach(function (t) { - O(e, t, n[t]); + m(e, t, n[t]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) @@ -276,15 +276,15 @@ Object.defineProperty(e, o.key, o); } } - function d(e, t) { - return (d = + function y(e, t) { + return (y = Object.setPrototypeOf || function (e, t) { return (e.__proto__ = t), e; })(e, t); } - function y(e, t) { - if (t && ("object" === s(t) || "function" == typeof t)) return t; + function d(e, t) { + if (t && ("object" === a(t) || "function" == typeof t)) return t; if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined"); return v(e); @@ -294,14 +294,14 @@ throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; } - function m(e) { - return (m = Object.setPrototypeOf + function O(e) { + return (O = Object.setPrototypeOf ? Object.getPrototypeOf : function (e) { return e.__proto__ || Object.getPrototypeOf(e); })(e); } - function O(e, t, n) { + function m(e, t, n) { return ( t in e ? Object.defineProperty(e, t, { @@ -315,8 +315,8 @@ ); } var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" }, - g = { STRICT: "strict", LAX: "lax", NONE: "none" }, - C = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" }, + C = { STRICT: "strict", LAX: "lax", NONE: "none" }, + g = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" }, S = function () { var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j, t = l().get(e); @@ -343,14 +343,14 @@ (e.prototype = Object.create(t && t.prototype, { constructor: { value: e, writable: !0, configurable: !0 }, })), - t && d(e, t); - })(s, e); + t && y(e, t); + })(a, e); var n, o, r, i, c = - ((r = s), + ((r = a), (i = (function () { if ("undefined" == typeof Reflect || !Reflect.construct) return !1; if (Reflect.construct.sham) return !1; @@ -368,20 +368,20 @@ })()), function () { var e, - t = m(r); + t = O(r); if (i) { - var n = m(this).constructor; + var n = O(this).constructor; e = Reflect.construct(t, arguments, n); } else e = t.apply(this, arguments); - return y(this, e); + return d(this, e); }); - function s(e) { + function a(e) { var t; return ( (function (e, t) { if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function"); - })(this, s), - O(v((t = c.call(this, e))), "handleScroll", function () { + })(this, a), + m(v((t = c.call(this, e))), "handleScroll", function () { var e = t.props.acceptOnScrollPercentage, n = document.documentElement, o = document.body, @@ -389,7 +389,7 @@ i = "scrollHeight"; ((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.state = { @@ -443,7 +443,7 @@ ); } return ( - (n = s), + (n = a), (o = [ { key: "componentDidMount", @@ -475,6 +475,15 @@ 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", value: function () { @@ -497,8 +506,8 @@ i = n.sameSite, c = this.props.cookieSecurity; void 0 === c && (c = !location || "https:" === location.protocol); - var s = f(f({ expires: r }, o), {}, { sameSite: i, secure: c }); - i === g.NONE && l().set(x(e), t, s), l().set(e, t, s); + var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c }); + i === C.NONE && l().set(x(e), t, a), l().set(e, t, a); }, }, { @@ -513,9 +522,9 @@ value: function () { var e = this; switch (this.props.visible) { - case C.HIDDEN: + case g.HIDDEN: return null; - case C.BY_COOKIE_VALUE: + case g.BY_COOKIE_VALUE: if (!this.state.visible) return null; } var n = this.props, @@ -524,16 +533,16 @@ i = n.buttonStyle, c = n.declineButtonStyle, l = n.contentStyle, - s = n.disableStyles, - a = n.buttonText, + a = n.disableStyles, + s = n.buttonText, p = n.declineButtonText, b = n.containerClasses, - d = n.contentClasses, - y = n.buttonClasses, + y = n.contentClasses, + d = n.buttonClasses, v = n.buttonWrapperClasses, - m = n.declineButtonClasses, - O = n.buttonId, - g = n.declineButtonId, + O = n.declineButtonClasses, + m = n.buttonId, + C = n.declineButtonId, S = n.disableButtonStyles, k = n.enableDeclineButton, x = n.flipButtons, @@ -551,7 +560,7 @@ L = {}, V = {}; switch ( - (s + (a ? ((A = u({}, r)), (N = u({}, i)), (R = u({}, c)), @@ -581,8 +590,8 @@ { key: "declineButton", style: R, - className: m, - id: g, + className: O, + id: C, "aria-label": D, onClick: function () { e.decline(); @@ -597,14 +606,14 @@ { key: "acceptButton", style: N, - className: y, - id: O, + className: d, + id: m, "aria-label": P, onClick: function () { e.accept(); }, }, - a + s ) ), x && U.reverse(), @@ -612,8 +621,18 @@ w, { condition: T, - wrapper: function (e) { - return t().createElement("div", { style: V, className: B }, e); + wrapper: function (n) { + return t().createElement( + "div", + { + style: V, + className: B, + onClick: function () { + e.overlayClick(); + }, + }, + n + ); }, }, t().createElement( @@ -621,7 +640,7 @@ u({ className: "".concat(b), style: A }, I), t().createElement( "div", - u({ style: L, className: d }, _), + u({ style: L, className: y }, _), this.props.children ), t().createElement( @@ -637,7 +656,7 @@ }, }, ]) && b(n.prototype, o), - s + a ); })(e.Component); (T.propTypes = { @@ -647,13 +666,13 @@ }) ), visible: i().oneOf( - Object.keys(C).map(function (e) { - return C[e]; + Object.keys(g).map(function (e) { + return g[e]; }) ), sameSite: i().oneOf( - Object.keys(g).map(function (e) { - return g[e]; + Object.keys(C).map(function (e) { + return C[e]; }) ), style: i().object, @@ -690,6 +709,8 @@ overlay: i().bool, overlayClasses: i().string, overlayStyle: i().object, + onOverlayClick: i().func, + acceptOnOverlayClick: i().bool, ariaAcceptLabel: i().string, ariaDeclineLabel: i().string, acceptOnScroll: i().bool, @@ -702,7 +723,7 @@ hideOnAccept: !0, hideOnDecline: !0, location: h.BOTTOM, - visible: C.BY_COOKIE_VALUE, + visible: g.BY_COOKIE_VALUE, onAccept: function () {}, onDecline: function () {}, cookieName: j, @@ -724,7 +745,7 @@ disableButtonStyles: !1, enableDeclineButton: !1, flipButtons: !1, - sameSite: g.LAX, + sameSite: C.LAX, ButtonComponent: function (e) { var n = e.children, o = (function (e, t) { @@ -748,11 +769,13 @@ (Object.prototype.propertyIsEnumerable.call(e, n) && (r[n] = e[n])); } return r; - })(e, a); + })(e, s); return t().createElement("button", o, n); }, overlay: !1, overlayClasses: "", + onOverlayClick: function () {}, + acceptOnOverlayClick: !1, ariaAcceptLabel: "Accept cookies", ariaDeclineLabel: "Decline cookies", acceptOnScroll: !1, diff --git a/package-lock.json b/package-lock.json index 5557e7a..16dd627 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { "name": "react-cookie-consent", - "version": "7.1.0", + "version": "7.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "7.1.0", + "version": "7.2.0", "license": "MIT", "dependencies": { "js-cookie": "^2.2.1", diff --git a/package.json b/package.json index b17f3b4..30b42e0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "name": "Rick van Lieshout", "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.", "main": "build/index.js", "types": "build/index.d.ts", diff --git a/src/index.d.ts b/src/index.d.ts index 27d571b..fa67e8a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -38,12 +38,14 @@ export interface CookieConsentProps { overlay?: boolean; overlayClasses?: string; overlayStyle?: object; + onOverlayClick?: () => void; + acceptOnOverlayClick?: boolean; ariaAcceptLabel?: string; ariaDeclineLabel?: string; acceptOnScroll?: boolean; acceptOnScrollPercentage?: number; - customContentAttributes: object; - customContainerAttributes: object; + customContentAttributes?: object; + customContainerAttributes?: object; } export default class CookieConsent extends React.Component {} diff --git a/src/index.js b/src/index.js index 0fa1125..eddb807 100644 --- a/src/index.js +++ b/src/index.js @@ -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 */ @@ -369,7 +380,13 @@ class CookieConsent extends Component { ( -
+
{ + this.overlayClick(); + }} + > {children}
)} @@ -427,6 +444,8 @@ CookieConsent.propTypes = { overlay: PropTypes.bool, overlayClasses: PropTypes.string, overlayStyle: PropTypes.object, + onOverlayClick: PropTypes.func, + acceptOnOverlayClick: PropTypes.bool, ariaAcceptLabel: PropTypes.string, ariaDeclineLabel: PropTypes.string, acceptOnScroll: PropTypes.bool, @@ -466,6 +485,8 @@ CookieConsent.defaultProps = { ButtonComponent: ({ children, ...props }) => , overlay: false, overlayClasses: "", + onOverlayClick: () => {}, + acceptOnOverlayClick: false, ariaAcceptLabel: "Accept cookies", ariaDeclineLabel: "Decline cookies", acceptOnScroll: false,