react-photo-album - npm Package Compare versions

Comparing version 1.16.0 to 1.16.1

dist/index.cjs.js

@@ -259,10 +259,10 @@ 'use strict';
     }))(imageStyle);
-    return ((_b = renderPhoto === null || renderPhoto === void 0 ? void 0 : renderPhoto({
-        photo,
-        layout,
-        layoutOptions,
-        imageProps,
-        renderDefaultPhoto,
-        wrapperStyle,
-    })) !== null && _b !== void 0 ? _b : renderDefaultPhoto());
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_b = renderPhoto === null || renderPhoto === void 0 ? void 0 : renderPhoto({
+            photo,
+            layout,
+            layoutOptions,
+            imageProps,
+            renderDefaultPhoto,
+            wrapperStyle,
+        })) !== null && _b !== void 0 ? _b : renderDefaultPhoto() }));
 };
@@ -286,9 +286,9 @@
     };
-    return (renderRowContainer !== null && renderRowContainer !== void 0 ? renderRowContainer : defaultRenderRowContainer)({
-        layoutOptions,
-        rowIndex,
-        rowsCount,
-        rowContainerProps,
-        children,
-    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (renderRowContainer !== null && renderRowContainer !== void 0 ? renderRowContainer : defaultRenderRowContainer)({
+            layoutOptions,
+            rowIndex,
+            rowsCount,
+            rowContainerProps,
+            children,
+        }) }));
 };
@@ -503,8 +503,8 @@
     };
-    return (renderColumnContainer !== null && renderColumnContainer !== void 0 ? renderColumnContainer : defaultRenderColumnContainer)({
-        layoutOptions,
-        columnContainerProps,
-        children,
-        ...rest,
-    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (renderColumnContainer !== null && renderColumnContainer !== void 0 ? renderColumnContainer : defaultRenderColumnContainer)({
+            layoutOptions,
+            columnContainerProps,
+            children,
+            ...rest,
+        }) }));
 };
@@ -588,70 +588,55 @@
     }
-    return (renderContainer !== null && renderContainer !== void 0 ? renderContainer : defaultRenderContainer)({
-        containerProps,
-        containerRef,
-        layoutOptions,
-        children,
-    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (renderContainer !== null && renderContainer !== void 0 ? renderContainer : defaultRenderContainer)({
+            containerProps,
+            containerRef,
+            layoutOptions,
+            children,
+        }) }));
 };
 
-const useIsomorphicEffect = typeof document !== "undefined" ? react.useLayoutEffect : react.useEffect;
+const useLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 
-const arraysEqual = (a, b) => {
-    if (!a || !b || a.length !== b.length)
-        return false;
-    for (let i = 0, l = a.length; i < l; i++) {
-        if (a[i] !== b[i]) {
-            return false;
-        }
-    }
-    return true;
+const useEventCallback = (fn) => {
+    const ref = react.useRef(fn);
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return react.useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }, []);
 };
-const useArray = (array) => {
-    const ref = react.useRef(array);
-    if (!arraysEqual(array, ref.current)) {
-        ref.current = array;
-    }
-    return ref.current;
-};
 
-const useLatest = (value) => {
-    const ref = react.useRef(value);
-    ref.current = value;
-    return ref;
-};
-
 const useContainerWidth = (resizeObserverProvider, breakpoints) => {
     const [containerWidth, setContainerWidth] = react.useState();
+    const [scrollbarWidth, setScrollbarWidth] = react.useState();
+    const ref = react.useRef(null);
     const observerRef = react.useRef();
-    const breakpointsArray = useArray(breakpoints);
-    const resizeObserverProviderRef = useLatest(resizeObserverProvider);
-    const containerWidthRef = useLatest(containerWidth);
-    const scrollbarWidthRef = react.useRef();
-    const containerRef = react.useCallback((node) => {
-        var _a, _b;
-        if (observerRef.current) {
-            observerRef.current.disconnect();
-            observerRef.current = undefined;
+    const updateWidth = useEventCallback(() => {
+        var _a;
+        let newWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (newWidth !== undefined && breakpoints && breakpoints.length > 0) {
+            const sortedBreakpoints = [...breakpoints.filter((x) => x > 0)].sort((a, b) => b - a);
+            sortedBreakpoints.push(Math.floor(sortedBreakpoints[sortedBreakpoints.length - 1] / 2));
+            const threshold = newWidth;
+            newWidth = sortedBreakpoints.find((breakpoint, index) => breakpoint <= threshold || index === sortedBreakpoints.length - 1);
         }
-        const updateWidth = () => {
-            let newWidth = node === null || node === void 0 ? void 0 : node.clientWidth;
-            if (newWidth !== undefined && breakpointsArray && breakpointsArray.length > 0) {
-                const sortedBreakpoints = [...breakpointsArray.filter((x) => x > 0)].sort((a, b) => b - a);
-                sortedBreakpoints.push(Math.floor(sortedBreakpoints[sortedBreakpoints.length - 1] / 2));
-                const threshold = newWidth;
-                newWidth = sortedBreakpoints.find((breakpoint, index) => breakpoint <= threshold || index === sortedBreakpoints.length - 1);
-            }
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            const previousScrollbarWidth = scrollbarWidthRef.current;
-            scrollbarWidthRef.current = scrollbarWidth;
-            if (containerWidthRef.current !== undefined &&
-                previousScrollbarWidth !== undefined &&
-                newWidth !== undefined &&
-                newWidth > containerWidthRef.current &&
-                newWidth - containerWidthRef.current <= 20 &&
-                scrollbarWidth < previousScrollbarWidth) {
-                return;
-            }
+        const newScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (newScrollbarWidth !== scrollbarWidth) {
+            setScrollbarWidth(newScrollbarWidth);
+        }
+        if (containerWidth !== undefined &&
+            scrollbarWidth !== undefined &&
+            newWidth !== undefined &&
+            newWidth > containerWidth &&
+            newWidth - containerWidth <= 20 &&
+            newScrollbarWidth < scrollbarWidth) {
+            return;
+        }
+        if (newWidth !== containerWidth) {
             setContainerWidth(newWidth);
-        };
+        }
+    });
+    const containerRef = useEventCallback((node) => {
+        var _a, _b;
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        observerRef.current = undefined;
+        ref.current = node;
         updateWidth();
@@ -662,7 +647,7 @@ if (node) {
                     ? new ResizeObserver(updateWidth)
-                    : (_a = resizeObserverProviderRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderRef, updateWidth);
+                    : resizeObserverProvider === null || resizeObserverProvider === void 0 ? void 0 : resizeObserverProvider(updateWidth);
             (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.observe(node);
         }
-    }, [breakpointsArray, resizeObserverProviderRef, containerWidthRef]);
-    return react.useMemo(() => ({ containerRef, containerWidth }), [containerRef, containerWidth]);
+    });
+    return { containerRef, containerWidth };
 };
@@ -705,3 +690,3 @@
     const { containerRef, containerWidth } = useContainerWidth(resizeObserverProvider, breakpoints);
-    useIsomorphicEffect(() => setMounted(true), []);
+    useLayoutEffect(() => setMounted(true), []);
     if (!layout || !["rows", "columns", "masonry"].includes(layout) || !Array.isArray(photos))
@@ -708,0 +693,0 @@ return jsxRuntime.jsx(jsxRuntime.Fragment, {});

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { MouseEvent, ImgHTMLAttributes, ReactElement, CSSProperties, HTMLAttributes, PropsWithChildren, RefCallback, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { MouseEvent, ImgHTMLAttributes, ReactNode, CSSProperties, HTMLAttributes, PropsWithChildren, RefCallback, ForwardRefExoticComponent, RefAttributes } from 'react';
 
@@ -62,3 +62,3 @@ declare type LayoutType = "columns" | "rows" | "masonry";
         wrapped?: boolean;
-    }) => ReactElement;
+    }) => ReactNode;
     /** CSS styles to properly size image wrapper (i.e. <div> wrapper) */
@@ -107,3 +107,3 @@ wrapperStyle: CSSProperties;
 };
-declare type RenderPhoto<T extends Photo = Photo> = (props: PhotoProps<T>) => ReactElement;
+declare type RenderPhoto<T extends Photo = Photo> = (props: PhotoProps<T>) => ReactNode;
 declare type GenericLayoutOptions<T extends Photo = Photo> = {
@@ -161,3 +161,3 @@ /** layout spacing (gaps between photos) */
 /** ForwardRefExoticComponent (forwardRef) variant is deprecated and will be removed in the next major release */
-declare type RenderContainer<T extends Photo = Photo> = ((props: RenderContainerProps<T>) => ReactElement) | ForwardRefExoticComponent<PropsWithChildren<ContainerProps<T>> & RefAttributes<HTMLDivElement>>;
+declare type RenderContainer<T extends Photo = Photo> = ((props: RenderContainerProps<T>) => ReactNode) | ForwardRefExoticComponent<PropsWithChildren<ContainerProps<T>> & RefAttributes<HTMLDivElement>>;
 declare type RowContainerProps<T extends Photo = Photo> = {
@@ -173,3 +173,3 @@ /** layout options */
 };
-declare type RenderRowContainer<T extends Photo = Photo> = (props: PropsWithChildren<RowContainerProps<T>>) => ReactElement;
+declare type RenderRowContainer<T extends Photo = Photo> = (props: PropsWithChildren<RowContainerProps<T>>) => ReactNode;
 declare type ColumnContainerProps<T extends Photo = Photo> = {
@@ -188,3 +188,3 @@ layoutOptions: ColumnsLayoutOptions<T>;
 };
-declare type RenderColumnContainer<T extends Photo = Photo> = (props: PropsWithChildren<ColumnContainerProps<T>>) => ReactElement;
+declare type RenderColumnContainer<T extends Photo = Photo> = (props: PropsWithChildren<ColumnContainerProps<T>>) => ReactNode;
 declare type ResizeObserverProvider = (callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void) => ResizeObserver;
@@ -191,0 +191,0 @@ declare type RowConstraints = {

dist/index.esm.js

 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useLayoutEffect, useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect, useRef, useCallback, useState } from 'react';
 
@@ -255,10 +255,10 @@ const ratio = ({ width, height }) => width / height;
     }))(imageStyle);
-    return ((_b = renderPhoto === null || renderPhoto === void 0 ? void 0 : renderPhoto({
-        photo,
-        layout,
-        layoutOptions,
-        imageProps,
-        renderDefaultPhoto,
-        wrapperStyle,
-    })) !== null && _b !== void 0 ? _b : renderDefaultPhoto());
+    return (jsx(Fragment, { children: (_b = renderPhoto === null || renderPhoto === void 0 ? void 0 : renderPhoto({
+            photo,
+            layout,
+            layoutOptions,
+            imageProps,
+            renderDefaultPhoto,
+            wrapperStyle,
+        })) !== null && _b !== void 0 ? _b : renderDefaultPhoto() }));
 };
@@ -282,9 +282,9 @@
     };
-    return (renderRowContainer !== null && renderRowContainer !== void 0 ? renderRowContainer : defaultRenderRowContainer)({
-        layoutOptions,
-        rowIndex,
-        rowsCount,
-        rowContainerProps,
-        children,
-    });
+    return (jsx(Fragment, { children: (renderRowContainer !== null && renderRowContainer !== void 0 ? renderRowContainer : defaultRenderRowContainer)({
+            layoutOptions,
+            rowIndex,
+            rowsCount,
+            rowContainerProps,
+            children,
+        }) }));
 };
@@ -499,8 +499,8 @@
     };
-    return (renderColumnContainer !== null && renderColumnContainer !== void 0 ? renderColumnContainer : defaultRenderColumnContainer)({
-        layoutOptions,
-        columnContainerProps,
-        children,
-        ...rest,
-    });
+    return (jsx(Fragment, { children: (renderColumnContainer !== null && renderColumnContainer !== void 0 ? renderColumnContainer : defaultRenderColumnContainer)({
+            layoutOptions,
+            columnContainerProps,
+            children,
+            ...rest,
+        }) }));
 };
@@ -584,70 +584,55 @@
     }
-    return (renderContainer !== null && renderContainer !== void 0 ? renderContainer : defaultRenderContainer)({
-        containerProps,
-        containerRef,
-        layoutOptions,
-        children,
-    });
+    return (jsx(Fragment, { children: (renderContainer !== null && renderContainer !== void 0 ? renderContainer : defaultRenderContainer)({
+            containerProps,
+            containerRef,
+            layoutOptions,
+            children,
+        }) }));
 };
 
-const useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const useLayoutEffect = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
 
-const arraysEqual = (a, b) => {
-    if (!a || !b || a.length !== b.length)
-        return false;
-    for (let i = 0, l = a.length; i < l; i++) {
-        if (a[i] !== b[i]) {
-            return false;
-        }
-    }
-    return true;
+const useEventCallback = (fn) => {
+    const ref = useRef(fn);
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }, []);
 };
-const useArray = (array) => {
-    const ref = useRef(array);
-    if (!arraysEqual(array, ref.current)) {
-        ref.current = array;
-    }
-    return ref.current;
-};
 
-const useLatest = (value) => {
-    const ref = useRef(value);
-    ref.current = value;
-    return ref;
-};
-
 const useContainerWidth = (resizeObserverProvider, breakpoints) => {
     const [containerWidth, setContainerWidth] = useState();
+    const [scrollbarWidth, setScrollbarWidth] = useState();
+    const ref = useRef(null);
     const observerRef = useRef();
-    const breakpointsArray = useArray(breakpoints);
-    const resizeObserverProviderRef = useLatest(resizeObserverProvider);
-    const containerWidthRef = useLatest(containerWidth);
-    const scrollbarWidthRef = useRef();
-    const containerRef = useCallback((node) => {
-        var _a, _b;
-        if (observerRef.current) {
-            observerRef.current.disconnect();
-            observerRef.current = undefined;
+    const updateWidth = useEventCallback(() => {
+        var _a;
+        let newWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (newWidth !== undefined && breakpoints && breakpoints.length > 0) {
+            const sortedBreakpoints = [...breakpoints.filter((x) => x > 0)].sort((a, b) => b - a);
+            sortedBreakpoints.push(Math.floor(sortedBreakpoints[sortedBreakpoints.length - 1] / 2));
+            const threshold = newWidth;
+            newWidth = sortedBreakpoints.find((breakpoint, index) => breakpoint <= threshold || index === sortedBreakpoints.length - 1);
         }
-        const updateWidth = () => {
-            let newWidth = node === null || node === void 0 ? void 0 : node.clientWidth;
-            if (newWidth !== undefined && breakpointsArray && breakpointsArray.length > 0) {
-                const sortedBreakpoints = [...breakpointsArray.filter((x) => x > 0)].sort((a, b) => b - a);
-                sortedBreakpoints.push(Math.floor(sortedBreakpoints[sortedBreakpoints.length - 1] / 2));
-                const threshold = newWidth;
-                newWidth = sortedBreakpoints.find((breakpoint, index) => breakpoint <= threshold || index === sortedBreakpoints.length - 1);
-            }
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            const previousScrollbarWidth = scrollbarWidthRef.current;
-            scrollbarWidthRef.current = scrollbarWidth;
-            if (containerWidthRef.current !== undefined &&
-                previousScrollbarWidth !== undefined &&
-                newWidth !== undefined &&
-                newWidth > containerWidthRef.current &&
-                newWidth - containerWidthRef.current <= 20 &&
-                scrollbarWidth < previousScrollbarWidth) {
-                return;
-            }
+        const newScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (newScrollbarWidth !== scrollbarWidth) {
+            setScrollbarWidth(newScrollbarWidth);
+        }
+        if (containerWidth !== undefined &&
+            scrollbarWidth !== undefined &&
+            newWidth !== undefined &&
+            newWidth > containerWidth &&
+            newWidth - containerWidth <= 20 &&
+            newScrollbarWidth < scrollbarWidth) {
+            return;
+        }
+        if (newWidth !== containerWidth) {
             setContainerWidth(newWidth);
-        };
+        }
+    });
+    const containerRef = useEventCallback((node) => {
+        var _a, _b;
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        observerRef.current = undefined;
+        ref.current = node;
         updateWidth();
@@ -658,7 +643,7 @@ if (node) {
                     ? new ResizeObserver(updateWidth)
-                    : (_a = resizeObserverProviderRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderRef, updateWidth);
+                    : resizeObserverProvider === null || resizeObserverProvider === void 0 ? void 0 : resizeObserverProvider(updateWidth);
             (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.observe(node);
         }
-    }, [breakpointsArray, resizeObserverProviderRef, containerWidthRef]);
-    return useMemo(() => ({ containerRef, containerWidth }), [containerRef, containerWidth]);
+    });
+    return { containerRef, containerWidth };
 };
@@ -701,3 +686,3 @@
     const { containerRef, containerWidth } = useContainerWidth(resizeObserverProvider, breakpoints);
-    useIsomorphicEffect(() => setMounted(true), []);
+    useLayoutEffect(() => setMounted(true), []);
     if (!layout || !["rows", "columns", "masonry"].includes(layout) || !Array.isArray(photos))
@@ -704,0 +689,0 @@ return jsx(Fragment, {});

package.json

 {
     "name": "react-photo-album",
-    "version": "1.16.0",
+    "version": "1.16.1",
     "description": "Responsive photo gallery component for React",
@@ -55,4 +55,4 @@ "author": "Igor Danchenko",
         "@types/react-test-renderer": "^18.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.30.6",
-        "@typescript-eslint/parser": "^5.30.6",
+        "@typescript-eslint/eslint-plugin": "^5.30.7",
+        "@typescript-eslint/parser": "^5.30.7",
         "eslint": "^8.20.0",
@@ -59,0 +59,0 @@ "eslint-config-prettier": "^8.5.0",

No alert changes

Worsened metrics

Total package byte prevSize

88072

decreased by-0.65%

Lines of code

1568

decreased by-1.75%

No dependency changes