@grafana/ui/dist/esm/components/ColorPicker/ColorPickerInput.mjs.map

Grafana Components Library

{"version":3,"file":"ColorPickerInput.mjs","sources":["../../../../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useState, forwardRef, FocusEvent } from 'react';\nimport { RgbaStringColorPicker } from 'react-colorful';\nimport { useThrottleFn } from 'react-use';\n\nimport { colorManipulator, GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';\nimport { Props as InputProps } from '../Input/Input';\n\nimport ColorInput from './ColorInput';\nimport { getStyles as getPaletteStyles } from './SpectrumPalette';\n\nexport interface ColorPickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {\n  value?: string;\n  onChange: (color: string) => void;\n  /** Format for returning the color in onChange callback, defaults to 'rgb' */\n  returnColorAs?: 'rgb' | 'hex';\n}\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-colorpickerinput--docs\n */\nexport const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(\n  ({ value = '', onChange, returnColorAs = 'rgb', ...inputProps }, ref) => {\n    const [currentColor, setColor] = useState(value);\n    const [isOpen, setIsOpen] = useState(false);\n    const theme = useTheme2();\n    const styles = useStyles2(getStyles);\n    const paletteStyles = useStyles2(getPaletteStyles);\n\n    useThrottleFn(\n      (c) => {\n        if (c === value) {\n          return;\n        }\n        // Default to an empty string if no color value is available\n        if (!c) {\n          onChange('');\n          return;\n        }\n        const color = theme.visualization.getColorByName(c);\n        if (returnColorAs === 'rgb') {\n          onChange(colorManipulator.asRgbString(color));\n        } else {\n          onChange(colorManipulator.asHexString(color));\n        }\n      },\n      500,\n      [currentColor]\n    );\n\n    const handleBlur = (evt: FocusEvent<HTMLInputElement>) => {\n      // Unless the user clicked inside the color picker, close it on blur\n      const isClickInPopover = document.querySelector('[data-testid=\"color-popover\"]')?.contains(evt.relatedTarget);\n      if (!isClickInPopover) {\n        setIsOpen(false);\n      }\n    };\n\n    return (\n      <ClickOutsideWrapper onClick={() => setIsOpen(false)}>\n        <div className={styles.wrapper}>\n          {isOpen && !inputProps.disabled && (\n            <RgbaStringColorPicker\n              data-testid={'color-popover'}\n              color={currentColor}\n              onChange={setColor}\n              className={cx(paletteStyles.root, styles.picker)}\n            />\n          )}\n          <ColorInput\n            {...inputProps}\n            theme={theme}\n            color={currentColor}\n            onChange={setColor}\n            buttonAriaLabel=\"Open color picker\"\n            onClick={() => setIsOpen(true)}\n            onBlur={(e) => handleBlur(e)}\n            ref={ref}\n            isClearable\n          />\n        </div>\n      </ClickOutsideWrapper>\n    );\n  }\n);\n\nColorPickerInput.displayName = 'ColorPickerInput';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    wrapper: css({\n      position: 'relative',\n    }),\n    picker: css({\n      '&.react-colorful': {\n        position: 'absolute',\n        width: '100%',\n        zIndex: 11,\n        bottom: '36px',\n      },\n    }),\n    inner: css({\n      position: 'absolute',\n    }),\n  };\n};\n"],"names":["getPaletteStyles"],"mappings":"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"}