@fefade/react/dist/components/gallery/GalleryImage.js

Reusable React UI components powered by the fefade core system.

import { jsxs as f, Fragment as N, jsx as t } from "react/jsx-runtime";
import { b as P, P as A } from "../../index-DdnSr7Dp.js";
import { forwardRef as D, useState as h } from "react";
import { r as F, s as o } from "../../GalleryItem.module-BANbEoWG.js";
import p from "../modal/index.js";
import G from "../image/Image.js";
const z = D(
  ({
    className: a = "",
    lazy: g = !1,
    dataSrc: u,
    href: c,
    target: C = "_self",
    download: k,
    viewer: e,
    captionStyle: y,
    children: I,
    ...n
  }, b) => {
    const [r, s] = h(!1), [i, d] = h(null);
    function x() {
      s(!0);
    }
    function E() {
      s(!1), d(null);
    }
    function O(l) {
      A({
        href: c,
        download: k,
        target: C,
        onClick: () => {
          n.onClick?.(l);
        }
      });
    }
    function S(l) {
      if (e) {
        const m = l.currentTarget, j = /* @__PURE__ */ t(
          "img",
          {
            ...n,
            src: m.dataset.dataSrc ?? m.src,
            height: e.height,
            width: e.width
          }
        );
        d(j), x();
      }
      O(l);
    }
    return /* @__PURE__ */ f(N, { children: [
      e && r && i && F.createPortal(
        /* @__PURE__ */ t(
          p,
          {
            isOpen: r,
            style: { border: "none" },
            handleClose: E,
            children: /* @__PURE__ */ t(
              p.Content,
              {
                style: {
                  textAlign: "center",
                  overflow: "hidden",
                  padding: 0
                },
                children: i
              }
            )
          }
        ),
        document.body
      ),
      /* @__PURE__ */ f(
        "figure",
        {
          className: P(
            a,
            [a, o],
            o.galleryItem,
            {
              clickable: n.onClick || e || c
            }
          ),
          children: [
            /* @__PURE__ */ t(
              G,
              {
                ...n,
                ref: b,
                className: o.thumbnail,
                lazy: g,
                dataSrc: u,
                onClick: S
              }
            ),
            /* @__PURE__ */ t("figcaption", { className: o.caption, style: y, children: I })
          ]
        }
      )
    ] });
  }
);
export {
  z as default
};