@lumx/react 2.1.9-alpha-thumbnail4 → 2.1.9-prefer-css-color-variables2

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

@@ -5,16 +5,7 @@ import 'jest-enzyme';
 import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
-import {
-    Clickable,
-    ClickableCustomLink,
-    ClickableLink,
-    ErrorCustomFallback,
-    Default,
-    ErrorFallback,
-    ErrorCustomIconFallback,
-    WithBadge,
-} from './Thumbnail.stories';
+import { Clickable, CustomFallback, Default, DefaultFallback, IconFallback, WithBadge } from './Thumbnail.stories';
 
 const CLASSNAME = Thumbnail.className as string;
 
@@ -31,16 +22,7 @@ describe(`<${Thumbnail.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
         itShouldRenderStories(
-            {
-                Default,
-                Clickable,
-                ClickableLink,
-                ClickableCustomLink,
-                ErrorFallback,
-                ErrorCustomFallback,
-                ErrorCustomIconFallback,
-                WithBadge,
-            },
+            { Default, Clickable, DefaultFallback, CustomFallback, IconFallback, WithBadge },
             Thumbnail,
         );
     });

package/src/components/thumbnail/Thumbnail.tsx

@@ -7,6 +7,7 @@ import React, {
     ReactNode,
     Ref,
     useRef,
+    useState,
 } from 'react';
 import classNames from 'classnames';
 
@@ -14,9 +15,12 @@ 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 { useClickable } from '@lumx/react/components/thumbnail/useClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -47,8 +51,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. */
@@ -61,10 +63,6 @@ export interface ThumbnailProps extends GenericProps {
     theme?: Theme;
     /** Variant of the component. */
     variant?: ThumbnailVariant;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
 }
 
 /**
@@ -81,18 +79,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 +95,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const {
         align,
         alt,
-        aspectRatio = AspectRatio.original,
+        aspectRatio,
         badge,
         className,
         crossOrigin,
@@ -114,88 +105,71 @@ 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 isLink = Boolean(linkProps?.href || linkAs);
-    const isButton = !!forwardedProps.onClick;
-    const isClickable = isButton || isLink;
+    const [wrapper, setWrapper] = useState<HTMLElement>();
+    const wrapperProps: any = {
+        ...forwardedProps,
+        ref: mergeRefs(setWrapper, ref),
+        className: classNames(
+            className,
+            handleBasicClasses({ align, aspectRatio, prefix: CLASSNAME, size, theme, variant, hasBadge: !!badge }),
+            isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
+            fillHeight && `${CLASSNAME}--fill-height`,
+        ),
+        // Handle clickable Thumbnail a11y.
+        ...useClickable(props),
+    };
 
-    let Wrapper: any = 'div';
-    const wrapperProps = { ...forwardedProps };
-    if (isLink) {
-        Wrapper = linkAs || 'a';
-        Object.assign(wrapperProps, linkProps);
-    } else if (isButton) {
-        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}
-            className={classNames(
-                linkProps?.className,
-                className,
-                handleBasicClasses({
-                    align,
-                    aspectRatio,
-                    prefix: CLASSNAME,
-                    size,
-                    theme,
-                    variant,
-                    isClickable,
-                    hasError,
-                    isLoading: showSkeletonLoading && isLoading,
-                    hasBadge: !!badge,
-                }),
-                fillHeight && `${CLASSNAME}--fill-height`,
-            )}
-        >
-            <div className={`${CLASSNAME}__background`}>
+        <div {...wrapperProps}>
+            <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>
+        </div>
     );
 });
 Thumbnail.displayName = COMPONENT_NAME;

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/generated/List/Demos.stories.tsx

@@ -4,6 +4,8 @@
 export default { title: 'LumX components/list/List Demos' };
 
 export { App as Big } from './big';
+export { App as Clickable } from './clickable';
 export { App as Huge } from './huge';
+export { App as Paddings } from './paddings';
 export { App as Regular } from './regular';
 export { App as Tiny } from './tiny';

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

@@ -1233,8 +1233,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. */
@@ -1247,10 +1245,6 @@ export interface ThumbnailProps extends GenericProps {
 	theme?: Theme;
 	/** Variant of the component. */
 	variant?: ThumbnailVariant;
-	/** Props to pass to the link wrapping the thumbnail. */
-	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-	/** Custom react component for the link (can be used to inject react router Link). */
-	linkAs?: "a" | any;
 }
 /**
  * Thumbnail component.