From 2e205f8081c4b3fe8c4ff79772f9ca3f2bdeba94 Mon Sep 17 00:00:00 2001 From: Mastermindzh Date: Mon, 20 Dec 2021 17:48:43 +0100 Subject: [PATCH] added onOverlayClick and acceptOnOverlayClick --- CHANGELOG.md | 7 +++- README.md | 90 ++++++++++++++++++++++++++------------------------ src/index.d.ts | 2 ++ src/index.js | 23 ++++++++++++- 4 files changed, 76 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9c5296..ef00c08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0) +## [[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 diff --git a/README.md b/README.md index 92af75d..35f82be 100644 --- a/README.md +++ b/README.md @@ -137,50 +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/src/index.d.ts b/src/index.d.ts index 83fe353..fa67e8a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -38,6 +38,8 @@ export interface CookieConsentProps { overlay?: boolean; overlayClasses?: string; overlayStyle?: object; + onOverlayClick?: () => void; + acceptOnOverlayClick?: boolean; ariaAcceptLabel?: string; ariaDeclineLabel?: string; acceptOnScroll?: boolean; 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,