github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/reports/containers/customChart/metricOption.tsx (about)

     1  // Copyright 2019 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import {OptionComponentProps} from "react-select";
    13  import classnames from "classnames";
    14  
    15  import "./metricOption.styl";
    16  
    17  export function MetricOption(props: OptionComponentProps) {
    18    const { option, className, onSelect, onFocus } = props;
    19    const { label, description } = option;
    20    const classes = classnames("metric-option", className);
    21  
    22    return (
    23      <div
    24        className={classes}
    25        role="option"
    26        aria-label={label}
    27        title={option.title}
    28        onMouseDown={event => onSelect(option, event)}
    29        onMouseEnter={event => onFocus(option, event)}
    30      >
    31        <div className="metric-option__label">{label}</div>
    32        <div
    33          className="metric-option__description"
    34          title={description}>
    35          {description}
    36        </div>
    37      </div>
    38    );
    39  }