@macive/ui 0.0.17 → 0.0.20

package/dist/src/components/Image/Image.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = exports.fallbackImageSVG = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-// Fallback SVG as a data URL
 exports.fallbackImageSVG = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#ccc">
     <rect width="100" height="100" />
@@ -13,27 +12,65 @@ exports.fallbackImageSVG = `
 const fallbackSVG = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="#eae6e6" width="32" height="32" viewBox="0 0 32 32" stroke="#eae6e6">
   <path d="M30 3.4141L28.5859 2 2 28.5859 3.4141 30l2-2H26a2.0027 2.0027 0 0 0 2-2V5.4141ZM26 26H7.4141l7.7929-7.793 2.3788 2.3787a2 2 0 0 0 2.8284 0L22 19l4 3.9973ZM26 20.1682l-2.5858-2.5859a2 2 0 0 0-2.8284 0L19 19.1682l-2.377-2.3771L26 7.4141Z"/>
-  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
+  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.0027 0 0 0 4 6V22Z"/>
 </svg>
 `;
 const errorkSVG = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="#dfc3c3" width="32" height="32" viewBox="0 0 32 32" stroke="#dfc3c3">
   <path d="M30 3.4141L28.5859 2 2 28.5859 3.4141 30l2-2H26a2.0027 2.0027 0 0 0 2-2V5.4141ZM26 26H7.4141l7.7929-7.793 2.3788 2.3787a2 2 0 0 0 2.8284 0L22 19l4 3.9973ZM26 20.1682l-2.5858-2.5859a2 2 0 0 0-2.8284 0L19 19.1682l-2.377-2.3771L26 7.4141Z"/>
-  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
+  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.0027 0 0 0 4 6V22Z"/>
 </svg>
 `;
 const fallbackImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(fallbackSVG)}`;
-function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to false
-style, ...rest }) {
+// SVG loader (spinning circle)
+const loaderSVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50">
+  <circle cx="25" cy="25" r="20" stroke="#ccc" stroke-width="5" fill="none" stroke-dasharray="31.415, 31.415">
+    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
+  </circle>
+</svg>
+`;
+const loaderImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(loaderSVG)}`;
+// Inline CSS for loader and image wrapper
+const imageStyles = `
+  .image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f0f0f0; /* Light background for loader */
+  }
+
+  .loader {
+    width: 40px;
+    height: 40px;
+    z-index: 1; /* Ensure loader is above background */
+  }
+
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: opacity 0.3s ease-in-out;
+    z-index: 2; /* Ensure image is above loader */
+  }
+
+  .image-loading {
+    opacity: 0;
+  }
+`;
+function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, style, ...rest }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? '' : source); // Start with empty src if lazy
-    const [isInView, setIsInView] = (0, react_1.useState)(!lazy); // Assume visible if not lazy
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? null : source);
+    const [isInView, setIsInView] = (0, react_1.useState)(!lazy);
     const imgRef = (0, react_1.useRef)(null);
-    // Intersection Observer for lazy loading
     (0, react_1.useEffect)(() => {
-        if (!lazy)
+        if (!lazy) {
+            setIsInView(true); // Ensure non-lazy images load immediately
             return;
-        // Store the current ref value in a variable
+        }
         const currentImgRef = imgRef.current;
         if (!currentImgRef)
             return;
@@ -41,12 +78,12 @@ style, ...rest }) {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     setIsInView(true);
-                    observer.unobserve(entry.target); // Stop observing once the image is in view
+                    observer.unobserve(entry.target);
                 }
             });
         }, {
             rootMargin: '0px',
-            threshold: 0.1, // Trigger when 10% of the image is visible
+            threshold: 0.1,
         });
         observer.observe(currentImgRef);
         return () => {
@@ -55,7 +92,6 @@ style, ...rest }) {
             }
         };
     }, [lazy]);
-    // Load image when in view
     (0, react_1.useEffect)(() => {
         if (!isInView)
             return;
@@ -76,30 +112,30 @@ style, ...rest }) {
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
                 };
                 img.onerror = () => {
-                    setImgSrc(fallbackImageURL); // Set fallback SVG on error
+                    setImgSrc(fallbackImageURL);
                     setIsLoading(false);
                     onError === null || onError === void 0 ? void 0 : onError();
                 };
             }
             catch (error) {
-                setImgSrc(fallbackImageURL); // Set fallback SVG on error
+                setImgSrc(fallbackImageURL);
                 setIsLoading(false);
                 onError === null || onError === void 0 ? void 0 : onError();
             }
         };
         loadImage();
     }, [source, sourceSet, crossOrigin, onLoad, onError, isInView]);
-    // Combine styles for rounded corners
     const combinedStyle = {
         ...(rounded ? { borderRadius: 'var(--p-border-radius-3)' } : {}),
         ...style,
     };
-    return (
-    // eslint-disable-next-line @next/next/no-img-element
-    (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc, style: combinedStyle, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: className, loading: lazy ? 'lazy' : 'eager', onError: (e) => {
-            e.currentTarget.src = fallbackImageURL; // Set fallback SVG on error
-            setIsLoading(false);
-            onError === null || onError === void 0 ? void 0 : onError();
-        } }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: imageStyles }), (0, jsx_runtime_1.jsxs)("div", { style: combinedStyle, className: `image-wrapper ${className || ''}`, children: [isLoading && ((0, jsx_runtime_1.jsx)("img", { src: loaderImageURL, alt: 'Loading', className: 'loader', "aria-hidden": 'true' })), (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc !== null && imgSrc !== void 0 ? imgSrc : undefined, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: `image ${isLoading ? 'image-loading' : ''}`, loading: lazy ? 'lazy' : 'eager', onLoad: () => {
+                            setIsLoading(false); // Ensure isLoading is false on direct load
+                            onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+                        }, onError: (e) => {
+                            e.currentTarget.src = fallbackImageURL;
+                            setIsLoading(false);
+                            onError === null || onError === void 0 ? void 0 : onError();
+                        } })] })] }));
 }
 exports.Image = Image;