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

139 lines
2.9 KiB
JavaScript

// @flow
import { withStyles } from '@material-ui/core/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 & {
/**
* An object containing the CSS classes.
*/
classes: Object,
/**
* Own CSS class name.
*/
className: string,
/**
* The color of the label.
*/
color: string,
/**
* HTML ID attribute to add to the root of {@code Label}.
*/
id: string,
/**
* Color for the icon.
*/
iconColor?: string,
/**
* Click handler if any.
*/
onClick?: Function,
};
/**
* Creates the styles for the component.
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
const styles = theme => {
return {
label: {
...withPixelLineHeight(theme.typography.labelRegular),
alignItems: 'center',
background: theme.palette.ui04,
borderRadius: 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, *> {
/**
* 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);