@lumx/react 2.1.9-alpha-thumbnail3 → 2.1.9-alpha.0

package/src/components/thumbnail/Thumbnail.tsx

@@ -7,6 +7,7 @@ import React, {
     ReactNode,
     Ref,
     useRef,
+    useState,
 } from 'react';
 import classNames from 'classnames';
 
@@ -14,8 +15,10 @@ import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { mdiImageBroken } from '@lumx/icons';
+import { mdiImageBrokenVariant } from '@lumx/icons';
+import { isInternetExplorer } from '@lumx/react/utils/isInternetExplorer';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useFocusPoint } from '@lumx/react/components/thumbnail/useFocusPoint';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
@@ -47,8 +50,6 @@ export interface ThumbnailProps extends GenericProps {
     imgProps?: ImgHTMLProps;
     /** Reference to the native <img> element. */
     imgRef?: Ref<HTMLImageElement>;
-    /** Set to true to force the display of the loading skeleton. */
-    isLoading?: boolean;
     /** Size variant of the component. */
     size?: ThumbnailSize;
     /** Image loading mode. */
@@ -81,18 +82,11 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ThumbnailProps> = {
-    fallback: mdiImageBroken,
+    fallback: mdiImageBrokenVariant,
     loading: 'lazy',
     theme: Theme.light,
 };
 
-function getObjectPosition(aspectRatio: AspectRatio, focusPoint?: FocusPoint) {
-    if (aspectRatio === AspectRatio.original || (!focusPoint?.y && !focusPoint?.x)) return undefined;
-    const x = Math.round(Math.abs(((focusPoint?.x || 0) + 1) / 2) * 100);
-    const y = Math.round(Math.abs(((focusPoint?.y || 0) - 1) / 2) * 100);
-    return `${x}% ${y}%`;
-}
-
 /**
  * Thumbnail component.
  *
@@ -104,7 +98,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const {
         align,
         alt,
-        aspectRatio = AspectRatio.original,
+        aspectRatio,
         badge,
         className,
         crossOrigin,
@@ -114,22 +108,22 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         image,
         imgProps,
         imgRef: propImgRef,
-        isLoading: isLoadingProp,
         loading,
         size,
         theme,
         variant,
         linkProps,
         linkAs,
-        showSkeletonLoading = true,
         ...forwardedProps
     } = props;
     const imgRef = useRef<HTMLImageElement>(null);
 
     // Image loading state.
-    const loadingState = useImageLoad(image, imgRef);
-    const isLoading = isLoadingProp || loadingState === 'isLoading';
+    const loadingState = useImageLoad(imgRef);
     const hasError = loadingState === 'hasError';
+    const isLoading = loadingState === 'isLoading';
+
+    const [wrapper, setWrapper] = useState<HTMLElement>();
 
     const isLink = Boolean(linkProps?.href || linkAs);
     const isButton = !!forwardedProps.onClick;
@@ -144,10 +138,13 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         Wrapper = 'button';
     }
 
+    // Update img style according to focus point and aspect ratio.
+    const style = useFocusPoint({ image, focusPoint, aspectRatio, imgRef, loadingState, wrapper });
+
     return (
         <Wrapper
             {...wrapperProps}
-            ref={ref}
+            ref={mergeRefs(setWrapper, ref) as any}
             className={classNames(
                 linkProps?.className,
                 className,
@@ -159,40 +156,42 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                     theme,
                     variant,
                     isClickable,
-                    hasError,
-                    isLoading: showSkeletonLoading && isLoading,
                     hasBadge: !!badge,
                 }),
+                isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
                 fillHeight && `${CLASSNAME}--fill-height`,
             )}
         >
-            <div className={`${CLASSNAME}__background`}>
+            <div
+                className={`${CLASSNAME}__background`}
+                style={{
+                    ...style?.wrapper,
+                    // Remove from layout if image not loaded correctly (use fallback)
+                    display: hasError ? 'none' : undefined,
+                    // Hide while loading.
+                    visibility: isLoading ? 'hidden' : undefined,
+                }}
+            >
                 <img
                     {...imgProps}
                     style={{
                         ...imgProps?.style,
-                        // Hide on error.
-                        visibility: hasError ? 'hidden' : undefined,
-                        // Focus point.
-                        objectPosition: getObjectPosition(aspectRatio, focusPoint),
+                        ...style?.image,
                     }}
                     ref={mergeRefs(imgRef, propImgRef)}
-                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}
-                    crossOrigin={crossOrigin}
+                    className={style?.image ? `${CLASSNAME}__focused-image` : `${CLASSNAME}__image`}
+                    crossOrigin={crossOrigin && !isInternetExplorer() ? crossOrigin : undefined}
                     src={image}
                     alt={alt}
                     loading={loading}
                 />
-                {!isLoading && hasError && (
-                    <div className={`${CLASSNAME}__fallback`}>
-                        {typeof fallback === 'string' ? (
-                            <Icon icon={fallback} size={Size.xxs} theme={theme} />
-                        ) : (
-                            fallback
-                        )}
-                    </div>
-                )}
             </div>
+            {hasError &&
+                (typeof fallback === 'string' ? (
+                    <Icon className={`${CLASSNAME}__fallback`} icon={fallback} size={size || Size.m} theme={theme} />
+                ) : (
+                    <div className={`${CLASSNAME}__fallback`}>{fallback}</div>
+                ))}
             {badge &&
                 React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}
         </Wrapper>

package/src/components/thumbnail/useFocusPoint.ts

@@ -32,19 +32,15 @@ type Sizes = {
 
 function calculateSizes(
     imageElement?: HTMLImageElement | null | undefined,
-    imageWidthProp?: number,
-    imageHeightProp?: number,
     parentElement?: HTMLElement | null,
     aspectRatio?: AspectRatio,
 ): Sizes | undefined {
-    const imgWidth = imageElement?.naturalWidth || imageWidthProp;
-    const imgHeight = imageElement?.naturalHeight || imageHeightProp;
-    if (!imgHeight || !imgWidth || !parentElement || !aspectRatio || aspectRatio === AspectRatio.original) {
-        return undefined;
-    }
-    const rect = parentElement?.getBoundingClientRect();
-    const containerWidth = Math.ceil(rect?.width || 0);
-    const containerHeight = Math.ceil(rect?.height || 0);
+    if (!imageElement || !parentElement || !aspectRatio || aspectRatio === AspectRatio.original) return undefined;
+    const { naturalWidth: imgWidth, naturalHeight: imgHeight } = imageElement || { naturalWidth: 0, naturalHeight: 0 };
+    const { width: containerWidth, height: containerHeight } = parentElement?.getBoundingClientRect() || {
+        width: 0,
+        height: 0,
+    };
     return { imgWidth, imgHeight, containerWidth, containerHeight, aspectRatio };
 }
 
@@ -94,7 +90,6 @@ function calculateImageStyle(sizes: Sizes, point: Required<FocusPoint>): Styles
     // Minimize image while still filling space
     if (sizes.imgWidth > sizes.containerWidth && sizes.imgHeight > sizes.containerHeight) {
         image[widthRatio > heightRatio ? 'maxHeight' : 'maxWidth'] = '100%';
-        image[widthRatio > heightRatio ? 'maxWidth' : 'maxHeight'] = 'none';
     }
 
     if (widthRatio > heightRatio) {
@@ -114,15 +109,13 @@ function calculateImageStyle(sizes: Sizes, point: Required<FocusPoint>): Styles
  */
 export const useFocusPoint = (options: {
     image: string;
-    imageWidthProp?: number;
-    imageHeightProp?: number;
     focusPoint?: FocusPoint;
     aspectRatio?: AspectRatio;
     imgRef: RefObject<HTMLImageElement>;
     loadingState: LoadingState;
     wrapper?: HTMLElement;
 }): Styles | undefined => {
-    const { image, imageWidthProp, imageHeightProp, aspectRatio, focusPoint, imgRef, loadingState, wrapper } = options;
+    const { image, aspectRatio, focusPoint, imgRef, loadingState, wrapper } = options;
 
     const point = parseFocusPoint(focusPoint);
 
@@ -135,13 +128,12 @@ export const useFocusPoint = (options: {
     const update = useMemo(
         () => {
             const updateFunction = () => {
-                const sizes = calculateSizes(imgRef?.current, imageWidthProp, imageHeightProp, wrapper, aspectRatio);
+                const sizes = calculateSizes(imgRef?.current, wrapper, aspectRatio);
                 if (!sizes || (isEqual(sizes, previousSizes.current) && isEqual(point, previousPoint.current))) {
                     // Nothing changed.
                     return;
                 }
-                const newStyle = calculateImageStyle(sizes, point);
-                setStyle(newStyle);
+                setStyle(calculateImageStyle(sizes, point));
                 previousPoint.current = point;
                 previousSizes.current = sizes;
             };
@@ -149,7 +141,7 @@ export const useFocusPoint = (options: {
             return updateFunction;
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [...Object.values(point), wrapper, aspectRatio],
+        [...Object.values(point), imgRef, wrapper, aspectRatio],
     );
 
     // Update on image loaded.

package/src/components/thumbnail/useImageLoad.ts

@@ -1,40 +1,39 @@
-import { RefObject, useEffect, useState } from 'react';
+import { RefObject, useCallback, useEffect, useState } from 'react';
 
 export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';
 
-function getState(img: HTMLImageElement | null | undefined, event?: Event) {
-    // Error event occurred or image loaded empty.
-    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {
-        return 'hasError';
-    }
-    // Image is undefined or incomplete.
-    if (!img || !img.complete) {
-        return 'isLoading';
-    }
-    // Else loaded.
-    return 'isLoaded';
-}
+export function useImageLoad(imgRef?: RefObject<HTMLImageElement>): LoadingState {
+    const [state, setState] = useState<LoadingState>('isLoading');
 
-export function useImageLoad(imageURL: string, imgRef?: RefObject<HTMLImageElement>): LoadingState {
-    const [state, setState] = useState<LoadingState>(getState(imgRef?.current));
+    const update = useCallback(
+        (event?: any) => {
+            const img = imgRef?.current;
+            if (!img || !img.complete) {
+                setState('isLoading');
+                return;
+            }
 
-    // Update state when changing image URL or DOM reference.
-    useEffect(() => {
-        setState(getState(imgRef?.current));
-    }, [imageURL, imgRef]);
+            if (event?.type === 'error' || (img.complete && img?.naturalWidth === 0)) {
+                setState('hasError');
+                return;
+            }
+
+            setState('isLoaded');
+        },
+        [imgRef],
+    );
 
-    // Listen to `load` and `error` event on image
     useEffect(() => {
         const img = imgRef?.current;
         if (!img) return undefined;
-        const update = (event?: Event) => setState(getState(img, event));
+
+        update();
         img.addEventListener('load', update);
         img.addEventListener('error', update);
         return () => {
             img.removeEventListener('load', update);
             img.removeEventListener('error', update);
         };
-    }, [imgRef, imgRef?.current?.src]);
-
+    }, [update, imgRef, imgRef?.current?.src]);
     return state;
 }

package/src/hooks/useOnResize.ts

@@ -23,12 +23,6 @@ export function useOnResize(element: HTMLElement | Falsy, update: RefObject<Call
                     return;
                 }
 
-                // Do not update on first resize.
-                if (previousSize.current && previousSize.current.height <= 1) {
-                    return;
-                }
-
-                // Do not update if size hasn't really changed.
                 const { width, height } = entry.contentRect;
                 if (previousSize.current?.width === width && previousSize.current?.height === height) {
                     return;

package/src/stories/knobs/image.ts

@@ -6,19 +6,18 @@ const avatar3 = '/demo-assets/avatar3.jpg';
 const avatar4 = '/demo-assets/avatar4.jpg';
 const landscape1 = '/demo-assets/landscape1.jpg';
 const landscape2 = '/demo-assets/landscape2.jpg';
-const landscape1s200 = '/demo-assets/landscape1-s200.jpg';
 const landscape3 = '/demo-assets/landscape3.jpg';
 const portrait1 = '/demo-assets/portrait1.jpg';
-const portrait1s200 = '/demo-assets/portrait1-s200.jpg';
 const portrait2 = '/demo-assets/portrait2.jpg';
 const portrait3 = '/demo-assets/portrait3.jpg';
 const square1 = '/demo-assets/square1.jpg';
 const square2 = '/demo-assets/square2.jpg';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
+
 export const SQUARE_IMAGES = { square1, square2 };
-export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
-export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
+export const LANDSCAPE_IMAGES = { landscape1, landscape2, landscape3 };
+export const PORTRAIT_IMAGES = { portrait1, portrait2, portrait3 };
 
 export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES };
 
@@ -36,34 +35,3 @@ export const squareImageKnob = (name = 'Image', value = Object.values(SQUARE_IMA
 
 export const imageKnob = (name = 'Image', value = Object.values(IMAGES)[0], groupId?: string) =>
     select(name, IMAGES, value, groupId);
-
-type Size = { width: number; height: number };
-
-export const AVATAR_IMAGE_SIZES: Record<keyof typeof AVATAR_IMAGES, Size> = {
-    avatar1: { width: 128, height: 128 },
-    avatar2: { width: 150, height: 150 },
-    avatar3: { width: 128, height: 128 },
-    avatar4: { width: 128, height: 128 },
-};
-export const SQUARE_IMAGE_SIZES: Record<keyof typeof SQUARE_IMAGES, Size> = {
-    square1: { width: 72, height: 72 },
-    square2: { width: 300, height: 300 },
-};
-export const LANDSCAPE_IMAGE_SIZES: Record<keyof typeof LANDSCAPE_IMAGES, Size> = {
-    landscape1: { width: 800, height: 546 },
-    landscape1s200: { width: 200, height: 150 },
-    landscape2: { width: 800, height: 600 },
-    landscape3: { width: 640, height: 480 },
-};
-export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> = {
-    portrait1: { width: 275, height: 500 },
-    portrait1s200: { width: 200, height: 364 },
-    portrait2: { width: 350, height: 500 },
-    portrait3: { width: 300, height: 500 },
-};
-export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
-    ...LANDSCAPE_IMAGE_SIZES,
-    ...PORTRAIT_IMAGE_SIZES,
-    ...SQUARE_IMAGE_SIZES,
-    ...AVATAR_IMAGE_SIZES,
-};

package/types.d.ts

@@ -1237,8 +1237,6 @@ export interface ThumbnailProps extends GenericProps {
 	imgProps?: ImgHTMLProps;
 	/** Reference to the native <img> element. */
 	imgRef?: Ref<HTMLImageElement>;
-	/** Set to true to force the display of the loading skeleton. */
-	isLoading?: boolean;
 	/** Size variant of the component. */
 	size?: ThumbnailSize;
 	/** Image loading mode. */

package/esm/_internal/mdi.js

@@ -1,22 +0,0 @@
-// Material Design Icons v5.8.55
-var mdiAlert = "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z";
-var mdiAlertCircle = "M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiArrowDown = "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z";
-var mdiArrowUp = "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z";
-var mdiCheck = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
-var mdiCheckCircle = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z";
-var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
-var mdiChevronLeft = "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z";
-var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
-var mdiChevronUp = "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z";
-var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
-var mdiCloseCircle = "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z";
-var mdiDragVertical = "M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z";
-var mdiImageBroken = "M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z";
-var mdiInformation = "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiMenuDown = "M7,10L12,15L17,10H7Z";
-var mdiRadioboxBlank = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiRadioboxMarked = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
-
-export { mdiInformation as a, mdiCheckCircle as b, mdiAlertCircle as c, mdiClose as d, mdiCheck as e, mdiChevronRight as f, mdiChevronLeft as g, mdiDragVertical as h, mdiChevronUp as i, mdiChevronDown as j, mdiRadioboxMarked as k, mdiRadioboxBlank as l, mdiAlert as m, mdiCloseCircle as n, mdiMenuDown as o, mdiArrowUp as p, mdiArrowDown as q, mdiImageBroken as r };
-//# sourceMappingURL=mdi.js.map