@progress/sitefinity-nextjs-sdk/widgets/image/image.js

Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.

import { jsx as _jsx } from "react/jsx-runtime";
import { ImageClickAction } from './interfaces/image-click-action';
import { ImageDisplayMode } from './interfaces/image-display-mode';
import { htmlAttributes, getCustomAttributes } from '../../editor/widget-framework/attributes';
import { getMinimumWidgetContext } from '../../editor/widget-framework/widget-context';
import { RestClient, RestSdkTypes } from '../../rest-sdk/rest-client';
import { Tracer } from '@progress/sitefinity-nextjs-sdk/diagnostics/empty';
import { RenderView } from '../common/render-view';
import { ImageDefaultView } from './image.view';
import { ErrorCodeException } from '../../rest-sdk/errors/error-code.exception';
export async function SitefinityImage(props) {
    const { span, ctx } = Tracer.traceWidget(props, true);
    const entity = props.model.Properties;
    let imageItem = undefined;
    if (entity.Item && entity.Item.Id) {
        try {
            imageItem = await RestClient.getItemWithFallback({
                type: RestSdkTypes.Image,
                id: entity.Item.Id.toString(),
                provider: entity.Item.Provider,
                traceContext: ctx,
                culture: props.requestContext.culture
            });
        }
        catch (error) {
            const errorMessage = error instanceof ErrorCodeException ? error.message : error;
            const attributes = htmlAttributes(props, errorMessage);
            return (props.requestContext.isEdit ? _jsx("div", { ...attributes }) : null);
        }
    }
    const dataAttributes = htmlAttributes(props);
    const customAttributes = getCustomAttributes(entity.Attributes, 'Image');
    let viewProps = {
        item: imageItem,
        title: entity.Title,
        alternativeText: entity.AlternativeText,
        clickAction: entity.ClickAction || ImageClickAction.DoNothing,
        imageSize: entity.ImageSize || ImageDisplayMode.Responsive,
        fitToContainer: entity.FitToContainer === undefined ? true : entity.FitToContainer,
        attributes: { ...dataAttributes, ...customAttributes },
        thumbnails: [],
        actionLink: '',
        widgetContext: getMinimumWidgetContext(props)
    };
    if (imageItem) {
        viewProps.title = viewProps.title || imageItem.Title;
        viewProps.alternativeText = viewProps.alternativeText || imageItem.AlternativeText;
        const isSvg = imageItem.MimeType === 'image/svg+xml';
        const hasZeroDimensions = imageItem.Width === 0 && imageItem.Height === 0;
        viewProps.width = isSvg && hasZeroDimensions ? undefined : imageItem.Width;
        viewProps.height = isSvg && hasZeroDimensions ? undefined : imageItem.Height;
        viewProps.selectedImageUrl = imageItem.Url;
        if (imageItem.Thumbnails) {
            viewProps.thumbnails = imageItem.Thumbnails.sort((a, b) => a.Width - b.Width);
            if (entity.ImageSize === ImageDisplayMode.Thumbnail) {
                if (imageItem.Thumnail) {
                    viewProps.selectedImageUrl = imageItem.Thumnail.Url;
                }
                let selectedThumbnail = imageItem.Thumbnails.find((t) => t.Title === entity.Thumnail.Name);
                if (selectedThumbnail) {
                    viewProps.selectedImageUrl = selectedThumbnail.Url;
                    viewProps.width = selectedThumbnail.Width;
                    viewProps.height = selectedThumbnail.Height;
                }
            }
        }
        // Thumbnails for images imported from DAM providers are not stored in Sitefinity and we do not know their width and height.
        // We have to set width and heigth to null otherwise the image is zoomed and selected thumbnail not applied correctly.
        if (entity.ImageSize === ImageDisplayMode.Thumbnail && imageItem.IsDamMedia) {
            viewProps.width = undefined;
            viewProps.height = undefined;
        }
    }
    if (entity.CustomSize && entity.ImageSize === ImageDisplayMode.CustomSize) {
        viewProps.width = entity.CustomSize.Width;
        viewProps.height = entity.CustomSize.Height;
    }
    return (_jsx(RenderView, { viewName: props.model.Properties.ViewName, widgetKey: props.model.Name, traceSpan: span, viewProps: viewProps, children: _jsx(ImageDefaultView, { ...viewProps }) }));
}
/**
 * @deprecated Use `SitefinityImage` instead.
 */
export const Image = SitefinityImage;
;