refactor: streamline IconButton labels translation

igordanchenko · Mar 31, 2023 · fce79dd · fce79dd
1 parent 8176c8a
commit fce79dd
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 34 deletions.
diff --git a/src/core/components/IconButton.tsx b/src/core/components/IconButton.tsx
@@ -1,6 +1,6 @@
 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";
 
@@ -17,13 +17,13 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(f
     { label, className, icon: Icon, renderIcon, onClick, style, ...rest },
     ref
 ) {
-    const { styles } = useLightboxProps();
+    const { styles, labels } = useLightboxProps();
 
     return (
         <button
             ref={ref}
             type="button"
-            aria-label={label}
+            aria-label={translateLabel(labels, label)}
             className={clsx(cssClass(ELEMENT_BUTTON), className)}
             onClick={onClick}
             style={{ ...style, ...styles.button }}

diff --git a/src/core/modules/Navigation.tsx b/src/core/modules/Navigation.tsx
@@ -3,9 +3,9 @@ import * as React from "react";
 import { ComponentProps, RenderFunction } from "../../types.js";
 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,
@@ -26,11 +26,9 @@ export type NavigationButtonProps = {
 };
 
 export function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }: NavigationButtonProps) {
-    const { labels } = useLightboxProps();
-
     return (
         <IconButton
-            label={translateLabel(labels, label)}
+            label={label}
             icon={icon}
             renderIcon={renderIcon}
             className={cssClass(`navigation_${action}`)}

diff --git a/src/core/modules/Toolbar.tsx b/src/core/modules/Toolbar.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { ComponentProps } from "../../types.js";
 import { createModule } from "../config.js";
 import { useLayoutEffect } from "../hooks/index.js";
-import { composePrefix, cssClass, label } from "../utils.js";
+import { composePrefix, cssClass } from "../utils.js";
 import { CloseIcon, IconButton } from "../components/index.js";
 import { useContainerRect } from "../hooks/useContainerRect.js";
 import { useController } from "./Controller.js";
@@ -13,7 +13,7 @@ function cssPrefix(value?: string) {
     return composePrefix(MODULE_TOOLBAR, value);
 }
 
-export function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }: ComponentProps) {
+export function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps) {
     const { close, setToolbarWidth } = useController();
     const { setContainerRef, containerRect } = useContainerRect();
 
@@ -24,15 +24,7 @@ export function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, i
     const renderCloseButton = () => {
         if (buttonClose) return buttonClose();
 
-        return (
-            <IconButton
-                key={ACTION_CLOSE}
-                label={label(labels, "Close")}
-                icon={CloseIcon}
-                renderIcon={iconClose}
-                onClick={close}
-            />
-        );
+        return <IconButton key={ACTION_CLOSE} label="Close" icon={CloseIcon} renderIcon={iconClose} onClick={close} />;
     };
 
     return (

diff --git a/src/plugins/captions/CaptionsButton.tsx b/src/plugins/captions/CaptionsButton.tsx
@@ -1,6 +1,6 @@
 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";
 
 const captionsIcon = () => (
@@ -16,15 +16,15 @@ const CaptionsHidden = createIconDisabled("CaptionsVisible", captionsIcon());
 
 export function CaptionsButton() {
     const { visible, show, hide } = useCaptions();
-    const { render, labels } = useLightboxProps();
+    const { render } = useLightboxProps();
 
     if (render.buttonCaptions) {
         return <>{render.buttonCaptions({ visible, show, hide })}</>;
     }
 
     return (
         <IconButton
-            label={label(labels, visible ? "Hide captions" : "Show captions")}
+            label={visible ? "Hide captions" : "Show captions"}
             icon={visible ? CaptionsVisible : CaptionsHidden}
             renderIcon={visible ? render.iconCaptionsVisible : render.iconCaptionsHidden}
             onClick={visible ? hide : show}

diff --git a/src/plugins/fullscreen/FullscreenButton.tsx b/src/plugins/fullscreen/FullscreenButton.tsx
@@ -1,6 +1,6 @@
 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";
 
 const EnterFullscreenIcon = createIcon(
@@ -16,7 +16,7 @@ const ExitFullscreenIcon = createIcon(
 /** Fullscreen button */
 export function FullscreenButton() {
     const { fullscreen, disabled, enter, exit } = useFullscreen();
-    const { labels, render } = useLightboxProps();
+    const { render } = useLightboxProps();
 
     if (disabled) return null;
 
@@ -27,7 +27,7 @@ export function FullscreenButton() {
     return (
         <IconButton
             disabled={disabled}
-            label={label(labels, fullscreen ? "Exit Fullscreen" : "Enter Fullscreen")}
+            label={fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
             icon={fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon}
             renderIcon={fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen}
             onClick={fullscreen ? exit : enter}

diff --git a/src/plugins/slideshow/SlideshowButton.tsx b/src/plugins/slideshow/SlideshowButton.tsx
@@ -1,6 +1,6 @@
 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";
 
 const PlayIcon = createIcon("Play", <path d="M8 5v14l11-7z" />);
@@ -9,7 +9,7 @@ const PauseIcon = createIcon("Pause", <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"
 
 export function SlideshowButton() {
     const { playing, disabled, play, pause } = useSlideshow();
-    const { render, labels } = useLightboxProps();
+    const { render } = useLightboxProps();
     const focusListeners = useLoseFocus(disabled);
 
     if (render.buttonSlideshow) {
@@ -18,7 +18,7 @@ export function SlideshowButton() {
 
     return (
         <IconButton
-            label={label(labels, playing ? "Pause" : "Play")}
+            label={playing ? "Pause" : "Play"}
             icon={playing ? PauseIcon : PlayIcon}
             renderIcon={playing ? render.iconSlideshowPause : render.iconSlideshowPlay}
             onClick={playing ? pause : play}

diff --git a/src/plugins/thumbnails/ThumbnailsButton.tsx b/src/plugins/thumbnails/ThumbnailsButton.tsx
@@ -1,6 +1,6 @@
 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";
 
 const thumbnailsIcon = () => (
@@ -16,15 +16,15 @@ const ThumbnailsHidden = createIconDisabled("ThumbnailsHidden", thumbnailsIcon()
 
 export function ThumbnailsButton() {
     const { visible, show, hide } = useThumbnails();
-    const { render, labels } = useLightboxProps();
+    const { render } = useLightboxProps();
 
     if (render.buttonThumbnails) {
         return <>{render.buttonThumbnails({ visible, show, hide })}</>;
     }
 
     return (
         <IconButton
-            label={label(labels, visible ? "Hide thumbnails" : "Show thumbnails")}
+            label={visible ? "Hide thumbnails" : "Show thumbnails"}
             icon={visible ? ThumbnailsVisible : ThumbnailsHidden}
             renderIcon={visible ? render.iconThumbnailsVisible : render.iconThumbnailsHidden}
             onClick={visible ? hide : show}

diff --git a/src/plugins/zoom/ZoomButton.tsx b/src/plugins/zoom/ZoomButton.tsx
@@ -1,6 +1,6 @@
 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";
 
 const ZoomInIcon = createIcon(
@@ -31,7 +31,7 @@ export const ZoomButton = React.forwardRef<HTMLButtonElement, ZoomButtonProps>(f
     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);
 
@@ -48,7 +48,7 @@ export const ZoomButton = React.forwardRef<HTMLButtonElement, ZoomButtonProps>(f
         <IconButton
             ref={ref}
             disabled={disabled}
-            label={label(labels, zoomIn ? "Zoom in" : "Zoom out")}
+            label={zoomIn ? "Zoom in" : "Zoom out"}
             icon={zoomIn ? ZoomInIcon : ZoomOutIcon}
             renderIcon={zoomIn ? render.iconZoomIn : render.iconZoomOut}
             onClick={zoomIn ? zoomInCallback : zoomOutCallback}