Remove scroll on accept (#89)

README.md

@@ -28,7 +28,6 @@ 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 button font-weight to bold](#changing-the-button-font-weight-to-bold)
     - [Using predefined CSS classes](#using-predefined-css-classes)
-    - [Accept on scroll](#accept-on-scroll)
     - [Flipping the buttons](#flipping-the-buttons)
     - [Extra cookie options](#extra-cookie-options)
     - [rainbows!](#rainbows)
@@ -85,18 +84,12 @@ You can optionally set some props like this (next chapter will show all props):
 </CookieConsent>
 ```
 
-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:
+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:
 
 ```js
 <CookieConsent
-  acceptOnScroll={true}
+  onAccept={() => {
-  onAccept={({ acceptedByScrolling }) => {
-    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>
 ```
@@ -115,20 +108,18 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 ## 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.            |
 | 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) |
-| 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                        |
 | 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              | `({ acceptedByScrolling }) => {}`    | 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.                                                                        |
 | debug                |              boolean              | undefined                            | Bar will be drawn regardless of cookie for debugging purposes.                                                                          |
 | expires              |              number               | 365                                  | Number of days before the cookie expires.                                                                                               |
@@ -228,22 +219,6 @@ Which results in:
 
 ![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.
-
-```js
-<CookieConsent
-  acceptOnScroll={true}
-  acceptOnScrollPercentage={50}
-  onAccept={() => {
-    alert("consent given");
-  }}
->
-  Hello scroller :)
-</CookieConsent>
-```
-
 #### Flipping the buttons
 
 If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:

src/index.d.ts

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void;
+  onAccept?: () => void;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
   declineButtonText?: Function | React.ReactNode;
@@ -29,8 +29,6 @@ export interface CookieConsentProps {
   declineButtonClasses?: string;
   buttonId?: string;
   declineButtonId?: string;
-  acceptOnScroll?: boolean;
-  acceptOnScrollPercentage?: number;
   extraCookieOptions?: object;
   disableButtonStyles?: boolean;
   enableDeclineButton?: boolean;

src/index.js

@@ -80,8 +80,6 @@ class CookieConsent extends Component {
         backgroundColor: "rgba(0,0,0,0.3)",
       },
     };
-
-    this.handleScroll = this.handleScroll.bind(this);
   }
 
   componentDidMount() {
@@ -90,52 +88,18 @@ class CookieConsent extends Component {
     // if cookie undefined or debug
     if (this.getCookieValue() === undefined || debug) {
       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
-    window.removeEventListener("scroll", this.handleScroll);
-  }
-
-  /**
-   * checks whether scroll has exceeded set amount and fire accept if so.
-   */
-  handleScroll() {
-    // (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 > this.props.acceptOnScrollPercentage) {
-      this.accept({ acceptedByScrolling: true });
     }
   }
 
   /**
    * Set a persistent accept cookie
    */
-  accept({ acceptedByScrolling = false }) {
+  accept() {
     const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
 
     this.setCookie(cookieName, cookieValue);
 
-    // fire onAccept
+    onAccept();
-    onAccept({ acceptedByScrolling });
-
-    // remove listener if set
-    window.removeEventListener("scroll", this.handleScroll);
 
     if (hideOnAccept) {
       this.setState({ visible: false });
@@ -149,10 +113,8 @@ class CookieConsent extends Component {
     const {
       cookieName,
       declineCookieValue,
-      expires,
       hideOnDecline,
       onDecline,
-      extraCookieOptions,
       setDeclineCookie,
     } = this.props;
 
@@ -160,12 +122,8 @@ class CookieConsent extends Component {
       this.setCookie(cookieName, declineCookieValue);
     }
 
-    // fire onDecline
     onDecline();
 
-    // remove listener if set
-    window.removeEventListener("scroll", this.handleScroll);
-
     if (hideOnDecline) {
       this.setState({ visible: false });
     }
@@ -323,9 +281,7 @@ class CookieConsent extends Component {
         className={buttonClasses}
         id={buttonId}
         aria-label={ariaAcceptLabel}
-        onClick={() => {
+        onClick={this.accept}
-          this.accept({ acceptedByScrolling: false });
-        }}
       >
         {buttonText}
       </ButtonComponent>
@@ -387,8 +343,6 @@ CookieConsent.propTypes = {
   declineButtonClasses: PropTypes.string,
   buttonId: PropTypes.string,
   declineButtonId: PropTypes.string,
-  acceptOnScroll: PropTypes.bool,
-  acceptOnScrollPercentage: PropTypes.number,
   extraCookieOptions: PropTypes.object,
   disableButtonStyles: PropTypes.bool,
   enableDeclineButton: PropTypes.bool,
@@ -406,8 +360,6 @@ CookieConsent.defaultProps = {
   disableStyles: false,
   hideOnAccept: true,
   hideOnDecline: true,
-  acceptOnScroll: false,
-  acceptOnScrollPercentage: 25,
   location: OPTIONS.BOTTOM,
   onAccept: () => {},
   onDecline: () => {},