@modern-kit/react/dist/components/FallbackLazyImage/index.mjs

modern-kit/react

import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useState, useMemo, useCallback } from 'react';
import { LazyImage } from '../LazyImage/index.mjs';
import '../../hooks/useIntersectionObserver/index.mjs';
import '../../hooks/usePreservedCallback/index.mjs';
import '@modern-kit/utils';
import '../../hooks/useMergeRefs/index.mjs';
import '../../utils/mergeRefs/index.mjs';

const FallbackLazyImage = forwardRef(
  ({ width, height, fallback, style, duration = "0.2s", onLoad, ...restProps }, ref) => {
    const [isLoaded, setIsLoaded] = useState(false);
    const isRenderFallback = !isLoaded;
    const wrapperStyle = useMemo(
      () => ({
        position: "relative",
        width,
        height
      }),
      [width, height]
    );
    const imageStyle = useMemo(
      () => ({
        position: "absolute",
        top: 0,
        left: 0,
        opacity: !isRenderFallback ? 1 : 0,
        transition: `opacity ${duration}`,
        ...style
      }),
      [isRenderFallback, duration, style]
    );
    const handleLoad = useCallback(
      (e) => {
        if (onLoad) onLoad(e);
        setIsLoaded(true);
      },
      [onLoad]
    );
    return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, children: [
      isRenderFallback && fallback,
      /* @__PURE__ */ jsx(
        LazyImage,
        {
          ref,
          width,
          height,
          style: imageStyle,
          onLoad: handleLoad,
          ...restProps
        }
      )
    ] });
  }
);
FallbackLazyImage.displayName = "FallbackLazyImage";

export { FallbackLazyImage };
//# sourceMappingURL=index.mjs.map