yet-another-react-lightbox 3.12.2 → 3.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +11 -12
- package/README.md +97 -81
- package/dist/index.d.ts +3 -2
- package/dist/index.js +5 -2
- package/dist/plugins/thumbnails/index.js +4 -5
- package/dist/plugins/zoom/index.d.ts +2 -0
- package/dist/plugins/zoom/index.js +3 -3
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -2,20 +2,19 @@ MIT License
|
|
|
2
2
|
|
|
3
3
|
Copyright (c) 2022 Igor Danchenko
|
|
4
4
|
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
6
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
7
|
+
the Software without restriction, including without limitation the rights to
|
|
8
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
9
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
10
|
+
subject to the following conditions:
|
|
11
11
|
|
|
12
12
|
The above copyright notice and this permission notice shall be included in all
|
|
13
13
|
copies or substantial portions of the Software.
|
|
14
14
|
|
|
15
15
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
SOFTWARE.
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
17
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
18
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
19
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
20
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# Yet Another React Lightbox
|
|
2
2
|
|
|
3
|
-
Modern React lightbox component. Performant, easy to use, customizable and
|
|
3
|
+
Modern React lightbox component. Performant, easy to use, customizable and
|
|
4
|
+
extendable.
|
|
4
5
|
|
|
5
6
|
## Overview
|
|
6
7
|
|
|
@@ -8,17 +9,20 @@ Modern React lightbox component. Performant, easy to use, customizable and exten
|
|
|
8
9
|
[](https://bundlephobia.com/package/yet-another-react-lightbox)
|
|
9
10
|
[](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
|
|
10
11
|
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
-
|
|
17
|
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
12
|
+
- **Built for React:** works with React 18, 17 and 16.8.0+
|
|
13
|
+
- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
|
|
14
|
+
- **Preloading:** never displays partially downloaded images
|
|
15
|
+
- **Performance:** preloads limited number of images without compromising
|
|
16
|
+
performance or UX
|
|
17
|
+
- **Responsive:** responsive images with automatic resolution switching are
|
|
18
|
+
supported out of the box
|
|
19
|
+
- **Video:** video slides are supported via an optional plugin
|
|
20
|
+
- **Zoom:** image zoom is supported via an optional plugin
|
|
21
|
+
- **Customization:** customize any UI element or add your own custom slides
|
|
22
|
+
- **No bloat:** never bundle rarely used features; add optional features via
|
|
23
|
+
plugins
|
|
24
|
+
- **TypeScript:** type definitions come built-in in the package
|
|
25
|
+
- **RTL:** compatible with RTL layout
|
|
22
26
|
|
|
23
27
|
|
|
24
28
|
|
|
@@ -36,12 +40,6 @@ Modern React lightbox component. Performant, easy to use, customizable and exten
|
|
|
36
40
|
npm install yet-another-react-lightbox
|
|
37
41
|
```
|
|
38
42
|
|
|
39
|
-
or
|
|
40
|
-
|
|
41
|
-
```shell
|
|
42
|
-
yarn add yet-another-react-lightbox
|
|
43
|
-
```
|
|
44
|
-
|
|
45
43
|
## Minimal Setup Example
|
|
46
44
|
|
|
47
45
|
```jsx
|
|
@@ -50,30 +48,36 @@ import Lightbox from "yet-another-react-lightbox";
|
|
|
50
48
|
import "yet-another-react-lightbox/styles.css";
|
|
51
49
|
|
|
52
50
|
export default function App() {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
51
|
+
const [open, setOpen] = React.useState(false);
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<>
|
|
55
|
+
<button type="button" onClick={() => setOpen(true)}>
|
|
56
|
+
Open Lightbox
|
|
57
|
+
</button>
|
|
58
|
+
|
|
59
|
+
<Lightbox
|
|
60
|
+
open={open}
|
|
61
|
+
close={() => setOpen(false)}
|
|
62
|
+
slides={[
|
|
63
|
+
{ src: "/image1.jpg" },
|
|
64
|
+
{ src: "/image2.jpg" },
|
|
65
|
+
{ src: "/image3.jpg" },
|
|
66
|
+
]}
|
|
67
|
+
/>
|
|
68
|
+
</>
|
|
69
|
+
);
|
|
68
70
|
}
|
|
69
71
|
```
|
|
70
72
|
|
|
71
73
|
## Recommended Setup
|
|
72
74
|
|
|
73
|
-
Unlike many other lightbox libraries, Yet Another React Lightbox doesn't have a
|
|
74
|
-
(or "full size") images. We use responsive
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
Unlike many other lightbox libraries, Yet Another React Lightbox doesn't have a
|
|
76
|
+
concept of "thumbnail" or "original" (or "full size") images. We use responsive
|
|
77
|
+
images instead and recommend you provide multiple files of different resolutions
|
|
78
|
+
for each image. Yet Another React Lightbox automatically populates `srcset` /
|
|
79
|
+
`sizes` attributes and lets the browser decide which image is more appropriate
|
|
80
|
+
for its viewport size.
|
|
77
81
|
|
|
78
82
|
```jsx
|
|
79
83
|
import * as React from "react";
|
|
@@ -81,59 +85,71 @@ import Lightbox from "yet-another-react-lightbox";
|
|
|
81
85
|
import "yet-another-react-lightbox/styles.css";
|
|
82
86
|
|
|
83
87
|
export default function App() {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
88
|
+
const [open, setOpen] = React.useState(false);
|
|
89
|
+
|
|
90
|
+
return (
|
|
91
|
+
<>
|
|
92
|
+
<button type="button" onClick={() => setOpen(true)}>
|
|
93
|
+
Open Lightbox
|
|
94
|
+
</button>
|
|
95
|
+
|
|
96
|
+
<Lightbox
|
|
97
|
+
open={open}
|
|
98
|
+
close={() => setOpen(false)}
|
|
99
|
+
slides={[
|
|
100
|
+
{
|
|
101
|
+
src: "/image1x3840.jpg",
|
|
102
|
+
alt: "image 1",
|
|
103
|
+
width: 3840,
|
|
104
|
+
height: 2560,
|
|
105
|
+
srcSet: [
|
|
106
|
+
{ src: "/image1x320.jpg", width: 320, height: 213 },
|
|
107
|
+
{ src: "/image1x640.jpg", width: 640, height: 427 },
|
|
108
|
+
{ src: "/image1x1200.jpg", width: 1200, height: 800 },
|
|
109
|
+
{ src: "/image1x2048.jpg", width: 2048, height: 1365 },
|
|
110
|
+
{ src: "/image1x3840.jpg", width: 3840, height: 2560 },
|
|
111
|
+
],
|
|
112
|
+
},
|
|
113
|
+
// ...
|
|
114
|
+
]}
|
|
115
|
+
/>
|
|
116
|
+
</>
|
|
117
|
+
);
|
|
114
118
|
}
|
|
115
119
|
```
|
|
116
120
|
|
|
117
|
-
You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby
|
|
118
|
-
|
|
121
|
+
You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby
|
|
122
|
+
Image) via a custom render function. See
|
|
123
|
+
[examples](https://yet-another-react-lightbox.com/examples) on the documentation
|
|
124
|
+
website.
|
|
119
125
|
|
|
120
126
|
## Plugins
|
|
121
127
|
|
|
122
|
-
Yet Another React Lightbox allows you to add optional features to your project
|
|
128
|
+
Yet Another React Lightbox allows you to add optional features to your project
|
|
129
|
+
based on your requirements via plugins.
|
|
123
130
|
|
|
124
131
|
The following plugins are bundled in the package:
|
|
125
132
|
|
|
126
|
-
-
|
|
127
|
-
|
|
128
|
-
-
|
|
129
|
-
|
|
130
|
-
-
|
|
131
|
-
|
|
132
|
-
-
|
|
133
|
-
|
|
134
|
-
-
|
|
135
|
-
|
|
136
|
-
-
|
|
133
|
+
- [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds
|
|
134
|
+
support for slide title and description
|
|
135
|
+
- [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds
|
|
136
|
+
slides counter
|
|
137
|
+
- [Download](https://yet-another-react-lightbox.com/plugins/download) - adds
|
|
138
|
+
download button
|
|
139
|
+
- [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds
|
|
140
|
+
support for fullscreen mode
|
|
141
|
+
- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms
|
|
142
|
+
the lightbox into an image carousel
|
|
143
|
+
- [Share](https://yet-another-react-lightbox.com/plugins/share) - adds sharing
|
|
144
|
+
button
|
|
145
|
+
- [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds
|
|
146
|
+
slideshow button
|
|
147
|
+
- [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds
|
|
148
|
+
thumbnails track
|
|
149
|
+
- [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support
|
|
150
|
+
for video slides
|
|
151
|
+
- [Zoom](https://yet-another-react-lightbox.com/plugins/zoom) - adds image zoom
|
|
152
|
+
feature
|
|
137
153
|
|
|
138
154
|
## License
|
|
139
155
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, Component, Module, Node, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState,
|
|
2
|
+
import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, CarouselSettings, Component, Module, Node, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ControllerRef, Callback, RenderFunction } from './types.js';
|
|
3
3
|
export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Callbacks, ClickCallbackProps, ControllerSettings, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, NavigationAction, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, PluginProps, PortalSettings, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus } from './types.js';
|
|
4
4
|
|
|
5
5
|
/** Lightbox component */
|
|
@@ -41,6 +41,7 @@ declare function stopNavigationEventsPropagation(): {
|
|
|
41
41
|
onKeyDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
|
|
42
42
|
onWheel: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
|
|
43
43
|
};
|
|
44
|
+
declare function calculatePreload(carousel: CarouselSettings, slides: Slide[], minimum?: number): number;
|
|
44
45
|
|
|
45
46
|
declare function createModule(name: string, component: Component): Module;
|
|
46
47
|
declare function createNode(module: Module, children?: Node[]): Node;
|
|
@@ -252,4 +253,4 @@ declare const RootModule: Module;
|
|
|
252
253
|
declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
|
|
253
254
|
declare const ToolbarModule: Module;
|
|
254
255
|
|
|
255
|
-
export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ComputeAnimation, ContainerRect, Controller, ControllerContext, ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, Event, EventCallback, EventTypes, EventsContext, EventsContextType, EventsProvider, IconButton, IconButtonProps, ImageSlide, ImageSlideProps, KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsContextType, LightboxPropsProvider, LightboxState, LightboxStateAction, LightboxStateContext, LightboxStateContextType, LightboxStateProvider, LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, PointerEventType, Portal, PortalModule, PreviousIcon, Publish, ReactEventType, RegisterSensors, Render, RenderFunction, Root, RootModule, SensorCallback, Slide, SlideImage, Subscribe, SubscribeSensors, SupportedEventType, SwipeState, TimeoutsContext, TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, Topic, Unsubscribe, UseSensors, WheelEventType, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
|
|
256
|
+
export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
|
package/dist/index.js
CHANGED
|
@@ -205,6 +205,9 @@ function stopNavigationEventsPropagation() {
|
|
|
205
205
|
};
|
|
206
206
|
return { onPointerDown: stopPropagation, onKeyDown: stopPropagation, onWheel: stopPropagation };
|
|
207
207
|
}
|
|
208
|
+
function calculatePreload(carousel, slides, minimum = 0) {
|
|
209
|
+
return Math.min(carousel.preload, Math.max(carousel.finite ? slides.length - 1 : Math.floor(slides.length / 2), minimum));
|
|
210
|
+
}
|
|
208
211
|
|
|
209
212
|
const EventsContext = React.createContext(null);
|
|
210
213
|
const useEvents = makeUseContext("useEvents", "EventsContext", EventsContext);
|
|
@@ -1180,7 +1183,7 @@ function Carousel({ carousel }) {
|
|
|
1180
1183
|
const spacingValue = parseLengthPercentage(carousel.spacing);
|
|
1181
1184
|
const paddingValue = parseLengthPercentage(carousel.padding);
|
|
1182
1185
|
const items = [];
|
|
1183
|
-
const preload =
|
|
1186
|
+
const preload = calculatePreload(carousel, slides, 1);
|
|
1184
1187
|
if (hasSlides(slides)) {
|
|
1185
1188
|
for (let i = currentIndex - preload; i < currentIndex; i += 1) {
|
|
1186
1189
|
const key = globalIndex + i - currentIndex;
|
|
@@ -1430,4 +1433,4 @@ function Lightbox({ carousel, animation, render, toolbar, controller, on, plugin
|
|
|
1430
1433
|
React.createElement(EventsProvider, null, renderNode(createNode(RootModule, config), props))))));
|
|
1431
1434
|
}
|
|
1432
1435
|
|
|
1433
|
-
export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerEvents, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
|
|
1436
|
+
export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerEvents, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, clsx, ImageSlide, makeComposePrefix, cssVar, useLightboxState, useEvents, useRTL, useAnimation, useEventCallback, cleanup, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
|
|
1
|
+
import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, clsx, ImageSlide, makeComposePrefix, cssVar, useLightboxState, useEvents, useRTL, useAnimation, useEventCallback, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FULLSIZE, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
|
|
4
4
|
|
|
@@ -120,8 +120,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
|
|
|
120
120
|
prepareAnimation(animationOffset);
|
|
121
121
|
});
|
|
122
122
|
React.useEffect(() => cleanup(subscribe(ACTION_SWIPE, handleControllerSwipe)), [subscribe, handleControllerSwipe]);
|
|
123
|
-
const
|
|
124
|
-
const preload = Math.min(carousel.preload, Math.floor(slides.length / 2));
|
|
123
|
+
const preload = calculatePreload(carousel, slides);
|
|
125
124
|
const items = [];
|
|
126
125
|
if (hasSlides(slides)) {
|
|
127
126
|
if (offset < 0) {
|
|
@@ -130,7 +129,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
|
|
|
130
129
|
}
|
|
131
130
|
}
|
|
132
131
|
for (let i = index - preload - Math.max(offset, 0); i < index; i += 1) {
|
|
133
|
-
if (!(finite && i < 0)) {
|
|
132
|
+
if (!(carousel.finite && i < 0)) {
|
|
134
133
|
items.push({ slide: getSlide(slides, i), index: i });
|
|
135
134
|
}
|
|
136
135
|
else {
|
|
@@ -139,7 +138,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
|
|
|
139
138
|
}
|
|
140
139
|
items.push({ slide: getSlide(slides, index), index });
|
|
141
140
|
for (let i = index + 1; i <= index + preload - Math.min(offset, 0); i += 1) {
|
|
142
|
-
if (!finite || i <= slides.length - 1) {
|
|
141
|
+
if (!carousel.finite || i <= slides.length - 1) {
|
|
143
142
|
items.push({ slide: getSlide(slides, i), index: i });
|
|
144
143
|
}
|
|
145
144
|
else {
|
|
@@ -76,6 +76,8 @@ declare module "yet-another-react-lightbox" {
|
|
|
76
76
|
zoomIn: Callback;
|
|
77
77
|
/** decrease zoom level using `zoomInMultiplier` */
|
|
78
78
|
zoomOut: Callback;
|
|
79
|
+
/** change zoom level */
|
|
80
|
+
changeZoom: (targetZoom: number, rapid?: boolean, dx?: number, dy?: number) => void;
|
|
79
81
|
}
|
|
80
82
|
}
|
|
81
83
|
|
|
@@ -297,8 +297,8 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
|
|
|
297
297
|
setOffsetX(Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX));
|
|
298
298
|
setOffsetY(Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY));
|
|
299
299
|
}, [zoom, offsetX, offsetY, slideRect, imageRect.width, imageRect.height]);
|
|
300
|
-
const changeZoom = React.useCallback((
|
|
301
|
-
const newZoom = round(Math.min(Math.max(
|
|
300
|
+
const changeZoom = React.useCallback((targetZoom, rapid, dx, dy) => {
|
|
301
|
+
const newZoom = round(Math.min(Math.max(targetZoom + 0.001 < maxZoom ? targetZoom : maxZoom, 1), maxZoom), 5);
|
|
302
302
|
if (newZoom === zoom)
|
|
303
303
|
return;
|
|
304
304
|
if (!rapid) {
|
|
@@ -334,7 +334,7 @@ function ZoomContextProvider({ children }) {
|
|
|
334
334
|
const { zoom, offsetX, offsetY, disabled, changeZoom, changeOffsets, zoomIn, zoomOut } = useZoomState(imageRect, maxZoom, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
|
|
335
335
|
useZoomCallback(zoom, disabled);
|
|
336
336
|
useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
|
|
337
|
-
const zoomRef = React.useMemo(() => ({ zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut }), [zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut]);
|
|
337
|
+
const zoomRef = React.useMemo(() => ({ zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
|
|
338
338
|
React.useImperativeHandle(useZoomProps().ref, () => zoomRef, [zoomRef]);
|
|
339
339
|
const context = React.useMemo(() => ({ ...zoomRef, setZoomWrapper }), [zoomRef, setZoomWrapper]);
|
|
340
340
|
return React.createElement(ZoomControllerContext.Provider, { value: context }, children);
|
package/dist/types.d.ts
CHANGED
|
@@ -414,4 +414,4 @@ type DeepPartialValue<T, E extends string = never> = T extends any[] ? T : T ext
|
|
|
414
414
|
[P in keyof T]?: P extends E ? T[P] : DeepPartialValue<T[P], E>;
|
|
415
415
|
} : T;
|
|
416
416
|
|
|
417
|
-
export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Callback, Callbacks, CarouselSettings, ClickCallbackProps, Component, ComponentProps, ContainerRect, ControllerRef, ControllerSettings, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, EventTypes, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, Labels, LengthOrPercentage, LightboxExternalProps, LightboxProps, LightboxState, LightboxStateSwipeAction, LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Module, NavigationAction, Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, Plugin, PluginProps, PortalSettings, Render, RenderFunction, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, Slide, SlideImage, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus };
|
|
417
|
+
export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, type AnimationSettings, type Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, type Callback, type Callbacks, type CarouselSettings, type ClickCallbackProps, type Component, type ComponentProps, type ContainerRect, type ControllerRef, type ControllerSettings, type DeepPartial, type DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, type EventTypes, type GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, type ImageFit, type ImageSource, type Labels, type LengthOrPercentage, type LightboxExternalProps, type LightboxProps, type LightboxState, type LightboxStateSwipeAction, type LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, type Module, type NavigationAction, type Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, type Plugin, type PluginProps, type PortalSettings, type Render, type RenderFunction, type RenderSlideContainerProps, type RenderSlideFooterProps, type RenderSlideHeaderProps, type RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, type Slide, type SlideImage, type SlideStatus, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarButtonKey, type ToolbarButtonKeys, type ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, type ViewCallbackProps, activeSlideStatus };
|