From 0a5e4ea4408847aeaf2b2b52ccb349b21b0dccae Mon Sep 17 00:00:00 2001 From: Mastermindzh Date: Mon, 4 Feb 2019 20:38:46 +0100 Subject: [PATCH] added the disableButtonStyles property --- README.md | 1 + build/index.d.ts | 1 + build/index.js | 20 +++++++++++++++----- package.json | 2 +- src/index.d.ts | 1 + src/index.js | 19 +++++++++++++++---- 6 files changed, 34 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index f2a71a3..ce74f38 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,7 @@ One of the props (onAccept) is a function, this function will be called after th | style | object | [look at source][style] | React styling object for the bar. | | buttonStyle | object | [look at source][buttonStyle] | React styling object for the button. | | 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) | ## Debugging it diff --git a/build/index.d.ts b/build/index.d.ts index c8211b1..230350e 100644 --- a/build/index.d.ts +++ b/build/index.d.ts @@ -22,6 +22,7 @@ export interface CookieConsentProps { acceptOnScroll?: boolean; acceptOnScrollPercentage?: number; extraCookieOptions?: object; + disableButtonStyles ?: boolean; } export default class CookieConsent extends React.Component {} diff --git a/build/index.js b/build/index.js index fffaea7..fb5dc1a 100644 --- a/build/index.js +++ b/build/index.js @@ -641,6 +641,7 @@ var CookieConsent = function (_Component) { // fire onAccept onAccept(); + // remove listener if set window.removeEventListener("scroll", this.handleScroll); @@ -670,7 +671,8 @@ var CookieConsent = function (_Component) { containerClasses = _props3.containerClasses, contentClasses = _props3.contentClasses, buttonClasses = _props3.buttonClasses, - buttonId = _props3.buttonId; + buttonId = _props3.buttonId, + disableButtonStyles = _props3.disableButtonStyles; var myStyle = {}; @@ -678,15 +680,21 @@ var CookieConsent = function (_Component) { var myContentStyle = {}; if (disableStyles) { - // if styles are disabled use the provided styles (or non) + // if styles are disabled use the provided styles (or none) myStyle = _extends({}, style); myButtonStyle = _extends({}, buttonStyle); myContentStyle = _extends({}, contentStyle); } else { // if styles aren't disabled merge them with the styles that are provided (or use default styles) myStyle = _extends({}, _extends({}, this.state.style, style)); - myButtonStyle = _extends({}, _extends({}, this.state.buttonStyle, buttonStyle)); myContentStyle = _extends({}, _extends({}, this.state.contentStyle, contentStyle)); + + // switch to disable JUST the button styles + if (disableButtonStyles) { + myButtonStyle = _extends({}, buttonStyle); + } else { + myButtonStyle = _extends({}, _extends({}, this.state.buttonStyle, buttonStyle)); + } } // syntactic sugar to enable user to easily select top / bottom @@ -751,7 +759,8 @@ CookieConsent.propTypes = { buttonId: _propTypes2.default.string, acceptOnScroll: _propTypes2.default.bool, acceptOnScrollPercentage: _propTypes2.default.number, - extraCookieOptions: _propTypes2.default.object + extraCookieOptions: _propTypes2.default.object, + disableButtonStyles: _propTypes2.default.bool }; CookieConsent.defaultProps = { @@ -770,7 +779,8 @@ CookieConsent.defaultProps = { contentClasses: "", buttonClasses: "", buttonId: "", - extraCookieOptions: {} + extraCookieOptions: {}, + disableButtonStyles: false }; exports.default = CookieConsent; diff --git a/package.json b/package.json index d7cd118..4fe3021 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "name": "Rick van Lieshout", "email": "info@rickvanlieshout.com" }, - "version": "2.0.1", + "version": "2.1.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 c8211b1..230350e 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -22,6 +22,7 @@ export interface CookieConsentProps { acceptOnScroll?: boolean; acceptOnScrollPercentage?: number; extraCookieOptions?: object; + disableButtonStyles ?: boolean; } export default class CookieConsent extends React.Component {} diff --git a/src/index.js b/src/index.js index 1e113fd..123c8e7 100644 --- a/src/index.js +++ b/src/index.js @@ -93,6 +93,7 @@ class CookieConsent extends Component { // fire onAccept onAccept(); + // remove listener if set window.removeEventListener("scroll", this.handleScroll); @@ -120,6 +121,7 @@ class CookieConsent extends Component { contentClasses, buttonClasses, buttonId, + disableButtonStyles } = this.props; let myStyle = {}; @@ -127,15 +129,22 @@ class CookieConsent extends Component { let myContentStyle = {}; if (disableStyles) { - // if styles are disabled use the provided styles (or non) + // if styles are disabled use the provided styles (or none) myStyle = Object.assign({}, style); myButtonStyle = Object.assign({}, buttonStyle); myContentStyle = Object.assign({}, contentStyle); } else { // if styles aren't disabled merge them with the styles that are provided (or use default styles) myStyle = Object.assign({}, { ...this.state.style, ...style }); - myButtonStyle = Object.assign({}, { ...this.state.buttonStyle, ...buttonStyle }); myContentStyle = Object.assign({}, { ...this.state.contentStyle, ...contentStyle }); + + // switch to disable JUST the button styles + if(disableButtonStyles){ + myButtonStyle = Object.assign({}, buttonStyle); + }else{ + myButtonStyle = Object.assign({}, { ...this.state.buttonStyle, ...buttonStyle }); + } + } // syntactic sugar to enable user to easily select top / bottom @@ -199,7 +208,8 @@ CookieConsent.propTypes = { buttonId: PropTypes.string, acceptOnScroll: PropTypes.bool, acceptOnScrollPercentage: PropTypes.number, - extraCookieOptions: PropTypes.object + extraCookieOptions: PropTypes.object, + disableButtonStyles: PropTypes.bool }; CookieConsent.defaultProps = { @@ -218,7 +228,8 @@ CookieConsent.defaultProps = { contentClasses: "", buttonClasses: "", buttonId: "", - extraCookieOptions: {} + extraCookieOptions: {}, + disableButtonStyles: false }; export default CookieConsent;