superset-frontend/src/components/Label/index.tsx

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import React, { CSSProperties } from 'react';
import { Tag } from 'src/common/components';
import { useTheme } from '@superset-ui/core';

export type OnClickHandler = React.MouseEventHandler<HTMLElement>;

export type Type =
  | 'success'
  | 'warning'
  | 'danger'
  | 'info'
  | 'default'
  | 'primary'
  | 'secondary';

export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
  key?: string;
  className?: string;
  onClick?: OnClickHandler;
  type?: Type;
  style?: CSSProperties;
  children?: React.ReactNode;
  role?: string;
}

export default function Label(props: LabelProps) {
  const theme = useTheme();
  const { colors, transitionTiming } = theme;
  const { type, onClick, children, ...rest } = props;
  const {
    primary,
    secondary,
    grayscale,
    success,
    warning,
    error,
    info,
  } = colors;

  let backgroundColor = grayscale.light3;
  let backgroundColorHover = onClick ? primary.light2 : grayscale.light3;
  let borderColor = onClick ? grayscale.light2 : 'transparent';
  let borderColorHover = onClick ? primary.light1 : 'transparent';
  let color = grayscale.dark1;

  if (type && type !== 'default') {
    color = grayscale.light4;

    let baseColor;
    if (type === 'success') {
      baseColor = success;
    } else if (type === 'warning') {
      baseColor = warning;
    } else if (type === 'danger') {
      baseColor = error;
    } else if (type === 'info') {
      baseColor = info;
    } else if (type === 'secondary') {
      baseColor = secondary;
    } else {
      baseColor = primary;
    }

    backgroundColor = baseColor.base;
    backgroundColorHover = onClick ? baseColor.dark1 : baseColor.base;
    borderColor = onClick ? baseColor.dark1 : 'transparent';
    borderColorHover = onClick ? baseColor.dark2 : 'transparent';
  }

  return (
    <Tag
      css={{
        transition: `background-color ${transitionTiming}s`,
        whiteSpace: 'nowrap',
        cursor: onClick ? 'pointer' : 'default',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        backgroundColor,
        borderColor,
        borderRadius: 21,
        padding: '0.35em 0.8em',
        lineHeight: 1,
        color,
        '&:hover': {
          backgroundColor: backgroundColorHover,
          borderColor: borderColorHover,
          opacity: 1,
        },
      }}
      onClick={onClick}
      {...rest}
    >
      {children}
    </Tag>
  );
}