@grafana/ui/dist/cjs/components/Select/SingleValue.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ReactSelect = require('react-select');
var data = require('@grafana/data');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var useDelayedSwitch = require('../../utils/useDelayedSwitch.cjs');
var Icon = require('../Icon/Icon.cjs');
var Spinner = require('../Spinner/Spinner.cjs');
var FadeTransition = require('../transitions/FadeTransition.cjs');
var SlideOutTransition = require('../transitions/SlideOutTransition.cjs');

"use strict";
const getStyles = (theme) => {
  return {
    singleValue: css.css({
      label: "singleValue",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      boxSizing: "border-box",
      maxWidth: "100%",
      gridArea: "1 / 1 / 2 / 3"
    }),
    spinnerWrapper: css.css({
      width: "16px",
      height: "16px",
      display: "inline-block",
      marginRight: "10px",
      position: "relative",
      verticalAlign: "middle",
      overflow: "hidden"
    }),
    spinnerIcon: css.css({
      width: "100%",
      height: "100%",
      position: "absolute"
    }),
    optionIcon: css.css({
      marginRight: theme.spacing(1),
      color: theme.colors.text.secondary
    }),
    disabled: css.css({
      color: theme.colors.text.disabled
    }),
    isOpen: css.css({
      color: theme.colors.text.disabled
    })
  };
};
const SingleValue = (props) => {
  var _a;
  const { children, data: data$1, isDisabled } = props;
  const styles = ThemeContext.useStyles2(getStyles);
  const loading = useDelayedSwitch.useDelayedSwitch(data$1.loading || false, { delay: 250, duration: 750 });
  const icon = data$1.icon ? data.toIconName(data$1.icon) : void 0;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    ReactSelect.components.SingleValue,
    {
      ...props,
      className: css.cx(styles.singleValue, isDisabled && styles.disabled, props.selectProps.menuIsOpen && styles.isOpen),
      children: [
        data$1.imgUrl ? /* @__PURE__ */ jsxRuntime.jsx(FadeWithImage, { loading, imgUrl: data$1.imgUrl, styles, alt: String((_a = data$1.label) != null ? _a : data$1.value) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx(SlideOutTransition.SlideOutTransition, { horizontal: true, size: 16, visible: loading, duration: 150, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.spinnerWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.Spinner, { className: styles.spinnerIcon, inline: true }) }) }),
          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, role: "img", className: styles.optionIcon })
        ] }),
        !data$1.hideText && children
      ]
    }
  );
};
const FadeWithImage = (props) => {
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.styles.spinnerWrapper, children: [
    /* @__PURE__ */ jsxRuntime.jsx(FadeTransition.FadeTransition, { duration: 150, visible: props.loading, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.Spinner, { className: props.styles.spinnerIcon, inline: true }) }),
    /* @__PURE__ */ jsxRuntime.jsx(FadeTransition.FadeTransition, { duration: 150, visible: !props.loading, children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: props.styles.spinnerIcon, src: props.imgUrl, alt: props.alt }) })
  ] });
};

exports.SingleValue = SingleValue;
//# sourceMappingURL=SingleValue.cjs.map