fix(react): improve image component and demos

Author: wangdicoder

.changeset/fix-image-component-and-demos.md

@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": patch
+---
+
+Fix image loading, fallback handling, and demo behavior.

packages/react/src/image/__tests__/image.test.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Image from '../index';
 
 describe('<Image />', () => {
   const originalIntersectionObserver = window.IntersectionObserver;
+  const completeDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'complete');
+  const naturalWidthDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'naturalWidth');
 
   afterEach(() => {
     window.IntersectionObserver = originalIntersectionObserver;
+    if (completeDescriptor) {
+      Object.defineProperty(HTMLImageElement.prototype, 'complete', completeDescriptor);
+    }
+    if (naturalWidthDescriptor) {
+      Object.defineProperty(HTMLImageElement.prototype, 'naturalWidth', naturalWidthDescriptor);
+    }
   });
 
   it('should match the snapshot', () => {
@@ -34,6 +42,14 @@ describe('<Image />', () => {
     expect(screen.getByRole('img')).toHaveStyle({ objectFit: 'contain' });
   });
 
+  it('should forward ref to the native img element', () => {
+    const ref = React.createRef<HTMLImageElement>();
+
+    render(<Image src="test.jpg" ref={ref} />);
+
+    expect(ref.current?.tagName).toBe('IMG');
+  });
+
   it('should switch to fallback image when src fails', () => {
     render(<Image src="broken.jpg" fallback="fallback.jpg" alt="cover" />);
 
@@ -58,6 +74,32 @@ describe('<Image />', () => {
     expect(screen.getByTestId('fallback-node')).toBeInTheDocument();
   });
 
+  it('should preserve onError and promote fallback for cached broken images', async () => {
+    Object.defineProperty(HTMLImageElement.prototype, 'complete', {
+      configurable: true,
+      get() {
+        return true;
+      },
+    });
+
+    Object.defineProperty(HTMLImageElement.prototype, 'naturalWidth', {
+      configurable: true,
+      get() {
+        return this.getAttribute('src') === 'broken.jpg' ? 0 : 100;
+      },
+    });
+
+    const handleError = jest.fn();
+
+    render(<Image src="broken.jpg" fallback="fallback.jpg" onError={handleError} alt="cover" />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('img', { name: 'cover' })).toHaveAttribute('src', 'fallback.jpg');
+    });
+
+    expect(handleError).toHaveBeenCalledTimes(1);
+  });
+
   it('should keep lazy image on placeholder before intersecting', () => {
     const observe = jest.fn();
     const unobserve = jest.fn();

packages/react/src/image/demo/Basic.tsx

@@ -2,5 +2,11 @@ import React from 'react';
 import { Image } from '@tiny-design/react';
 
 export default function BasicDemo() {
-  return <Image width="100%" src="https://cdn.pixabay.com/photo/2019/12/30/20/35/snow-4730565__340.jpg" />;
-}
+  return (
+    <Image
+      width="100%"
+      src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&h=420&q=80"
+      alt="Wide mountain lake"
+    />
+  );
+}

packages/react/src/image/demo/CustomFallback.tsx

@@ -1,14 +1,9 @@
 import React from 'react';
-import { Image } from '@tiny-design/react';
+import { Flex, Image } from '@tiny-design/react';
 
 const fallbackStyle: React.CSSProperties = {
   width: '100%',
   height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: 8,
   color: '#475569',
   background:
     'radial-gradient(circle at top, rgba(59, 130, 246, 0.12), rgba(148, 163, 184, 0.12) 45%, rgba(248, 250, 252, 1) 100%)',
@@ -24,10 +19,10 @@ export default function CustomFallbackDemo() {
       src="../avatar/not-exists.png"
       alt="Unavailable landscape"
       fallback={
-        <div style={fallbackStyle}>
+        <Flex vertical align="center" justify="center" gap={8} style={fallbackStyle}>
           <strong style={{ fontSize: 16 }}>Image unavailable</strong>
           <span>The asset could not be loaded.</span>
-        </div>
+        </Flex>
       }
     />
   );

packages/react/src/image/demo/ImageStyle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, Radio, Select, Switch } from '@tiny-design/react';
+import { Flex, Image, Radio, Select, Switch } from '@tiny-design/react';
 
 const OBJECT_FIT_OPTIONS = ['cover', 'contain', 'fill', 'none', 'scale-down'] as const;
 
@@ -87,13 +87,12 @@ export default function ImageStyleDemo() {
   const previewHeight = round ? 160 : 120;
 
   return (
-    <div style={{ display: 'grid', gap: 18 }}>
-      <div
+    <Flex vertical gap={18}>
+      <Flex
+        wrap="wrap"
+        align="center"
+        gap={16}
         style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          alignItems: 'center',
-          gap: 16,
           padding: 16,
           border: '1px solid #e2e8f0',
           borderRadius: 12,
@@ -116,16 +115,16 @@ export default function ImageStyleDemo() {
           <Select value={objectPosition} onChange={(value) => setObjectPosition(String(value))} options={focusOptions} />
         </div>
 
-        <div style={{ display: 'grid', gap: 8 }}>
+        <Flex vertical gap={8}>
           <div style={{ fontSize: 12, color: '#64748b', fontWeight: 600 }}>Round preview</div>
           <Switch checked={round} onChange={setRound} />
-        </div>
-      </div>
+        </Flex>
+      </Flex>
 
-      <div style={{ display: 'grid', gap: 8 }}>
+      <Flex vertical gap={8}>
         <div style={{ fontSize: 12, fontWeight: 600, color: '#64748b' }}>Interactive comparison</div>
-        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'flex-start' }}>
-          <div style={{ display: 'grid', gap: 8 }}>
+        <Flex gap={16} wrap="wrap" align="flex-start">
+          <Flex vertical gap={8}>
             <div style={{ fontSize: 12, color: '#64748b' }}>Tall graphic in a wide frame</div>
             <Image
               width={previewWidth}
@@ -141,9 +140,9 @@ export default function ImageStyleDemo() {
               Best for comparing <code>cover</code>, <code>contain</code>, <code>none</code>, and
               <code> scale-down</code>. Changing the focal point moves the visible band.
             </div>
-          </div>
+          </Flex>
 
-          <div style={{ display: 'grid', gap: 8 }}>
+          <Flex vertical gap={8}>
             <div style={{ fontSize: 12, color: '#64748b' }}>Square graphic in a wide frame</div>
             <Image
               width={previewWidth}
@@ -158,9 +157,9 @@ export default function ImageStyleDemo() {
               Best for spotting <code>fill</code>: <code>contain</code> keeps a centered square, while
               <code> fill</code> stretches the circle and square across the whole frame.
             </div>
-          </div>
+          </Flex>
 
-          <div style={{ display: 'grid', gap: 8 }}>
+          <Flex vertical gap={8}>
             <div style={{ fontSize: 12, color: '#64748b' }}>Small asset in a large frame</div>
             <Image
               width={previewWidth}
@@ -175,13 +174,13 @@ export default function ImageStyleDemo() {
               Useful for seeing why <code>scale-down</code> often matches <code>none</code> when the source is
               already smaller than the frame.
             </div>
-          </div>
-        </div>
+          </Flex>
+        </Flex>
         <div style={{ color: '#64748b', fontSize: 13, lineHeight: 1.5 }}>
           Use the tall preview for crop behavior, the square preview for stretch behavior, and the small preview for
           <code> none</code> versus <code>scale-down</code>.
         </div>
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 }

packages/react/src/image/demo/Lazy.tsx

@@ -12,4 +12,4 @@ export default function LazyDemo() {
       <div style={{ height: 100 }} />
     </div>
   );
-}
+}

packages/react/src/image/demo/Placeholder.tsx

@@ -1,33 +1,43 @@
 import React from 'react';
-import { Image } from '@tiny-design/react';
-
-const shimmerStyle: React.CSSProperties = {
-  width: '100%',
-  height: '100%',
-  background:
-    'linear-gradient(90deg, rgba(15, 23, 42, 0.08) 25%, rgba(15, 23, 42, 0.16) 37%, rgba(15, 23, 42, 0.08) 63%)',
-  backgroundSize: '400% 100%',
-  animation: 'ty-image-demo-shimmer 1.4s ease infinite',
-};
+import { Button, Flex, Image, Skeleton } from '@tiny-design/react';
 
 export default function PlaceholderDemo() {
+  const [requestId, setRequestId] = React.useState(0);
+  const [src, setSrc] = React.useState<string>();
+  const [isReloading, setIsReloading] = React.useState(true);
+
+  React.useEffect(() => {
+    setIsReloading(true);
+    setSrc(undefined);
+
+    const timer = window.setTimeout(() => {
+      setSrc(
+        `https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80&reload=${requestId}`
+      );
+      setIsReloading(false);
+    }, 1400);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [requestId]);
+
   return (
-    <div>
-      <style>
-        {`
-          @keyframes ty-image-demo-shimmer {
-            0% { background-position: 100% 50%; }
-            100% { background-position: 0 50%; }
-          }
-        `}
-      </style>
+    <Flex vertical gap={12}>
+      <Flex justify="space-between" align="center" gap={12}>
+        <div style={{ fontSize: 12, color: '#64748b' }}>Replay the loading state to inspect the custom placeholder.</div>
+        <Button size="sm" onClick={() => setRequestId((id) => id + 1)}>
+          {isReloading ? 'Loading...' : 'Reload'}
+        </Button>
+      </Flex>
       <Image
+        key={requestId}
         width={320}
         height={180}
-        src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80"
+        src={src}
         alt="Mountain lake"
-        placeholder={<span style={shimmerStyle} />}
+        placeholder={<Skeleton active style={{ width: '100%', height: '100%' }} />}
       />
-    </div>
+    </Flex>
   );
 }

packages/react/src/image/demo/Size.tsx

@@ -1,6 +1,26 @@
 import React from 'react';
-import { Image } from '@tiny-design/react';
+import { Flex, Image, Slider } from '@tiny-design/react';
 
 export default function SizeDemo() {
-  return <Image width={250} height={150} src="https://cdn.pixabay.com/photo/2019/12/21/18/31/discus-fish-4711042__340.jpg" />;
-}
+  const [width, setWidth] = React.useState(250);
+  const [height, setHeight] = React.useState(150);
+
+  return (
+    <Flex vertical gap={16}>
+      <Image
+        width={width}
+        height={height}
+        src="https://cdn.pixabay.com/photo/2019/12/21/18/31/discus-fish-4711042__340.jpg"
+        alt="Discus fish"
+      />
+
+      <Flex vertical gap={12}>
+        <div style={{ fontSize: 12, color: '#64748b' }}>Width: {width}px</div>
+        <Slider min={160} max={360} value={width} onChange={(value) => setWidth(Number(value))} />
+
+        <div style={{ fontSize: 12, color: '#64748b' }}>Height: {height}px</div>
+        <Slider min={100} max={260} value={height} onChange={(value) => setHeight(Number(value))} />
+      </Flex>
+    </Flex>
+  );
+}