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