@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  id?: string;\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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"}