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

Grafana Components Library

{"version":3,"file":"ColorPickerPopover.mjs","sources":["../../../../src/components/ColorPicker/ColorPickerPopover.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { FocusScope } from '@react-aria/focus';\nimport { Component } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, colorManipulator } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { stylesFactory } from '../../themes/stylesFactory';\nimport { Themeable2 } from '../../types/theme';\nimport { Tab } from '../Tabs/Tab';\nimport { TabsBar } from '../Tabs/TabsBar';\nimport { PopoverContentProps } from '../Tooltip/types';\n\nimport { NamedColorsPalette } from './NamedColorsPalette';\nimport SpectrumPalette from './SpectrumPalette';\n\nexport type ColorPickerChangeHandler = (color: string) => void;\n\nexport interface ColorPickerProps extends Themeable2 {\n  color: string;\n  onChange: ColorPickerChangeHandler;\n  enableNamedColors?: boolean;\n}\n\nexport interface Props<T> extends ColorPickerProps, PopoverContentProps {\n  customPickers?: T;\n}\n\ntype PickerType = 'palette' | 'spectrum';\n\nexport interface CustomPickersDescriptor {\n  [key: string]: {\n    tabComponent: React.ComponentType<ColorPickerProps>;\n    name: string;\n  };\n}\n\ninterface State<T> {\n  activePicker: PickerType | keyof T;\n}\n\nclass UnThemedColorPickerPopover<T extends CustomPickersDescriptor> extends Component<Props<T>, State<T>> {\n  constructor(props: Props<T>) {\n    super(props);\n    this.state = {\n      activePicker: 'palette',\n    };\n  }\n\n  handleChange = (color: string) => {\n    const { onChange, enableNamedColors, theme } = this.props;\n    if (enableNamedColors) {\n      return onChange(color);\n    }\n    onChange(colorManipulator.asHexString(theme.visualization.getColorByName(color)));\n  };\n\n  onTabChange = (tab: PickerType | keyof T) => {\n    return () => this.setState({ activePicker: tab });\n  };\n\n  renderPicker = () => {\n    const { activePicker } = this.state;\n    const { color } = this.props;\n\n    switch (activePicker) {\n      case 'spectrum':\n        return <SpectrumPalette color={color} onChange={this.handleChange} />;\n      case 'palette':\n        return <NamedColorsPalette color={color} onChange={this.handleChange} />;\n      default:\n        return this.renderCustomPicker(activePicker);\n    }\n  };\n\n  renderCustomPicker = (tabKey: keyof T) => {\n    const { customPickers, color, theme } = this.props;\n    if (!customPickers) {\n      return null;\n    }\n\n    return React.createElement(customPickers[tabKey].tabComponent, {\n      color,\n      theme,\n      onChange: this.handleChange,\n    });\n  };\n\n  renderCustomPickerTabs = () => {\n    const { customPickers } = this.props;\n\n    if (!customPickers) {\n      return null;\n    }\n\n    return (\n      <>\n        {Object.keys(customPickers).map((key) => {\n          return <Tab label={customPickers[key].name} onChangeTab={this.onTabChange(key)} key={key} />;\n        })}\n      </>\n    );\n  };\n\n  render() {\n    const { theme } = this.props;\n    const { activePicker } = this.state;\n\n    const styles = getStyles(theme);\n\n    return (\n      <FocusScope contain restoreFocus autoFocus>\n        {/*\n          tabIndex=-1 is needed here to support highlighting text within the picker when using FocusScope\n          see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668\n        */}\n        <div tabIndex={-1} className={styles.colorPickerPopover}>\n          <TabsBar>\n            <Tab\n              label={t('grafana-ui.color-picker-popover.palette-tab', 'Colors')}\n              onChangeTab={this.onTabChange('palette')}\n              active={activePicker === 'palette'}\n            />\n            <Tab\n              label={t('grafana-ui.color-picker-popover.spectrum-tab', 'Custom')}\n              onChangeTab={this.onTabChange('spectrum')}\n              active={activePicker === 'spectrum'}\n            />\n            {this.renderCustomPickerTabs()}\n          </TabsBar>\n          <div className={styles.colorPickerPopoverContent}>{this.renderPicker()}</div>\n        </div>\n      </FocusScope>\n    );\n  }\n}\n\nexport const ColorPickerPopover = withTheme2(UnThemedColorPickerPopover);\nColorPickerPopover.displayName = 'ColorPickerPopover';\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2) => {\n  return {\n    colorPickerPopover: css({\n      borderRadius: theme.shape.radius.default,\n      boxShadow: theme.shadows.z3,\n      background: theme.colors.background.elevated,\n      padding: theme.spacing(0.5),\n      border: `1px solid ${theme.colors.border.weak}`,\n    }),\n    colorPickerPopoverContent: css({\n      width: '246px',\n      fontSize: theme.typography.bodySmall.fontSize,\n      minHeight: '184px',\n      height: '290px',\n      padding: theme.spacing(1),\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n    colorPickerPopoverTabs: css({\n      display: 'flex',\n      width: '100%',\n      borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,\n    }),\n  };\n});\n"],"names":[],"mappings":"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"}