@lumx/react 2.1.8 → 2.1.9-alpha-thumbnail4

package/src/components/thumbnail/Thumbnail.tsx

@@ -7,7 +7,6 @@ import React, {
     ReactNode,
     Ref,
     useRef,
-    useState,
 } from 'react';
 import classNames from 'classnames';
 
@@ -15,10 +14,8 @@ import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { mdiImageBrokenVariant } from '@lumx/icons';
-import { isInternetExplorer } from '@lumx/react/utils/isInternetExplorer';
+import { mdiImageBroken } from '@lumx/icons';
 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';
 
@@ -50,6 +47,8 @@ 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. */
@@ -82,11 +81,18 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ThumbnailProps> = {
-    fallback: mdiImageBrokenVariant,
+    fallback: mdiImageBroken,
     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.
  *
@@ -98,7 +104,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const {
         align,
         alt,
-        aspectRatio,
+        aspectRatio = AspectRatio.original,
         badge,
         className,
         crossOrigin,
@@ -108,22 +114,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(imgRef);
+    const loadingState = useImageLoad(image, imgRef);
+    const isLoading = isLoadingProp || loadingState === 'isLoading';
     const hasError = loadingState === 'hasError';
-    const isLoading = loadingState === 'isLoading';
-
-    const [wrapper, setWrapper] = useState<HTMLElement>();
 
     const isLink = Boolean(linkProps?.href || linkAs);
     const isButton = !!forwardedProps.onClick;
@@ -138,13 +144,10 @@ 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={mergeRefs(setWrapper, ref) as any}
+            ref={ref}
             className={classNames(
                 linkProps?.className,
                 className,
@@ -156,42 +159,40 @@ 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`}
-                style={{
-                    ...style?.wrapper,
-                    // Remove from layout if image not loaded correctly (use fallback)
-                    display: hasError ? 'none' : undefined,
-                    // Hide while loading.
-                    visibility: isLoading ? 'hidden' : undefined,
-                }}
-            >
+            <div className={`${CLASSNAME}__background`}>
                 <img
                     {...imgProps}
                     style={{
                         ...imgProps?.style,
-                        ...style?.image,
+                        // Hide on error.
+                        visibility: hasError ? 'hidden' : undefined,
+                        // Focus point.
+                        objectPosition: getObjectPosition(aspectRatio, focusPoint),
                     }}
                     ref={mergeRefs(imgRef, propImgRef)}
-                    className={style?.image ? `${CLASSNAME}__focused-image` : `${CLASSNAME}__image`}
-                    crossOrigin={crossOrigin && !isInternetExplorer() ? crossOrigin : undefined}
+                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}
+                    crossOrigin={crossOrigin}
                     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/__snapshots__/Thumbnail.test.tsx.snap

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`] = `
-<button
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
+<div
+  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light"
   onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="lumx-thumbnail__background"
@@ -22,57 +25,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
       style={Object {}}
     />
   </div>
-</button>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCustomLink' 1`] = `
-<CustomLinkComponent
-  className="custom-class-name lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
-  href="https://google.fr"
->
-  <div
-    className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
-  >
-    <img
-      alt="Click me"
-      className="lumx-thumbnail__image"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={Object {}}
-    />
-  </div>
-</CustomLinkComponent>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink' 1`] = `
-<a
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
-  href="https://google.fr"
->
-  <div
-    className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
-  >
-    <img
-      alt="Click me"
-      className="lumx-thumbnail__image"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={Object {}}
-    />
-  </div>
-</a>
+</div>
 `;
 
 exports[`<Thumbnail> Snapshots and structure should render story 'CustomFallback' 1`] = `

package/src/components/thumbnail/useFocusPoint.ts

@@ -32,15 +32,19 @@ type Sizes = {
 
 function calculateSizes(
     imageElement?: HTMLImageElement | null | undefined,
+    imageWidthProp?: number,
+    imageHeightProp?: number,
     parentElement?: HTMLElement | null,
     aspectRatio?: AspectRatio,
 ): Sizes | undefined {
-    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,
-    };
+    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);
     return { imgWidth, imgHeight, containerWidth, containerHeight, aspectRatio };
 }
 
@@ -90,6 +94,7 @@ 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) {
@@ -109,13 +114,15 @@ 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, aspectRatio, focusPoint, imgRef, loadingState, wrapper } = options;
+    const { image, imageWidthProp, imageHeightProp, aspectRatio, focusPoint, imgRef, loadingState, wrapper } = options;
 
     const point = parseFocusPoint(focusPoint);
 
@@ -128,12 +135,13 @@ export const useFocusPoint = (options: {
     const update = useMemo(
         () => {
             const updateFunction = () => {
-                const sizes = calculateSizes(imgRef?.current, wrapper, aspectRatio);
+                const sizes = calculateSizes(imgRef?.current, imageWidthProp, imageHeightProp, wrapper, aspectRatio);
                 if (!sizes || (isEqual(sizes, previousSizes.current) && isEqual(point, previousPoint.current))) {
                     // Nothing changed.
                     return;
                 }
-                setStyle(calculateImageStyle(sizes, point));
+                const newStyle = calculateImageStyle(sizes, point);
+                setStyle(newStyle);
                 previousPoint.current = point;
                 previousSizes.current = sizes;
             };
@@ -141,7 +149,7 @@ export const useFocusPoint = (options: {
             return updateFunction;
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [...Object.values(point), imgRef, wrapper, aspectRatio],
+        [...Object.values(point), wrapper, aspectRatio],
     );
 
     // Update on image loaded.

package/src/components/thumbnail/useImageLoad.ts

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

package/src/components/user-block/UserBlock.stories.tsx

@@ -6,12 +6,11 @@ import { UserBlock } from './UserBlock';
 
 export default { title: 'LumX components/user-block/UserBlock' };
 
-export const Sizes = ({ theme }: any) => {
+export const Sizes = () => {
     const logAction = (action: string) => () => console.log(action);
     return [Size.s, Size.m, Size.l].map((size: any) => (
         <div className="demo-grid" key={size}>
             <UserBlock
-                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
@@ -24,34 +23,11 @@ export const Sizes = ({ theme }: any) => {
     ));
 };
 
-export const WithLinks = ({ theme }: any) => {
-    const logAction = (action: string) => () => console.log(action);
-    return [Size.s, Size.m, Size.l].map((size: any) => (
-        <div className="demo-grid" key={size}>
-            <UserBlock
-                theme={theme}
-                name="Emmitt O. Lum"
-                linkProps={{
-                    href: 'https://www.lumapps.com',
-                    target: '_blank',
-                }}
-                fields={['Creative developer', 'Denpasar']}
-                avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
-                size={size}
-                onMouseEnter={logAction('Mouse entered')}
-                onMouseLeave={logAction('Mouse left')}
-                onClick={logAction('UserBlock clicked')}
-            />
-        </div>
-    ));
-};
-
-export const WithBadge = ({ theme }: any) => {
+export const WithBadge = () => {
     const logAction = (action: string) => () => console.log(action);
     return (
         <div className="demo-grid">
             <UserBlock
-                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{
@@ -66,19 +42,19 @@ export const WithBadge = ({ theme }: any) => {
                 size={Size.m}
                 onMouseEnter={logAction('Mouse entered')}
                 onMouseLeave={logAction('Mouse left')}
+                onClick={logAction('UserBlock clicked')}
             />
         </div>
     );
 };
 
-export const InList = ({ theme }: any) => {
+export const InList = () => {
     const logAction = (action: string) => () => console.log(action);
     return (
         <div className="demo-grid">
             <List itemPadding={Size.big}>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
-                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -98,7 +74,6 @@ export const InList = ({ theme }: any) => {
                 </ListItem>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
-                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -118,7 +93,6 @@ export const InList = ({ theme }: any) => {
                 </ListItem>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
-                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{

package/src/components/user-block/UserBlock.tsx

@@ -5,8 +5,6 @@ import classNames from 'classnames';
 import { Avatar, Orientation, Size, Theme } from '@lumx/react';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
-import { isEmpty } from 'lodash';
-import { renderLink } from '@lumx/react/utils/renderLink';
 import { AvatarProps } from '../avatar/Avatar';
 
 /**
@@ -20,10 +18,6 @@ export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
 export interface UserBlockProps extends GenericProps {
     /** Props to pass to the avatar. */
     avatarProps?: AvatarProps;
-    /** Props to pass to the link wrapping the avatar 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;
     /** Simple action toolbar content. */
     simpleAction?: ReactNode;
     /** Multiple action toolbar content. */
@@ -86,8 +80,6 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         simpleAction,
         size,
         theme,
-        linkProps,
-        linkAs,
         ...forwardedProps
     } = props;
     let componentSize = size;
@@ -99,29 +91,12 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
 
     const shouldDisplayActions: boolean = orientation === Orientation.vertical;
 
-    const isLink = Boolean(linkProps?.href || linkAs);
-    const isClickable = !!onClick || isLink;
-
-    const nameBlock: ReactNode = React.useMemo(() => {
-        if (isEmpty(name)) {
-            return null;
-        }
-        const nameClassName = classNames(
-            handleBasicClasses({ prefix: `${CLASSNAME}__name`, isClickable }),
-            isLink && linkProps?.className,
-        );
-        if (isLink) {
-            return renderLink({ ...linkProps, linkAs, className: nameClassName }, name);
-        }
-        if (onClick) {
-            return (
-                <button onClick={onClick} type="button" className={nameClassName}>
-                    {name}
-                </button>
-            );
-        }
-        return <span className={nameClassName}>{name}</span>;
-    }, [isClickable, isLink, linkAs, linkProps, name, onClick]);
+    const nameBlock: ReactNode = name && (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions
+        <span className={`${CLASSNAME}__name`} onClick={onClick} tabIndex={onClick ? 0 : -1}>
+            {name}
+        </span>
+    );
 
     const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
         <div className={`${CLASSNAME}__fields`}>
@@ -139,21 +114,21 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
             {...forwardedProps}
             className={classNames(
                 className,
-                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),
+                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),
             )}
             onMouseLeave={onMouseLeave}
             onMouseEnter={onMouseEnter}
         >
             {avatarProps && (
-                <Avatar
-                    linkAs={linkAs}
-                    linkProps={linkProps}
-                    {...avatarProps}
-                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}
-                    size={componentSize}
-                    onClick={onClick}
-                    theme={theme}
-                />
+                <div className={`${CLASSNAME}__avatar`}>
+                    <Avatar
+                        {...avatarProps}
+                        size={componentSize}
+                        onClick={onClick}
+                        tabIndex={onClick ? 0 : -1}
+                        theme={theme}
+                    />
+                </div>
             )}
             {(fields || name) && (
                 <div className={`${CLASSNAME}__wrapper`}>