yet-another-react-lightbox 3.5.4 → 3.7.0

package/dist/plugins/zoom/hooks/useZoomSensors.js

@@ -1,154 +0,0 @@
-import * as React from "react";
-import { cleanup, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, useController, useEventCallback, useLightboxState, } from "../../../core/index.js";
-import { useZoomProps } from "./useZoomProps.js";
-function distance(pointerA, pointerB) {
-    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
-}
-export function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapperRef) {
-    const activePointers = React.useRef([]);
-    const lastPointerDown = React.useRef(0);
-    const pinchZoomDistance = React.useRef();
-    const { globalIndex } = useLightboxState();
-    const { containerRef, subscribeSensors } = useController();
-    const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, } = useZoomProps();
-    const translateCoordinates = React.useCallback((event) => {
-        if (containerRef.current) {
-            const { pageX, pageY } = event;
-            const { scrollX, scrollY } = window;
-            const { left, top, width, height } = containerRef.current.getBoundingClientRect();
-            return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
-        }
-        return [];
-    }, [containerRef]);
-    const onKeyDown = useEventCallback((event) => {
-        const preventDefault = () => {
-            event.preventDefault();
-            event.stopPropagation();
-        };
-        if (zoom > 1) {
-            const move = (deltaX, deltaY) => {
-                preventDefault();
-                changeOffsets(deltaX, deltaY);
-            };
-            if (event.key === "ArrowDown") {
-                move(0, keyboardMoveDistance);
-            }
-            else if (event.key === "ArrowUp") {
-                move(0, -keyboardMoveDistance);
-            }
-            else if (event.key === "ArrowLeft") {
-                move(-keyboardMoveDistance, 0);
-            }
-            else if (event.key === "ArrowRight") {
-                move(keyboardMoveDistance, 0);
-            }
-        }
-        const handleChangeZoom = (zoomValue) => {
-            preventDefault();
-            changeZoom(zoomValue);
-        };
-        const hasMeta = () => event.getModifierState("Meta");
-        if (event.key === "+" || (event.key === "=" && hasMeta())) {
-            handleChangeZoom(zoom * zoomInMultiplier);
-        }
-        else if (event.key === "-" || (event.key === "_" && hasMeta())) {
-            handleChangeZoom(zoom / zoomInMultiplier);
-        }
-        else if (event.key === "0" && hasMeta()) {
-            handleChangeZoom(1);
-        }
-    });
-    const onWheel = useEventCallback((event) => {
-        if (event.ctrlKey || scrollToZoom) {
-            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-                event.stopPropagation();
-                changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
-                return;
-            }
-        }
-        if (zoom > 1) {
-            event.stopPropagation();
-            if (!scrollToZoom) {
-                changeOffsets(event.deltaX, event.deltaY);
-            }
-        }
-    });
-    const clearPointer = React.useCallback((event) => {
-        const pointers = activePointers.current;
-        pointers.splice(0, pointers.length, ...pointers.filter((p) => p.pointerId !== event.pointerId));
-    }, []);
-    const replacePointer = React.useCallback((event) => {
-        clearPointer(event);
-        event.persist();
-        activePointers.current.push(event);
-    }, [clearPointer]);
-    const onPointerDown = useEventCallback((event) => {
-        var _a;
-        const pointers = activePointers.current;
-        if (!((_a = zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-            return;
-        }
-        if (zoom > 1) {
-            event.stopPropagation();
-        }
-        const { timeStamp } = event;
-        if (pointers.length === 0 &&
-            timeStamp - lastPointerDown.current < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
-            lastPointerDown.current = 0;
-            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
-        }
-        else {
-            lastPointerDown.current = timeStamp;
-        }
-        replacePointer(event);
-        if (pointers.length === 2) {
-            pinchZoomDistance.current = distance(pointers[0], pointers[1]);
-        }
-    });
-    const onPointerMove = useEventCallback((event) => {
-        const pointers = activePointers.current;
-        const activePointer = pointers.find((p) => p.pointerId === event.pointerId);
-        if (pointers.length === 2 && pinchZoomDistance.current) {
-            event.stopPropagation();
-            replacePointer(event);
-            const currentDistance = distance(pointers[0], pointers[1]);
-            const delta = currentDistance - pinchZoomDistance.current;
-            if (Math.abs(delta) > 0) {
-                changeZoom(zoom * (1 + delta / pinchZoomDistanceFactor), true, ...pointers
-                    .map((x) => translateCoordinates(x))
-                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
-                pinchZoomDistance.current = currentDistance;
-            }
-            return;
-        }
-        if (zoom > 1) {
-            event.stopPropagation();
-            if (activePointer) {
-                if (pointers.length === 1) {
-                    changeOffsets((activePointer.clientX - event.clientX) / zoom, (activePointer.clientY - event.clientY) / zoom);
-                }
-                replacePointer(event);
-            }
-        }
-    });
-    const onPointerUp = React.useCallback((event) => {
-        const pointers = activePointers.current;
-        if (pointers.length === 2 && pointers.find((p) => p.pointerId === event.pointerId)) {
-            pinchZoomDistance.current = undefined;
-        }
-        clearPointer(event);
-    }, [clearPointer]);
-    const cleanupSensors = React.useCallback(() => {
-        const pointers = activePointers.current;
-        pointers.splice(0, pointers.length);
-        lastPointerDown.current = 0;
-        pinchZoomDistance.current = undefined;
-    }, []);
-    React.useEffect(cleanupSensors, [globalIndex, cleanupSensors]);
-    React.useEffect(() => {
-        if (!disabled) {
-            return cleanup(cleanupSensors, subscribeSensors(EVENT_ON_KEY_DOWN, onKeyDown), subscribeSensors(EVENT_ON_WHEEL, onWheel), subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp));
-        }
-        return () => { };
-    }, [disabled, subscribeSensors, cleanupSensors, onKeyDown, onWheel, onPointerDown, onPointerMove, onPointerUp]);
-}

package/dist/plugins/zoom/hooks/useZoomState.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { ContainerRect } from "../../../types.js";
-export declare function useZoomState(imageRect: ContainerRect, maxZoom: number, zoomWrapperRef?: React.RefObject<HTMLDivElement>): {
-    zoom: number;
-    offsetX: number;
-    offsetY: number;
-    disabled: boolean;
-    changeOffsets: (dx?: number, dy?: number, targetZoom?: number) => void;
-    changeZoom: (value: number, rapid?: boolean, dx?: number, dy?: number) => void;
-    zoomIn: () => void;
-    zoomOut: () => void;
-};

package/dist/plugins/zoom/hooks/useZoomState.js

@@ -1,63 +0,0 @@
-import * as React from "react";
-import { isImageSlide, round, useController, useEventCallback, useLayoutEffect, useLightboxState, } from "../../../core/index.js";
-import { useZoomProps } from "./useZoomProps.js";
-import { useZoomAnimation } from "./useZoomAnimation.js";
-function getCurrentSource(slides, currentIndex) {
-    if (currentIndex < slides.length) {
-        const slide = slides[currentIndex];
-        if (isImageSlide(slide))
-            return slide.src;
-    }
-    return undefined;
-}
-export function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
-    const [zoom, setZoom] = React.useState(1);
-    const [offsetX, setOffsetX] = React.useState(0);
-    const [offsetY, setOffsetY] = React.useState(0);
-    const animate = useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef);
-    const { slides, currentIndex, globalIndex } = useLightboxState();
-    const { containerRect, slideRect } = useController();
-    const { zoomInMultiplier } = useZoomProps();
-    const currentSource = getCurrentSource(slides, currentIndex);
-    const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
-    useLayoutEffect(() => {
-        setZoom(1);
-        setOffsetX(0);
-        setOffsetY(0);
-    }, [globalIndex, currentSource]);
-    const changeOffsets = React.useCallback((dx, dy, targetZoom) => {
-        const newZoom = targetZoom || zoom;
-        const newOffsetX = offsetX - (dx || 0);
-        const newOffsetY = offsetY - (dy || 0);
-        const maxOffsetX = (imageRect.width * newZoom - slideRect.width) / 2 / newZoom;
-        const maxOffsetY = (imageRect.height * newZoom - slideRect.height) / 2 / newZoom;
-        setOffsetX(Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX));
-        setOffsetY(Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY));
-    }, [zoom, offsetX, offsetY, slideRect, imageRect.width, imageRect.height]);
-    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
-        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
-        if (newZoom === zoom)
-            return;
-        if (!rapid) {
-            animate();
-        }
-        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
-        setZoom(newZoom);
-    }, [zoom, maxZoom, changeOffsets, animate]);
-    const handleControllerRectChange = useEventCallback(() => {
-        if (zoom > 1) {
-            if (zoom > maxZoom) {
-                changeZoom(maxZoom, true);
-            }
-            changeOffsets();
-        }
-    });
-    useLayoutEffect(handleControllerRectChange, [
-        containerRect.width,
-        containerRect.height,
-        handleControllerRectChange,
-    ]);
-    const zoomIn = React.useCallback(() => changeZoom(zoom * zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
-    const zoomOut = React.useCallback(() => changeZoom(zoom / zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
-    return { zoom, offsetX, offsetY, disabled, changeOffsets, changeZoom, zoomIn, zoomOut };
-}

package/dist/plugins/zoom/props.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { LightboxProps } from "../../types.js";
-export declare const defaultZoomProps: {
-    maxZoomPixelRatio: number;
-    zoomInMultiplier: number;
-    doubleTapDelay: number;
-    doubleClickDelay: number;
-    doubleClickMaxStops: number;
-    keyboardMoveDistance: number;
-    wheelZoomDistanceFactor: number;
-    pinchZoomDistanceFactor: number;
-    scrollToZoom: boolean;
-};
-export declare const resolveZoomProps: (zoom: LightboxProps["zoom"]) => {
-    ref?: import("react").ForwardedRef<import("../../types.js").ZoomRef> | undefined;
-    maxZoomPixelRatio: number;
-    zoomInMultiplier: number;
-    doubleTapDelay: number;
-    doubleClickDelay: number;
-    doubleClickMaxStops: number;
-    keyboardMoveDistance: number;
-    wheelZoomDistanceFactor: number;
-    pinchZoomDistanceFactor: number;
-    scrollToZoom: boolean;
-};

package/dist/plugins/zoom/props.js

@@ -1,15 +0,0 @@
-export const defaultZoomProps = {
-    maxZoomPixelRatio: 1,
-    zoomInMultiplier: 2,
-    doubleTapDelay: 300,
-    doubleClickDelay: 500,
-    doubleClickMaxStops: 2,
-    keyboardMoveDistance: 50,
-    wheelZoomDistanceFactor: 100,
-    pinchZoomDistanceFactor: 100,
-    scrollToZoom: false,
-};
-export const resolveZoomProps = (zoom) => ({
-    ...defaultZoomProps,
-    ...zoom,
-});

package/dist/props.d.ts

@@ -1,2 +0,0 @@
-import { LightboxProps } from "./types.js";
-export declare const LightboxDefaultProps: LightboxProps;

package/dist/props.js

@@ -1,38 +0,0 @@
-import { ACTION_CLOSE, IMAGE_FIT_CONTAIN } from "./core/consts.js";
-export const LightboxDefaultProps = {
-    open: false,
-    close: () => { },
-    index: 0,
-    slides: [],
-    render: {},
-    plugins: [],
-    toolbar: { buttons: [ACTION_CLOSE] },
-    labels: {},
-    animation: {
-        fade: 250,
-        swipe: 500,
-        easing: {
-            fade: "ease",
-            swipe: "ease-out",
-            navigation: "ease-in-out",
-        },
-    },
-    carousel: {
-        finite: false,
-        preload: 2,
-        padding: "16px",
-        spacing: "30%",
-        imageFit: IMAGE_FIT_CONTAIN,
-    },
-    controller: {
-        ref: null,
-        focus: true,
-        aria: false,
-        touchAction: "none",
-        closeOnBackdropClick: false,
-    },
-    portal: {},
-    on: {},
-    styles: {},
-    className: "",
-};