@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
19 lines • 1.74 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { ROLES } from '../../types/role/role';
// internal components
import { PictureSourceStandAlone } from './components/pictureSourceStandAlone';
// styles
import { ImagePictureStyled, ImageStyled } from './image.styled';
import { ImageLoadingType } from './types/loading';
import { getFallbackRatio } from './utils/getFallbackRatio';
const ImageStandAloneComponent = ({ dataTestId = 'image', loading = ImageLoadingType.LAZY, ...props }, ref) => {
return (_jsxs("figure", { ref: ref, "data-testid": dataTestId, children: [_jsxs(ImagePictureStyled, { borderRadius: props?.borderRadius, fallbackRatio: props.ratio && getFallbackRatio(props.ratio), objectFit: props?.objectFit, ratio: props.ratio, tabIndex: props.tabIndex, children: [_jsx(PictureSourceStandAlone, { mediaSource: props.images[DeviceBreakpointsType.LARGE_DESKTOP] }), _jsx(PictureSourceStandAlone, { mediaSource: props.images[DeviceBreakpointsType.DESKTOP] }), _jsx(PictureSourceStandAlone, { mediaSource: props.images[DeviceBreakpointsType.TABLET] }), _jsx(PictureSourceStandAlone, { mediaSource: props.images[DeviceBreakpointsType.MOBILE] }), _jsx(ImageStyled, { alt: props.alt, as: props.component || ROLES.IMG, height: props.height, loading: loading, src: props.images.DEFAULT.src, title: props.title, width: props.width, onLoad: props.onLoad })] }), props.caption && _jsx("figcaption", { children: props.caption })] }));
};
/**
* @description
* Image component to load images
*/
export const ImageStandAlone = React.forwardRef(ImageStandAloneComponent);
//# sourceMappingURL=imageStandAlone.js.map