@pnp/spfx-controls-react/lib-commonjs/controls/carousel/CarouselImage.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Carousel_module_scss_1 = tslib_1.__importDefault(require("./Carousel.module.scss"));
var Image_1 = require("@fluentui/react/lib/Image");
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var CarouselImage = /** @class */ (function (_super) {
    tslib_1.__extends(CarouselImage, _super);
    function CarouselImage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CarouselImage.prototype.render = function () {
        var _a = this.props, imageSrc = _a.imageSrc, _b = _a.imageFit, imageFit = _b === void 0 ? Image_1.ImageFit.none : _b, url = _a.url, title = _a.title, description = _a.description, _c = _a.target, target = _c === void 0 ? '_blank' : _c, showDetailsOnHover = _a.showDetailsOnHover, className = _a.className, style = _a.style, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, detailsClassName = _a.detailsClassName, detailsStyle = _a.detailsStyle, titleClassName = _a.titleClassName, titleStyle = _a.titleStyle, descriptionClassName = _a.descriptionClassName, descriptionStyle = _a.descriptionStyle;
        var details = null;
        var hasDetails = !!title || !!description;
        if (hasDetails) {
            var descriptionEl = void 0;
            if (description) {
                if (typeof (description) === 'string') {
                    descriptionEl = React.createElement("span", { className: descriptionClassName, style: descriptionStyle }, description);
                }
                else {
                    descriptionEl = description;
                }
            }
            var detailsContent = React.createElement("div", { className: (0, Utilities_1.css)(Carousel_module_scss_1.default.details, detailsClassName), style: detailsStyle },
                !!title && React.createElement("span", { className: (0, Utilities_1.css)(Carousel_module_scss_1.default.title, titleClassName), style: titleStyle }, title),
                descriptionEl);
            if (url) {
                details = React.createElement("a", { href: url, target: target, "data-interception": target === "_blank" ? "off" : "on" }, detailsContent);
            }
            else {
                details = detailsContent;
            }
        }
        return (React.createElement("div", { className: (0, Utilities_1.css)(Carousel_module_scss_1.default.carouselImage, className, showDetailsOnHover ? Carousel_module_scss_1.default.dynamicDetails : Carousel_module_scss_1.default.staticDetails), style: style },
            React.createElement(Image_1.Image, { className: (0, Utilities_1.css)(Carousel_module_scss_1.default.image, imgClassName), style: imgStyle, imageFit: imageFit, src: imageSrc }),
            details));
    };
    return CarouselImage;
}(React.Component));
exports.default = CarouselImage;
//# sourceMappingURL=CarouselImage.js.map