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

Grafana Components Library

{"version":3,"file":"RadioButtonList.mjs","sources":["../../../../../src/components/Forms/RadioButtonList/RadioButtonList.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\n\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nimport { RadioButtonDot } from './RadioButtonDot';\n\nexport interface RadioButtonListProps<T> {\n  /** A name of a radio group. Used to group multiple radio inputs into a single group */\n  name: string;\n  id?: string;\n  /** An array of available options */\n  options: Array<SelectableValue<T>>;\n  value?: T;\n  onChange?: (value: T) => void;\n  /** Disables all elements in the list */\n  disabled?: boolean;\n  /** Disables subset of elements in the list. Compares values using the === operator */\n  disabledOptions?: T[];\n  className?: string;\n}\n\nexport function RadioButtonList<T extends string | number | readonly string[]>({\n  name,\n  id,\n  options,\n  value,\n  onChange,\n  className,\n  disabled,\n  disabledOptions = [],\n}: RadioButtonListProps<T>) {\n  const styles = useStyles2(getStyles);\n  const internalId = id ?? uniqueId('radiogroup-list-');\n\n  return (\n    <div id={id} className={cx(styles.container, className)} role=\"radiogroup\">\n      {options.map((option, index) => {\n        const itemId = `${internalId}-${index}`;\n\n        const isChecked = value && value === option.value;\n        const isDisabled = disabled || disabledOptions.some((optionValue) => optionValue === option.value);\n\n        const handleChange = () => onChange && option.value && onChange(option.value);\n\n        return (\n          <RadioButtonDot<T>\n            key={index}\n            id={itemId}\n            name={name}\n            label={option.label}\n            description={option.description}\n            checked={isChecked}\n            value={option.value}\n            disabled={isDisabled}\n            onChange={handleChange}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    display: 'grid',\n    gap: theme.spacing(1),\n  }),\n});\n"],"names":[],"mappings":";;;;;;AAwBO,SAAS,eAA+D,CAAA;AAAA,EAC7E,IAAA;AAAA,EACA,EAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAkB;AACpB,CAA4B,EAAA;AAC1B,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAM,MAAA,UAAA,GAAa,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,QAAA,CAAS,kBAAkB,CAAA;AAEpD,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,EAAQ,EAAA,SAAA,EAAW,GAAG,MAAO,CAAA,SAAA,EAAW,SAAS,CAAA,EAAG,MAAK,YAC3D,EAAA,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,QAAQ,KAAU,KAAA;AAC9B,IAAA,MAAM,MAAS,GAAA,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAErC,IAAM,MAAA,SAAA,GAAY,KAAS,IAAA,KAAA,KAAU,MAAO,CAAA,KAAA;AAC5C,IAAM,MAAA,UAAA,GAAa,YAAY,eAAgB,CAAA,IAAA,CAAK,CAAC,WAAgB,KAAA,WAAA,KAAgB,OAAO,KAAK,CAAA;AAEjG,IAAA,MAAM,eAAe,MAAM,QAAA,IAAY,OAAO,KAAS,IAAA,QAAA,CAAS,OAAO,KAAK,CAAA;AAE5E,IACE,uBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QAEC,EAAI,EAAA,MAAA;AAAA,QACJ,IAAA;AAAA,QACA,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,aAAa,MAAO,CAAA,WAAA;AAAA,QACpB,OAAS,EAAA,SAAA;AAAA,QACT,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA;AAAA,OAAA;AAAA,MARL;AAAA,KASP;AAAA,GAEH,CACH,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,WAAW,GAAI,CAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GACrB;AACH,CAAA,CAAA;;;;"}