@lumx/react 2.1.6 → 2.1.9-alpha-thumbnail

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

@@ -31,7 +31,10 @@ export const WithLinks = ({ theme }: any) => {
             <UserBlock
                 theme={theme}
                 name="Emmitt O. Lum"
-                linkProps={{ href: 'https://www.lumapps.com', target: '_blank' }}
+                linkProps={{
+                    href: 'https://www.lumapps.com',
+                    target: '_blank',
+                }}
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
                 size={size}

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

@@ -146,6 +146,7 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         >
             {avatarProps && (
                 <Avatar
+                    linkAs={linkAs}
                     linkProps={linkProps}
                     {...avatarProps}
                     className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}

package/src/hooks/useOnResize.ts

@@ -23,6 +23,12 @@ 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,18 +6,19 @@ 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, landscape2, landscape3 };
-export const PORTRAIT_IMAGES = { portrait1, portrait2, portrait3 };
+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 };
 
@@ -35,3 +36,34 @@ 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,6 +1237,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. */

package/esm/_internal/clamp.js

@@ -1,22 +0,0 @@
-/**
- * Clamp value in range.
- *
- * @param value Value to clamp.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Clamped value.
- */
-var clamp = function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-
-  if (value > max) {
-    return max;
-  }
-
-  return value;
-};
-
-export { clamp as c };
-//# sourceMappingURL=clamp.js.map

package/esm/_internal/clamp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp.ts"],"sourcesContent":["/**\n * Clamp value in range.\n *\n * @param value Value to clamp.\n * @param min   Minimum value.\n * @param max   Maximum value.\n * @return Clamped value.\n */\nexport const clamp = (value: number, min: number, max: number): number => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n"],"names":["clamp","value","min","max"],"mappings":"AAAA;;;;;;;;IAQaA,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD,EAAgBC,GAAhB,EAA6BC,GAA7B,EAAqD;AACtE,MAAIF,KAAK,GAAGC,GAAZ,EAAiB;AACb,WAAOA,GAAP;AACH;;AACD,MAAID,KAAK,GAAGE,GAAZ,EAAiB;AACb,WAAOA,GAAP;AACH;;AACD,SAAOF,KAAP;AACH;;;;"}