fix: add type definitions for translation labels

igordanchenko · Aug 8, 2024 · 3d12ec7 · 3d12ec7
1 parent 2b9816b
commit 3d12ec7
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 10 deletions.
diff --git a/docs/documentation.md b/docs/documentation.md
@@ -89,7 +89,7 @@ import "yet-another-react-lightbox/styles.css";
       <td>labels</td>
       <td>object</td>
       <td>
-        <p>Custom UI labels.</p>
+        <p>Custom UI labels / translations.</p>
         <p>Example: <span class="font-mono">labels=&#123;&#123; Next: "Next slide" &#125;&#125;</span></p>
       </td>
     </tr>

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -3,9 +3,10 @@ import * as React from "react";
 import { clsx, cssClass, label as translateLabel } from "../utils.js";
 import { useLightboxProps } from "../contexts/index.js";
 import { ELEMENT_BUTTON, ELEMENT_ICON } from "../consts.js";
+import { Label } from "../types.js";
 
 export type IconButtonProps = React.ComponentProps<"button"> & {
-  label: string;
+  label: Label;
   icon: React.ElementType;
   renderIcon?: () => React.ReactNode;
 };

diff --git a/src/modules/Navigation/Navigation.tsx b/src/modules/Navigation/Navigation.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentProps, RenderFunction } from "../../types.js";
+import { ComponentProps, Label, RenderFunction } from "../../types.js";
 import { createModule } from "../../config.js";
 import { useLoseFocus } from "../../hooks/index.js";
 import { cssClass } from "../../utils.js";
@@ -11,7 +11,7 @@ import { useNavigationState } from "./useNavigationState.js";
 import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
 
 export type NavigationButtonProps = {
-  label: string;
+  label: Label;
   icon: React.ElementType;
   renderIcon?: RenderFunction;
   action: "prev" | "next";

diff --git a/src/plugins/captions/index.ts b/src/plugins/captions/index.ts
@@ -56,6 +56,11 @@ declare module "../../types.js" {
     buttonCaptions?: RenderFunction<CaptionsRef>;
   }
 
+  interface Labels {
+    "Show captions"?: string;
+    "Hide captions"?: string;
+  }
+
   /** Captions plugin ref */
   interface CaptionsRef {
     /** if `true`, captions are visible */

diff --git a/src/plugins/download/index.ts b/src/plugins/download/index.ts
@@ -35,6 +35,10 @@ declare module "../../types.js" {
     iconDownload?: RenderFunction;
   }
 
+  interface Labels {
+    Download?: string;
+  }
+
   // noinspection JSUnusedGlobalSymbols
   interface Callbacks {
     /** a callback called on slide download */

diff --git a/src/plugins/fullscreen/index.ts b/src/plugins/fullscreen/index.ts
@@ -24,6 +24,12 @@ declare module "../../types.js" {
     iconExitFullscreen?: RenderFunction;
   }
 
+  interface Labels {
+    // TODO v4: change Fullscreen to lowercase
+    "Enter Fullscreen"?: string;
+    "Exit Fullscreen"?: string;
+  }
+
   // noinspection JSUnusedGlobalSymbols
   interface Callbacks {
     /** a callback called when the lightbox enters fullscreen mode */

diff --git a/src/plugins/share/index.ts b/src/plugins/share/index.ts
@@ -34,6 +34,10 @@ declare module "../../types.js" {
     iconShare?: RenderFunction;
   }
 
+  interface Labels {
+    Share?: string;
+  }
+
   // noinspection JSUnusedGlobalSymbols
   interface Callbacks {
     /** a callback called on slide share */

diff --git a/src/plugins/slideshow/index.ts b/src/plugins/slideshow/index.ts
@@ -25,6 +25,11 @@ declare module "../../types.js" {
     buttonSlideshow?: RenderFunction<SlideshowRef>;
   }
 
+  interface Labels {
+    Play?: string;
+    Pause?: string;
+  }
+
   // noinspection JSUnusedGlobalSymbols
   interface Callbacks {
     /** a callback called on slideshow playback start */

diff --git a/src/plugins/thumbnails/index.ts b/src/plugins/thumbnails/index.ts
@@ -56,6 +56,11 @@ declare module "../../types.js" {
     buttonThumbnails?: RenderFunction<ThumbnailsRef>;
   }
 
+  interface Labels {
+    "Show thumbnails"?: string;
+    "Hide thumbnails"?: string;
+  }
+
   /** `render.thumbnail` render function props */
   type RenderThumbnailProps = {
     slide: Slide;

diff --git a/src/plugins/zoom/index.ts b/src/plugins/zoom/index.ts
@@ -45,6 +45,11 @@ declare module "../../types.js" {
     iconZoomOut?: RenderFunction;
   }
 
+  interface Labels {
+    "Zoom in"?: string;
+    "Zoom out"?: string;
+  }
+
   // noinspection JSUnusedGlobalSymbols
   interface RenderSlideProps {
     /** current zoom level */

diff --git a/src/types.ts b/src/types.ts
@@ -30,7 +30,7 @@ export interface LightboxProps {
   slides: Slide[];
   /** custom render functions */
   render: Render;
-  /** custom UI labels */
+  /** custom UI labels / translations */
   labels: Labels;
   /** enabled plugins */
   plugins: Plugin[];
@@ -377,10 +377,14 @@ export interface Callbacks {
   exited?: Callback;
 }
 
-/** Custom UI labels */
-export type Labels = {
-  [key: string]: string;
-};
+/** Custom UI labels / translations */
+export interface Labels {
+  Previous?: string;
+  Next?: string;
+  Close?: string;
+}
+
+export type Label = keyof Labels;
 
 /** Toolbar settings */
 export interface ToolbarSettings {

diff --git a/src/utils.ts b/src/utils.ts
@@ -3,6 +3,7 @@ import { IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER } from "./consts.js";
 import {
   CarouselSettings,
   ContainerRect,
+  Label,
   Labels,
   LengthOrPercentage,
   LightboxProps,
@@ -33,7 +34,7 @@ export function makeComposePrefix(base: string) {
   return (prefix?: string) => composePrefix(base, prefix);
 }
 
-export function label(labels: Labels | undefined, defaultLabel: string) {
+export function label(labels: Labels | undefined, defaultLabel: Label) {
   return labels?.[defaultLabel] ?? defaultLabel;
 }
 

diff --git a/test/types/src/App.tsx b/test/types/src/App.tsx
@@ -230,6 +230,25 @@ export default function App() {
           thumbnailsTrack: { borderColor: "#eee" },
           thumbnailsContainer: { borderColor: "#eee" },
         }}
+        labels={{
+          Previous: "Custom Previous",
+          Next: "Custom Next",
+          Close: "Custom Close",
+          Play: "Custom Play",
+          Pause: "Custom Pause",
+          Share: "Custom Share",
+          Download: "Custom Download",
+          "Zoom in": "Custom Zoom In",
+          "Zoom out": "Custom Zoom Out",
+          "Enter Fullscreen": "Custom Enter Fullscreen",
+          "Exit Fullscreen": "Custom Exit Fullscreen",
+          "Show captions": "Custom Show Captions",
+          "Hide captions": "Custom Hide Captions",
+          "Show thumbnails": "Custom Show thumbnails",
+          "Hide thumbnails": "Custom Hide thumbnails",
+          // @ts-expect-error
+          "non-existent-label": "non-existent-label",
+        }}
       />
 
       <button type="button" onClick={() => setOpen(true)} style={{ display: "block", margin: "20px auto" }}>