@grafana/ui/dist/esm/components/Select/SingleValue.mjs.map

Grafana Components Library

{"version":3,"file":"SingleValue.mjs","sources":["../../../../src/components/Select/SingleValue.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { components, GroupBase, SingleValueProps } from 'react-select';\n\nimport { GrafanaTheme2, SelectableValue, toIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { useDelayedSwitch } from '../../utils/useDelayedSwitch';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport { FadeTransition } from '../transitions/FadeTransition';\nimport { SlideOutTransition } from '../transitions/SlideOutTransition';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    singleValue: css({\n      label: 'singleValue',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      boxSizing: 'border-box',\n      maxWidth: '100%',\n      gridArea: '1 / 1 / 2 / 3',\n    }),\n    spinnerWrapper: css({\n      width: '16px',\n      height: '16px',\n      display: 'inline-block',\n      marginRight: '10px',\n      position: 'relative',\n      verticalAlign: 'middle',\n      overflow: 'hidden',\n    }),\n    spinnerIcon: css({\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n    }),\n    optionIcon: css({\n      marginRight: theme.spacing(1),\n      color: theme.colors.text.secondary,\n    }),\n    disabled: css({\n      color: theme.colors.text.disabled,\n    }),\n    isOpen: css({\n      color: theme.colors.text.disabled,\n    }),\n  };\n};\n\ntype StylesType = ReturnType<typeof getStyles>;\n\nexport type Props<T> = SingleValueProps<SelectableValue<T>, boolean, GroupBase<SelectableValue<T>>>;\n\nexport const SingleValue = <T extends unknown>(props: Props<T>) => {\n  const { children, data, isDisabled } = props;\n  const styles = useStyles2(getStyles);\n  const loading = useDelayedSwitch(data.loading || false, { delay: 250, duration: 750 });\n  const icon = data.icon ? toIconName(data.icon) : undefined;\n\n  return (\n    <components.SingleValue\n      {...props}\n      className={cx(styles.singleValue, isDisabled && styles.disabled, props.selectProps.menuIsOpen && styles.isOpen)}\n    >\n      {data.imgUrl ? (\n        <FadeWithImage loading={loading} imgUrl={data.imgUrl} styles={styles} alt={String(data.label ?? data.value)} />\n      ) : (\n        <>\n          <SlideOutTransition horizontal size={16} visible={loading} duration={150}>\n            <div className={styles.spinnerWrapper}>\n              <Spinner className={styles.spinnerIcon} inline />\n            </div>\n          </SlideOutTransition>\n          {icon && <Icon name={icon} role=\"img\" className={styles.optionIcon} />}\n        </>\n      )}\n\n      {!data.hideText && children}\n    </components.SingleValue>\n  );\n};\n\nconst FadeWithImage = (props: { loading: boolean; imgUrl: string; styles: StylesType; alt?: string }) => {\n  return (\n    <div className={props.styles.spinnerWrapper}>\n      <FadeTransition duration={150} visible={props.loading}>\n        <Spinner className={props.styles.spinnerIcon} inline />\n      </FadeTransition>\n      <FadeTransition duration={150} visible={!props.loading}>\n        <img className={props.styles.spinnerIcon} src={props.imgUrl} alt={props.alt} />\n      </FadeTransition>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}