@gambito-corp/mbs-library

import React from 'react'; import PropTypes from 'prop-types'; const Image = ({ // Imagen básica src, alt = '', // Dimensiones w, h, wType = 'px', hType = 'px', // Border radius borderRadius, borderRadiusType = 'px', // Border borderWidth, borderWidthType = 'px', borderStyle = 'solid', borderColor = '#000000', // Shadow shadowOffsetX = 0, shadowOffsetY = 0, shadowBlur = 0, shadowSpread = 0, shadowColor = '#000000', shadowOpacity = 0.3, shadowInset = false, // Object fit objectFit = 'cover', // Lazy loading y performance lazy = true, loading = 'lazy', placeholder = 'blur', quality = 75, // Filtros CSS filter, grayscale = false, sepia = false, brightness = 1, contrast = 1, saturate = 1, // Efectos y transiciones fadeIn = true, fadeInDuration = 300, hoverEffect = 'none', transition = 'all 0.3s ease', // Fallback fallbackSrc, retryAttempts = 3, // Interactividad draggable = false, selectable = false, zoomable = false, // Eventos onClick, onLoad, onError, onLoadStart, onLoadComplete, // Estilos className = '', ...props }) => { // ✅ Función helper para construir filtros CSS const buildFilterString = () => { const filters = []; if (filter) filters.push(filter); if (grayscale) filters.push('grayscale(100%)'); if (sepia) filters.push('sepia(100%)'); if (brightness !== 1) filters.push(`brightness(${brightness})`); if (contrast !== 1) filters.push(`contrast(${contrast})`); if (saturate !== 1) filters.push(`saturate(${saturate})`); return filters.length > 0 ? filters.join(' ') : undefined; }; // ✅ Función helper para convertir hex a rgba const hexToRgba = (hex, opacity) => { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r}, ${g}, ${b}, ${opacity})`; }; // ✅ Construir estilos PRIMERO const imageStyles = { width: w ? `${w}${wType}` : undefined, height: h ? `${h}${hType}` : undefined, borderRadius: borderRadius ? `${borderRadius}${borderRadiusType}` : undefined, objectFit: objectFit, display: 'block', userSelect: selectable ? 'auto' : 'none', filter: buildFilterString() }; // ✅ CORREGIDO: Solo agregar transition específica para hover effects if (hoverEffect !== 'none') { if (hoverEffect === 'zoom' || hoverEffect === 'scale') { imageStyles.transition = 'transform 0.3s ease'; } else if (hoverEffect === 'brightness' || hoverEffect === 'blur') { imageStyles.transition = 'filter 0.3s ease'; } else { imageStyles.transition = transition; } } else { imageStyles.transition = transition; } // Agregar border si se especifica if (borderWidth) { imageStyles.border = `${borderWidth}${borderWidthType} ${borderStyle} ${borderColor}`; } // Agregar box-shadow si se especifica if (shadowOffsetX || shadowOffsetY || shadowBlur || shadowSpread) { const shadowRgba = hexToRgba(shadowColor, shadowOpacity); const insetKeyword = shadowInset ? 'inset ' : ''; imageStyles.boxShadow = `${insetKeyword}${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px ${shadowSpread}px ${shadowRgba}`; } // ✅ CORREGIDO: Construir clases CSS con hover effect const imageClasses = [ 'image', hoverEffect !== 'none' ? `image--hover-${hoverEffect}` : '', zoomable ? 'image--zoomable' : '', fadeIn ? 'image--fade-in' : '', className ].filter(Boolean).join(' '); // ✅ SOLUCIÓN FINAL: Devolver JSX directamente return ( <img src={src} alt={alt} style={imageStyles} className={imageClasses} loading={lazy ? loading : 'eager'} draggable={draggable} onClick={onClick} onLoad={onLoad} onError={onError} onLoadStart={onLoadStart} data-testid="Image" {...props} /> ); }; Image.propTypes = { src: PropTypes.string.isRequired, alt: PropTypes.string, w: PropTypes.number, h: PropTypes.number, wType: PropTypes.oneOf(['px', 'em', 'rem', '%', 'vw', 'vh', 'cm', 'mm', 'in', 'pt', 'pc']), hType: PropTypes.oneOf(['px', 'em', 'rem', '%', 'vw', 'vh', 'cm', 'mm', 'in', 'pt', 'pc']), borderRadius: PropTypes.number, borderRadiusType: PropTypes.oneOf(['px', 'em', 'rem', '%']), borderWidth: PropTypes.number, borderWidthType: PropTypes.oneOf(['px', 'em', 'rem']), borderStyle: PropTypes.oneOf(['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset']), borderColor: PropTypes.string, shadowOffsetX: PropTypes.number, shadowOffsetY: PropTypes.number, shadowBlur: PropTypes.number, shadowSpread: PropTypes.number, shadowColor: PropTypes.string, shadowOpacity: PropTypes.number, shadowInset: PropTypes.bool, objectFit: PropTypes.oneOf(['fill', 'contain', 'cover', 'none', 'scale-down']), lazy: PropTypes.bool, loading: PropTypes.oneOf(['lazy', 'eager']), placeholder: PropTypes.oneOf(['blur', 'empty', 'skeleton']), quality: PropTypes.number, filter: PropTypes.string, grayscale: PropTypes.bool, sepia: PropTypes.bool, brightness: PropTypes.number, contrast: PropTypes.number, saturate: PropTypes.number, fadeIn: PropTypes.bool, fadeInDuration: PropTypes.number, hoverEffect: PropTypes.oneOf(['none', 'zoom', 'brightness', 'scale', 'blur']), transition: PropTypes.string, fallbackSrc: PropTypes.string, retryAttempts: PropTypes.number, draggable: PropTypes.bool, selectable: PropTypes.bool, zoomable: PropTypes.bool, onClick: PropTypes.func, onLoad: PropTypes.func, onError: PropTypes.func, onLoadStart: PropTypes.func, onLoadComplete: PropTypes.func, className: PropTypes.string }; export default Image;