@grafana/ui/dist/cjs/components/AutoSaveField/AutoSaveField.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var lodash = require('lodash');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Field = require('../Forms/Field.cjs');
var InlineToast = require('../InlineToast/InlineToast.cjs');
var EllipsisAnimated = require('./EllipsisAnimated.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const SHOW_SUCCESS_DURATION = 2 * 1e3;
function AutoSaveField(props) {
  const {
    invalid,
    loading,
    onFinishChange,
    saveErrorMessage = "Error saving this value",
    error,
    children,
    disabled,
    ...restProps
  } = props;
  const [fieldState, setFieldState] = React__namespace.useState({
    isLoading: false,
    showSuccess: false,
    showError: invalid
  });
  const fieldRef = React.useRef(null);
  React__namespace.useEffect(() => {
    let timeoutId;
    if (fieldState.showSuccess) {
      const time = fieldState.showError ? 0 : SHOW_SUCCESS_DURATION;
      timeoutId = setTimeout(() => {
        setFieldState({ ...fieldState, showSuccess: false });
      }, time);
    }
    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [fieldState]);
  const handleChange = React.useCallback(
    (nextValue) => {
      if (invalid) {
        return;
      }
      setFieldState({ ...fieldState, isLoading: true, showSuccess: false });
      onFinishChange(nextValue).then(() => {
        setFieldState({
          isLoading: false,
          showSuccess: true,
          showError: false
        });
      }).catch(() => {
        setFieldState({
          ...fieldState,
          isLoading: false,
          showError: true
        });
      });
    },
    [invalid, fieldState, onFinishChange]
  );
  const lodashDebounce = React.useMemo(() => lodash.debounce(handleChange, 600, { leading: false }), [handleChange]);
  const isInvalid = invalid || fieldState.showError || void 0;
  const styles = ThemeContext.useStyles2(getStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      Field.Field,
      {
        ...restProps,
        loading: loading || void 0,
        invalid: isInvalid,
        disabled,
        error: error || fieldState.showError && saveErrorMessage,
        ref: fieldRef,
        className: styles.widthFitContent,
        children: React__namespace.cloneElement(
          children((newValue) => {
            lodashDebounce(newValue);
          })
        )
      }
    ),
    fieldState.isLoading && /* @__PURE__ */ jsxRuntime.jsx(InlineToast.InlineToast, { referenceElement: fieldRef.current, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsxs(i18n.Trans, { i18nKey: "grafana-ui.auto-save-field.saving", children: [
      "Saving ",
      /* @__PURE__ */ jsxRuntime.jsx(EllipsisAnimated.EllipsisAnimated, {})
    ] }) }),
    fieldState.showSuccess && /* @__PURE__ */ jsxRuntime.jsx(InlineToast.InlineToast, { suffixIcon: "check", referenceElement: fieldRef.current, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.auto-save-field.saved", children: "Saved!" }) })
  ] });
}
AutoSaveField.displayName = "AutoSaveField";
const getStyles = () => {
  return {
    widthFitContent: css.css({
      width: "fit-content"
    })
  };
};

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