react-mui-cookie-dialog
Version:
A simple solution for a GDPR compliant Cookie dialog with support for multiple Cookie categories.
200 lines (175 loc) • 7.71 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var core = require('@material-ui/core');
var React = require('react');
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var cookieDialogStringDefaultsGerman = {
mainDialogTitle: 'Cookies',
mainDialogDescription: 'Wir nutzen Cookies, um Ihnen die bestmögliche Nutzung unserer Webseite zu ' + 'ermöglichen und unsere Kommunikation mit Ihnen zu verbessern. Wir berücksichtigen hierbei ' + 'Ihre Präferenzen und verarbeiten Daten für Marketing, Analytics und Personalisierung nur, ' + 'wenn Sie uns durch Klicken auf "Zustimmen und weiter" Ihre Einwilligung geben oder über den ' + 'Button „Cookie Präferenzen setzen“ eine spezifische Auswahl festlegen. Sie können Ihre ' + 'Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen. Informationen zu den einzelnen ' + 'verwendeten Cookies sowie die Widerrufsmöglichkeit finden Sie in unserer Datenschutzerklärung und in der Cookie-Richtlinie.',
mainDialogOptions: 'Einstellungen',
mainDialogAccept: 'Zustimmen und Weiter',
optionsDialogTitle: 'Ihre Einstellungen zu Cookies für diese Website',
optionsDialogDescriptionAbove: 'Wir nutzen Cookies, um Ihnen die bestmögliche Nutzung unserer Webseite zu ermöglichen und ' + 'unsere Kommunikation mit Ihnen zu verbessern. Treffen Sie hier Ihre persönliche Präferenz:',
optionsDialogDescriptionBelow: 'Detaillierte Informationen zu den Cookies und eingesetzten Tracking Tools können Sie unserer ' + 'Datenschutzerklärung oder der Cookie-Richtlinie entnehmen. Sie können Ihre gesetzte Präferenz ' + 'jederzeit anpassen, indem Sie diesen Cookie Manager über den Link in der Datenschutzerklärung aufrufen.',
optionsDialogSave: 'Auswahl speichern',
optionsDialogAccept: 'Alle akzeptieren'
};
var useStyles = /*#__PURE__*/core.makeStyles(function (theme) {
var _buttonContainer;
return {
dialogTitle: {
marginBottom: '8px'
},
buttonContainer: (_buttonContainer = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: '12px'
}, _buttonContainer[theme.breakpoints.down('xs')] = {
flexDirection: 'column',
'& button:first-child': {
marginBottom: '12px'
}
}, _buttonContainer),
cookieCategories: {
margin: '0 4px'
},
cookieCategory: {
display: 'flex',
flexDirection: 'column',
margin: '12px 8px'
},
cookieCategoryDescription: {
fontSize: '11px'
}
};
});
var StringOrComponent = function StringOrComponent(props) {
if (typeof props.soc === 'string') {
return React.createElement(core.Typography, {
variant: props.variant,
className: props.className
}, props.soc);
} else {
return React.createElement(props.soc, null);
}
};
var CookieDialog = function CookieDialog(props) {
var _props$categories;
var classes = useStyles(props);
var socs = props;
var theme = core.useTheme();
var fullScreen = core.useMediaQuery(theme.breakpoints.down('sm'));
var _React$useState = React.useState(props.visible),
visible = _React$useState[0],
setVisible = _React$useState[1];
var _React$useState2 = React.useState(false),
optionsVisible = _React$useState2[0],
setOptionsVisible = _React$useState2[1];
var _React$useState3 = React.useState({}),
categories = _React$useState3[0],
setCategories = _React$useState3[1];
React.useEffect(function () {
setVisible(props.visible);
}, [props.visible]);
var handleOptionsClick = function handleOptionsClick() {
setOptionsVisible(true);
};
var handleAccept = function handleAccept() {
props.onAccept(props.categories.filter(function (category) {
var _ref, _categories$category$;
return (_ref = (_categories$category$ = categories[category.key]) != null ? _categories$category$ : category.isNecessary) != null ? _ref : false;
}));
};
var handleAcceptAll = function handleAcceptAll() {
props.onAccept(props.categories);
};
var handleChange = function handleChange(event) {
var newCategories = _extends({}, categories);
newCategories[event.target.name] = event.target.checked;
setCategories(newCategories);
};
return React.createElement(core.Dialog, {
open: visible,
fullScreen: fullScreen,
scroll: "paper"
}, !optionsVisible && React.createElement(React.Fragment, null, React.createElement(core.DialogTitle, null, socs.mainDialogTitle), React.createElement(core.DialogContent, null, React.createElement(StringOrComponent, {
soc: socs.mainDialogDescription,
variant: "body1"
})), React.createElement(core.DialogActions, null, React.createElement(core.Button, {
variant: "text",
onClick: handleOptionsClick
}, React.createElement(StringOrComponent, {
soc: socs.mainDialogOptions,
variant: "body1"
})), React.createElement(core.Button, {
variant: "contained",
color: "primary",
onClick: handleAcceptAll
}, React.createElement(StringOrComponent, {
soc: socs.mainDialogAccept,
variant: "body1"
})))), optionsVisible && React.createElement(React.Fragment, null, React.createElement(core.DialogTitle, null, socs.optionsDialogTitle), React.createElement(core.DialogContent, null, React.createElement(StringOrComponent, {
soc: socs.optionsDialogDescriptionAbove,
variant: "body1"
}), React.createElement("div", {
className: classes.cookieCategories
}, (_props$categories = props.categories) == null ? void 0 : _props$categories.map(function (category, index) {
var _ref2, _categories$category$2, _category$isNecessary;
return React.createElement("div", {
className: classes.cookieCategory,
key: index
}, React.createElement(core.FormControlLabel, {
control: React.createElement(core.Switch, {
checked: (_ref2 = (_categories$category$2 = categories[category.key]) != null ? _categories$category$2 : category.isNecessary) != null ? _ref2 : false,
onChange: ((_category$isNecessary = category.isNecessary) != null ? _category$isNecessary : false) ? undefined : handleChange,
name: category.key,
color: "primary"
}),
label: React.createElement(StringOrComponent, {
soc: category.title,
variant: "body1"
}),
labelPlacement: "end"
}), React.createElement(StringOrComponent, {
soc: category.description,
variant: "body2",
className: classes.cookieCategoryDescription
}));
})), React.createElement(StringOrComponent, {
soc: socs.optionsDialogDescriptionBelow,
variant: "body1"
})), React.createElement(core.DialogActions, null, React.createElement(core.Box, {
marginRight: "auto"
}, React.createElement(core.Button, {
variant: "text",
onClick: handleAccept,
size: "small"
}, React.createElement(StringOrComponent, {
soc: socs.optionsDialogSave,
variant: "body1"
}))), React.createElement(core.Button, {
variant: "contained",
color: "primary",
onClick: handleAcceptAll
}, React.createElement(StringOrComponent, {
soc: socs.optionsDialogAccept,
variant: "body1"
})))));
};
exports.CookieDialog = CookieDialog;
exports.cookieDialogStringDefaultsGerman = cookieDialogStringDefaultsGerman;
//# sourceMappingURL=react-mui-cookie-dialog.cjs.development.js.map