@grafana/ui/dist/cjs/components/Segment/SegmentAsync.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var reactUse = require('react-use');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var InlineLabel = require('../Forms/InlineLabel.cjs');
var utils = require('../Select/utils.cjs');
var SegmentSelect = require('./SegmentSelect.cjs');
var styles = require('./styles.cjs');
var useExpandableLabel = require('./useExpandableLabel.cjs');

"use strict";
function SegmentAsync({
  value,
  onChange,
  loadOptions,
  reloadOptionsOnChange = false,
  Component,
  className,
  allowCustomValue,
  allowEmptyValue,
  disabled,
  placeholder,
  inputMinWidth,
  inputPlaceholder,
  autofocus = false,
  onExpandedChange,
  noOptionMessageHandler = mapStateToNoOptionsMessage,
  ...rest
}) {
  var _a;
  const [state, fetchOptions] = reactUse.useAsyncFn(loadOptions, [loadOptions]);
  const [Label, labelWidth, expanded, setExpanded] = useExpandableLabel.useExpandableLabel(autofocus, onExpandedChange);
  const width = inputMinWidth ? Math.max(inputMinWidth, labelWidth) : labelWidth;
  const styles$1 = ThemeContext.useStyles2(styles.getSegmentStyles);
  if (!expanded) {
    const label = utils.getLabelFromValue(value);
    return /* @__PURE__ */ jsxRuntime.jsx(
      Label,
      {
        onClick: reloadOptionsOnChange ? void 0 : fetchOptions,
        disabled,
        Component: Component || /* @__PURE__ */ jsxRuntime.jsx(
          InlineLabel.InlineLabel,
          {
            className: css.cx(
              styles$1.segment,
              {
                [styles$1.queryPlaceholder]: placeholder !== void 0 && !value,
                [styles$1.disabled]: disabled
              },
              className
            ),
            children: label || placeholder
          }
        )
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    SegmentSelect.SegmentSelect,
    {
      ...rest,
      value: value && typeof value !== "object" ? { value } : value,
      placeholder: inputPlaceholder,
      options: (_a = state.value) != null ? _a : [],
      loadOptions: reloadOptionsOnChange ? fetchOptions : void 0,
      width,
      noOptionsMessage: noOptionMessageHandler(state),
      allowCustomValue,
      allowEmptyValue,
      onClickOutside: () => {
        setExpanded(false);
      },
      onChange: (item) => {
        setExpanded(false);
        onChange(item);
      }
    }
  );
}
function mapStateToNoOptionsMessage(state) {
  if (state.loading) {
    return i18n.t("grafana-ui.segment-async.loading", "Loading options...");
  }
  if (state.error) {
    return i18n.t("grafana-ui.segment-async.error", "Failed to load options");
  }
  return i18n.t("grafana-ui.segment-async.no-options", "No options found");
}

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