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

Grafana Components Library

{"version":3,"file":"SegmentInput.mjs","sources":["../../../../src/components/Segment/SegmentInput.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { HTMLProps, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { useClickAway } from 'react-use';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { measureText } from '../../utils/measureText';\nimport { InlineLabel } from '../Forms/InlineLabel';\n\nimport { getSegmentStyles } from './styles';\nimport { SegmentProps } from './types';\nimport { useExpandableLabel } from './useExpandableLabel';\n\nexport interface SegmentInputProps\n  extends Omit<SegmentProps, 'allowCustomValue' | 'allowEmptyValue'>,\n    Omit<HTMLProps<HTMLInputElement>, 'value' | 'onChange'> {\n  value: string | number;\n  onChange: (text: string | number) => void;\n}\n\nconst FONT_SIZE = 14;\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segmentinput--docs\n */\nexport function SegmentInput({\n  value: initialValue,\n  onChange,\n  Component,\n  className,\n  placeholder,\n  inputPlaceholder,\n  disabled,\n  autofocus = false,\n  onExpandedChange,\n  ...rest\n}: React.PropsWithChildren<SegmentInputProps>) {\n  const ref = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState<number | string>(initialValue);\n  const [inputWidth, setInputWidth] = useState<number>(measureText((initialValue || '').toString(), FONT_SIZE).width);\n  const [Label, , expanded, setExpanded] = useExpandableLabel(autofocus, onExpandedChange);\n  const styles = useStyles2(getSegmentStyles);\n\n  useClickAway(ref, () => {\n    setExpanded(false);\n    onChange(value);\n  });\n\n  if (!expanded) {\n    return (\n      <Label\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              {initialValue || placeholder}\n            </InlineLabel>\n          )\n        }\n      />\n    );\n  }\n\n  const inputWidthStyle = css({\n    width: `${Math.max(inputWidth + 20, 32)}px`,\n  });\n\n  return (\n    <input\n      {...rest}\n      ref={ref}\n      // this needs to autofocus, but it's ok as it's only rendered by choice\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus\n      className={cx(`gf-form gf-form-input`, inputWidthStyle)}\n      value={value}\n      placeholder={inputPlaceholder}\n      onChange={(item) => {\n        const { width } = measureText(item.target.value, FONT_SIZE);\n        setInputWidth(width);\n        setValue(item.target.value);\n      }}\n      onBlur={() => {\n        setExpanded(false);\n        onChange(value);\n      }}\n      onKeyDown={(e) => {\n        if ([13, 27].includes(e.keyCode)) {\n          setExpanded(false);\n          onChange(value);\n        }\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAoBA,MAAM,SAAA,GAAY,EAAA;AAKX,SAAS,YAAA,CAAa;AAAA,EAC3B,KAAA,EAAO,YAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA+C;AAC7C,EAAA,MAAM,GAAA,GAAM,OAAyB,IAAI,CAAA;AACzC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAA0B,YAAY,CAAA;AAChE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA,CAAiB,WAAA,CAAA,CAAa,YAAA,IAAgB,EAAA,EAAI,QAAA,EAAS,EAAG,SAAS,CAAA,CAAE,KAAK,CAAA;AAClH,EAAA,MAAM,CAAC,SAAS,QAAA,EAAU,WAAW,CAAA,GAAI,kBAAA,CAAmB,WAAW,gBAAgB,CAAA;AACvF,EAAA,MAAM,MAAA,GAAS,WAAW,gBAAgB,CAAA;AAE1C,EAAA,YAAA,CAAa,KAAK,MAAM;AACtB,IAAA,WAAA,CAAY,KAAK,CAAA;AACjB,IAAA,QAAA,CAAS,KAAK,CAAA;AAAA,EAChB,CAAC,CAAA;AAED,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,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,YAAA,IAAgB;AAAA;AAAA;AACnB;AAAA,KAGN;AAAA,EAEJ;AAEA,EAAA,MAAM,kBAAkB,GAAA,CAAI;AAAA,IAC1B,OAAO,CAAA,EAAG,IAAA,CAAK,IAAI,UAAA,GAAa,EAAA,EAAI,EAAE,CAAC,CAAA,EAAA;AAAA,GACxC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAGA,SAAA,EAAS,IAAA;AAAA,MACT,SAAA,EAAW,EAAA,CAAG,CAAA,qBAAA,CAAA,EAAyB,eAAe,CAAA;AAAA,MACtD,KAAA;AAAA,MACA,WAAA,EAAa,gBAAA;AAAA,MACb,QAAA,EAAU,CAAC,IAAA,KAAS;AAClB,QAAA,MAAM,EAAE,KAAA,EAAM,GAAI,YAAY,IAAA,CAAK,MAAA,CAAO,OAAO,SAAS,CAAA;AAC1D,QAAA,aAAA,CAAc,KAAK,CAAA;AACnB,QAAA,QAAA,CAAS,IAAA,CAAK,OAAO,KAAK,CAAA;AAAA,MAC5B,CAAA;AAAA,MACA,QAAQ,MAAM;AACZ,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,QAAA,CAAS,KAAK,CAAA;AAAA,MAChB,CAAA;AAAA,MACA,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,QAAA,IAAI,CAAC,EAAA,EAAI,EAAE,EAAE,QAAA,CAAS,CAAA,CAAE,OAAO,CAAA,EAAG;AAChC,UAAA,WAAA,CAAY,KAAK,CAAA;AACjB,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AAAA,MACF;AAAA;AAAA,GACF;AAEJ;;;;"}