yet-another-react-lightbox
Advanced tools
Comparing version 3.2.0 to 3.3.0
import * as React from "react"; | ||
import { clsx, cssClass } from "../utils.js"; | ||
import { clsx, cssClass, label as translateLabel } from "../utils.js"; | ||
import { useLightboxProps } from "../contexts/index.js"; | ||
import { ELEMENT_BUTTON, ELEMENT_ICON } from "../consts.js"; | ||
export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) => { | ||
const { styles } = useLightboxProps(); | ||
return (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass(ELEMENT_BUTTON), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass(ELEMENT_ICON), style: styles.icon }))); | ||
export const IconButton = React.forwardRef(function IconButton({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) { | ||
const { styles, labels } = useLightboxProps(); | ||
return (React.createElement("button", { ref: ref, type: "button", "aria-label": translateLabel(labels, label), className: clsx(cssClass(ELEMENT_BUTTON), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass(ELEMENT_ICON), style: styles.icon }))); | ||
}); | ||
IconButton.displayName = "IconButton"; |
import * as React from "react"; | ||
import { createModule } from "../config.js"; | ||
import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js"; | ||
import { cssClass, label as translateLabel } from "../utils.js"; | ||
import { cssClass } from "../utils.js"; | ||
import { IconButton, NextIcon, PreviousIcon } from "../components/index.js"; | ||
import { useLightboxProps, useLightboxState } from "../contexts/index.js"; | ||
import { useLightboxState } from "../contexts/index.js"; | ||
import { useController } from "./Controller.js"; | ||
import { ACTION_NEXT, ACTION_PREV, EVENT_ON_KEY_DOWN, MODULE_NAVIGATION, VK_ARROW_LEFT, VK_ARROW_RIGHT, } from "../consts.js"; | ||
export function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }) { | ||
const { labels } = useLightboxProps(); | ||
return (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) })); | ||
return (React.createElement(IconButton, { label: label, icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) })); | ||
} | ||
@@ -13,0 +12,0 @@ export function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) { |
/// <reference types="react" /> | ||
import { ComponentProps } from "../../types.js"; | ||
export declare function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element; | ||
export declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element; | ||
export declare const ToolbarModule: import("../../types.js").Module; |
import * as React from "react"; | ||
import { createModule } from "../config.js"; | ||
import { composePrefix, cssClass, label } from "../utils.js"; | ||
import { useLayoutEffect } from "../hooks/index.js"; | ||
import { composePrefix, cssClass } from "../utils.js"; | ||
import { CloseIcon, IconButton } from "../components/index.js"; | ||
@@ -11,11 +12,15 @@ import { useContainerRect } from "../hooks/useContainerRect.js"; | ||
} | ||
export function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) { | ||
export function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }) { | ||
const { close, setToolbarWidth } = useController(); | ||
const { setContainerRef, containerRect } = useContainerRect(); | ||
React.useEffect(() => { | ||
useLayoutEffect(() => { | ||
setToolbarWidth(containerRect === null || containerRect === void 0 ? void 0 : containerRect.width); | ||
}, [setToolbarWidth, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]); | ||
const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: ACTION_CLOSE, label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => close() })); | ||
const renderCloseButton = () => { | ||
if (buttonClose) | ||
return buttonClose(); | ||
return React.createElement(IconButton, { key: ACTION_CLOSE, label: "Close", icon: CloseIcon, renderIcon: iconClose, onClick: close }); | ||
}; | ||
return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button)))); | ||
} | ||
export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar); |
import * as React from "react"; | ||
import { ContainerRect, Labels, LengthOrPercentage, LightboxProps, Slide, SlideImage } from "../types.js"; | ||
import { ContainerRect, Labels, LengthOrPercentage, LightboxProps, Slide, SlideImage, ToolbarSettings } from "../types.js"; | ||
export declare const clsx: (...classes: (string | boolean | undefined)[]) => string; | ||
@@ -29,1 +29,2 @@ export declare const cssClass: (name: string) => string; | ||
export declare const getSlide: (slides: Slide[], index: number) => Slide; | ||
export declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings; |
@@ -50,1 +50,14 @@ import * as React from "react"; | ||
export const getSlide = (slides, index) => slides[getSlideIndex(index, slides.length)]; | ||
export function addToolbarButton(toolbar, key, button) { | ||
if (!button) | ||
return toolbar; | ||
const { buttons, ...restToolbar } = toolbar; | ||
const index = buttons.findIndex((item) => item === key); | ||
const buttonWithKey = React.isValidElement(button) ? React.cloneElement(button, { key }, null) : button; | ||
if (index >= 0) { | ||
const result = [...buttons]; | ||
result.splice(index, 1, buttonWithKey); | ||
return { buttons: result, ...restToolbar }; | ||
} | ||
return { buttons: [buttonWithKey, ...buttons], ...restToolbar }; | ||
} |
import * as React from "react"; | ||
import { createModule, PLUGIN_CAPTIONS } from "../../core/index.js"; | ||
import { addToolbarButton, createModule, PLUGIN_CAPTIONS } from "../../core/index.js"; | ||
import { Title } from "./Title.js"; | ||
@@ -9,3 +9,3 @@ import { Description } from "./Description.js"; | ||
export function Captions({ augment, addModule }) { | ||
augment(({ render: { slideFooter: renderFooter, ...restRender }, toolbar: { buttons, ...restToolbar }, captions: captionsProps, ...restProps }) => { | ||
augment(({ captions: captionsProps, render: { slideFooter: renderFooter, ...restRender }, toolbar, ...restProps }) => { | ||
const captions = resolveCaptionsProps(captionsProps); | ||
@@ -20,6 +20,3 @@ return { | ||
}, | ||
toolbar: { | ||
buttons: [...(captions.showToggle ? [React.createElement(CaptionsButton, { key: PLUGIN_CAPTIONS })] : []), ...buttons], | ||
...restToolbar, | ||
}, | ||
toolbar: addToolbarButton(toolbar, PLUGIN_CAPTIONS, captions.showToggle ? React.createElement(CaptionsButton, null) : null), | ||
captions, | ||
@@ -26,0 +23,0 @@ ...restProps, |
import * as React from "react"; | ||
import { createIcon, createIconDisabled, IconButton, label, useLightboxProps } from "../../core/index.js"; | ||
import { createIcon, createIconDisabled, IconButton, useLightboxProps } from "../../core/index.js"; | ||
import { useCaptions } from "./CaptionsContext.js"; | ||
@@ -11,7 +11,7 @@ const captionsIcon = () => (React.createElement(React.Fragment, null, | ||
const { visible, show, hide } = useCaptions(); | ||
const { render, labels } = useLightboxProps(); | ||
const { render } = useLightboxProps(); | ||
if (render.buttonCaptions) { | ||
return React.createElement(React.Fragment, null, render.buttonCaptions({ visible, show, hide })); | ||
} | ||
return (React.createElement(IconButton, { label: label(labels, visible ? "Hide captions" : "Show captions"), icon: visible ? CaptionsVisible : CaptionsHidden, renderIcon: visible ? render.iconCaptionsVisible : render.iconCaptionsHidden, onClick: visible ? hide : show })); | ||
return (React.createElement(IconButton, { label: visible ? "Hide captions" : "Show captions", icon: visible ? CaptionsVisible : CaptionsHidden, renderIcon: visible ? render.iconCaptionsVisible : render.iconCaptionsHidden, onClick: visible ? hide : show })); | ||
} |
import * as React from "react"; | ||
import { PLUGIN_CAPTIONS } from "../../core/index.js"; | ||
import { Captions } from "./Captions.js"; | ||
@@ -11,2 +12,5 @@ declare module "../../types.js" { | ||
} | ||
interface ToolbarButtonKeys { | ||
[PLUGIN_CAPTIONS]: null; | ||
} | ||
interface LightboxProps { | ||
@@ -13,0 +17,0 @@ /** Captions plugin settings */ |
@@ -0,2 +1,3 @@ | ||
import { PLUGIN_CAPTIONS } from "../../core/index.js"; | ||
import { Captions } from "./Captions.js"; | ||
export default Captions; |
import * as React from "react"; | ||
import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js"; | ||
import { addToolbarButton, createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS, } from "../../core/index.js"; | ||
import { resolveFullscreenProps } from "./props.js"; | ||
@@ -7,4 +7,4 @@ import { FullscreenButton } from "./FullscreenButton.js"; | ||
export function Fullscreen({ augment, contains, addParent }) { | ||
augment(({ fullscreen, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({ | ||
toolbar: { buttons: [React.createElement(FullscreenButton, { key: PLUGIN_FULLSCREEN }), ...buttons], ...restToolbar }, | ||
augment(({ fullscreen, toolbar, ...restProps }) => ({ | ||
toolbar: addToolbarButton(toolbar, PLUGIN_FULLSCREEN, React.createElement(FullscreenButton, null)), | ||
fullscreen: resolveFullscreenProps(fullscreen), | ||
@@ -11,0 +11,0 @@ ...restProps, |
import * as React from "react"; | ||
import { createIcon, IconButton, label, useLightboxProps } from "../../core/index.js"; | ||
import { createIcon, IconButton, useLightboxProps } from "../../core/index.js"; | ||
import { useFullscreen } from "./FullscreenContext.js"; | ||
@@ -9,3 +9,3 @@ const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" })); | ||
const { fullscreen, disabled, enter, exit } = useFullscreen(); | ||
const { labels, render } = useLightboxProps(); | ||
const { render } = useLightboxProps(); | ||
if (disabled) | ||
@@ -16,3 +16,3 @@ return null; | ||
} | ||
return (React.createElement(IconButton, { disabled: disabled, label: label(labels, fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: fullscreen ? exit : enter })); | ||
return (React.createElement(IconButton, { disabled: disabled, label: fullscreen ? "Exit Fullscreen" : "Enter Fullscreen", icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: fullscreen ? exit : enter })); | ||
} |
import * as React from "react"; | ||
import { PLUGIN_FULLSCREEN } from "../../core/index.js"; | ||
import { Fullscreen } from "./Fullscreen.js"; | ||
@@ -21,2 +22,5 @@ declare module "../../types.js" { | ||
} | ||
interface ToolbarButtonKeys { | ||
[PLUGIN_FULLSCREEN]: null; | ||
} | ||
/** Fullscreen plugin ref */ | ||
@@ -23,0 +27,0 @@ interface FullscreenRef { |
@@ -0,2 +1,3 @@ | ||
import { PLUGIN_FULLSCREEN } from "../../core/index.js"; | ||
import { Fullscreen } from "./Fullscreen.js"; | ||
export default Fullscreen; |
/// <reference types="react" /> | ||
import { PLUGIN_SLIDESHOW } from "../../core/index.js"; | ||
import { Slideshow } from "./Slideshow.js"; | ||
@@ -23,2 +24,5 @@ declare module "../../types.js" { | ||
} | ||
interface ToolbarButtonKeys { | ||
[PLUGIN_SLIDESHOW]: null; | ||
} | ||
/** Slideshow plugin ref */ | ||
@@ -25,0 +29,0 @@ interface SlideshowRef { |
@@ -0,2 +1,3 @@ | ||
import { PLUGIN_SLIDESHOW } from "../../core/index.js"; | ||
import { Slideshow } from "./Slideshow.js"; | ||
export default Slideshow; |
import * as React from "react"; | ||
import { createModule, PLUGIN_SLIDESHOW } from "../../core/index.js"; | ||
import { addToolbarButton, createModule, PLUGIN_SLIDESHOW } from "../../core/index.js"; | ||
import { resolveSlideshowProps } from "./props.js"; | ||
@@ -7,4 +7,4 @@ import { SlideshowContextProvider } from "./SlideshowContext.js"; | ||
export function Slideshow({ augment, addModule }) { | ||
augment(({ slideshow, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({ | ||
toolbar: { buttons: [React.createElement(SlideshowButton, { key: PLUGIN_SLIDESHOW }), ...buttons], ...restToolbar }, | ||
augment(({ slideshow, toolbar, ...restProps }) => ({ | ||
toolbar: addToolbarButton(toolbar, PLUGIN_SLIDESHOW, React.createElement(SlideshowButton, null)), | ||
slideshow: resolveSlideshowProps(slideshow), | ||
@@ -11,0 +11,0 @@ ...restProps, |
import * as React from "react"; | ||
import { createIcon, IconButton, label, useLightboxProps, useLoseFocus } from "../../core/index.js"; | ||
import { createIcon, IconButton, useLightboxProps, useLoseFocus } from "../../core/index.js"; | ||
import { useSlideshow } from "./SlideshowContext.js"; | ||
@@ -8,3 +8,3 @@ const PlayIcon = createIcon("Play", React.createElement("path", { d: "M8 5v14l11-7z" })); | ||
const { playing, disabled, play, pause } = useSlideshow(); | ||
const { render, labels } = useLightboxProps(); | ||
const { render } = useLightboxProps(); | ||
const focusListeners = useLoseFocus(disabled); | ||
@@ -14,3 +14,3 @@ if (render.buttonSlideshow) { | ||
} | ||
return (React.createElement(IconButton, { label: label(labels, playing ? "Pause" : "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: playing ? pause : play, disabled: disabled, ...focusListeners })); | ||
return (React.createElement(IconButton, { label: playing ? "Pause" : "Play", icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: playing ? pause : play, disabled: disabled, ...focusListeners })); | ||
} |
/// <reference types="react" /> | ||
import { PLUGIN_THUMBNAILS } from "../../core/index.js"; | ||
import { Thumbnails } from "./Thumbnails.js"; | ||
@@ -57,2 +58,5 @@ type Position = "top" | "bottom" | "start" | "end"; | ||
} | ||
interface ToolbarButtonKeys { | ||
[PLUGIN_THUMBNAILS]: null; | ||
} | ||
/** Thumbnails plugin ref */ | ||
@@ -59,0 +63,0 @@ interface ThumbnailsRef { |
@@ -0,2 +1,3 @@ | ||
import { PLUGIN_THUMBNAILS } from "../../core/index.js"; | ||
import { Thumbnails } from "./Thumbnails.js"; | ||
export default Thumbnails; |
import * as React from "react"; | ||
import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js"; | ||
import { addToolbarButton, createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS, } from "../../core/index.js"; | ||
import { resolveThumbnailsProps } from "./props.js"; | ||
@@ -7,9 +7,6 @@ import { ThumbnailsContextProvider } from "./ThumbnailsContext.js"; | ||
export function Thumbnails({ augment, contains, append, addParent }) { | ||
augment(({ thumbnails: thumbnailsProps, toolbar: { buttons, ...restToolbar }, ...restProps }) => { | ||
augment(({ thumbnails: thumbnailsProps, toolbar, ...restProps }) => { | ||
const thumbnails = resolveThumbnailsProps(thumbnailsProps); | ||
return { | ||
toolbar: { | ||
buttons: [...(thumbnails.showToggle ? [React.createElement(ThumbnailsButton, { key: PLUGIN_THUMBNAILS })] : []), ...buttons], | ||
...restToolbar, | ||
}, | ||
toolbar: addToolbarButton(toolbar, PLUGIN_THUMBNAILS, thumbnails.showToggle ? React.createElement(ThumbnailsButton, null) : null), | ||
thumbnails, | ||
@@ -16,0 +13,0 @@ ...restProps, |
import * as React from "react"; | ||
import { createIcon, createIconDisabled, IconButton, label, useLightboxProps } from "../../core/index.js"; | ||
import { createIcon, createIconDisabled, IconButton, useLightboxProps } from "../../core/index.js"; | ||
import { useThumbnails } from "./ThumbnailsContext.js"; | ||
@@ -11,7 +11,7 @@ const thumbnailsIcon = () => (React.createElement(React.Fragment, null, | ||
const { visible, show, hide } = useThumbnails(); | ||
const { render, labels } = useLightboxProps(); | ||
const { render } = useLightboxProps(); | ||
if (render.buttonThumbnails) { | ||
return React.createElement(React.Fragment, null, render.buttonThumbnails({ visible, show, hide })); | ||
} | ||
return (React.createElement(IconButton, { label: label(labels, visible ? "Hide thumbnails" : "Show thumbnails"), icon: visible ? ThumbnailsVisible : ThumbnailsHidden, renderIcon: visible ? render.iconThumbnailsVisible : render.iconThumbnailsHidden, onClick: visible ? hide : show })); | ||
return (React.createElement(IconButton, { label: visible ? "Hide thumbnails" : "Show thumbnails", icon: visible ? ThumbnailsVisible : ThumbnailsHidden, renderIcon: visible ? render.iconThumbnailsVisible : render.iconThumbnailsHidden, onClick: visible ? hide : show })); | ||
} |
/// <reference types="react" /> | ||
import { PLUGIN_ZOOM } from "../../core/index.js"; | ||
import { Zoom } from "./Zoom.js"; | ||
@@ -56,2 +57,5 @@ declare module "../../types.js" { | ||
} | ||
interface ToolbarButtonKeys { | ||
[PLUGIN_ZOOM]: null; | ||
} | ||
/** Zoom plugin ref */ | ||
@@ -58,0 +62,0 @@ interface ZoomRef { |
@@ -0,2 +1,3 @@ | ||
import { PLUGIN_ZOOM } from "../../core/index.js"; | ||
import { Zoom } from "./Zoom.js"; | ||
export default Zoom; |
import * as React from "react"; | ||
import { createModule, isImageSlide, PLUGIN_ZOOM } from "../../core/index.js"; | ||
import { addToolbarButton, createModule, isImageSlide, PLUGIN_ZOOM } from "../../core/index.js"; | ||
import { resolveZoomProps } from "./props.js"; | ||
@@ -8,5 +8,5 @@ import { ZoomContextProvider } from "./ZoomController.js"; | ||
export const Zoom = ({ augment, addModule }) => { | ||
augment(({ toolbar: { buttons, ...restToolbar }, render, zoom, ...restProps }) => ({ | ||
augment(({ toolbar, render, zoom, ...restProps }) => ({ | ||
zoom: resolveZoomProps(zoom), | ||
toolbar: { buttons: [React.createElement(ZoomToolbarControl, { key: PLUGIN_ZOOM }), ...buttons], ...restToolbar }, | ||
toolbar: addToolbarButton(toolbar, PLUGIN_ZOOM, React.createElement(ZoomToolbarControl, null)), | ||
render: { | ||
@@ -13,0 +13,0 @@ ...render, |
import * as React from "react"; | ||
import { createIcon, IconButton, label, useLightboxProps } from "../../core/index.js"; | ||
import { createIcon, IconButton, useLightboxProps } from "../../core/index.js"; | ||
import { useZoom } from "./ZoomController.js"; | ||
@@ -8,7 +8,7 @@ const ZoomInIcon = createIcon("ZoomIn", React.createElement(React.Fragment, null, | ||
const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" })); | ||
export const ZoomButton = React.forwardRef(({ zoomIn, onLoseFocus }, ref) => { | ||
export const ZoomButton = React.forwardRef(function ZoomButton({ zoomIn, onLoseFocus }, ref) { | ||
const wasEnabled = React.useRef(false); | ||
const wasFocused = React.useRef(false); | ||
const { zoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled } = useZoom(); | ||
const { render, labels } = useLightboxProps(); | ||
const { render } = useLightboxProps(); | ||
const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= 1); | ||
@@ -23,3 +23,3 @@ React.useEffect(() => { | ||
}, [disabled, onLoseFocus]); | ||
return (React.createElement(IconButton, { ref: ref, disabled: disabled, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, onClick: zoomIn ? zoomInCallback : zoomOutCallback, onFocus: () => { | ||
return (React.createElement(IconButton, { ref: ref, disabled: disabled, label: zoomIn ? "Zoom in" : "Zoom out", icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, onClick: zoomIn ? zoomInCallback : zoomOutCallback, onFocus: () => { | ||
wasFocused.current = true; | ||
@@ -30,2 +30,1 @@ }, onBlur: () => { | ||
}); | ||
ZoomButton.displayName = "ZoomButton"; |
@@ -281,4 +281,8 @@ import * as React from "react"; | ||
/** buttons to render in the toolbar */ | ||
buttons: ("close" | React.ReactNode)[]; | ||
buttons: (ToolbarButtonKey | React.ReactNode)[]; | ||
} | ||
export type ToolbarButtonKey = keyof ToolbarButtonKeys; | ||
export interface ToolbarButtonKeys { | ||
close: null; | ||
} | ||
/** Plugin methods */ | ||
@@ -285,0 +289,0 @@ export interface PluginProps { |
{ | ||
"name": "yet-another-react-lightbox", | ||
"version": "3.2.0", | ||
"version": "3.3.0", | ||
"description": "Modern React lightbox component", | ||
@@ -5,0 +5,0 @@ "author": "Igor Danchenko", |
219437
4623