rsuite/cjs/InlineEdit/useFocusEvent.js

A suite of react components

'use client';
"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = require("react");
var _domLib = require("dom-lib");
var _hooks = require("../internals/hooks");
var _symbols = require("../internals/symbols");
const useFocusEvent = ({
  isEditing,
  stateOnBlur,
  onSave,
  onCancel
}) => {
  const ref = (0, _react.useRef)(null);
  const rootRef = (0, _react.useRef)(null);
  const isPicker = ref.current?.type === _symbols.RSUITE_PICKER_TYPE;
  const focus = () => {
    if (isPicker) {
      setTimeout(() => {
        const picker = ref.current;
        // Auto focus the search input
        picker?.target?.focus?.();

        // Open the picker
        picker?.open?.();
      }, 100);
    } else {
      ref.current?.focus?.();
    }
  };
  const handleBlur = (0, _hooks.useEventCallback)(event => {
    if (event) {
      const relatedTarget = event.relatedTarget ?? (0, _domLib.ownerDocument)(event.currentTarget).activeElement;
      if (rootRef.current && (0, _domLib.contains)(rootRef.current, relatedTarget)) {
        return;
      }
    }
    if (stateOnBlur === 'save') {
      onSave?.(event);
    } else if (stateOnBlur === 'cancel') {
      onCancel?.(event);
    }
  });
  (0, _hooks.useIsomorphicLayoutEffect)(() => {
    if (isEditing) {
      focus();
    }
  }, []);
  (0, _hooks.useUpdateEffect)(() => {
    if (isEditing) {
      focus();
    }
  }, [isEditing]);
  return {
    target: ref,
    root: rootRef,
    onBlur: handleBlur
  };
};
var _default = exports.default = useFocusEvent;