@worktif/purei
Version:
Work TIF Material UI Theme Provider and Customization Suite for React applications with dark mode support and dynamic color schemes
92 lines • 4.45 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ColorModeIconDropdown;
const React = __importStar(require("react"));
const icons_material_1 = require("@mui/icons-material");
const Box_1 = __importDefault(require("@mui/material/Box"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const Menu_1 = __importDefault(require("@mui/material/Menu"));
const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
const styles_1 = require("@mui/material/styles");
function ColorModeIconDropdown(props) {
const { mode, systemMode, setMode } = (0, styles_1.useColorScheme)();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleMode = (targetMode) => () => {
setMode(targetMode);
handleClose();
};
if (!mode) {
return (React.createElement(Box_1.default, { "data-screenshot": "toggle-mode", sx: (theme) => ({
verticalAlign: 'bottom',
display: 'inline-flex',
width: '2.25rem',
height: '2.25rem',
borderRadius: (theme).shape.borderRadius,
border: '1px solid',
borderColor: (theme).palette.divider,
}) }));
}
const resolvedMode = (systemMode || mode);
const icon = {
light: React.createElement(icons_material_1.LightMode, null),
dark: React.createElement(icons_material_1.DarkMode, null),
}[resolvedMode];
return (React.createElement(React.Fragment, null,
React.createElement(IconButton_1.default, Object.assign({ "data-screenshot": "toggle-mode", onClick: handleClick, disableRipple: true, size: "small", "aria-controls": open ? 'color-scheme-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined }, props), icon),
React.createElement(Menu_1.default, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, slotProps: {
paper: {
variant: 'outlined',
elevation: 0,
sx: {
my: '4px',
},
},
}, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } },
React.createElement(MenuItem_1.default, { selected: mode === 'system', onClick: handleMode('system') }, "System"),
React.createElement(MenuItem_1.default, { selected: mode === 'light', onClick: handleMode('light') }, "Light"),
React.createElement(MenuItem_1.default, { selected: mode === 'dark', onClick: handleMode('dark') }, "Dark"))));
}
//# sourceMappingURL=ColorModeIconDropdown.js.map