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

modern-kit/react

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var componentsLazyImage = require('../LazyImage/index.cjs');
require('../../hooks/useIntersectionObserver/index.cjs');
require('../../hooks/usePreservedCallback/index.cjs');
require('@modern-kit/utils');
require('../../hooks/useMergeRefs/index.cjs');
require('../../utils/mergeRefs/index.cjs');

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

exports.FallbackLazyImage = FallbackLazyImage;
//# sourceMappingURL=index.cjs.map