ywana-core8 0.1.75 → 0.1.76

package/src/html/thumbnail.css

@@ -6,11 +6,298 @@
     height: 100%;
     min-height: 3rem;
     max-height: 6rem;
-    
+
     overflow: hidden;
+    position: relative;
+    display: inline-block;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.thumbnail>img {
+.thumbnail>img,
+.thumbnail__image {
     width: 100%;
     height: 100%;
+    display: block;
+}
+
+/* Enhanced Thumbnail Styles - New functionality while maintaining compatibility */
+
+/* Sizes */
+.thumbnail--small {
+    min-width: 2rem;
+    max-width: 4rem;
+    min-height: 2rem;
+    max-height: 4rem;
+}
+
+.thumbnail--medium {
+    min-width: 3rem;
+    max-width: 6rem;
+    min-height: 3rem;
+    max-height: 6rem;
+}
+
+.thumbnail--large {
+    min-width: 4rem;
+    max-width: 8rem;
+    min-height: 4rem;
+    max-height: 8rem;
+}
+
+.thumbnail--xlarge {
+    min-width: 6rem;
+    max-width: 12rem;
+    min-height: 6rem;
+    max-height: 12rem;
+}
+
+/* Shapes */
+.thumbnail--square {
+    border-radius: 4px;
+}
+
+.thumbnail--circle {
+    border-radius: 50%;
+}
+
+.thumbnail--rounded {
+    border-radius: 12px;
+}
+
+/* States */
+.thumbnail--bordered {
+    border: 2px solid var(--divider-color, #e0e0e0);
+}
+
+.thumbnail--shadow {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.thumbnail--clickable {
+    cursor: pointer;
+}
+
+.thumbnail--clickable:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.thumbnail--clickable:focus {
+    outline: 2px solid var(--primary-color, #2196f3);
+    outline-offset: 2px;
+}
+
+.thumbnail--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.thumbnail--loading {
+    background-color: var(--background-color-light, #f5f5f5);
+}
+
+.thumbnail--error {
+    background-color: var(--error-color-light, #ffebee);
+}
+
+.thumbnail--loaded .thumbnail__image {
+    opacity: 1;
+}
+
+/* Placeholder */
+.thumbnail__placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-color-light, #f5f5f5);
+    color: var(--text-color-light, #666);
+}
+
+/* Fallback */
+.thumbnail__fallback {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-color-light, #f5f5f5);
+    color: var(--text-color-light, #666);
+}
+
+/* Overlay */
+.thumbnail__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.thumbnail:hover .thumbnail__overlay {
+    opacity: 1;
+}
+
+/* Badge */
+.thumbnail__badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background-color: var(--primary-color, #2196f3);
+    color: white;
+    border-radius: 50%;
+    min-width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border: 2px solid white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Loading indicator */
+.thumbnail__loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--text-color-light, #666);
+}
+
+/* Image transitions */
+.thumbnail__image {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.thumbnail--loaded .thumbnail__image {
+    opacity: 1;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .thumbnail--small {
+        min-width: 1.5rem;
+        max-width: 3rem;
+        min-height: 1.5rem;
+        max-height: 3rem;
+    }
+
+    .thumbnail--medium {
+        min-width: 2rem;
+        max-width: 4rem;
+        min-height: 2rem;
+        max-height: 4rem;
+    }
+
+    .thumbnail--large {
+        min-width: 3rem;
+        max-width: 6rem;
+        min-height: 3rem;
+        max-height: 6rem;
+    }
+
+    .thumbnail--xlarge {
+        min-width: 4rem;
+        max-width: 8rem;
+        min-height: 4rem;
+        max-height: 8rem;
+    }
+
+    .thumbnail__badge {
+        top: -4px;
+        right: -4px;
+        min-width: 16px;
+        height: 16px;
+        font-size: 0.7rem;
+    }
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+    .thumbnail--bordered {
+        border-color: var(--divider-color-dark, #616161);
+    }
+
+    .thumbnail__placeholder,
+    .thumbnail__fallback {
+        background-color: var(--background-color-light-dark, #424242);
+        color: var(--text-color-light-dark, #cccccc);
+    }
+
+    .thumbnail--loading {
+        background-color: var(--background-color-light-dark, #424242);
+    }
+
+    .thumbnail--error {
+        background-color: var(--error-color-dark, #d32f2f);
+    }
+
+    .thumbnail__loading {
+        color: var(--text-color-light-dark, #cccccc);
+    }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+    .thumbnail--bordered {
+        border-width: 3px;
+        border-color: currentColor;
+    }
+
+    .thumbnail--clickable:focus {
+        outline-width: 3px;
+    }
+
+    .thumbnail__overlay {
+        background-color: rgba(0, 0, 0, 0.8);
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .thumbnail,
+    .thumbnail__image,
+    .thumbnail__overlay {
+        transition: none;
+    }
+
+    .thumbnail--clickable:hover {
+        transform: none;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .thumbnail {
+        break-inside: avoid;
+        box-shadow: none !important;
+        border: 1px solid black !important;
+    }
+
+    .thumbnail__overlay,
+    .thumbnail__badge {
+        display: none !important;
+    }
+
+    .thumbnail__image {
+        opacity: 1 !important;
+    }
 }

package/src/html/thumbnail.js

@@ -1,22 +1,227 @@
-import React from 'react'
+import React, { useState, useCallback, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { Icon } from './icon'
 import './thumbnail.css'
 
 /**
- * Thumbnail
+ * Enhanced Thumbnail component with improved functionality while maintaining 100% compatibility
  */
 export const Thumbnail = (props) => {
-
     const {
+        // Original props (100% compatible)
         src = "https://www.w3schools.com/howto/img_forest.jpg",
         empty = "",
-        objectFit = "cover"
+        objectFit = "cover",
+        // New enhanced props (all optional for compatibility)
+        alt,
+        title,
+        loading = "lazy",
+        placeholder,
+        fallback,
+        size = "medium",
+        shape = "square",
+        bordered = false,
+        shadow = false,
+        clickable = false,
+        onClick,
+        onLoad,
+        onError,
+        overlay,
+        badge,
+        disabled = false,
+        className,
+        style,
+        ...restProps
     } = props
 
-    const image = src ? src : empty
-    const style = { objectFit }
+    const [imageLoaded, setImageLoaded] = useState(false)
+    const [imageError, setImageError] = useState(false)
+    const [isLoading, setIsLoading] = useState(true)
+    const imgRef = useRef(null)
+
+    // Handle image load
+    const handleLoad = useCallback((event) => {
+        setImageLoaded(true)
+        setIsLoading(false)
+        setImageError(false)
+        if (onLoad) onLoad(event)
+    }, [onLoad])
+
+    // Handle image error
+    const handleError = useCallback((event) => {
+        setImageError(true)
+        setIsLoading(false)
+        setImageLoaded(false)
+        if (onError) onError(event)
+    }, [onError])
+
+    // Handle click
+    const handleClick = useCallback((event) => {
+        if (disabled || !clickable) return
+        if (onClick) onClick(event)
+    }, [disabled, clickable, onClick])
+
+    // Generate CSS classes
+    const cssClasses = [
+        'thumbnail',
+        `thumbnail--${size}`,
+        `thumbnail--${shape}`,
+        bordered && 'thumbnail--bordered',
+        shadow && 'thumbnail--shadow',
+        clickable && 'thumbnail--clickable',
+        disabled && 'thumbnail--disabled',
+        isLoading && 'thumbnail--loading',
+        imageError && 'thumbnail--error',
+        imageLoaded && 'thumbnail--loaded',
+        className
+    ].filter(Boolean).join(' ')
+
+    // Determine image source
+    const imageSrc = src ? src : empty
+    const showFallback = imageError && (fallback || empty)
+    const showPlaceholder = isLoading && placeholder
+
+    // Generate inline styles (maintaining original logic)
+    const inlineStyle = {
+        objectFit,
+        ...style
+    }
+
     return (
-        <div className="thumbnail" >
-            <img src={image} style={style} />
+        <div
+            className={cssClasses}
+            style={inlineStyle}
+            onClick={handleClick}
+            title={title}
+            role={clickable ? 'button' : undefined}
+            tabIndex={clickable && !disabled ? 0 : undefined}
+            aria-disabled={disabled}
+            {...restProps}
+        >
+            {/* Loading placeholder */}
+            {showPlaceholder && (
+                <div className="thumbnail__placeholder">
+                    {typeof placeholder === 'string' ? (
+                        <Icon icon={placeholder} size="medium" />
+                    ) : (
+                        placeholder
+                    )}
+                </div>
+            )}
+
+            {/* Main image */}
+            {!showFallback && (
+                <img
+                    ref={imgRef}
+                    src={imageSrc}
+                    alt={alt || title || "Thumbnail"}
+                    style={{ objectFit }}
+                    loading={loading}
+                    onLoad={handleLoad}
+                    onError={handleError}
+                    className="thumbnail__image"
+                />
+            )}
+
+            {/* Fallback content */}
+            {showFallback && (
+                <div className="thumbnail__fallback">
+                    {typeof fallback === 'string' ? (
+                        <Icon icon={fallback} size="medium" />
+                    ) : fallback ? (
+                        fallback
+                    ) : (
+                        <img
+                            src={empty}
+                            alt={alt || "Fallback image"}
+                            style={{ objectFit }}
+                            className="thumbnail__image"
+                        />
+                    )}
+                </div>
+            )}
+
+            {/* Overlay */}
+            {overlay && (
+                <div className="thumbnail__overlay">
+                    {overlay}
+                </div>
+            )}
+
+            {/* Badge */}
+            {badge && (
+                <div className="thumbnail__badge">
+                    {badge}
+                </div>
+            )}
+
+            {/* Loading indicator */}
+            {isLoading && !placeholder && (
+                <div className="thumbnail__loading">
+                    <Icon icon="hourglass_empty" size="small" />
+                </div>
+            )}
         </div>
     )
-}
+}
+
+// PropTypes
+Thumbnail.propTypes = {
+    /** Image source URL */
+    src: PropTypes.string,
+    /** Empty/fallback image URL */
+    empty: PropTypes.string,
+    /** CSS object-fit property */
+    objectFit: PropTypes.oneOf(['cover', 'contain', 'fill', 'scale-down', 'none']),
+    /** Alt text for accessibility */
+    alt: PropTypes.string,
+    /** Title/tooltip text */
+    title: PropTypes.string,
+    /** Image loading strategy */
+    loading: PropTypes.oneOf(['lazy', 'eager']),
+    /** Placeholder content while loading */
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** Fallback content on error */
+    fallback: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** Thumbnail size */
+    size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+    /** Thumbnail shape */
+    shape: PropTypes.oneOf(['square', 'circle', 'rounded']),
+    /** Show border */
+    bordered: PropTypes.bool,
+    /** Show shadow */
+    shadow: PropTypes.bool,
+    /** Make clickable */
+    clickable: PropTypes.bool,
+    /** Click handler */
+    onClick: PropTypes.func,
+    /** Load handler */
+    onLoad: PropTypes.func,
+    /** Error handler */
+    onError: PropTypes.func,
+    /** Overlay content */
+    overlay: PropTypes.node,
+    /** Badge content */
+    badge: PropTypes.node,
+    /** Disabled state */
+    disabled: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Inline styles */
+    style: PropTypes.object
+}
+
+Thumbnail.defaultProps = {
+    src: "https://www.w3schools.com/howto/img_forest.jpg",
+    empty: "",
+    objectFit: "cover",
+    loading: "lazy",
+    size: "medium",
+    shape: "square",
+    bordered: false,
+    shadow: false,
+    clickable: false,
+    disabled: false
+}
+
+export default Thumbnail