tdesign-react/cjs/tag-input/useTagScroll.js

TDesign Component for React

/**
 * tdesign v1.15.1
 * (c) 2025 tdesign
 * @license MIT
 */

'use strict';

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

var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var React = require('react');
var isFunction = require('../_chunks/dep-ec8d2dca.js');
require('../_chunks/dep-00b49251.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-667ac7af.js');
require('../_chunks/dep-fc596d16.js');

var mouseEnterTimer = null;
function useTagScroll(props) {
  var tagInputRef = React.useRef(null);
  var _props$excessTagsDisp = props.excessTagsDisplayType,
    excessTagsDisplayType = _props$excessTagsDisp === void 0 ? "scroll" : _props$excessTagsDisp,
    readonly = props.readonly,
    disabled = props.disabled;
  var _useState = React.useState(0),
    _useState2 = slicedToArray._slicedToArray(_useState, 2),
    scrollDistance = _useState2[0],
    setScrollDistance = _useState2[1];
  var _useState3 = React.useState(),
    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
    scrollElement = _useState4[0],
    setScrollElement = _useState4[1];
  var updateScrollElement = function updateScrollElement(element) {
    var scrollElement2 = element.children[0];
    setScrollElement(scrollElement2);
  };
  var updateScrollDistance = function updateScrollDistance() {
    if (!scrollElement) return;
    setScrollDistance(scrollElement.scrollWidth - scrollElement.clientWidth);
  };
  var scrollTo = function scrollTo(distance) {
    if (isFunction.isFunction(scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scroll)) {
      scrollElement.scroll({
        left: distance,
        behavior: "smooth"
      });
    }
  };
  var scrollToRight = function scrollToRight() {
    updateScrollDistance();
    scrollTo(scrollDistance);
  };
  var scrollToLeft = function scrollToLeft() {
    scrollTo(0);
  };
  var onWheel = function onWheel(_ref) {
    var e = _ref.e;
    if (readonly || disabled) return;
    if (!scrollElement) return;
    if (e.deltaX > 0) {
      var distance = Math.min(scrollElement.scrollLeft + 120, scrollDistance);
      scrollTo(distance);
    } else {
      var _distance = Math.max(scrollElement.scrollLeft - 120, 0);
      scrollTo(_distance);
    }
  };
  var scrollToRightOnEnter = function scrollToRightOnEnter() {
    if (excessTagsDisplayType !== "scroll") return;
    mouseEnterTimer = setTimeout(function () {
      scrollToRight();
      clearTimeout(mouseEnterTimer);
    }, 100);
  };
  var scrollToLeftOnLeave = function scrollToLeftOnLeave() {
    if (excessTagsDisplayType !== "scroll") return;
    scrollTo(0);
    clearTimeout(mouseEnterTimer);
  };
  var clearScroll = function clearScroll() {
    clearTimeout(mouseEnterTimer);
  };
  var initScroll = function initScroll(element) {
    if (!element) return;
    updateScrollElement(element);
  };
  React.useEffect(function () {
    var _tagInputRef$current;
    initScroll(tagInputRef === null || tagInputRef === void 0 || (_tagInputRef$current = tagInputRef.current) === null || _tagInputRef$current === void 0 ? void 0 : _tagInputRef$current.currentElement);
    return clearScroll;
  }, []);
  return {
    initScroll: initScroll,
    clearScroll: clearScroll,
    tagInputRef: tagInputRef,
    scrollElement: scrollElement,
    scrollDistance: scrollDistance,
    scrollTo: scrollTo,
    scrollToRight: scrollToRight,
    scrollToLeft: scrollToLeft,
    updateScrollElement: updateScrollElement,
    updateScrollDistance: updateScrollDistance,
    onWheel: onWheel,
    scrollToRightOnEnter: scrollToRightOnEnter,
    scrollToLeftOnLeave: scrollToLeftOnLeave
  };
}

exports["default"] = useTagScroll;
//# sourceMappingURL=useTagScroll.js.map