@grafana/ui/dist/esm/components/ColorPicker/ColorPickerPopover.mjs

Grafana Components Library

import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { FocusScope } from '@react-aria/focus';
import { useState, createElement } from 'react';
import { colorManipulator } from '@grafana/data';
import { t } from '@grafana/i18n';
import { useTheme2 } from '../../themes/ThemeContext.mjs';
import { Tab } from '../Tabs/Tab.mjs';
import { TabsBar } from '../Tabs/TabsBar.mjs';
import { NamedColorsPalette } from './NamedColorsPalette.mjs';
import SpectrumPalette from './SpectrumPalette.mjs';

"use strict";
const ColorPickerPopover = (props) => {
  const { color, onChange, enableNamedColors, customPickers } = props;
  const theme = useTheme2();
  const [activePicker, setActivePicker] = useState("palette");
  const styles = getStyles(theme);
  const handleChange = (color2) => {
    if (enableNamedColors) {
      return onChange(color2);
    }
    onChange(colorManipulator.asHexString(theme.visualization.getColorByName(color2)));
  };
  const onTabChange = (tab) => {
    return () => setActivePicker(tab);
  };
  const renderCustomPicker = (tabKey) => {
    if (!customPickers) {
      return null;
    }
    return createElement(customPickers[tabKey].tabComponent, {
      color,
      onChange: handleChange
    });
  };
  const renderPicker = () => {
    switch (activePicker) {
      case "spectrum":
        return /* @__PURE__ */ jsx(SpectrumPalette, { color, onChange: handleChange });
      case "palette":
        return /* @__PURE__ */ jsx(NamedColorsPalette, { color, onChange: handleChange });
      default:
        return renderCustomPicker(activePicker);
    }
  };
  const renderCustomPickerTabs = () => {
    if (!customPickers) {
      return null;
    }
    return /* @__PURE__ */ jsx(Fragment, { children: Object.keys(customPickers).map((key) => {
      return /* @__PURE__ */ jsx(Tab, { label: customPickers[key].name, onChangeTab: onTabChange(key) }, key);
    }) });
  };
  return /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs("div", { tabIndex: -1, className: styles.colorPickerPopover, children: [
    /* @__PURE__ */ jsxs(TabsBar, { children: [
      /* @__PURE__ */ jsx(
        Tab,
        {
          label: t("grafana-ui.color-picker-popover.palette-tab", "Colors"),
          onChangeTab: onTabChange("palette"),
          active: activePicker === "palette"
        }
      ),
      /* @__PURE__ */ jsx(
        Tab,
        {
          label: t("grafana-ui.color-picker-popover.spectrum-tab", "Custom"),
          onChangeTab: onTabChange("spectrum"),
          active: activePicker === "spectrum"
        }
      ),
      renderCustomPickerTabs()
    ] }),
    /* @__PURE__ */ jsx("div", { className: styles.colorPickerPopoverContent, children: renderPicker() })
  ] }) });
};
const getStyles = (theme) => {
  return {
    colorPickerPopover: css({
      borderRadius: theme.shape.radius.default,
      boxShadow: theme.shadows.z3,
      background: theme.colors.background.elevated,
      padding: theme.spacing(0.5),
      border: `1px solid ${theme.colors.border.weak}`
    }),
    colorPickerPopoverContent: css({
      width: "246px",
      fontSize: theme.typography.bodySmall.fontSize,
      minHeight: "184px",
      height: "290px",
      padding: theme.spacing(1),
      display: "flex",
      flexDirection: "column"
    }),
    colorPickerPopoverTabs: css({
      display: "flex",
      width: "100%",
      borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`
    })
  };
};

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