@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\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,SAAY,GAAA,EAAA;AAEX,SAAS,YAAa,CAAA;AAAA,EAC3B,KAAO,EAAA,YAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,gBAAA;AAAA,EACA,GAAG;AACL,CAA+C,EAAA;AAC7C,EAAM,MAAA,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,QAAiB,CAAA,WAAA,CAAA,CAAa,YAAgB,IAAA,EAAA,EAAI,QAAS,EAAA,EAAG,SAAS,CAAA,CAAE,KAAK,CAAA;AAClH,EAAM,MAAA,CAAC,SAAS,QAAA,EAAU,WAAW,CAAI,GAAA,kBAAA,CAAmB,WAAW,gBAAgB,CAAA;AACvF,EAAM,MAAA,MAAA,GAAS,WAAW,gBAAgB,CAAA;AAE1C,EAAA,YAAA,CAAa,KAAK,MAAM;AACtB,IAAA,WAAA,CAAY,KAAK,CAAA;AACjB,IAAA,QAAA,CAAS,KAAK,CAAA;AAAA,GACf,CAAA;AAED,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,WACE,SACE,oBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA;AAAA,cACT,MAAO,CAAA,OAAA;AAAA,cACP;AAAA,gBACE,CAAC,MAAO,CAAA,gBAAgB,GAAG,WAAA,KAAgB,UAAa,CAAC,KAAA;AAAA,gBACzD,CAAC,MAAO,CAAA,QAAQ,GAAG;AAAA,eACrB;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAgB,EAAA,YAAA,IAAA;AAAA;AAAA;AACnB;AAAA,KAGN;AAAA;AAIJ,EAAA,MAAM,kBAAkB,GAAI,CAAA;AAAA,IAC1B,OAAO,CAAG,EAAA,IAAA,CAAK,IAAI,UAAa,GAAA,EAAA,EAAI,EAAE,CAAC,CAAA,EAAA;AAAA,GACxC,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAGA,SAAS,EAAA,IAAA;AAAA,MACT,SAAA,EAAW,EAAG,CAAA,CAAA,qBAAA,CAAA,EAAyB,eAAe,CAAA;AAAA,MACtD,KAAA;AAAA,MACA,WAAa,EAAA,gBAAA;AAAA,MACb,QAAA,EAAU,CAAC,IAAS,KAAA;AAClB,QAAA,MAAM,EAAE,KAAM,EAAA,GAAI,YAAY,IAAK,CAAA,MAAA,CAAO,OAAO,SAAS,CAAA;AAC1D,QAAA,aAAA,CAAc,KAAK,CAAA;AACnB,QAAS,QAAA,CAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AAAA,OAC5B;AAAA,MACA,QAAQ,MAAM;AACZ,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,QAAA,CAAS,KAAK,CAAA;AAAA,OAChB;AAAA,MACA,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,QAAA,IAAI,CAAC,EAAI,EAAA,EAAE,EAAE,QAAS,CAAA,CAAA,CAAE,OAAO,CAAG,EAAA;AAChC,UAAA,WAAA,CAAY,KAAK,CAAA;AACjB,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA;AAChB;AACF;AAAA,GACF;AAEJ;;;;"}