tdesign-react/cjs/hooks/useRipple.js

TDesign Component for React

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

'use strict';

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

var React = require('react');
var hooks_useConfig = require('./useConfig.js');
var hooks_useAnimation = require('./useAnimation.js');
var _util_setStyle = require('../_util/setStyle.js');
var _util_dom = require('../_util/dom.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-56a79f9c.js');
require('../_chunks/dep-5b35215f.js');
require('../_chunks/dep-fa2097c1.js');
require('../_chunks/dep-f6f16bd8.js');
require('dayjs');
require('../_chunks/dep-59bb0827.js');
require('../_chunks/dep-68f8743f.js');
require('../_chunks/dep-a8d0483a.js');
require('../_chunks/dep-6e34d7d7.js');
require('../_chunks/dep-d45b3350.js');
require('../_chunks/dep-ec3beb8d.js');
require('../_chunks/dep-b7e21379.js');
require('../_chunks/dep-73937edb.js');
require('../_chunks/dep-8d4e8f1c.js');
require('../_chunks/dep-1d022321.js');
require('../_chunks/dep-ab08e148.js');
require('../_chunks/dep-9df70348.js');
require('../_chunks/dep-af16359b.js');
require('../_chunks/dep-e11afe29.js');
require('../_chunks/dep-346ac5f4.js');
require('../_chunks/dep-612ec5c9.js');
require('../_chunks/dep-4d25d6c0.js');
require('../_chunks/dep-496c0353.js');
require('../_chunks/dep-1f530d81.js');
require('../_chunks/dep-a4bc3144.js');
require('../_chunks/dep-535a3b69.js');
require('../_chunks/dep-d11b328f.js');
require('raf');
require('../_util/easing.js');
require('../_chunks/dep-3c8023f1.js');

var period = 200;
var noneRippleBg = "rgba(0, 0, 0, 0)";
var defaultRippleColor = "rgba(0, 0, 0, 0.35)";
var getRippleColor = function getRippleColor(el, fixedRippleColor) {
  var _el$dataset;
  if (fixedRippleColor) {
    return fixedRippleColor;
  }
  if (el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ripple) {
    var rippleColor = el.dataset.ripple;
    return rippleColor;
  }
  var cssVariable = getComputedStyle(el).getPropertyValue("--ripple-color");
  if (cssVariable) {
    return cssVariable;
  }
  return defaultRippleColor;
};
function useRipple(el, fixedRippleColor) {
  var _useConfig = hooks_useConfig["default"](),
    classPrefix = _useConfig.classPrefix;
  var _useAnimation = hooks_useAnimation["default"](),
    keepRipple = _useAnimation.keepRipple;
  var rippleContainer = React.useMemo(function () {
    if (!_util_dom.canUseDocument) return null;
    var container = document.createElement("div");
    container.className = "".concat(classPrefix, "-ripple");
    return container;
  }, [classPrefix]);
  var handleAddRipple = React.useCallback(function (e) {
    var rippleColor = getRippleColor(el, fixedRippleColor);
    if (e.button !== 0 || !el || !keepRipple) return;
    if (el.classList.contains("".concat(classPrefix, "-is-active")) || el.classList.contains("".concat(classPrefix, "-is-disabled")) || el.classList.contains("".concat(classPrefix, "-is-checked")) || el.classList.contains("".concat(classPrefix, "-is-loading"))) return;
    var elStyle = getComputedStyle(el);
    var elBorder = parseInt(elStyle.borderWidth, 10);
    var border = elBorder > 0 ? elBorder : 0;
    var width = el.offsetWidth;
    var height = el.offsetHeight;
    if (rippleContainer.parentNode === null) {
      _util_setStyle["default"](rippleContainer, {
        position: "absolute",
        left: "".concat(0 - border, "px"),
        top: "".concat(0 - border, "px"),
        width: "".concat(width, "px"),
        height: "".concat(height, "px"),
        borderRadius: elStyle.borderRadius,
        pointerEvents: "none",
        overflow: "hidden"
      });
      el.appendChild(rippleContainer);
    }
    var ripple = document.createElement("div");
    ripple.className = "".concat(classPrefix, "-ripple__inner");
    _util_setStyle["default"](ripple, {
      marginTop: "0",
      marginLeft: "0",
      right: "".concat(width, "px"),
      width: "".concat(width + 20, "px"),
      height: "100%",
      transition: "transform ".concat(period, "ms cubic-bezier(.38, 0, .24, 1), background ").concat(period * 2, "ms linear"),
      transform: "skewX(-8deg)",
      pointerEvents: "none",
      position: "absolute",
      zIndex: 0,
      backgroundColor: rippleColor,
      opacity: "0.9"
    });
    var elMap = /* @__PURE__ */new WeakMap();
    for (var n = el.children.length, i = 0; i < n; ++i) {
      var child = el.children[i];
      if (child.style.zIndex === "" && child !== rippleContainer) {
        child.style.zIndex = "1";
        elMap.set(child, true);
      }
    }
    var initPosition = el.style.position ? el.style.position : getComputedStyle(el).position;
    if (initPosition === "" || initPosition === "static") {
      el.style.position = "relative";
    }
    rippleContainer.insertBefore(ripple, rippleContainer.firstChild);
    setTimeout(function () {
      ripple.style.transform = "translateX(".concat(width, "px)");
    }, 0);
    var _handleClearRipple = function handleClearRipple() {
      ripple.style.backgroundColor = noneRippleBg;
      if (!el) return;
      el.removeEventListener("pointerup", _handleClearRipple, false);
      el.removeEventListener("pointerleave", _handleClearRipple, false);
      setTimeout(function () {
        ripple.remove();
        if (rippleContainer.children.length === 0) rippleContainer.remove();
      }, period * 2 + 100);
    };
    el.addEventListener("pointerup", _handleClearRipple, false);
    el.addEventListener("pointerleave", _handleClearRipple, false);
  }, [classPrefix, el, fixedRippleColor, rippleContainer, keepRipple]);
  React.useEffect(function () {
    if (!el) return;
    el.addEventListener("pointerdown", handleAddRipple, false);
    return function () {
      el.removeEventListener("pointerdown", handleAddRipple, false);
    };
  }, [handleAddRipple, fixedRippleColor, el]);
}

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