@grafana/ui/dist/esm/components/Combobox/useMeasureMulti.mjs.map

Grafana Components Library

{"version":3,"file":"useMeasureMulti.mjs","sources":["../../../../src/components/Combobox/useMeasureMulti.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { measureText } from '../../utils/measureText';\n\nimport { ComboboxOption } from './types';\n\nconst FONT_SIZE = 12;\nconst EXTRA_PILL_SIZE = 50;\nconst EXTRA_PILL_DISABLED_SIZE = 10;\nexport const MAX_SHOWN_ITEMS = 15;\n\n/**\n * Updates the number of shown items in the multi combobox based on the available width.\n */\nexport function useMeasureMulti<T extends string | number>(\n  selectedItems: Array<ComboboxOption<T>>,\n  width?: number | 'auto',\n  disabled?: boolean\n) {\n  const [shownItems, setShownItems] = useState<number>(selectedItems.length);\n  const [measureRef, { width: containerWidth }] = useMeasure<HTMLDivElement>();\n  const [counterMeasureRef, { width: counterWidth }] = useMeasure<HTMLDivElement>();\n  const [suffixMeasureRef, { width: suffixWidth }] = useMeasure<HTMLDivElement>();\n\n  const finalWidth = width && width !== 'auto' ? width : containerWidth;\n\n  useEffect(() => {\n    const maxWidth = finalWidth - counterWidth - suffixWidth;\n    let currWidth = 0;\n    for (let i = 0; i < selectedItems.length; i++) {\n      // Measure text width and add size of padding, separator and close button\n      currWidth +=\n        measureText(selectedItems[i].label || '', FONT_SIZE).width +\n        (disabled ? EXTRA_PILL_DISABLED_SIZE : EXTRA_PILL_SIZE);\n      if (currWidth > maxWidth) {\n        // If there is no space for that item, show the current number of items,\n        // but always show at least 1 item. Cap at maximum number of items.\n        setShownItems(Math.min(i, MAX_SHOWN_ITEMS) || 1);\n        break;\n      }\n      if (i === selectedItems.length - 1) {\n        // If it is the last item, show all items\n        setShownItems(selectedItems.length);\n      }\n    }\n  }, [finalWidth, counterWidth, suffixWidth, selectedItems, setShownItems, disabled]);\n\n  return { measureRef, counterMeasureRef, suffixMeasureRef, shownItems };\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,SAAA,GAAY,EAAA;AAClB,MAAM,eAAA,GAAkB,EAAA;AACxB,MAAM,wBAAA,GAA2B,EAAA;AAC1B,MAAM,eAAA,GAAkB;AAKxB,SAAS,eAAA,CACd,aAAA,EACA,KAAA,EACA,QAAA,EACA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA,CAAiB,cAAc,MAAM,CAAA;AACzE,EAAA,MAAM,CAAC,UAAA,EAAY,EAAE,OAAO,cAAA,EAAgB,IAAI,UAAA,EAA2B;AAC3E,EAAA,MAAM,CAAC,iBAAA,EAAmB,EAAE,OAAO,YAAA,EAAc,IAAI,UAAA,EAA2B;AAChF,EAAA,MAAM,CAAC,gBAAA,EAAkB,EAAE,OAAO,WAAA,EAAa,IAAI,UAAA,EAA2B;AAE9E,EAAA,MAAM,UAAA,GAAa,KAAA,IAAS,KAAA,KAAU,MAAA,GAAS,KAAA,GAAQ,cAAA;AAEvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAA,GAAW,aAAa,YAAA,GAAe,WAAA;AAC7C,IAAA,IAAI,SAAA,GAAY,CAAA;AAChB,IAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,aAAA,CAAc,QAAQ,CAAA,EAAA,EAAK;AAE7C,MAAA,SAAA,IACE,WAAA,CAAY,aAAA,CAAc,CAAC,CAAA,CAAE,KAAA,IAAS,IAAI,SAAS,CAAA,CAAE,KAAA,IACpD,QAAA,GAAW,wBAAA,GAA2B,eAAA,CAAA;AACzC,MAAA,IAAI,YAAY,QAAA,EAAU;AAGxB,QAAA,aAAA,CAAc,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,eAAe,KAAK,CAAC,CAAA;AAC/C,QAAA;AAAA,MACF;AACA,MAAA,IAAI,CAAA,KAAM,aAAA,CAAc,MAAA,GAAS,CAAA,EAAG;AAElC,QAAA,aAAA,CAAc,cAAc,MAAM,CAAA;AAAA,MACpC;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,UAAA,EAAY,YAAA,EAAc,aAAa,aAAA,EAAe,aAAA,EAAe,QAAQ,CAAC,CAAA;AAElF,EAAA,OAAO,EAAE,UAAA,EAAY,iBAAA,EAAmB,gBAAA,EAAkB,UAAA,EAAW;AACvE;;;;"}