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

Grafana Components Library

{"version":3,"file":"ColorPicker.mjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Component, createRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { stylesFactory } from '../../themes/stylesFactory';\nimport { closePopover } from '../../utils/closePopover';\nimport { Popover } from '../Tooltip/Popover';\nimport { PopoverController } from '../Tooltip/PopoverController';\n\nimport { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';\nimport { ColorSwatch } from './ColorSwatch';\nimport { SeriesColorPickerPopover } from './SeriesColorPickerPopover';\n\n/**\n * If you need custom trigger for the color picker you can do that with a render prop pattern and supply a function\n * as a child. You will get show/hide function which you can map to desired interaction (like onClick or onMouseLeave)\n * and a ref which needs to be passed to an HTMLElement for correct positioning. If you want to use class or functional\n * component as a custom trigger you will need to forward the reference to first HTMLElement child.\n */\ntype ColorPickerTriggerRenderer = (props: {\n  // This should be a React.RefObject<HTMLElement> but due to how object refs are defined you cannot downcast from that\n  // to a specific type like React.RefObject<HTMLDivElement> even though it would be fine in runtime.\n  ref: React.RefObject<any>;\n  showColorPicker: () => void;\n  hideColorPicker: () => void;\n}) => React.ReactNode;\n\nexport const colorPickerFactory = <T extends ColorPickerProps>(\n  popover: React.ComponentType<React.PropsWithChildren<T>>,\n  displayName = 'ColorPicker'\n) => {\n  return class ColorPicker extends Component<T & { children?: ColorPickerTriggerRenderer }> {\n    static displayName = displayName;\n    pickerTriggerRef = createRef<any>();\n\n    render() {\n      const { theme, children, onChange, color } = this.props;\n      const styles = getStyles(theme);\n      const popoverElement = React.createElement(popover, {\n        ...{ ...this.props, children: null },\n        onChange,\n      });\n      return (\n        <PopoverController content={popoverElement} hideAfter={300}>\n          {(showPopper, hidePopper, popperProps) => {\n            return (\n              <>\n                {this.pickerTriggerRef.current && (\n                  <Popover\n                    {...popperProps}\n                    referenceElement={this.pickerTriggerRef.current}\n                    wrapperClassName={styles.colorPicker}\n                    onMouseLeave={hidePopper}\n                    onMouseEnter={showPopper}\n                    onKeyDown={(event) => closePopover(event, hidePopper)}\n                  />\n                )}\n\n                {children ? (\n                  children({\n                    ref: this.pickerTriggerRef,\n                    showColorPicker: showPopper,\n                    hideColorPicker: hidePopper,\n                  })\n                ) : (\n                  <ColorSwatch\n                    ref={this.pickerTriggerRef}\n                    onClick={showPopper}\n                    onMouseLeave={hidePopper}\n                    color={theme.visualization.getColorByName(color || '#000000')}\n                    aria-label={color}\n                  />\n                )}\n              </>\n            );\n          }}\n        </PopoverController>\n      );\n    }\n  };\n};\n\nexport const ColorPicker = withTheme2(colorPickerFactory(ColorPickerPopover, 'ColorPicker'));\nexport const SeriesColorPicker = withTheme2(colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker'));\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2) => {\n  return {\n    colorPicker: css({\n      position: 'absolute',\n      zIndex: theme.zIndex.tooltip,\n      color: theme.colors.text.primary,\n      maxWidth: '400px',\n      fontSize: theme.typography.size.sm,\n    }),\n  };\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,kBAAqB,GAAA,CAChC,OACA,EAAA,WAAA,GAAc,aACX,KAAA;AAjCL,EAAA,IAAA,EAAA;AAkCE,EAAA,OAAO,mBAA0B,SAAyD,CAAA;AAAA,IAAnF,WAAA,GAAA;AAAA,MAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAEL,MAAA,IAAA,CAAA,gBAAA,GAAmB,SAAe,EAAA;AAAA;AAAA,IAElC,MAAS,GAAA;AACP,MAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,QAAU,EAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAClD,MAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,MAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,aAAA,CAAc,OAAS,EAAA;AAAA,QAClD,GAAG,EAAE,GAAG,IAAK,CAAA,KAAA,EAAO,UAAU,IAAK,EAAA;AAAA,QACnC;AAAA,OACD,CAAA;AACD,MACE,uBAAA,GAAA,CAAC,qBAAkB,OAAS,EAAA,cAAA,EAAgB,WAAW,GACpD,EAAA,QAAA,EAAA,CAAC,UAAY,EAAA,UAAA,EAAY,WAAgB,KAAA;AACxC,QAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,iBAAiB,OACrB,oBAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACE,GAAG,WAAA;AAAA,cACJ,gBAAA,EAAkB,KAAK,gBAAiB,CAAA,OAAA;AAAA,cACxC,kBAAkB,MAAO,CAAA,WAAA;AAAA,cACzB,YAAc,EAAA,UAAA;AAAA,cACd,YAAc,EAAA,UAAA;AAAA,cACd,SAAW,EAAA,CAAC,KAAU,KAAA,YAAA,CAAa,OAAO,UAAU;AAAA;AAAA,WACtD;AAAA,UAGD,WACC,QAAS,CAAA;AAAA,YACP,KAAK,IAAK,CAAA,gBAAA;AAAA,YACV,eAAiB,EAAA,UAAA;AAAA,YACjB,eAAiB,EAAA;AAAA,WAClB,CAED,mBAAA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,KAAK,IAAK,CAAA,gBAAA;AAAA,cACV,OAAS,EAAA,UAAA;AAAA,cACT,YAAc,EAAA,UAAA;AAAA,cACd,KAAO,EAAA,KAAA,CAAM,aAAc,CAAA,cAAA,CAAe,SAAS,SAAS,CAAA;AAAA,cAC5D,YAAY,EAAA;AAAA;AAAA;AACd,SAEJ,EAAA,CAAA;AAAA,OAGN,EAAA,CAAA;AAAA;AAEJ,GACF,EAhDO,EACE,CAAA,WAAA,GAAc,WADhB,EAAA,EAAA;AAiDT;AAEO,MAAM,WAAc,GAAA,UAAA,CAAW,kBAAmB,CAAA,kBAAA,EAAoB,aAAa,CAAC;AACpF,MAAM,iBAAoB,GAAA,UAAA,CAAW,kBAAmB,CAAA,wBAAA,EAA0B,mBAAmB,CAAC;AAE7G,MAAM,SAAA,GAAY,aAAc,CAAA,CAAC,KAAyB,KAAA;AACxD,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,QAAU,EAAA,UAAA;AAAA,MACV,MAAA,EAAQ,MAAM,MAAO,CAAA,OAAA;AAAA,MACrB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,MACzB,QAAU,EAAA,OAAA;AAAA,MACV,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,IAAK,CAAA;AAAA,KACjC;AAAA,GACH;AACF,CAAC,CAAA;;;;"}