mui-image-alter/dist/index.js

Fork of mui-image. Display images as per the Material guidelines using Material-UI v5 or v6. With component prop support.

"use client";
import { jsxs as z, jsx as s } from "react/jsx-runtime";
import * as e from "react";
import { styled as y } from "@mui/material/styles";
import G from "@mui/material/SvgIcon";
import J from "@mui/material/CircularProgress";
import g from "clsx";
const K = ({
  observeRef: t
}) => {
  const [n, d] = e.useState(), [u, h] = e.useState(), i = e.useRef(void 0);
  return e.useEffect(() => {
    i.current = new ResizeObserver((o) => {
      d(o[0].contentRect.height), h(o[0].contentRect.width);
    });
  }, []), e.useEffect(() => (t && t.current && i.current && i.current.observe(t.current), () => {
    t && t.current && i.current && i.current.unobserve(t.current);
  }), [t]), { ref: t, height: n, width: u };
}, Q = (t) => /* @__PURE__ */ s(G, { ...t, children: /* @__PURE__ */ s("path", { d: "M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z" }) }), it = e.forwardRef(
  ({
    src: t,
    alt: n = "",
    position: d = "relative",
    fit: u = "cover",
    style: h,
    className: i = "",
    showLoading: o = !1,
    errorIcon: c = !0,
    shift: a = !1,
    distance: $ = 100,
    shiftDuration: k = void 0,
    bgColor: B = "inherit",
    wrapperStyle: C,
    iconWrapperStyle: W,
    wrapperClassName: M = "",
    iconWrapperClassName: H = "",
    duration: j = 3e3,
    easing: E = "cubic-bezier(0.7, 0, 0.6, 1)",
    // "heavy move" from https://sprawledoctopus.com/easing/,
    onLoad: m,
    onError: f,
    sx: F,
    component: R = "img",
    ...r
  }, A) => {
    const [l, b] = e.useState(!1), [I, w] = e.useState(!1), { ref: D, width: x, height: S } = K({ observeRef: A }), N = r.height ? r.height : "100%", O = r.width ? r.width : "100%", L = e.useCallback(() => {
      b(!0), w(!1), m && m();
    }, [m]), P = e.useCallback(() => {
      w(!0), b(!1), f && f();
    }, [f]), V = a !== void 0 && a !== !1 && a !== null ? {
      [a]: l ? 0 : $
    } : {}, T = typeof c != "boolean" && c || /* @__PURE__ */ s(Q, { sx: { fontSize: 56, color: "#bdbdbd" } }), q = typeof o != "boolean" && o || /* @__PURE__ */ s(J, { size: 56, thickness: 6 });
    return /* @__PURE__ */ z(
      X,
      {
        className: g("MuiImageAlter-wrapper", M),
        sx: F,
        style: C,
        bgColor: B,
        rootHeight: S || N,
        rootWidth: x || O,
        children: [
          /* @__PURE__ */ s(
            U,
            {
              ref: D,
              as: R,
              src: t,
              alt: n,
              style: h,
              className: g("MuiImageAlter-img", i),
              onLoad: L,
              onError: P,
              position: d,
              fit: u,
              shift: a,
              shiftDuration: k,
              shiftStyles: V,
              duration: j,
              easing: E,
              loaded: l,
              ...r
            }
          ),
          (!!o || !!c) && /* @__PURE__ */ z(
            Y,
            {
              className: g("MuiImageAlter-iconWrapper", H),
              style: W,
              loaded: l,
              children: [
                !!c && I && T,
                !!o && !I && !l && q
              ]
            }
          )
        ]
      }
    );
  }
), v = (t, n) => !n.includes(t), U = e.memo(
  y("img", {
    shouldForwardProp: (t) => v(t.toString(), [
      "position",
      "fit",
      "shift",
      "shiftDuration",
      "shiftStyles",
      "duration",
      "easing",
      "loaded",
      "sx",
      "as"
    ])
  })((t) => ({
    "@keyframes materialize": {
      "0%": {
        filter: "saturate(20%) contrast(50%) brightness(120%)"
      },
      "75%": {
        filter: "saturate(60%) contrast(100%) brightness(100%)"
      },
      "100%": {
        filter: "saturate(100%) contrast(100%) brightness(100%)"
      }
    },
    position: t.position,
    objectFit: t.fit,
    transitionProperty: `${t.shift ? `${t.shift}, ` : ""}opacity`,
    transitionDuration: `${t.shift ? `${t.shiftDuration || t.duration * 0.3}ms, ` : ""}${t.duration / 2}ms`,
    transitionTimingFunction: t.easing,
    opacity: t.loaded ? 1 : 0,
    animation: t.loaded ? `materialize ${t.duration}ms 1 ${t.easing}` : "",
    ...!!t.shift && t.shiftStyles
  }))
), X = e.memo(
  y("div", {
    shouldForwardProp: (t) => v(t.toString(), ["bgColor", "sx", "rootHeight", "rootWidth"])
  })((t) => ({
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: t.bgColor,
    height: `${t.rootHeight}px`,
    width: `${t.rootWidth}px`
  }))
), Y = e.memo(
  y("div", {
    shouldForwardProp: (t) => t !== "loaded"
  })((t) => ({
    width: "100%",
    marginLeft: "-100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    opacity: t.loaded ? 0 : 1
  }))
);
export {
  it as Image
};