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

Grafana Components Library

{"version":3,"file":"ColorInput.mjs","sources":["../../../../src/components/ColorPicker/ColorInput.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { debounce } from 'lodash';\nimport { forwardRef, useState, useEffect, useMemo } from 'react';\nimport * as React from 'react';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Input, Props as InputProps } from '../Input/Input';\n\nimport { ColorPickerProps } from './ColorPickerPopover';\n\ninterface ColorInputProps extends ColorPickerProps, Omit<InputProps, 'color' | 'onChange'> {\n  isClearable?: boolean;\n  buttonAriaLabel?: string;\n}\n\nconst ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  ({ color, onChange, isClearable = false, onClick, onBlur, disabled, buttonAriaLabel, ...inputProps }, ref) => {\n    const [value, setValue] = useState(color);\n    const [previousColor, setPreviousColor] = useState(color);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const updateColor = useMemo(() => debounce(onChange, 100), []);\n\n    useEffect(() => {\n      const newColor = tinycolor(color);\n      if (newColor.isValid() && color !== previousColor) {\n        setValue(newColor.toString());\n        setPreviousColor(color);\n      }\n    }, [color, previousColor]);\n\n    const onChangeColor = (event: React.SyntheticEvent<HTMLInputElement>) => {\n      const { value: colorValue } = event.currentTarget;\n\n      setValue(colorValue);\n      if (colorValue === '' && isClearable) {\n        updateColor(colorValue);\n        return;\n      }\n      const newColor = tinycolor(colorValue);\n\n      if (newColor.isValid()) {\n        updateColor(newColor.toString());\n      }\n    };\n\n    const onBlurInput = (event: React.FocusEvent<HTMLInputElement>) => {\n      const newColor = tinycolor(value);\n\n      if (!newColor.isValid()) {\n        setValue(color);\n      }\n\n      onBlur?.(event);\n    };\n\n    return (\n      <Input\n        {...inputProps}\n        value={value}\n        onChange={onChangeColor}\n        disabled={disabled}\n        onClick={onClick}\n        onBlur={onBlurInput}\n        addonBefore={<ColorPreview onClick={onClick} ariaLabel={buttonAriaLabel} disabled={disabled} color={color} />}\n        ref={ref}\n      />\n    );\n  }\n);\n\nColorInput.displayName = 'ColorInput';\n\nexport default ColorInput;\n\ninterface ColorPreviewProps {\n  color: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  disabled?: boolean;\n  ariaLabel?: string;\n}\n\nconst ColorPreview = ({ color, onClick, disabled, ariaLabel }: ColorPreviewProps) => {\n  const styles = useStyles2(getColorPreviewStyles);\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      disabled={disabled || !onClick}\n      className={cx(\n        styles,\n        css({\n          backgroundColor: color,\n        })\n      )}\n    />\n  );\n};\n\nconst getColorPreviewStyles = (theme: GrafanaTheme2) =>\n  css({\n    height: '100%',\n    width: `${theme.spacing.gridSize * 4}px`,\n    borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,\n    border: `1px solid ${theme.colors.border.medium}`,\n  });\n"],"names":[],"mappings":"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"}