@grafana/ui/dist/esm/components/VizLegend/VizLegendSeriesIcon.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { memo, useCallback } from 'react';
import { t } from '@grafana/i18n';
import { SeriesColorPicker } from '../ColorPicker/ColorPicker.mjs';
import '../PanelChrome/index.mjs';
import { SeriesIcon } from './SeriesIcon.mjs';
import { usePanelContext } from '../PanelChrome/PanelContext.mjs';

"use strict";
const VizLegendSeriesIcon = memo(({ seriesName, color, gradient, readonly, lineStyle }) => {
  const { onSeriesColorChange } = usePanelContext();
  const onChange = useCallback(
    (color2) => {
      return onSeriesColorChange(seriesName, color2);
    },
    [seriesName, onSeriesColorChange]
  );
  if (seriesName && onSeriesColorChange && color && !readonly) {
    return /* @__PURE__ */ jsx(SeriesColorPicker, { color, onChange, enableNamedColors: true, children: ({ ref, showColorPicker, hideColorPicker, isOpen }) => {
      function handleKeyDown(e) {
        if (e.key === " " || e.key === "Enter") {
          e.preventDefault();
          showColorPicker();
        }
      }
      return /* @__PURE__ */ jsx(
        SeriesIcon,
        {
          tabIndex: 0,
          role: "button",
          "aria-label": t("grafana-ui.viz-legend.color-picker", "Edit color for {{seriesName}}", { seriesName }),
          "aria-haspopup": "menu",
          "aria-expanded": isOpen,
          color,
          className: "pointer",
          ref,
          onClick: showColorPicker,
          onKeyDown: handleKeyDown,
          onMouseLeave: hideColorPicker,
          lineStyle
        }
      );
    } });
  }
  return /* @__PURE__ */ jsx(SeriesIcon, { color, gradient, lineStyle });
});
VizLegendSeriesIcon.displayName = "VizLegendSeriesIcon";

export { VizLegendSeriesIcon };
//# sourceMappingURL=VizLegendSeriesIcon.mjs.map