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

Grafana Components Library

{"version":3,"file":"NamedColorsGroup.mjs","sources":["../../../../src/components/ColorPicker/NamedColorsGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport { upperFirst } from 'lodash';\nimport { useMemo } from 'react';\n\nimport { GrafanaTheme2, ThemeVizHue } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { ColorSwatch, ColorSwatchVariant } from './ColorSwatch';\n\ninterface NamedColorsGroupProps {\n  hue: ThemeVizHue;\n  selectedColor?: Property.Color;\n  onColorSelect: (colorName: string) => void;\n  key?: string;\n}\n\nconst NamedColorsGroup = ({ hue, selectedColor, onColorSelect, ...otherProps }: NamedColorsGroupProps) => {\n  const label = upperFirst(hue.name);\n  const styles = useStyles2(getStyles);\n  const reversedShades = useMemo(() => {\n    return [...hue.shades].reverse();\n  }, [hue.shades]);\n\n  return (\n    <div className={styles.colorRow}>\n      <div className={styles.colorLabel}>{label}</div>\n      <div {...otherProps} className={styles.swatchRow}>\n        {reversedShades.map((shade) => (\n          <ColorSwatch\n            key={shade.name}\n            aria-label={shade.name}\n            variant={shade.primary ? ColorSwatchVariant.Large : ColorSwatchVariant.Small}\n            isSelected={shade.name === selectedColor}\n            color={shade.color}\n            onClick={() => onColorSelect(shade.name)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default NamedColorsGroup;\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    colorRow: css({\n      display: 'grid',\n      gridTemplateColumns: '25% 1fr',\n      gridColumnGap: theme.spacing(2),\n      padding: theme.spacing(0.5, 0),\n\n      '&:hover': {\n        background: theme.colors.background.secondary,\n      },\n    }),\n    colorLabel: css({\n      paddingLeft: theme.spacing(1),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n    swatchRow: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n      justifyContent: 'space-around',\n      flexDirection: 'row',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;AAkBA,MAAM,gBAAA,GAAmB,CAAC,EAAE,GAAA,EAAK,eAAe,aAAA,EAAe,GAAG,YAAW,KAA6B;AACxG,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,GAAA,CAAI,IAAI,CAAA;AACjC,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAA,OAAO,CAAC,GAAG,GAAA,CAAI,MAAM,EAAE,OAAA,EAAQ;AAAA,EACjC,CAAA,EAAG,CAAC,GAAA,CAAI,MAAM,CAAC,CAAA;AAEf,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,QAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBAC1C,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EAAY,SAAA,EAAW,OAAO,SAAA,EACpC,QAAA,EAAA,cAAA,CAAe,GAAA,CAAI,CAAC,KAAA,qBACnB,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QAEC,cAAY,KAAA,CAAM,IAAA;AAAA,QAClB,OAAA,EAAS,KAAA,CAAM,OAAA,GAAU,kBAAA,CAAmB,QAAQ,kBAAA,CAAmB,KAAA;AAAA,QACvE,UAAA,EAAY,MAAM,IAAA,KAAS,aAAA;AAAA,QAC3B,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,OAAA,EAAS,MAAM,aAAA,CAAc,KAAA,CAAM,IAAI;AAAA,OAAA;AAAA,MALlC,KAAA,CAAM;AAAA,KAOd,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;AAIA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,UAAU,GAAA,CAAI;AAAA,MACZ,OAAA,EAAS,MAAA;AAAA,MACT,mBAAA,EAAqB,SAAA;AAAA,MACrB,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC9B,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,GAAA,EAAK,CAAC,CAAA;AAAA,MAE7B,SAAA,EAAW;AAAA,QACT,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW;AAAA;AACtC,KACD,CAAA;AAAA,IACD,YAAY,GAAA,CAAI;AAAA,MACd,WAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,cAAA;AAAA,MAChB,aAAA,EAAe;AAAA,KAChB;AAAA,GACH;AACF,CAAA;;;;"}