mobile-more/lib/hooks/useResizeInputScrollIntoView.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _ut = require("ut2");
var _dom = require("../utils/dom");
var inputTagNames = ['INPUT', 'TEXTAREA'];

// 调整输入元素滚动
var adjustInputElementScrollIntoView = function adjustInputElementScrollIntoView() {
  var activeElement = document.activeElement;
  if (activeElement && inputTagNames.includes(activeElement.tagName)) {
    (0, _ut.delay)(function () {
      var rect = activeElement.getBoundingClientRect();
      var winHeight = (0, _dom.getClientHeight)(window);
      if (rect.top < 0) {
        // 顶部超出屏幕，滚动至顶部
        activeElement.scrollIntoView();
      } else if (rect.top > winHeight / 2) {
        // 中下区域，滚动至中间
        activeElement.scrollIntoView({
          block: 'center'
        });
      }
    }, 0);
  }
};

// 当 android 输入框获取焦点时，整个视窗大小会调整，导致输入框元素移除视窗外
function useResizeInputScrollIntoView() {
  (0, _react.useEffect)(function () {
    if (_ut.isBrowser) {
      window.addEventListener('resize', adjustInputElementScrollIntoView);
      return function () {
        window.removeEventListener('resize', adjustInputElementScrollIntoView);
      };
    }
  }, []);
}
var _default = exports.default = useResizeInputScrollIntoView;