jiti-meet/react/features/base/label/components/web/Label.tsx

137 lines
3.0 KiB
TypeScript

import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React from 'react';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { COLORS } from '../../constants';
import AbstractLabel, {
type Props as AbstractProps
} from '../AbstractLabel';
type Props = AbstractProps & {
/**
* Own CSS class name.
*/
className?: string;
/**
* An object containing the CSS classes.
*/
classes: any;
/**
* The color of the label.
*/
color?: string;
/**
* Color for the icon.
*/
iconColor?: string;
/**
* HTML ID attribute to add to the root of {@code Label}.
*/
id?: string;
/**
* Click handler if any.
*/
onClick?: (e?: React.MouseEvent) => void;
};
/**
* Creates the styles for the component.
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
const styles = (theme: Theme) => {
return {
label: {
...withPixelLineHeight(theme.typography.labelRegular),
alignItems: 'center',
background: theme.palette.ui04,
borderRadius: Number(theme.shape.borderRadius) / 2,
color: theme.palette.text01,
display: 'flex',
height: 28,
margin: '0 0 4px 4px',
padding: '0 8px'
},
withIcon: {
marginLeft: 8
},
clickable: {
cursor: 'pointer'
},
[COLORS.white]: {
background: theme.palette.text01,
color: theme.palette.ui04,
'& svg': {
fill: theme.palette.ui04
}
},
[COLORS.green]: {
background: theme.palette.success02
},
[COLORS.red]: {
background: theme.palette.actionDanger
}
};
};
/**
* React Component for showing short text in a circle.
*
* @augments Component
*/
class Label extends AbstractLabel<Props, any> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
*/
render() {
const {
classes,
className,
color,
icon,
iconColor,
id,
onClick,
text
} = this.props;
const labelClassName = clsx(
classes.label,
onClick && classes.clickable,
color && classes[color],
className
);
return (
<div
className = { labelClassName }
id = { id }
onClick = { onClick }>
{ icon && <Icon
color = { iconColor }
size = '16'
src = { icon } /> }
{ text && <span className = { icon && classes.withIcon }>{text}</span> }
</div>
);
}
}
export default withStyles(styles)(Label);