@grafana/ui/dist/cjs/components/ColorPicker/ColorPickerPopover.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var focus = require('@react-aria/focus');
var React = require('react');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Tab = require('../Tabs/Tab.cjs');
var TabsBar = require('../Tabs/TabsBar.cjs');
var NamedColorsPalette = require('./NamedColorsPalette.cjs');
var SpectrumPalette = require('./SpectrumPalette.cjs');

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

exports.ColorPickerPopover = ColorPickerPopover;
//# sourceMappingURL=ColorPickerPopover.cjs.map