@grafana/ui/dist/esm/components/Segment/SegmentAsync.mjs.map

Grafana Components Library

{"version":3,"file":"SegmentAsync.mjs","sources":["../../../../src/components/Segment/SegmentAsync.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { isObject } from 'lodash';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\nimport { useAsyncFn } from 'react-use';\nimport { type AsyncState } from 'react-use/lib/useAsync';\n\nimport { SelectableValue } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { InlineLabel } from '../Forms/InlineLabel';\n\nimport { SegmentSelect } from './SegmentSelect';\nimport { getSegmentStyles } from './styles';\nimport { SegmentProps } from './types';\nimport { useExpandableLabel } from './useExpandableLabel';\n\nexport interface SegmentAsyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {\n  value?: T | SelectableValue<T>;\n  loadOptions: (query?: string) => Promise<Array<SelectableValue<T>>>;\n  /**\n   *  If true options will be reloaded when user changes the value in the input,\n   *  otherwise, options will be loaded when the segment is clicked\n   */\n  reloadOptionsOnChange?: boolean;\n  onChange: (item: SelectableValue<T>) => void;\n  noOptionMessageHandler?: (state: AsyncState<Array<SelectableValue<T>>>) => string;\n  inputMinWidth?: number;\n}\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segmentasync--docs\n */\nexport function SegmentAsync<T>({\n  value,\n  onChange,\n  loadOptions,\n  reloadOptionsOnChange = false,\n  Component,\n  className,\n  allowCustomValue,\n  allowEmptyValue,\n  disabled,\n  placeholder,\n  inputMinWidth,\n  inputPlaceholder,\n  autofocus = false,\n  onExpandedChange,\n  noOptionMessageHandler = mapStateToNoOptionsMessage,\n  ...rest\n}: React.PropsWithChildren<SegmentAsyncProps<T>>) {\n  const [state, fetchOptions] = useAsyncFn(loadOptions, [loadOptions]);\n  const [Label, labelWidth, expanded, setExpanded] = useExpandableLabel(autofocus, onExpandedChange);\n  const width = inputMinWidth ? Math.max(inputMinWidth, labelWidth) : labelWidth;\n  const styles = useStyles2(getSegmentStyles);\n\n  if (!expanded) {\n    const label = isObject(value) ? value.label : value;\n    const labelAsString = label != null ? String(label) : undefined;\n\n    return (\n      <Label\n        onClick={reloadOptionsOnChange ? undefined : fetchOptions}\n        disabled={disabled}\n        Component={\n          Component || (\n            <InlineLabel\n              className={cx(\n                styles.segment,\n                {\n                  [styles.queryPlaceholder]: placeholder !== undefined && !value,\n                  [styles.disabled]: disabled,\n                },\n                className\n              )}\n            >\n              {labelAsString || placeholder}\n            </InlineLabel>\n          )\n        }\n      />\n    );\n  }\n\n  return (\n    <SegmentSelect\n      {...rest}\n      value={value && !isObject(value) ? { value } : value}\n      placeholder={inputPlaceholder}\n      options={state.value ?? []}\n      loadOptions={reloadOptionsOnChange ? fetchOptions : undefined}\n      width={width}\n      noOptionsMessage={noOptionMessageHandler(state)}\n      allowCustomValue={allowCustomValue}\n      allowEmptyValue={allowEmptyValue}\n      onClickOutside={() => {\n        setExpanded(false);\n      }}\n      onChange={(item) => {\n        setExpanded(false);\n        onChange(item);\n      }}\n    />\n  );\n}\n\nfunction mapStateToNoOptionsMessage<T>(state: AsyncState<Array<SelectableValue<T>>>): string {\n  if (state.loading) {\n    return t('grafana-ui.segment-async.loading', 'Loading options...');\n  }\n\n  if (state.error) {\n    return t('grafana-ui.segment-async.error', 'Failed to load options');\n  }\n\n  return t('grafana-ui.segment-async.no-options', 'No options found');\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCO,SAAS,YAAA,CAAgB;AAAA,EAC9B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA,GAAwB,KAAA;AAAA,EACxB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,gBAAA;AAAA,EACA,sBAAA,GAAyB,0BAAA;AAAA,EACzB,GAAG;AACL,CAAA,EAAkD;AAnDlD,EAAA,IAAA,EAAA;AAoDE,EAAA,MAAM,CAAC,OAAO,YAAY,CAAA,GAAI,WAAW,WAAA,EAAa,CAAC,WAAW,CAAC,CAAA;AACnE,EAAA,MAAM,CAAC,OAAO,UAAA,EAAY,QAAA,EAAU,WAAW,CAAA,GAAI,kBAAA,CAAmB,WAAW,gBAAgB,CAAA;AACjG,EAAA,MAAM,QAAQ,aAAA,GAAgB,IAAA,CAAK,GAAA,CAAI,aAAA,EAAe,UAAU,CAAA,GAAI,UAAA;AACpE,EAAA,MAAM,MAAA,GAAS,WAAW,gBAAgB,CAAA;AAE1C,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,KAAK,CAAA,GAAI,MAAM,KAAA,GAAQ,KAAA;AAC9C,IAAA,MAAM,aAAA,GAAgB,KAAA,IAAS,IAAA,GAAO,MAAA,CAAO,KAAK,CAAA,GAAI,KAAA,CAAA;AAEtD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,wBAAwB,KAAA,CAAA,GAAY,YAAA;AAAA,QAC7C,QAAA;AAAA,QACA,WACE,SAAA,oBACE,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,MAAA,CAAO,OAAA;AAAA,cACP;AAAA,gBACE,CAAC,MAAA,CAAO,gBAAgB,GAAG,WAAA,KAAgB,UAAa,CAAC,KAAA;AAAA,gBACzD,CAAC,MAAA,CAAO,QAAQ,GAAG;AAAA,eACrB;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA,aAAA,IAAiB;AAAA;AAAA;AACpB;AAAA,KAGN;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,SAAS,CAAC,QAAA,CAAS,KAAK,CAAA,GAAI,EAAE,OAAM,GAAI,KAAA;AAAA,MAC/C,WAAA,EAAa,gBAAA;AAAA,MACb,OAAA,EAAA,CAAS,EAAA,GAAA,KAAA,CAAM,KAAA,KAAN,IAAA,GAAA,EAAA,GAAe,EAAC;AAAA,MACzB,WAAA,EAAa,wBAAwB,YAAA,GAAe,KAAA,CAAA;AAAA,MACpD,KAAA;AAAA,MACA,gBAAA,EAAkB,uBAAuB,KAAK,CAAA;AAAA,MAC9C,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,gBAAgB,MAAM;AACpB,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,MACnB,CAAA;AAAA,MACA,QAAA,EAAU,CAAC,IAAA,KAAS;AAClB,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA,MACf;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,2BAA8B,KAAA,EAAsD;AAC3F,EAAA,IAAI,MAAM,OAAA,EAAS;AACjB,IAAA,OAAO,CAAA,CAAE,oCAAoC,oBAAoB,CAAA;AAAA,EACnE;AAEA,EAAA,IAAI,MAAM,KAAA,EAAO;AACf,IAAA,OAAO,CAAA,CAAE,kCAAkC,wBAAwB,CAAA;AAAA,EACrE;AAEA,EAAA,OAAO,CAAA,CAAE,uCAAuC,kBAAkB,CAAA;AACpE;;;;"}