@grafana/ui/dist/cjs/components/UnitPicker/UnitPicker.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var data = require('@grafana/data');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var Cascader = require('../Cascader/Cascader.cjs');

"use strict";
function formatCreateLabel(input) {
  return `Custom unit: ${input}`;
}
const UnitPicker = React.memo(({ onChange, value, width, id }) => {
  let current = void 0;
  const unitGroups = data.getValueFormats();
  const groupOptions = unitGroups.map((group) => {
    const options = group.submenu.map((unit) => {
      const sel = {
        label: unit.text,
        value: unit.value
      };
      if (unit.value === value) {
        current = sel;
      }
      return sel;
    });
    return {
      label: group.text,
      value: group.text,
      items: options
    };
  });
  if (value && !current) {
    current = { value, label: value };
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    Cascader.Cascader,
    {
      id,
      width,
      initialValue: current && current.label,
      allowCustomValue: true,
      changeOnSelect: false,
      formatCreateLabel,
      options: groupOptions,
      placeholder: i18n.t("grafana-ui.unit-picker.placeholder", "Choose"),
      isClearable: true,
      onSelect: onChange,
      "data-testid": e2eSelectors.selectors.components.UnitPicker.container
    }
  );
});
UnitPicker.displayName = "UnitPicker";

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