@grafana/ui/dist/cjs/components/Combobox/useMeasureMulti.cjs

Grafana Components Library

'use strict';

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

var React = require('react');
var reactUse = require('react-use');
var measureText = require('../../utils/measureText.cjs');

"use strict";
const FONT_SIZE = 12;
const EXTRA_PILL_SIZE = 50;
const EXTRA_PILL_DISABLED_SIZE = 10;
const MAX_SHOWN_ITEMS = 15;
function useMeasureMulti(selectedItems, width, disabled) {
  const [shownItems, setShownItems] = React.useState(selectedItems.length);
  const [measureRef, { width: containerWidth }] = reactUse.useMeasure();
  const [counterMeasureRef, { width: counterWidth }] = reactUse.useMeasure();
  const [suffixMeasureRef, { width: suffixWidth }] = reactUse.useMeasure();
  const finalWidth = width && width !== "auto" ? width : containerWidth;
  React.useEffect(() => {
    var _a;
    const maxWidth = finalWidth - counterWidth - suffixWidth;
    let currWidth = 0;
    for (let i = 0; i < selectedItems.length; i++) {
      currWidth += measureText.measureText(((_a = selectedItems[i]) == null ? void 0 : _a.label) || "", FONT_SIZE).width + (disabled ? EXTRA_PILL_DISABLED_SIZE : EXTRA_PILL_SIZE);
      if (currWidth > maxWidth) {
        setShownItems(Math.min(i, MAX_SHOWN_ITEMS) || 1);
        break;
      }
      if (i === selectedItems.length - 1) {
        setShownItems(selectedItems.length);
      }
    }
  }, [finalWidth, counterWidth, suffixWidth, selectedItems, setShownItems, disabled]);
  return { measureRef, counterMeasureRef, suffixMeasureRef, shownItems };
}

exports.MAX_SHOWN_ITEMS = MAX_SHOWN_ITEMS;
exports.useMeasureMulti = useMeasureMulti;
//# sourceMappingURL=useMeasureMulti.cjs.map