yet-another-react-lightbox 3.15.2 → 3.15.4
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/dist/index.js
CHANGED
|
@@ -1320,11 +1320,14 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
|
|
|
1320
1320
|
setVisible(false);
|
|
1321
1321
|
};
|
|
1322
1322
|
}, []);
|
|
1323
|
+
const handleCleanup = useEventCallback(() => {
|
|
1324
|
+
cleanup.current.forEach((clean) => clean());
|
|
1325
|
+
cleanup.current = [];
|
|
1326
|
+
});
|
|
1323
1327
|
const handleClose = useEventCallback(() => {
|
|
1324
1328
|
var _a;
|
|
1325
1329
|
setVisible(false);
|
|
1326
|
-
|
|
1327
|
-
cleanup.current = [];
|
|
1330
|
+
handleCleanup();
|
|
1328
1331
|
(_a = on.exiting) === null || _a === void 0 ? void 0 : _a.call(on);
|
|
1329
1332
|
setTimeout(() => {
|
|
1330
1333
|
var _a;
|
|
@@ -1359,7 +1362,10 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
|
|
|
1359
1362
|
if (node) {
|
|
1360
1363
|
handleEnter(node);
|
|
1361
1364
|
}
|
|
1362
|
-
|
|
1365
|
+
else {
|
|
1366
|
+
handleCleanup();
|
|
1367
|
+
}
|
|
1368
|
+
}, [handleEnter, handleCleanup]);
|
|
1363
1369
|
return mounted
|
|
1364
1370
|
? createPortal(React.createElement("div", { ref: handleRef, className: clsx(className, cssClass("root"), cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), role: "presentation", "aria-live": "polite", style: {
|
|
1365
1371
|
...(animation.fade !== LightboxDefaultProps.animation.fade
|
|
@@ -18,6 +18,10 @@ declare module "yet-another-react-lightbox" {
|
|
|
18
18
|
height?: number;
|
|
19
19
|
/** thumbnail border width */
|
|
20
20
|
border?: number;
|
|
21
|
+
/** thumbnail border style */
|
|
22
|
+
borderStyle?: string;
|
|
23
|
+
/** thumbnail border color */
|
|
24
|
+
borderColor?: string;
|
|
21
25
|
/** thumbnail border radius */
|
|
22
26
|
borderRadius?: number;
|
|
23
27
|
/** thumbnail inner padding */
|
|
@@ -96,7 +96,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
|
|
|
96
96
|
const { registerSensors, subscribeSensors } = useSensors();
|
|
97
97
|
useKeyboardNavigation(subscribeSensors);
|
|
98
98
|
const thumbnails = useThumbnailsProps();
|
|
99
|
-
const { position, width, height, border, borderRadius, padding, gap, vignette } = thumbnails;
|
|
99
|
+
const { position, width, height, border, borderStyle, borderColor, borderRadius, padding, gap, vignette } = thumbnails;
|
|
100
100
|
const index = globalIndex;
|
|
101
101
|
const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
|
|
102
102
|
const offset = (animationDuration > 0 && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
|
|
@@ -179,6 +179,8 @@ function ThumbnailsTrack({ visible, containerRef }) {
|
|
|
179
179
|
...(border !== defaultThumbnailsProps.border
|
|
180
180
|
? { [cssVar(cssThumbnailPrefix("border"))]: `${border}px` }
|
|
181
181
|
: null),
|
|
182
|
+
...(borderStyle ? { [cssVar(cssThumbnailPrefix("border_style"))]: borderStyle } : null),
|
|
183
|
+
...(borderColor ? { [cssVar(cssThumbnailPrefix("border_color"))]: borderColor } : null),
|
|
182
184
|
...(borderRadius !== defaultThumbnailsProps.borderRadius
|
|
183
185
|
? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${borderRadius}px` }
|
|
184
186
|
: null),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{-webkit-touch-callout:none;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));flex:0 0 auto;overflow:hidden;padding:var(--yarl__thumbnails_container_padding,16px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:12%;pointer-events:none;position:absolute}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);height:100%;left:0;right:0}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);bottom:0;top:0;width:100%}.yarl__thumbnails_track{gap:var(--yarl__thumbnails_thumbnail_gap,16px);outline:none}.yarl__thumbnails_thumbnail{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border:var(--
|
|
1
|
+
.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{-webkit-touch-callout:none;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));flex:0 0 auto;overflow:hidden;padding:var(--yarl__thumbnails_container_padding,16px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:12%;pointer-events:none;position:absolute}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);height:100%;left:0;right:0}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);bottom:0;top:0;width:100%}.yarl__thumbnails_track{gap:var(--yarl__thumbnails_thumbnail_gap,16px);outline:none}.yarl__thumbnails_thumbnail{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-width:var(--yarl__thumbnails_thumbnail_border,1px);box-sizing:content-box;cursor:pointer;flex:0 0 auto;height:var(--yarl__thumbnails_thumbnail_height,80px);outline:none;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);position:relative;width:var(--yarl__thumbnails_thumbnail_width,120px)}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;opacity:0}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{cursor:unset;visibility:hidden}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));height:var(--yarl__thumbnails_thumbnail_icon_size,32px);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px)}.yarl__thumbnails_contain_image{-o-object-fit:contain;object-fit:contain}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}
|