mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2024-10-22 16:48:15 +02:00
Code Issues Projects Releases Wiki Activity

Improve styling with flexbox (#8)

Browse Source 
* Improve styling
This commit is contained in:
Karl Anders 2018-05-30 14:06:00 +02:00 committed by Rick van Lieshout
parent 413ef0c595
commit 30214d5411
2 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -82,15 +82,15 @@ One of the props (onAccept) is a function, this function will be called after th
| buttonText | String or React component | I understand | Text to appear on the button |
| cookieName | string | CookieConsent | Name of the cookie used to track whether the user has agreed. |
| onAccept | function | () => {} | Function to be called after the accept button has been clicked. |
| style | Object | ![barstyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/barStyle.png?raw=true) | React styling object for the bar. |
| buttonStyle | Object | ![buttonStyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/buttonStyle.png?raw=true) | React styling object for the button. |
| 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 | {} | React styling object for the content. |
## Styling it
You can provide styling for both the bar and the button.
You can do this using the `style` and `buttonStyle` prop, both of these will append / replace the default style of the component.
You can provide styling for the bar, for the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children content and button.
You can style each component with using the `style`, `buttonStyle` and `contentStyle` prop. These will append / replace the default styles of the components.
You can use `disableStyles={true}` to disable any built-in styling.
@ -146,3 +146,6 @@ import CookieConsent, { Cookies } from "react-cookie-consent";
>
</CookieConsent>
```
[style]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L17-L28
[buttonStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L29-L38

55
src/index.js
View File

@ -15,33 +15,35 @@ class CookieConsent extends Component {
this.state = {
visible: true,
style: {
position: "fixed",
width: "100%",
padding: "15px",
alignItems: "baseline",
background: "#353535",
color: "white",
display: "flex",
justifyContent: "space-between",
left: "0",
zIndex: "999",
lineHeight: "30px",
textAlign: "left"
padding: "15px",
position: "fixed",
width: "100%",
zIndex: "999"
},
buttonStyle: {
position: "absolute",
right: "50px",
border: "0",
background: "#ffd42d",
boxShadow: "none",
border: "0",
borderRadius: "0px",
padding: "5px",
color: "black"
}
boxShadow: "none",
color: "black",
flex: "0 0 auto",
marginLeft: "15px",
padding: "5px 10px"
},
contentStyle: {}
};
}
componentWillMount(){
componentWillMount() {
const { cookieName } = this.props;
if (Cookies.get(cookieName) != undefined ) {
if (Cookies.get(cookieName) != undefined) {
this.setState({ visible: false });
}
}
@ -57,7 +59,6 @@ class CookieConsent extends Component {
}
render() {
// If the bar shouldn't be visible don't render anything.
if (!this.state.visible) {
return null;
@ -67,18 +68,21 @@ class CookieConsent extends Component {
location,
style,
buttonStyle,
contentStyle,
disableStyles,
onAccept,
buttonText
} = this.props;
let myStyle = {},
myButtonStyle = {};
let myStyle = {};
let myButtonStyle = {};
let myContentStyle = {};
if (disableStyles) {
// if styles are disabled use the provided styles (or non)
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 });
@ -86,6 +90,10 @@ class CookieConsent extends Component {
{},
{ ...this.state.buttonStyle, ...buttonStyle }
);
myContentStyle = Object.assign(
{},
{ ...this.state.contentStyle, ...contentStyle }
);
}
// syntactic sugar to enable user to easily select top / bottom
@ -101,7 +109,7 @@ class CookieConsent extends Component {
return (
<div className="cookieConsent" style={myStyle}>
{this.props.children}
<div style={myContentStyle}>{this.props.children}</div>
<button
style={myButtonStyle}
onClick={() => {
@ -120,10 +128,15 @@ CookieConsent.propTypes = {
location: PropTypes.oneOf(["top", "bottom"]),
style: PropTypes.object,
buttonStyle: PropTypes.object,
contentStyle: PropTypes.object,
children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
disableStyles: PropTypes.bool,
onAccept: PropTypes.func,
buttonText: PropTypes.oneOfType([PropTypes.string,PropTypes.func,PropTypes.element]),
buttonText: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.element
]),
cookieName: PropTypes.string
};
CookieConsent.defaultProps = {
@ -135,4 +148,4 @@ CookieConsent.defaultProps = {
};
export default CookieConsent;
export {Cookies};
export { Cookies };