@grafana/ui/dist/cjs/components/Segment/SegmentInput.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var reactUse = require('react-use');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var measureText = require('../../utils/measureText.cjs');
var InlineLabel = require('../Forms/InlineLabel.cjs');
var styles = require('./styles.cjs');
var useExpandableLabel = require('./useExpandableLabel.cjs');

"use strict";
const FONT_SIZE = 14;
function SegmentInput({
  value: initialValue,
  onChange,
  Component,
  className,
  placeholder,
  inputPlaceholder,
  disabled,
  autofocus = false,
  onExpandedChange,
  ...rest
}) {
  const ref = React.useRef(null);
  const [value, setValue] = React.useState(initialValue);
  const [inputWidth, setInputWidth] = React.useState(measureText.measureText((initialValue || "").toString(), FONT_SIZE).width);
  const [Label, , expanded, setExpanded] = useExpandableLabel.useExpandableLabel(autofocus, onExpandedChange);
  const styles$1 = ThemeContext.useStyles2(styles.getSegmentStyles);
  reactUse.useClickAway(ref, () => {
    setExpanded(false);
    onChange(value);
  });
  if (!expanded) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      Label,
      {
        disabled,
        Component: Component || /* @__PURE__ */ jsxRuntime.jsx(
          InlineLabel.InlineLabel,
          {
            className: css.cx(
              styles$1.segment,
              {
                [styles$1.queryPlaceholder]: placeholder !== void 0 && !value,
                [styles$1.disabled]: disabled
              },
              className
            ),
            children: initialValue || placeholder
          }
        )
      }
    );
  }
  const inputWidthStyle = css.css({
    width: `${Math.max(inputWidth + 20, 32)}px`
  });
  return /* @__PURE__ */ jsxRuntime.jsx(
    "input",
    {
      ...rest,
      ref,
      autoFocus: true,
      className: css.cx(`gf-form gf-form-input`, inputWidthStyle),
      value,
      placeholder: inputPlaceholder,
      onChange: (item) => {
        const { width } = measureText.measureText(item.target.value, FONT_SIZE);
        setInputWidth(width);
        setValue(item.target.value);
      },
      onBlur: () => {
        setExpanded(false);
        onChange(value);
      },
      onKeyDown: (e) => {
        if ([13, 27].includes(e.keyCode)) {
          setExpanded(false);
          onChange(value);
        }
      }
    }
  );
}

exports.SegmentInput = SegmentInput;
//# sourceMappingURL=SegmentInput.cjs.map