1import React from 'react';
 2
 3import { Chip } from '@material-ui/core';
 4import { common } from '@material-ui/core/colors';
 5import {
 6  darken,
 7  getContrastRatio,
 8} from '@material-ui/core/styles/colorManipulator';
 9
10import { Color } from '../gqlTypes';
11import { LabelFragment } from '../graphql/fragments.generated';
12
13const _rgb = (color: Color) =>
14  'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
15
16// Minimum contrast between the background and the text color
17const contrastThreshold = 2.5;
18// Guess the text color based on the background color
19const getTextColor = (background: string) =>
20  getContrastRatio(background, common.white) >= contrastThreshold
21    ? common.white // White on dark backgrounds
22    : common.black; // And black on light ones
23
24// Create a style object from the label RGB colors
25const createStyle = (color: Color, maxWidth?: string) => ({
26  backgroundColor: _rgb(color),
27  color: getTextColor(_rgb(color)),
28  borderBottomColor: darken(_rgb(color), 0.2),
29  margin: '3px',
30  maxWidth: maxWidth,
31});
32
33type Props = {
34  label: LabelFragment;
35  maxWidth?: string;
36};
37function Label({ label, maxWidth }: Props) {
38  return (
39    <Chip
40      size={'small'}
41      label={label.name}
42      style={createStyle(label.color, maxWidth)}
43    ></Chip>
44  );
45}
46export default Label;