react-mui-cookie-dialog/dist/react-mui-cookie-dialog.esm.js

A simple solution for a GDPR compliant Cookie dialog with support for multiple Cookie categories.

import { useTheme, useMediaQuery, Dialog, DialogTitle, DialogContent, DialogActions, Button, FormControlLabel, Switch, Box, makeStyles, Typography } from '@material-ui/core';
import { useState, useEffect, createElement, Fragment } from '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__*/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 createElement(Typography, {
      variant: props.variant,
      className: props.className
    }, props.soc);
  } else {
    return createElement(props.soc, null);
  }
};

var CookieDialog = function CookieDialog(props) {
  var _props$categories;

  var classes = useStyles(props);
  var socs = props;
  var theme = useTheme();
  var fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  var _React$useState = useState(props.visible),
      visible = _React$useState[0],
      setVisible = _React$useState[1];

  var _React$useState2 = useState(false),
      optionsVisible = _React$useState2[0],
      setOptionsVisible = _React$useState2[1];

  var _React$useState3 = useState({}),
      categories = _React$useState3[0],
      setCategories = _React$useState3[1];

  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 createElement(Dialog, {
    open: visible,
    fullScreen: fullScreen,
    scroll: "paper"
  }, !optionsVisible && createElement(Fragment, null, createElement(DialogTitle, null, socs.mainDialogTitle), createElement(DialogContent, null, createElement(StringOrComponent, {
    soc: socs.mainDialogDescription,
    variant: "body1"
  })), createElement(DialogActions, null, createElement(Button, {
    variant: "text",
    onClick: handleOptionsClick
  }, createElement(StringOrComponent, {
    soc: socs.mainDialogOptions,
    variant: "body1"
  })), createElement(Button, {
    variant: "contained",
    color: "primary",
    onClick: handleAcceptAll
  }, createElement(StringOrComponent, {
    soc: socs.mainDialogAccept,
    variant: "body1"
  })))), optionsVisible && createElement(Fragment, null, createElement(DialogTitle, null, socs.optionsDialogTitle), createElement(DialogContent, null, createElement(StringOrComponent, {
    soc: socs.optionsDialogDescriptionAbove,
    variant: "body1"
  }), 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 createElement("div", {
      className: classes.cookieCategory,
      key: index
    }, createElement(FormControlLabel, {
      control: createElement(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: createElement(StringOrComponent, {
        soc: category.title,
        variant: "body1"
      }),
      labelPlacement: "end"
    }), createElement(StringOrComponent, {
      soc: category.description,
      variant: "body2",
      className: classes.cookieCategoryDescription
    }));
  })), createElement(StringOrComponent, {
    soc: socs.optionsDialogDescriptionBelow,
    variant: "body1"
  })), createElement(DialogActions, null, createElement(Box, {
    marginRight: "auto"
  }, createElement(Button, {
    variant: "text",
    onClick: handleAccept,
    size: "small"
  }, createElement(StringOrComponent, {
    soc: socs.optionsDialogSave,
    variant: "body1"
  }))), createElement(Button, {
    variant: "contained",
    color: "primary",
    onClick: handleAcceptAll
  }, createElement(StringOrComponent, {
    soc: socs.optionsDialogAccept,
    variant: "body1"
  })))));
};

export { CookieDialog, cookieDialogStringDefaultsGerman };
//# sourceMappingURL=react-mui-cookie-dialog.esm.js.map