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

Grafana Components Library

{"version":3,"file":"SpectrumPalette.mjs","sources":["../../../../src/components/ColorPicker/SpectrumPalette.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\nimport { RgbaStringColorPicker } from 'react-colorful';\nimport { useThrottleFn } from 'react-use';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2, colorManipulator } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\n\nimport ColorInput from './ColorInput';\n\nexport interface SpectrumPaletteProps {\n  color: string;\n  onChange: (color: string) => void;\n}\n\nconst SpectrumPalette = ({ color, onChange }: SpectrumPaletteProps) => {\n  const [currentColor, setColor] = useState(color);\n\n  useThrottleFn(\n    (c) => {\n      onChange(colorManipulator.asHexString(theme.visualization.getColorByName(c)));\n    },\n    500,\n    [currentColor]\n  );\n\n  const theme = useTheme2();\n  const styles = useStyles2(getStyles);\n\n  const rgbaString = useMemo(() => {\n    return currentColor.startsWith('rgba')\n      ? currentColor\n      : tinycolor(theme.visualization.getColorByName(color)).toRgbString();\n  }, [currentColor, theme, color]);\n\n  return (\n    <div className={styles.wrapper}>\n      <RgbaStringColorPicker className={styles.root} color={rgbaString} onChange={setColor} />\n      <ColorInput theme={theme} color={rgbaString} onChange={setColor} className={styles.colorInput} />\n    </div>\n  );\n};\n\nexport const getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css({\n    flexGrow: 1,\n  }),\n  root: css({\n    '&.react-colorful': {\n      width: 'auto',\n    },\n\n    '.react-colorful': {\n      '&__saturation': {\n        borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,\n      },\n      '&__alpha': {\n        borderRadius: `0 0 ${theme.shape.radius.default} ${theme.shape.radius.default}`,\n      },\n      '&__alpha, &__hue': {\n        height: theme.spacing(2),\n        position: 'relative',\n      },\n      '&__pointer': {\n        height: theme.spacing(2),\n        width: theme.spacing(2),\n      },\n    },\n  }),\n  colorInput: css({\n    marginTop: theme.spacing(2),\n  }),\n});\n\nexport default SpectrumPalette;\n"],"names":[],"mappings":";;;;;;;;;;;AAiBA,MAAM,eAAA,GAAkB,CAAC,EAAE,KAAA,EAAO,UAAS,KAA4B;AACrE,EAAA,MAAM,CAAC,YAAA,EAAc,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AAE/C,EAAA,aAAA;AAAA,IACE,CAAC,CAAA,KAAM;AACL,MAAA,QAAA,CAAS,iBAAiB,WAAA,CAAY,KAAA,CAAM,cAAc,cAAA,CAAe,CAAC,CAAC,CAAC,CAAA;AAAA,IAC9E,CAAA;AAAA,IACA,GAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,OAAO,YAAA,CAAa,UAAA,CAAW,MAAM,CAAA,GACjC,YAAA,GACA,SAAA,CAAU,KAAA,CAAM,aAAA,CAAc,cAAA,CAAe,KAAK,CAAC,CAAA,CAAE,WAAA,EAAY;AAAA,EACvE,CAAA,EAAG,CAAC,YAAA,EAAc,KAAA,EAAO,KAAK,CAAC,CAAA;AAE/B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,yBAAsB,SAAA,EAAW,MAAA,CAAO,MAAM,KAAA,EAAO,UAAA,EAAY,UAAU,QAAA,EAAU,CAAA;AAAA,oBACtF,GAAA,CAAC,cAAW,KAAA,EAAc,KAAA,EAAO,YAAY,QAAA,EAAU,QAAA,EAAU,SAAA,EAAW,MAAA,CAAO,UAAA,EAAY;AAAA,GAAA,EACjG,CAAA;AAEJ;AAEO,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAClD,SAAS,GAAA,CAAI;AAAA,IACX,QAAA,EAAU;AAAA,GACX,CAAA;AAAA,EACD,MAAM,GAAA,CAAI;AAAA,IACR,kBAAA,EAAoB;AAAA,MAClB,KAAA,EAAO;AAAA,KACT;AAAA,IAEA,iBAAA,EAAmB;AAAA,MACjB,eAAA,EAAiB;AAAA,QACf,YAAA,EAAc,CAAA,EAAG,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA,CAAA,EAAI,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA,IAAA;AAAA,OAC3E;AAAA,MACA,UAAA,EAAY;AAAA,QACV,YAAA,EAAc,CAAA,IAAA,EAAO,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA,CAAA,EAAI,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA,OAC/E;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QACvB,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,YAAA,EAAc;AAAA,QACZ,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QACvB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AACxB;AACF,GACD,CAAA;AAAA,EACD,YAAY,GAAA,CAAI;AAAA,IACd,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC3B;AACH,CAAA;;;;"}