yet-another-react-lightbox 3.5.3 → 3.6.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.
Files changed (203) hide show
  1. package/dist/index.d.ts +240 -4
  2. package/dist/index.js +1317 -4
  3. package/dist/plugins/captions/captions.css +1 -33
  4. package/dist/plugins/captions/captions.css.d.ts +2 -0
  5. package/dist/plugins/captions/index.d.ts +8 -4
  6. package/dist/plugins/captions/index.js +104 -3
  7. package/dist/plugins/counter/counter.css +1 -16
  8. package/dist/plugins/counter/counter.css.d.ts +2 -0
  9. package/dist/plugins/counter/index.d.ts +8 -3
  10. package/dist/plugins/counter/index.js +18 -2
  11. package/dist/plugins/download/index.d.ts +6 -3
  12. package/dist/plugins/download/index.js +90 -3
  13. package/dist/plugins/fullscreen/index.d.ts +8 -4
  14. package/dist/plugins/fullscreen/index.js +128 -3
  15. package/dist/plugins/index.d.ts +9 -9
  16. package/dist/plugins/index.js +9 -9
  17. package/dist/plugins/inline/index.d.ts +8 -3
  18. package/dist/plugins/inline/index.js +26 -2
  19. package/dist/plugins/slideshow/index.d.ts +8 -4
  20. package/dist/plugins/slideshow/index.js +113 -3
  21. package/dist/plugins/thumbnails/index.d.ts +7 -4
  22. package/dist/plugins/thumbnails/index.js +262 -3
  23. package/dist/plugins/thumbnails/thumbnails.css +1 -139
  24. package/dist/plugins/thumbnails/thumbnails.css.d.ts +2 -0
  25. package/dist/plugins/video/index.d.ts +7 -2
  26. package/dist/plugins/video/index.js +109 -2
  27. package/dist/plugins/zoom/index.d.ts +7 -4
  28. package/dist/plugins/zoom/index.js +499 -3
  29. package/dist/styles.css +1 -281
  30. package/dist/styles.css.d.ts +2 -0
  31. package/dist/types.d.ts +123 -47
  32. package/dist/types.js +51 -1
  33. package/package.json +34 -10
  34. package/dist/Lightbox.d.ts +0 -4
  35. package/dist/Lightbox.js +0 -46
  36. package/dist/core/components/IconButton.d.ts +0 -7
  37. package/dist/core/components/IconButton.js +0 -8
  38. package/dist/core/components/Icons.d.ts +0 -29
  39. package/dist/core/components/Icons.js +0 -27
  40. package/dist/core/components/ImageSlide.d.ts +0 -13
  41. package/dist/core/components/ImageSlide.js +0 -68
  42. package/dist/core/components/index.d.ts +0 -3
  43. package/dist/core/components/index.js +0 -3
  44. package/dist/core/config.d.ts +0 -7
  45. package/dist/core/config.js +0 -93
  46. package/dist/core/consts.d.ts +0 -50
  47. package/dist/core/consts.js +0 -49
  48. package/dist/core/contexts/Events.d.ts +0 -17
  49. package/dist/core/contexts/Events.js +0 -29
  50. package/dist/core/contexts/LightboxProps.d.ts +0 -6
  51. package/dist/core/contexts/LightboxProps.js +0 -7
  52. package/dist/core/contexts/LightboxState.d.ts +0 -27
  53. package/dist/core/contexts/LightboxState.js +0 -49
  54. package/dist/core/contexts/Timeouts.d.ts +0 -8
  55. package/dist/core/contexts/Timeouts.js +0 -32
  56. package/dist/core/contexts/index.d.ts +0 -4
  57. package/dist/core/contexts/index.js +0 -4
  58. package/dist/core/hooks/index.d.ts +0 -11
  59. package/dist/core/hooks/index.js +0 -11
  60. package/dist/core/hooks/useAnimation.d.ts +0 -15
  61. package/dist/core/hooks/useAnimation.js +0 -57
  62. package/dist/core/hooks/useContainerRect.d.ts +0 -7
  63. package/dist/core/hooks/useContainerRect.js +0 -36
  64. package/dist/core/hooks/useDelay.d.ts +0 -1
  65. package/dist/core/hooks/useDelay.js +0 -10
  66. package/dist/core/hooks/useEventCallback.d.ts +0 -1
  67. package/dist/core/hooks/useEventCallback.js +0 -9
  68. package/dist/core/hooks/useForkRef.d.ts +0 -3
  69. package/dist/core/hooks/useForkRef.js +0 -17
  70. package/dist/core/hooks/useLayoutEffect.d.ts +0 -2
  71. package/dist/core/hooks/useLayoutEffect.js +0 -3
  72. package/dist/core/hooks/useLoseFocus.d.ts +0 -4
  73. package/dist/core/hooks/useLoseFocus.js +0 -19
  74. package/dist/core/hooks/useMotionPreference.d.ts +0 -1
  75. package/dist/core/hooks/useMotionPreference.js +0 -13
  76. package/dist/core/hooks/useRTL.d.ts +0 -1
  77. package/dist/core/hooks/useRTL.js +0 -9
  78. package/dist/core/hooks/useSensors.d.ts +0 -14
  79. package/dist/core/hooks/useSensors.js +0 -38
  80. package/dist/core/hooks/useThrottle.d.ts +0 -1
  81. package/dist/core/hooks/useThrottle.js +0 -16
  82. package/dist/core/index.d.ts +0 -7
  83. package/dist/core/index.js +0 -7
  84. package/dist/core/modules/Carousel.d.ts +0 -4
  85. package/dist/core/modules/Carousel.js +0 -72
  86. package/dist/core/modules/Controller.d.ts +0 -31
  87. package/dist/core/modules/Controller.js +0 -215
  88. package/dist/core/modules/Navigation.d.ts +0 -13
  89. package/dist/core/modules/Navigation.js +0 -35
  90. package/dist/core/modules/NoScroll.d.ts +0 -4
  91. package/dist/core/modules/NoScroll.js +0 -52
  92. package/dist/core/modules/Portal.d.ts +0 -4
  93. package/dist/core/modules/Portal.js +0 -92
  94. package/dist/core/modules/Root.d.ts +0 -4
  95. package/dist/core/modules/Root.js +0 -7
  96. package/dist/core/modules/Toolbar.d.ts +0 -4
  97. package/dist/core/modules/Toolbar.js +0 -25
  98. package/dist/core/modules/controller/index.d.ts +0 -8
  99. package/dist/core/modules/controller/index.js +0 -9
  100. package/dist/core/modules/controller/usePointerSwipe.d.ts +0 -2
  101. package/dist/core/modules/controller/usePointerSwipe.js +0 -72
  102. package/dist/core/modules/controller/usePreventSwipeNavigation.d.ts +0 -3
  103. package/dist/core/modules/controller/usePreventSwipeNavigation.js +0 -20
  104. package/dist/core/modules/controller/useWheelSwipe.d.ts +0 -3
  105. package/dist/core/modules/controller/useWheelSwipe.js +0 -92
  106. package/dist/core/modules/index.d.ts +0 -7
  107. package/dist/core/modules/index.js +0 -7
  108. package/dist/core/utils.d.ts +0 -31
  109. package/dist/core/utils.js +0 -64
  110. package/dist/plugins/captions/Captions.d.ts +0 -3
  111. package/dist/plugins/captions/Captions.js +0 -25
  112. package/dist/plugins/captions/CaptionsButton.d.ts +0 -2
  113. package/dist/plugins/captions/CaptionsButton.js +0 -16
  114. package/dist/plugins/captions/CaptionsContext.d.ts +0 -5
  115. package/dist/plugins/captions/CaptionsContext.js +0 -16
  116. package/dist/plugins/captions/Description.d.ts +0 -4
  117. package/dist/plugins/captions/Description.js +0 -27
  118. package/dist/plugins/captions/Title.d.ts +0 -4
  119. package/dist/plugins/captions/Title.js +0 -16
  120. package/dist/plugins/captions/props.d.ts +0 -19
  121. package/dist/plugins/captions/props.js +0 -14
  122. package/dist/plugins/captions/utils.d.ts +0 -1
  123. package/dist/plugins/captions/utils.js +0 -2
  124. package/dist/plugins/counter/Counter.d.ts +0 -5
  125. package/dist/plugins/counter/Counter.js +0 -14
  126. package/dist/plugins/download/Download.d.ts +0 -2
  127. package/dist/plugins/download/Download.js +0 -9
  128. package/dist/plugins/download/DownloadButton.d.ts +0 -2
  129. package/dist/plugins/download/DownloadButton.js +0 -19
  130. package/dist/plugins/download/FileSaver.d.ts +0 -1
  131. package/dist/plugins/download/FileSaver.js +0 -60
  132. package/dist/plugins/fullscreen/Fullscreen.d.ts +0 -3
  133. package/dist/plugins/fullscreen/Fullscreen.js +0 -13
  134. package/dist/plugins/fullscreen/FullscreenButton.d.ts +0 -3
  135. package/dist/plugins/fullscreen/FullscreenButton.js +0 -16
  136. package/dist/plugins/fullscreen/FullscreenContext.d.ts +0 -5
  137. package/dist/plugins/fullscreen/FullscreenContext.js +0 -93
  138. package/dist/plugins/fullscreen/props.d.ts +0 -10
  139. package/dist/plugins/fullscreen/props.js +0 -8
  140. package/dist/plugins/inline/Inline.d.ts +0 -3
  141. package/dist/plugins/inline/Inline.js +0 -18
  142. package/dist/plugins/inline/InlineContainer.d.ts +0 -4
  143. package/dist/plugins/inline/InlineContainer.js +0 -5
  144. package/dist/plugins/slideshow/Slideshow.d.ts +0 -3
  145. package/dist/plugins/slideshow/Slideshow.js +0 -13
  146. package/dist/plugins/slideshow/SlideshowButton.d.ts +0 -2
  147. package/dist/plugins/slideshow/SlideshowButton.js +0 -14
  148. package/dist/plugins/slideshow/SlideshowContext.d.ts +0 -5
  149. package/dist/plugins/slideshow/SlideshowContext.js +0 -79
  150. package/dist/plugins/slideshow/props.d.ts +0 -12
  151. package/dist/plugins/slideshow/props.js +0 -9
  152. package/dist/plugins/thumbnails/Thumbnail.d.ts +0 -15
  153. package/dist/plugins/thumbnails/Thumbnail.js +0 -51
  154. package/dist/plugins/thumbnails/Thumbnails.d.ts +0 -3
  155. package/dist/plugins/thumbnails/Thumbnails.js +0 -22
  156. package/dist/plugins/thumbnails/ThumbnailsButton.d.ts +0 -2
  157. package/dist/plugins/thumbnails/ThumbnailsButton.js +0 -16
  158. package/dist/plugins/thumbnails/ThumbnailsContext.d.ts +0 -6
  159. package/dist/plugins/thumbnails/ThumbnailsContext.js +0 -24
  160. package/dist/plugins/thumbnails/ThumbnailsTrack.d.ts +0 -5
  161. package/dist/plugins/thumbnails/ThumbnailsTrack.js +0 -141
  162. package/dist/plugins/thumbnails/props.d.ts +0 -40
  163. package/dist/plugins/thumbnails/props.js +0 -21
  164. package/dist/plugins/thumbnails/utils.d.ts +0 -2
  165. package/dist/plugins/thumbnails/utils.js +0 -4
  166. package/dist/plugins/video/Video.d.ts +0 -3
  167. package/dist/plugins/video/Video.js +0 -21
  168. package/dist/plugins/video/VideoSlide.d.ts +0 -8
  169. package/dist/plugins/video/VideoSlide.js +0 -74
  170. package/dist/plugins/video/props.d.ts +0 -29
  171. package/dist/plugins/video/props.js +0 -13
  172. package/dist/plugins/zoom/ResponsiveImage.d.ts +0 -11
  173. package/dist/plugins/zoom/ResponsiveImage.js +0 -58
  174. package/dist/plugins/zoom/Zoom.d.ts +0 -3
  175. package/dist/plugins/zoom/Zoom.js +0 -18
  176. package/dist/plugins/zoom/ZoomButton.d.ts +0 -8
  177. package/dist/plugins/zoom/ZoomButton.js +0 -27
  178. package/dist/plugins/zoom/ZoomButtonsGroup.d.ts +0 -2
  179. package/dist/plugins/zoom/ZoomButtonsGroup.js +0 -22
  180. package/dist/plugins/zoom/ZoomController.d.ts +0 -12
  181. package/dist/plugins/zoom/ZoomController.js +0 -17
  182. package/dist/plugins/zoom/ZoomToolbarControl.d.ts +0 -2
  183. package/dist/plugins/zoom/ZoomToolbarControl.js +0 -12
  184. package/dist/plugins/zoom/ZoomWrapper.d.ts +0 -5
  185. package/dist/plugins/zoom/ZoomWrapper.js +0 -36
  186. package/dist/plugins/zoom/hooks/index.d.ts +0 -6
  187. package/dist/plugins/zoom/hooks/index.js +0 -6
  188. package/dist/plugins/zoom/hooks/useZoomAnimation.d.ts +0 -2
  189. package/dist/plugins/zoom/hooks/useZoomAnimation.js +0 -39
  190. package/dist/plugins/zoom/hooks/useZoomCallback.d.ts +0 -1
  191. package/dist/plugins/zoom/hooks/useZoomCallback.js +0 -12
  192. package/dist/plugins/zoom/hooks/useZoomImageRect.d.ts +0 -5
  193. package/dist/plugins/zoom/hooks/useZoomImageRect.js +0 -41
  194. package/dist/plugins/zoom/hooks/useZoomProps.d.ts +0 -13
  195. package/dist/plugins/zoom/hooks/useZoomProps.js +0 -6
  196. package/dist/plugins/zoom/hooks/useZoomSensors.d.ts +0 -3
  197. package/dist/plugins/zoom/hooks/useZoomSensors.js +0 -154
  198. package/dist/plugins/zoom/hooks/useZoomState.d.ts +0 -12
  199. package/dist/plugins/zoom/hooks/useZoomState.js +0 -63
  200. package/dist/plugins/zoom/props.d.ts +0 -25
  201. package/dist/plugins/zoom/props.js +0 -15
  202. package/dist/props.d.ts +0 -2
  203. package/dist/props.js +0 -38
@@ -1,215 +0,0 @@
1
- import * as React from "react";
2
- import { createModule } from "../config.js";
3
- import { cleanup, clsx, computeSlideRect, cssClass, cssVar, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
4
- import { useAnimation, useContainerRect, useDelay, useEventCallback, useForkRef, useRTL, useSensors, } from "../hooks/index.js";
5
- import { useEvents, useLightboxDispatch, useLightboxState } from "../contexts/index.js";
6
- import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
7
- import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, } from "../consts.js";
8
- const cssContainerPrefix = makeComposePrefix("container");
9
- export const ControllerContext = React.createContext(null);
10
- export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
11
- export function Controller({ children, ...props }) {
12
- var _a;
13
- const { carousel, animation, controller, on, styles, render } = props;
14
- const [toolbarWidth, setToolbarWidth] = React.useState();
15
- const state = useLightboxState();
16
- const dispatch = useLightboxDispatch();
17
- const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
18
- const swipeOffset = React.useRef(0);
19
- const { registerSensors, subscribeSensors } = useSensors();
20
- const { subscribe, publish } = useEvents();
21
- const cleanupAnimationIncrement = useDelay();
22
- const cleanupSwipeOffset = useDelay();
23
- const { containerRef, setContainerRef, containerRect } = useContainerRect();
24
- const handleContainerRef = useForkRef(usePreventSwipeNavigation(), setContainerRef);
25
- const carouselRef = React.useRef(null);
26
- const setCarouselRef = useForkRef(carouselRef, undefined);
27
- const isRTL = useRTL();
28
- const rtl = (value) => (isRTL ? -1 : 1) * (typeof value === "number" ? value : 1);
29
- const focus = useEventCallback(() => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
30
- const getLightboxProps = useEventCallback(() => props);
31
- const getLightboxState = useEventCallback(() => state);
32
- const prev = React.useCallback((params) => publish(ACTION_PREV, params), [publish]);
33
- const next = React.useCallback((params) => publish(ACTION_NEXT, params), [publish]);
34
- const close = React.useCallback(() => publish(ACTION_CLOSE), [publish]);
35
- const isSwipeValid = (offset) => !(carousel.finite &&
36
- ((rtl(offset) > 0 && state.currentIndex === 0) ||
37
- (rtl(offset) < 0 && state.currentIndex === state.slides.length - 1)));
38
- const setSwipeOffset = (offset) => {
39
- var _a;
40
- swipeOffset.current = offset;
41
- (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("swipe_offset"), `${Math.round(offset)}px`);
42
- };
43
- const { prepareAnimation, isAnimationPlaying } = useAnimation(carouselRef, (snapshot, rect, translate) => {
44
- var _a;
45
- if (carouselRef.current && containerRect && ((_a = state.animation) === null || _a === void 0 ? void 0 : _a.duration)) {
46
- const parsedSpacing = parseLengthPercentage(carousel.spacing);
47
- const spacingValue = (parsedSpacing.percent
48
- ? (parsedSpacing.percent * containerRect.width) / 100
49
- : parsedSpacing.pixel) || 0;
50
- return {
51
- keyframes: [
52
- {
53
- transform: `translateX(${rtl(state.globalIndex - snapshot.index) * (containerRect.width + spacingValue) +
54
- snapshot.rect.x -
55
- rect.x +
56
- translate.x}px)`,
57
- },
58
- { transform: "translateX(0)" },
59
- ],
60
- duration: state.animation.duration,
61
- easing: state.animation.easing,
62
- };
63
- }
64
- return undefined;
65
- });
66
- const swipe = useEventCallback((action) => {
67
- var _a, _b;
68
- const currentSwipeOffset = action.offset || 0;
69
- const swipeDuration = !currentSwipeOffset ? (_a = animation.navigation) !== null && _a !== void 0 ? _a : animation.swipe : animation.swipe;
70
- const swipeEasing = !currentSwipeOffset && !isAnimationPlaying() ? animation.easing.navigation : animation.easing.swipe;
71
- let { direction } = action;
72
- const count = (_b = action.count) !== null && _b !== void 0 ? _b : 1;
73
- let newSwipeState = SwipeState.ANIMATION;
74
- let newSwipeAnimationDuration = swipeDuration * count;
75
- if (!direction) {
76
- const containerWidth = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
77
- const elapsedTime = action.duration || 0;
78
- const expectedTime = containerWidth
79
- ? (swipeDuration / containerWidth) * Math.abs(currentSwipeOffset)
80
- : swipeDuration;
81
- if (count !== 0) {
82
- if (elapsedTime < expectedTime) {
83
- newSwipeAnimationDuration =
84
- (newSwipeAnimationDuration / expectedTime) * Math.max(elapsedTime, expectedTime / 5);
85
- }
86
- else if (containerWidth) {
87
- newSwipeAnimationDuration =
88
- (swipeDuration / containerWidth) * (containerWidth - Math.abs(currentSwipeOffset));
89
- }
90
- direction = rtl(currentSwipeOffset) > 0 ? ACTION_PREV : ACTION_NEXT;
91
- }
92
- else {
93
- newSwipeAnimationDuration = swipeDuration / 2;
94
- }
95
- }
96
- let increment = 0;
97
- if (direction === ACTION_PREV) {
98
- if (isSwipeValid(rtl(1))) {
99
- increment = -count;
100
- }
101
- else {
102
- newSwipeState = SwipeState.NONE;
103
- newSwipeAnimationDuration = swipeDuration;
104
- }
105
- }
106
- else if (direction === ACTION_NEXT) {
107
- if (isSwipeValid(rtl(-1))) {
108
- increment = count;
109
- }
110
- else {
111
- newSwipeState = SwipeState.NONE;
112
- newSwipeAnimationDuration = swipeDuration;
113
- }
114
- }
115
- newSwipeAnimationDuration = Math.round(newSwipeAnimationDuration);
116
- cleanupSwipeOffset(() => {
117
- setSwipeOffset(0);
118
- setSwipeState(SwipeState.NONE);
119
- }, newSwipeAnimationDuration);
120
- if (carouselRef.current) {
121
- prepareAnimation({
122
- rect: carouselRef.current.getBoundingClientRect(),
123
- index: state.globalIndex,
124
- });
125
- }
126
- setSwipeState(newSwipeState);
127
- publish(ACTION_SWIPE, {
128
- type: "swipe",
129
- increment,
130
- duration: newSwipeAnimationDuration,
131
- easing: swipeEasing,
132
- });
133
- });
134
- React.useEffect(() => {
135
- var _a, _b;
136
- if (((_a = state.animation) === null || _a === void 0 ? void 0 : _a.increment) && ((_b = state.animation) === null || _b === void 0 ? void 0 : _b.duration)) {
137
- cleanupAnimationIncrement(() => dispatch({ type: "swipe", increment: 0 }), state.animation.duration);
138
- }
139
- }, [state.animation, dispatch, cleanupAnimationIncrement]);
140
- const swipeParams = [
141
- subscribeSensors,
142
- isSwipeValid,
143
- (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || 0,
144
- animation.swipe,
145
- () => setSwipeState(SwipeState.SWIPE),
146
- (offset) => setSwipeOffset(offset),
147
- (offset, duration) => swipe({ offset, duration, count: 1 }),
148
- (offset) => swipe({ offset, count: 0 }),
149
- ];
150
- usePointerSwipe(...swipeParams);
151
- useWheelSwipe(swipeState, ...swipeParams);
152
- const focusOnMount = useEventCallback(() => {
153
- var _a;
154
- if (controller.focus) {
155
- (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
156
- }
157
- });
158
- React.useEffect(focusOnMount, [focusOnMount]);
159
- const onViewCallback = useEventCallback(() => {
160
- var _a;
161
- (_a = on.view) === null || _a === void 0 ? void 0 : _a.call(on, { index: state.currentIndex });
162
- });
163
- React.useEffect(onViewCallback, [state.globalIndex, onViewCallback]);
164
- React.useEffect(() => cleanup(subscribe(ACTION_PREV, (action) => swipe({ direction: ACTION_PREV, ...action })), subscribe(ACTION_NEXT, (action) => swipe({ direction: ACTION_NEXT, ...action })), subscribe(ACTION_SWIPE, (action) => dispatch(action))), [subscribe, swipe, dispatch]);
165
- React.useEffect(() => subscribeSensors(EVENT_ON_KEY_UP, (event) => {
166
- if (event.code === VK_ESCAPE) {
167
- close();
168
- }
169
- }), [subscribeSensors, close]);
170
- const context = React.useMemo(() => ({
171
- prev,
172
- next,
173
- close,
174
- focus,
175
- slideRect: containerRect ? computeSlideRect(containerRect, carousel.padding) : { width: 0, height: 0 },
176
- containerRect: containerRect || { width: 0, height: 0 },
177
- subscribeSensors,
178
- containerRef,
179
- setCarouselRef,
180
- toolbarWidth,
181
- setToolbarWidth,
182
- }), [
183
- prev,
184
- next,
185
- close,
186
- focus,
187
- subscribeSensors,
188
- containerRect,
189
- containerRef,
190
- setCarouselRef,
191
- toolbarWidth,
192
- setToolbarWidth,
193
- carousel.padding,
194
- ]);
195
- React.useImperativeHandle(controller.ref, () => ({
196
- prev,
197
- next,
198
- close,
199
- focus,
200
- getLightboxProps,
201
- getLightboxState,
202
- }), [prev, next, close, focus, getLightboxProps, getLightboxState]);
203
- return (React.createElement("div", { ref: handleContainerRef, className: clsx(cssClass(cssContainerPrefix()), cssClass(CLASS_FLEX_CENTER)), style: {
204
- ...(swipeState === SwipeState.SWIPE
205
- ? { [cssVar("swipe_offset")]: `${Math.round(swipeOffset.current)}px` }
206
- : null),
207
- ...(controller.touchAction !== "none"
208
- ? { [cssVar("controller_touch_action")]: controller.touchAction }
209
- : null),
210
- ...styles.container,
211
- }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context },
212
- children, (_a = render.controls) === null || _a === void 0 ? void 0 :
213
- _a.call(render)))));
214
- }
215
- export const ControllerModule = createModule(MODULE_CONTROLLER, Controller);
@@ -1,13 +0,0 @@
1
- import * as React from "react";
2
- import { ComponentProps, RenderFunction } from "../../types.js";
3
- export type NavigationButtonProps = {
4
- label: string;
5
- icon: React.ElementType;
6
- renderIcon?: RenderFunction;
7
- action: "prev" | "next";
8
- onClick: () => void;
9
- disabled?: boolean;
10
- };
11
- export declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }: NavigationButtonProps): JSX.Element;
12
- export declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): JSX.Element;
13
- export declare const NavigationModule: import("../../types.js").Module;
@@ -1,35 +0,0 @@
1
- import * as React from "react";
2
- import { createModule } from "../config.js";
3
- import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
4
- import { cssClass } from "../utils.js";
5
- import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
6
- import { useLightboxState } from "../contexts/index.js";
7
- import { useController } from "./Controller.js";
8
- import { ACTION_NEXT, ACTION_PREV, EVENT_ON_KEY_DOWN, MODULE_NAVIGATION, VK_ARROW_LEFT, VK_ARROW_RIGHT, } from "../consts.js";
9
- export function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }) {
10
- return (React.createElement(IconButton, { label: label, icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
11
- }
12
- export function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) {
13
- var _a;
14
- const { slides, currentIndex } = useLightboxState();
15
- const { prev, next, subscribeSensors } = useController();
16
- const isRTL = useRTL();
17
- const prevDisabled = slides.length === 0 || (finite && currentIndex === 0);
18
- const nextDisabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
19
- const throttle = ((_a = animation.navigation) !== null && _a !== void 0 ? _a : animation.swipe) / 2;
20
- const prevThrottled = useThrottle(prev, throttle);
21
- const nextThrottled = useThrottle(next, throttle);
22
- const handleKeyDown = useEventCallback((event) => {
23
- if (event.key === VK_ARROW_LEFT && !(isRTL ? nextDisabled : prevDisabled)) {
24
- (isRTL ? nextThrottled : prevThrottled)();
25
- }
26
- if (event.key === VK_ARROW_RIGHT && !(isRTL ? prevDisabled : nextDisabled)) {
27
- (isRTL ? prevThrottled : nextThrottled)();
28
- }
29
- });
30
- React.useEffect(() => subscribeSensors(EVENT_ON_KEY_DOWN, handleKeyDown), [subscribeSensors, handleKeyDown]);
31
- return (React.createElement(React.Fragment, null,
32
- buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: prevDisabled, onClick: prev })),
33
- buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, onClick: next }))));
34
- }
35
- export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { ComponentProps } from "../../types.js";
3
- export declare function NoScroll({ children }: ComponentProps): JSX.Element;
4
- export declare const NoScrollModule: import("../../types.js").Module;
@@ -1,52 +0,0 @@
1
- import * as React from "react";
2
- import { createModule } from "../config.js";
3
- import { cssClass } from "../utils.js";
4
- import { useLayoutEffect, useRTL } from "../hooks/index.js";
5
- import { CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL } from "../consts.js";
6
- const noScroll = cssClass(CLASS_NO_SCROLL);
7
- const noScrollPadding = cssClass(CLASS_NO_SCROLL_PADDING);
8
- function isHTMLElement(element) {
9
- return "style" in element;
10
- }
11
- function padScrollbar(element, padding, rtl) {
12
- const styles = window.getComputedStyle(element);
13
- const property = rtl ? "padding-left" : "padding-right";
14
- const computedValue = rtl ? styles.paddingLeft : styles.paddingRight;
15
- const originalValue = element.style.getPropertyValue(property);
16
- element.style.setProperty(property, `${(parseInt(computedValue, 10) || 0) + padding}px`);
17
- return () => {
18
- if (originalValue) {
19
- element.style.setProperty(property, originalValue);
20
- }
21
- else {
22
- element.style.removeProperty(property);
23
- }
24
- };
25
- }
26
- export function NoScroll({ children }) {
27
- const rtl = useRTL();
28
- useLayoutEffect(() => {
29
- const cleanup = [];
30
- const { body, documentElement } = document;
31
- const scrollbar = Math.round(window.innerWidth - documentElement.clientWidth);
32
- if (scrollbar > 0) {
33
- cleanup.push(padScrollbar(body, scrollbar, rtl));
34
- const elements = body.getElementsByTagName("*");
35
- for (let i = 0; i < elements.length; i += 1) {
36
- const element = elements[i];
37
- if (isHTMLElement(element) &&
38
- window.getComputedStyle(element).getPropertyValue("position") === "fixed" &&
39
- !element.classList.contains(noScrollPadding)) {
40
- cleanup.push(padScrollbar(element, scrollbar, rtl));
41
- }
42
- }
43
- }
44
- body.classList.add(noScroll);
45
- return () => {
46
- body.classList.remove(noScroll);
47
- cleanup.forEach((clean) => clean());
48
- };
49
- }, [rtl]);
50
- return React.createElement(React.Fragment, null, children);
51
- }
52
- export const NoScrollModule = createModule(MODULE_NO_SCROLL, NoScroll);
@@ -1,4 +0,0 @@
1
- import * as React from "react";
2
- import { ComponentProps } from "../../types.js";
3
- export declare function Portal({ children, animation, styles, className, on, portal, close }: ComponentProps): React.ReactPortal | null;
4
- export declare const PortalModule: import("../../types.js").Module;
@@ -1,92 +0,0 @@
1
- import * as React from "react";
2
- import * as ReactDOM from "react-dom";
3
- import { LightboxDefaultProps } from "../../props.js";
4
- import { createModule } from "../config.js";
5
- import { clsx, composePrefix, cssClass, cssVar } from "../utils.js";
6
- import { useEventCallback, useMotionPreference } from "../hooks/index.js";
7
- import { useEvents, useTimeouts } from "../contexts/index.js";
8
- import { ACTION_CLOSE, CLASS_NO_SCROLL_PADDING, MODULE_PORTAL } from "../consts.js";
9
- function cssPrefix(value) {
10
- return composePrefix(MODULE_PORTAL, value);
11
- }
12
- function setAttribute(element, attribute, value) {
13
- const previousValue = element.getAttribute(attribute);
14
- element.setAttribute(attribute, value);
15
- return () => {
16
- if (previousValue) {
17
- element.setAttribute(attribute, previousValue);
18
- }
19
- else {
20
- element.removeAttribute(attribute);
21
- }
22
- };
23
- }
24
- export function Portal({ children, animation, styles, className, on, portal, close }) {
25
- const [mounted, setMounted] = React.useState(false);
26
- const [visible, setVisible] = React.useState(false);
27
- const cleanup = React.useRef([]);
28
- const { setTimeout } = useTimeouts();
29
- const { subscribe } = useEvents();
30
- const reduceMotion = useMotionPreference();
31
- const animationDuration = !reduceMotion ? animation.fade : 0;
32
- React.useEffect(() => {
33
- setMounted(true);
34
- return () => {
35
- setMounted(false);
36
- setVisible(false);
37
- };
38
- }, []);
39
- const handleClose = useEventCallback(() => {
40
- var _a;
41
- setVisible(false);
42
- (_a = on.exiting) === null || _a === void 0 ? void 0 : _a.call(on);
43
- setTimeout(() => {
44
- var _a;
45
- (_a = on.exited) === null || _a === void 0 ? void 0 : _a.call(on);
46
- close();
47
- }, animationDuration);
48
- });
49
- React.useEffect(() => subscribe(ACTION_CLOSE, handleClose), [subscribe, handleClose]);
50
- const handleEnter = useEventCallback((node) => {
51
- var _a, _b, _c;
52
- node.scrollTop;
53
- setVisible(true);
54
- (_a = on.entering) === null || _a === void 0 ? void 0 : _a.call(on);
55
- const elements = (_c = (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : [];
56
- for (let i = 0; i < elements.length; i += 1) {
57
- const element = elements[i];
58
- if (["TEMPLATE", "SCRIPT", "STYLE"].indexOf(element.tagName) === -1 && element !== node) {
59
- cleanup.current.push(setAttribute(element, "inert", "true"));
60
- cleanup.current.push(setAttribute(element, "aria-hidden", "true"));
61
- }
62
- }
63
- setTimeout(() => {
64
- var _a;
65
- (_a = on.entered) === null || _a === void 0 ? void 0 : _a.call(on);
66
- }, animationDuration);
67
- });
68
- const handleExit = useEventCallback(() => {
69
- cleanup.current.forEach((clean) => clean());
70
- cleanup.current = [];
71
- });
72
- const handleRef = React.useCallback((node) => {
73
- if (node) {
74
- handleEnter(node);
75
- }
76
- else {
77
- handleExit();
78
- }
79
- }, [handleEnter, handleExit]);
80
- return mounted
81
- ? ReactDOM.createPortal(React.createElement("div", { ref: handleRef, className: clsx(className, cssClass("root"), cssClass(cssPrefix()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix("open"))), role: "presentation", "aria-live": "polite", style: {
82
- ...(animation.fade !== LightboxDefaultProps.animation.fade
83
- ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
84
- : null),
85
- ...(animation.easing.fade !== LightboxDefaultProps.animation.easing.fade
86
- ? { [cssVar("fade_animation_timing_function")]: animation.easing.fade }
87
- : null),
88
- ...styles.root,
89
- } }, children), portal.root || document.body)
90
- : null;
91
- }
92
- export const PortalModule = createModule(MODULE_PORTAL, Portal);
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { ComponentProps } from "../../types.js";
3
- export declare function Root({ children }: ComponentProps): JSX.Element;
4
- export declare const RootModule: import("../../types.js").Module;
@@ -1,7 +0,0 @@
1
- import * as React from "react";
2
- import { createModule } from "../config.js";
3
- import { MODULE_ROOT } from "../consts.js";
4
- export function Root({ children }) {
5
- return React.createElement(React.Fragment, null, children);
6
- }
7
- export const RootModule = createModule(MODULE_ROOT, Root);
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { ComponentProps } from "../../types.js";
3
- export declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element;
4
- export declare const ToolbarModule: import("../../types.js").Module;
@@ -1,25 +0,0 @@
1
- import * as React from "react";
2
- import { createModule } from "../config.js";
3
- import { useLayoutEffect } from "../hooks/index.js";
4
- import { composePrefix, cssClass } from "../utils.js";
5
- import { CloseIcon, IconButton } from "../components/index.js";
6
- import { useContainerRect } from "../hooks/useContainerRect.js";
7
- import { useController } from "./Controller.js";
8
- import { ACTION_CLOSE, MODULE_TOOLBAR } from "../consts.js";
9
- function cssPrefix(value) {
10
- return composePrefix(MODULE_TOOLBAR, value);
11
- }
12
- export function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }) {
13
- const { close, setToolbarWidth } = useController();
14
- const { setContainerRef, containerRect } = useContainerRect();
15
- useLayoutEffect(() => {
16
- setToolbarWidth(containerRect === null || containerRect === void 0 ? void 0 : containerRect.width);
17
- }, [setToolbarWidth, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]);
18
- const renderCloseButton = () => {
19
- if (buttonClose)
20
- return buttonClose();
21
- return React.createElement(IconButton, { key: ACTION_CLOSE, label: "Close", icon: CloseIcon, renderIcon: iconClose, onClick: close });
22
- };
23
- return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
24
- }
25
- export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);
@@ -1,8 +0,0 @@
1
- export declare enum SwipeState {
2
- NONE = 0,
3
- SWIPE = 1,
4
- ANIMATION = 2
5
- }
6
- export * from "./usePointerSwipe.js";
7
- export * from "./usePreventSwipeNavigation.js";
8
- export * from "./useWheelSwipe.js";
@@ -1,9 +0,0 @@
1
- export var SwipeState;
2
- (function (SwipeState) {
3
- SwipeState[SwipeState["NONE"] = 0] = "NONE";
4
- SwipeState[SwipeState["SWIPE"] = 1] = "SWIPE";
5
- SwipeState[SwipeState["ANIMATION"] = 2] = "ANIMATION";
6
- })(SwipeState || (SwipeState = {}));
7
- export * from "./usePointerSwipe.js";
8
- export * from "./usePreventSwipeNavigation.js";
9
- export * from "./useWheelSwipe.js";
@@ -1,2 +0,0 @@
1
- import { UseSensors } from "../../hooks/useSensors.js";
2
- export declare function usePointerSwipe<T extends Element = Element>(subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void): void;
@@ -1,72 +0,0 @@
1
- import * as React from "react";
2
- import { cleanup } from "../../utils.js";
3
- import { useEventCallback } from "../../hooks/useEventCallback.js";
4
- import { EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, } from "../../consts.js";
5
- export function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) {
6
- const offset = React.useRef(0);
7
- const pointers = React.useRef([]);
8
- const activePointer = React.useRef();
9
- const startTime = React.useRef(0);
10
- const clearPointer = React.useCallback((event) => {
11
- if (activePointer.current === event.pointerId) {
12
- activePointer.current = undefined;
13
- }
14
- const currentPointers = pointers.current;
15
- currentPointers.splice(0, currentPointers.length, ...currentPointers.filter((p) => p.pointerId !== event.pointerId));
16
- }, []);
17
- const addPointer = React.useCallback((event) => {
18
- clearPointer(event);
19
- event.persist();
20
- pointers.current.push(event);
21
- }, [clearPointer]);
22
- const onPointerDown = useEventCallback((event) => {
23
- addPointer(event);
24
- });
25
- const onPointerUp = useEventCallback((event) => {
26
- if (pointers.current.find((x) => x.pointerId === event.pointerId) &&
27
- activePointer.current === event.pointerId) {
28
- const duration = Date.now() - startTime.current;
29
- const currentOffset = offset.current;
30
- if (Math.abs(currentOffset) > 0.3 * containerWidth ||
31
- (Math.abs(currentOffset) > 5 && duration < swipeAnimationDuration)) {
32
- onSwipeFinish(currentOffset, duration);
33
- }
34
- else {
35
- onSwipeCancel(currentOffset);
36
- }
37
- offset.current = 0;
38
- }
39
- clearPointer(event);
40
- });
41
- const onPointerMove = useEventCallback((event) => {
42
- const pointer = pointers.current.find((p) => p.pointerId === event.pointerId);
43
- if (pointer) {
44
- const isCurrentPointer = activePointer.current === event.pointerId;
45
- if (event.buttons === 0) {
46
- if (isCurrentPointer && offset.current !== 0) {
47
- onPointerUp(event);
48
- }
49
- else {
50
- clearPointer(pointer);
51
- }
52
- return;
53
- }
54
- const deltaX = event.clientX - pointer.clientX;
55
- const deltaY = event.clientY - pointer.clientY;
56
- if (activePointer.current === undefined &&
57
- isSwipeValid(deltaX) &&
58
- Math.abs(deltaX) > Math.abs(deltaY) &&
59
- Math.abs(deltaX) > 30) {
60
- addPointer(event);
61
- activePointer.current = event.pointerId;
62
- startTime.current = Date.now();
63
- onSwipeStart();
64
- }
65
- else if (isCurrentPointer) {
66
- offset.current = deltaX;
67
- onSwipeProgress(deltaX);
68
- }
69
- }
70
- });
71
- React.useEffect(() => cleanup(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)), [subscribeSensors, onPointerDown, onPointerMove, onPointerUp]);
72
- }
@@ -1,3 +0,0 @@
1
- /** prevent browser back/forward navigation on touchpad left/right swipe (especially noticeable in Safari)
2
- * this has to be done via non-passive native event handler */
3
- export declare function usePreventSwipeNavigation<T extends HTMLElement = HTMLElement>(): (node: T | null) => void;
@@ -1,20 +0,0 @@
1
- import * as React from "react";
2
- const WHEEL = "wheel";
3
- function preventDefault(event) {
4
- if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.ctrlKey) {
5
- event.preventDefault();
6
- }
7
- }
8
- export function usePreventSwipeNavigation() {
9
- const ref = React.useRef(null);
10
- return React.useCallback((node) => {
11
- var _a;
12
- if (node) {
13
- node.addEventListener(WHEEL, preventDefault, { passive: false });
14
- }
15
- else {
16
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(WHEEL, preventDefault);
17
- }
18
- ref.current = node;
19
- }, []);
20
- }
@@ -1,3 +0,0 @@
1
- import { UseSensors } from "../../hooks/index.js";
2
- import { SwipeState } from "./index.js";
3
- export declare function useWheelSwipe<T extends Element = Element>(swipeState: SwipeState, subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void): void;