@lumx/react 3.5.0 → 3.5.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.5.0",
-        "@lumx/icons": "^3.5.0",
+        "@lumx/core": "^3.5.1",
+        "@lumx/icons": "^3.5.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -117,5 +117,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.5.0"
+    "version": "3.5.1"
 }

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { mdiAbTesting } from '@lumx/icons';
+import { mdiAbTesting, mdiImageBroken } from '@lumx/icons';
 import { Alignment, AspectRatio, Badge, FlexBox, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 import { IMAGE_SIZES, imageArgType, IMAGES } from '@lumx/react/stories/controls/image';
@@ -44,6 +44,10 @@ export const IsLoading = {
     args: { ...Simple.args, isLoading: true },
 };
 
+export const WithoutSource = {
+    args: { image: IMAGES.emptyImage, size: Size.xxl, aspectRatio: AspectRatio.square },
+};
+
 /** Thumbnail error fallback and size variants */
 export const ErrorFallback = {
     args: { image: 'foo' },

package/src/components/thumbnail/useImageLoad.ts

@@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
 export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';
 
 function getState(img: HTMLImageElement | null | undefined, event?: Event) {
-    // Error event occurred.
-    if (event?.type === 'error') {
+    // Error event occurred or image has no source.
+    if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {
+        console.log('HAS ERROR');
         return 'hasError';
     }
     // Image is undefined or incomplete.

package/src/stories/controls/image.ts

@@ -15,13 +15,22 @@ const portrait3 = '/demo-assets/portrait3.jpg';
 const square1 = '/demo-assets/square1.jpg';
 const square2 = '/demo-assets/square2.jpg';
 const defaultSvg = '/demo-assets/defaultSvg.svg';
+const emptyImage = '';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
 export const SQUARE_IMAGES = { square1, square2 };
 export const SVG_IMAGES = { defaultSvg };
+export const EMPTY_IMAGES = { emptyImage };
 export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
 export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
-export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES, ...SVG_IMAGES };
+export const IMAGES = {
+    ...LANDSCAPE_IMAGES,
+    ...PORTRAIT_IMAGES,
+    ...SQUARE_IMAGES,
+    ...AVATAR_IMAGES,
+    ...SVG_IMAGES,
+    ...EMPTY_IMAGES,
+};
 
 export const avatarImageArgType = getSelectArgType(AVATAR_IMAGES);
 export const squareImageArgType = getSelectArgType(SQUARE_IMAGES);
@@ -56,10 +65,14 @@ export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> =
 export const SVG_IMAGE_SIZES: Record<keyof typeof SVG_IMAGES, Size> = {
     defaultSvg: { width: 0, height: 0 },
 };
+export const EMPTY_IMAGES_SIZES: Record<keyof typeof EMPTY_IMAGES, Size> = {
+    emptyImage: { width: 0, height: 0 },
+};
 export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
     ...LANDSCAPE_IMAGE_SIZES,
     ...PORTRAIT_IMAGE_SIZES,
     ...SQUARE_IMAGE_SIZES,
     ...AVATAR_IMAGE_SIZES,
     ...SVG_IMAGE_SIZES,
+    ...EMPTY_IMAGES_SIZES,
 };