@grafana/ui/dist/cjs/components/ColorPicker/SpectrumPalette.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 tinycolor = require('tinycolor2');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Field = require('../Forms/Field.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var ColorInput = require('./ColorInput.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var tinycolor__default = /*#__PURE__*/_interopDefaultCompat(tinycolor);

"use strict";
const SpectrumPalette = ({ color, onChange }) => {
  const [currentColor, setColor] = React.useState(color);
  const colorInputId = React.useId();
  reactUse.useThrottleFn(
    (c) => {
      onChange(data.colorManipulator.asHexString(theme.visualization.getColorByName(c)));
    },
    500,
    [currentColor]
  );
  const theme = ThemeContext.useTheme2();
  const styles = ThemeContext.useStyles2(getStyles);
  const rgbaString = React.useMemo(() => {
    return currentColor.startsWith("rgba") ? currentColor : tinycolor__default.default(theme.visualization.getColorByName(color)).toRgbString();
  }, [currentColor, theme, color]);
  return /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "column", grow: 1, gap: 2, children: [
    /* @__PURE__ */ jsxRuntime.jsx(reactColorful.RgbaStringColorPicker, { className: styles.root, color: rgbaString, onChange: setColor }),
    /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { noMargin: true, label: i18n.t("grafana-ui.color-picker.input-label", "RGBA value"), children: /* @__PURE__ */ jsxRuntime.jsx(ColorInput, { id: colorInputId, color: rgbaString, onChange: setColor }) })
  ] });
};
const getStyles = (theme) => ({
  root: css.css({
    "&.react-colorful": {
      width: "auto"
    },
    ".react-colorful": {
      "&__saturation": {
        borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`
      },
      "&__alpha": {
        borderRadius: `0 0 ${theme.shape.radius.default} ${theme.shape.radius.default}`
      },
      "&__alpha, &__hue": {
        height: theme.spacing(2),
        position: "relative"
      },
      "&__pointer": {
        height: theme.spacing(2),
        width: theme.spacing(2)
      }
    }
  })
});

exports.default = SpectrumPalette;
exports.getStyles = getStyles;
//# sourceMappingURL=SpectrumPalette.cjs.map