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