@yuntijs/ui/es/FormHelper/autoFocus.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
var getDom = function getDom(refOrDomOrId) {
  return typeof refOrDomOrId === 'string' ? document.querySelector("#".concat(refOrDomOrId)) : (refOrDomOrId === null || refOrDomOrId === void 0 ? void 0 : refOrDomOrId.current) || refOrDomOrId;
};

// https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#input_%E7%B1%BB%E5%9E%8B
var disabled = ':not([disabled]):not([readonly])';
var queryInputTypes = ['text', 'password', 'search', 'tel', 'url', 'number', 'email', ''].map(function (item) {
  return "input[type=\"".concat(item, "\"]").concat(disabled);
}).join(', ') + ", input:not([type])".concat(disabled, ", textarea").concat(disabled);
var setAutoFocus = function setAutoFocus(refOrDomOrId) {
  var _dom$querySelector;
  var dom = getDom(refOrDomOrId);
  if (!dom) return;
  var input = (_dom$querySelector = dom.querySelector) === null || _dom$querySelector === void 0 ? void 0 : _dom$querySelector.call(dom, queryInputTypes);
  if (!(input !== null && input !== void 0 && input.focus)) return;
  input.focus();
  return true;
};

/**
 * Passing a ref, id, or DOM element to obtain and set the focus state of the first non-disabled and non-readonly input or textarea.
 * @param {RefOrDomOrId} refOrDomOrId - 支持类型 HTMLElement | string | React.Ref<T>
 * @returns void
 */
export var useAutoFocus = function useAutoFocus(refOrDomOrId) {
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    focused = _useState2[0],
    setFocused = _useState2[1];
  React.useEffect(function () {
    if (focused || !refOrDomOrId) return;
    var setRes = setAutoFocus(refOrDomOrId);
    if (!setRes) return;
    setFocused(true);
  }, [refOrDomOrId, focused, setFocused]);
};