@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\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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"}