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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var reactColorful = require('react-colorful');
var reactUse = require('react-use');
var data = require('@grafana/data');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var ClickOutsideWrapper = require('../ClickOutsideWrapper/ClickOutsideWrapper.cjs');
var ColorInput = require('./ColorInput.cjs');
var SpectrumPalette = require('./SpectrumPalette.cjs');

"use strict";
const ColorPickerInput = React.forwardRef(
  ({ value = "", onChange, returnColorAs = "rgb", ...inputProps }, ref) => {
    const [currentColor, setColor] = React.useState(value);
    const [isOpen, setIsOpen] = React.useState(false);
    const theme = ThemeContext.useTheme2();
    const styles = ThemeContext.useStyles2(getStyles);
    const paletteStyles = ThemeContext.useStyles2(SpectrumPalette.getStyles);
    reactUse.useThrottleFn(
      (c) => {
        if (c === value) {
          return;
        }
        if (!c) {
          onChange("");
          return;
        }
        const color = theme.visualization.getColorByName(c);
        if (returnColorAs === "rgb") {
          onChange(data.colorManipulator.asRgbString(color));
        } else {
          onChange(data.colorManipulator.asHexString(color));
        }
      },
      500,
      [currentColor]
    );
    const handleBlur = (evt) => {
      var _a;
      const isClickInPopover = (_a = document.querySelector('[data-testid="color-popover"]')) == null ? void 0 : _a.contains(evt.relatedTarget);
      if (!isClickInPopover) {
        setIsOpen(false);
      }
    };
    return /* @__PURE__ */ jsxRuntime.jsx(ClickOutsideWrapper.ClickOutsideWrapper, { onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, children: [
      isOpen && !inputProps.disabled && /* @__PURE__ */ jsxRuntime.jsx(
        reactColorful.RgbaStringColorPicker,
        {
          "data-testid": "color-popover",
          color: currentColor,
          onChange: setColor,
          className: css.cx(paletteStyles.root, styles.picker)
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        ColorInput,
        {
          ...inputProps,
          color: currentColor,
          onChange: setColor,
          buttonAriaLabel: "Open color picker",
          onClick: () => setIsOpen(true),
          onBlur: (e) => handleBlur(e),
          ref,
          isClearable: true
        }
      )
    ] }) });
  }
);
ColorPickerInput.displayName = "ColorPickerInput";
const getStyles = (theme) => {
  return {
    wrapper: css.css({
      position: "relative"
    }),
    picker: css.css({
      "&.react-colorful": {
        position: "absolute",
        width: "100%",
        zIndex: 11,
        bottom: "36px"
      }
    }),
    inner: css.css({
      position: "absolute"
    })
  };
};

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