@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,eAAkB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAqC,KAAA;AACrE,EAAA,MAAM,CAAC,YAAA,EAAc,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AAE/C,EAAA,aAAA;AAAA,IACE,CAAC,CAAM,KAAA;AACL,MAAA,QAAA,CAAS,iBAAiB,WAAY,CAAA,KAAA,CAAM,cAAc,cAAe,CAAA,CAAC,CAAC,CAAC,CAAA;AAAA,KAC9E;AAAA,IACA,GAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,OAAO,YAAa,CAAA,UAAA,CAAW,MAAM,CAAA,GACjC,YACA,GAAA,SAAA,CAAU,KAAM,CAAA,aAAA,CAAc,cAAe,CAAA,KAAK,CAAC,CAAA,CAAE,WAAY,EAAA;AAAA,GACpE,EAAA,CAAC,YAAc,EAAA,KAAA,EAAO,KAAK,CAAC,CAAA;AAE/B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,OACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,yBAAsB,SAAW,EAAA,MAAA,CAAO,MAAM,KAAO,EAAA,UAAA,EAAY,UAAU,QAAU,EAAA,CAAA;AAAA,oBACtF,GAAA,CAAC,cAAW,KAAc,EAAA,KAAA,EAAO,YAAY,QAAU,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,CAAO,UAAY,EAAA;AAAA,GACjG,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAClD,SAAS,GAAI,CAAA;AAAA,IACX,QAAU,EAAA;AAAA,GACX,CAAA;AAAA,EACD,MAAM,GAAI,CAAA;AAAA,IACR,kBAAoB,EAAA;AAAA,MAClB,KAAO,EAAA;AAAA,KACT;AAAA,IAEA,iBAAmB,EAAA;AAAA,MACjB,eAAiB,EAAA;AAAA,QACf,YAAA,EAAc,CAAG,EAAA,KAAA,CAAM,KAAM,CAAA,MAAA,CAAO,OAAO,CAAI,CAAA,EAAA,KAAA,CAAM,KAAM,CAAA,MAAA,CAAO,OAAO,CAAA,IAAA;AAAA,OAC3E;AAAA,MACA,UAAY,EAAA;AAAA,QACV,YAAA,EAAc,CAAO,IAAA,EAAA,KAAA,CAAM,KAAM,CAAA,MAAA,CAAO,OAAO,CAAI,CAAA,EAAA,KAAA,CAAM,KAAM,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,OAC/E;AAAA,MACA,kBAAoB,EAAA;AAAA,QAClB,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QACvB,QAAU,EAAA;AAAA,OACZ;AAAA,MACA,YAAc,EAAA;AAAA,QACZ,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QACvB,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AACxB;AACF,GACD,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GAC3B;AACH,CAAA;;;;"}