@grafana/ui/dist/esm/components/Forms/RadioButtonGroup/RadioButtonGroup.mjs.map

Grafana Components Library

{"version":3,"file":"RadioButtonGroup.mjs","sources":["../../../../../src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { GrafanaTheme2, SelectableValue, toIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\n\nimport { RadioButtonSize, RadioButton, RADIO_GROUP_PADDING } from './RadioButton';\nexport interface RadioButtonGroupProps<T> {\n  value?: T;\n  id?: string;\n  disabled?: boolean;\n  disabledOptions?: T[];\n  options: Array<SelectableValue<T>>;\n  onChange?: (value: T) => void;\n  onClick?: (value: T) => void;\n  size?: RadioButtonSize;\n  fullWidth?: boolean;\n  className?: string;\n  autoFocus?: boolean;\n  ['aria-label']?: string;\n  invalid?: boolean;\n}\n\n/**\n * RadioButtonGroup is used to select a single value from multiple mutually exclusive options.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-radiobuttongroup--docs\n */\nexport function RadioButtonGroup<T>({\n  options,\n  value,\n  onChange,\n  onClick,\n  disabled,\n  disabledOptions,\n  size = 'md',\n  id,\n  className,\n  fullWidth = false,\n  autoFocus = false,\n  'aria-label': ariaLabel,\n  invalid = false,\n}: RadioButtonGroupProps<T>) {\n  const handleOnChange = useCallback(\n    (option: SelectableValue) => {\n      return () => {\n        if (onChange) {\n          onChange(option.value);\n        }\n      };\n    },\n    [onChange]\n  );\n  const handleOnClick = useCallback(\n    (option: SelectableValue) => {\n      return () => {\n        if (onClick) {\n          onClick(option.value);\n        }\n      };\n    },\n    [onClick]\n  );\n\n  const internalId = id ?? uniqueId('radiogroup-');\n  const groupName = useRef(internalId);\n  const styles = useStyles2(getStyles);\n\n  const activeButtonRef = useRef<HTMLInputElement | null>(null);\n  useEffect(() => {\n    if (autoFocus && activeButtonRef.current) {\n      activeButtonRef.current.focus();\n    }\n  }, [autoFocus]);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cx(styles.radioGroup, fullWidth && styles.fullWidth, invalid && styles.invalid, className)}\n    >\n      {options.map((opt, i) => {\n        const isItemDisabled = disabledOptions && opt.value && disabledOptions.includes(opt.value);\n        const icon = opt.icon ? toIconName(opt.icon) : undefined;\n        const hasNonIconPart = Boolean(opt.imgUrl || opt.label || opt.component);\n\n        return (\n          <RadioButton\n            size={size}\n            disabled={isItemDisabled || disabled}\n            active={value === opt.value}\n            key={`o.label-${i}`}\n            aria-label={opt.ariaLabel}\n            onChange={handleOnChange(opt)}\n            onClick={handleOnClick(opt)}\n            id={`option-${opt.value}-${internalId}`}\n            name={groupName.current}\n            description={opt.description}\n            fullWidth={fullWidth}\n            ref={value === opt.value ? activeButtonRef : undefined}\n          >\n            {icon && <Icon name={icon} className={cx(hasNonIconPart && styles.icon)} />}\n            {opt.imgUrl && <img src={opt.imgUrl} alt={opt.label} className={styles.img} />}\n            {opt.label} {opt.component ? <opt.component /> : null}\n          </RadioButton>\n        );\n      })}\n    </div>\n  );\n}\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    radioGroup: css({\n      backgroundColor: theme.colors.background.primary,\n      display: 'inline-flex',\n      flexDirection: 'row',\n      flexWrap: 'nowrap',\n      border: `1px solid ${theme.components.input.borderColor}`,\n      borderRadius: theme.shape.radius.default,\n      padding: RADIO_GROUP_PADDING,\n      '&:hover': {\n        borderColor: theme.components.input.borderHover,\n      },\n    }),\n    fullWidth: css({\n      display: 'flex',\n      flexGrow: 1,\n    }),\n    icon: css({\n      marginRight: '6px',\n    }),\n    img: css({\n      width: theme.spacing(2),\n      height: theme.spacing(2),\n      marginRight: theme.spacing(1),\n    }),\n    invalid: css({\n      border: `1px solid ${theme.colors.error.border}`,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}