@blocklet/payment-react/lib/components/loading-amount.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = LoadingAmount;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _react = require("react");
function LoadingAmount({
  value,
  loading = false,
  skeletonWidth = 80,
  height = 24,
  sx = {},
  animateValueChange = false,
  transitionDuration = 300
}) {
  const [displayValue, setDisplayValue] = (0, _react.useState)(value);
  const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
  const prevValueRef = (0, _react.useRef)(value);
  (0, _react.useEffect)(() => {
    if (value !== prevValueRef.current) {
      prevValueRef.current = value;
      if (animateValueChange && !loading) {
        setIsTransitioning(true);
        const timer = setTimeout(() => {
          setDisplayValue(value);
          setIsTransitioning(false);
        }, transitionDuration / 2);
        return () => clearTimeout(timer);
      }
      setDisplayValue(value);
    }
    return void 0;
  }, [value, loading, animateValueChange, transitionDuration]);
  if (loading) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
      variant: "text",
      width: skeletonWidth,
      height
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
    component: "span",
    sx: {
      ...sx,
      opacity: isTransitioning ? 0 : 1,
      transition: animateValueChange ? `opacity ${transitionDuration / 2}ms ease-in-out` : void 0
    },
    children: displayValue
  });
}