github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/inputs/common/Common.tsx (about)

     1  import { ColorGenerator } from "../../../../utils/color";
     2  import { components, OptionProps, SingleValueProps } from "react-select";
     3  
     4  const stringColorMap = {};
     5  const colorGenerator = new ColorGenerator(24, 4);
     6  
     7  const stringToColor = (str) => {
     8    if (stringColorMap[str]) {
     9      return stringColorMap[str];
    10    }
    11    const color = colorGenerator.nextColor().hex;
    12    stringColorMap[str] = color;
    13    return color;
    14  };
    15  
    16  const OptionTag = ({ tagKey, tagValue }) => (
    17    <span
    18      className="rounded-md text-xs"
    19      style={{ color: stringToColor(tagValue) }}
    20      title={`${tagKey} = ${tagValue}`}
    21    >
    22      {tagValue}
    23    </span>
    24  );
    25  
    26  const LabelTagWrapper = ({ label, tags }) => (
    27    <div className="space-x-2">
    28      {/*@ts-ignore*/}
    29      <span>{label}</span>
    30      {/*@ts-ignore*/}
    31      {Object.entries(tags || {}).map(([tagKey, tagValue]) => (
    32        <OptionTag key={tagKey} tagKey={tagKey} tagValue={tagValue} />
    33      ))}
    34    </div>
    35  );
    36  
    37  const OptionWithTags = (props: OptionProps) => (
    38    <components.Option {...props}>
    39      {/*@ts-ignore*/}
    40      <LabelTagWrapper label={props.data.label} tags={props.data.tags} />
    41    </components.Option>
    42  );
    43  
    44  const SingleValueWithTags = ({ children, ...props }: SingleValueProps) => {
    45    return (
    46      <components.SingleValue {...props}>
    47        {/*@ts-ignore*/}
    48        <LabelTagWrapper label={props.data.label} tags={props.data.tags} />
    49      </components.SingleValue>
    50    );
    51  };
    52  
    53  const MultiValueLabelWithTags = ({ children, ...props }: SingleValueProps) => {
    54    return (
    55      <components.MultiValueLabel {...props}>
    56        {/*@ts-ignore*/}
    57        <LabelTagWrapper label={props.data.label} tags={props.data.tags} />
    58      </components.MultiValueLabel>
    59    );
    60  };
    61  
    62  export { MultiValueLabelWithTags, OptionWithTags, SingleValueWithTags };