@mtg-rio/mui-mentions
Version:
@mention people in a MUI TextField
47 lines • 1.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const material_1 = require("@mui/material");
const react_1 = tslib_1.__importDefault(require("react"));
const Mention = ({ display, color }) => {
return (react_1.default.createElement(material_1.Box, { component: 'span', sx: { position: 'relative' } },
display,
react_1.default.createElement(material_1.Box, { component: 'span', sx: {
position: 'absolute',
left: '-1px',
top: '-2px',
bottom: 0,
right: '-1px',
backgroundColor: (theme) => getColor(theme.palette.mode, color),
borderRadius: '3px',
color: 'transparent',
} })));
};
exports.default = Mention;
/**
* Converts the provided color into a format suitable for passing to sx.backgroundColor.
* @param mode The current palette mode.
* @param color The color to convert.
* @returns A color usable by sx.backgroundColor.
*/
function getColor(mode, color) {
if (!color) {
if (mode === 'light') {
return 'primary.light';
}
return 'info.dark';
}
switch (color) {
case 'primary':
case 'secondary':
case 'info':
case 'success':
case 'warning':
case 'error':
if (mode === 'light')
return `${color}.light`;
return `${color}.dark`;
}
return color;
}
//# sourceMappingURL=Mention.js.map