@agility/nextjs/AgilityPic.js

Agility CMS support for NextJS 14 and Next Image

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AgilityPic = void 0;
var react_1 = __importDefault(require("react"));
/**
 * This will output a picture tag with the image and sources provided, using the Agility Image API.
 * The sources property allows you to specify different image sizes for different css media selectors.
 *
 * @param {AgilityPicProps} props
 */
var AgilityPic = function (_a) {
    var image = _a.image, alt = _a.alt, priority = _a.priority, className = _a.className, sources = _a.sources, fallbackWidth = _a.fallbackWidth;
    var src = image.url;
    if (fallbackWidth !== undefined && fallbackWidth > 0) {
        src = "".concat(image.url, "?format=auto&w=").concat(fallbackWidth);
    }
    return (react_1.default.createElement("picture", null, sources === null || sources === void 0 ? void 0 :
        sources.map(function (source, index) {
            var srcSet = image.url;
            var w = Number(source.width) > 0 ? "&w=".concat(source.width) : "";
            var h = Number(source.height) > 0 ? "&h=".concat(source.height) : "";
            var key = "".concat(srcSet, "-").concat(index);
            if (h || w) {
                //if we have a width and NOT a height, do NOT allow the image to be sized larger than the original width
                if (w && !h)
                    w = "&w=".concat(Math.min(Number(source.width), image.width));
                //if we have a height and NOT a width, do NOT allow the image to be sized larger than the original height
                if (h && !w)
                    h = "&h=".concat(Math.min(Number(source.height), image.height));
                //if we have a width or a height, add the formatting query strings for quality and format, h and/or w
                srcSet = "".concat(image.url, "?format=auto").concat(w).concat(h);
            }
            return react_1.default.createElement("source", __assign({ key: key }, source, { srcSet: srcSet }));
        }),
        react_1.default.createElement("img", { loading: priority ? "eager" : "lazy", src: src, alt: alt || image.label, className: className })));
};
exports.AgilityPic = AgilityPic;