@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\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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"}