mui-extended
Version:
Extended UI Components built on Material UI
59 lines (58 loc) • 6.26 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Fab, List, ListItem, ListItemText, Switch, Typography } from "@mui/material";
import { forwardRef, useState } from "react";
import { useStateWithLocalStorage } from "./utils";
import CookieOutlinedIcon from "@mui/icons-material/CookieOutlined";
var defaultTitle = "Cookie Preferences";
var defaultDescription = "When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer. By activating any of the below cookies you also explicitly consent to the fact that your personal data may be transferred to third countries. For more information about the transfer and related risks please see our Cookie Policy.";
var defaultNecessory = {
title: "Necessary cookies",
description: "Necessary cookies enable core functionality of the website such as security, network management, accessibility, and basic visitor statistics. You may disable these by changing your browser settings, but this may affect how the website functions."
};
export var defaultCookiePreferences = {
performance: {
default: true,
title: "Performance",
description: "These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site, which helps us optimize your experience. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not be able to use your data in this way."
},
functional: {
default: true,
title: "Functional",
description: "These cookies enable the website to provide enhanced functionality and personalization. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly."
},
targeting: {
default: true,
title: "Targeting",
description: "These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising."
}
};
export var CookiePreferenceDialog = function (_a) {
var title = _a.title, description = _a.description, necessory = _a.necessory, preferences = _a.preferences, props = __rest(_a, ["title", "description", "necessory", "preferences"]);
var _b = useStateWithLocalStorage("cookie-preference", Object.fromEntries(Object.keys(preferences).map(function (p) { return [p, preferences[p].default]; }))), cookiePreference = _b[0], setCookiePreference = _b[1];
return (_jsxs(Dialog, __assign({}, props, { children: [_jsx(DialogTitle, { children: title || defaultTitle }), _jsxs(DialogContent, { children: [_jsx(Typography, { variant: "body1", children: description || defaultDescription }), _jsxs(List, { children: [_jsx(ListItem, { children: _jsx(ListItemText, { primary: _jsxs(Box, { display: "flex", children: [_jsx(Box, { flexGrow: 1, children: (necessory === null || necessory === void 0 ? void 0 : necessory.title) || defaultNecessory.title }), _jsx(Box, { children: "Always Active" })] }), secondary: (necessory === null || necessory === void 0 ? void 0 : necessory.description) || defaultNecessory.description }) }), Object.keys(preferences).map(function (preferenceKey) { return (_jsx(ListItem, { children: _jsx(ListItemText, { primary: _jsxs(Box, { display: "flex", children: [_jsx(Box, { flexGrow: 1, children: preferences[preferenceKey].title }), _jsx(Box, { children: _jsx(Switch, { checked: cookiePreference[preferenceKey], onChange: function (event) {
var _a;
setCookiePreference(__assign(__assign({}, cookiePreference), (_a = {}, _a[preferenceKey] = event.target.checked, _a)));
} }) })] }), secondary: preferences[preferenceKey].description }) }, preferenceKey)); })] })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: function (event) {
if (props.onClose) {
props.onClose(event, "escapeKeyDown");
}
}, children: "Close" }) })] })));
};
export var CookiePreference = forwardRef(function CookiePreference(_a, ref) {
var dialogProps = _a.dialogProps, props = __rest(_a, ["dialogProps"]);
var _b = useState(false), open = _b[0], setOpen = _b[1];
var onClick = function (event) {
setOpen(true);
if (props === null || props === void 0 ? void 0 : props.onClick) {
props.onClick(event);
}
};
var onClose = function (event, reason) {
setOpen(false);
if (dialogProps === null || dialogProps === void 0 ? void 0 : dialogProps.onClose) {
dialogProps.onClose(event, reason);
}
};
return (_jsxs(_Fragment, { children: [_jsx(Fab, __assign({ size: "small", "aria-label": "cookie preferences" }, props, { onClick: onClick, ref: ref, children: _jsx(CookieOutlinedIcon, {}) })), _jsx(CookiePreferenceDialog, __assign({ preferences: defaultCookiePreferences }, dialogProps, { open: open, onClose: onClose }))] }));
});