feat(counter): add custom separator (#129)

src/plugins/counter/Counter.tsx

@@ -10,20 +10,34 @@ import {
     PluginProps,
     useLightboxState,
 } from "../../index.js";
+import { resolveCounterProps } from "./props.js";
 
-export function CounterComponent({ counter: { className, ...rest } = {} }: ComponentProps) {
+export function CounterComponent({ counter }: ComponentProps) {
     const { slides, currentIndex } = useLightboxState();
 
+    const {
+        separator,
+        container: { className, ...rest },
+        // TODO v4: remove legacy configuration options
+        className: legacyClassName,
+        ...legacyRest
+    } = resolveCounterProps(counter);
+
     if (slides.length === 0) return null;
 
     return (
-        <div className={clsx(cssClass("counter"), className)} {...rest}>
-            {currentIndex + 1} / {slides.length}
+        <div className={clsx(cssClass("counter"), className || legacyClassName)} {...legacyRest} {...rest}>
+            {currentIndex + 1} {separator} {slides.length}
         </div>
     );
 }
 
 /** Counter plugin */
-export function Counter({ addChild }: PluginProps) {
+export function Counter({ augment, addChild }: PluginProps) {
+    augment(({ counter, ...restProps }) => ({
+        counter: resolveCounterProps(counter),
+        ...restProps,
+    }));
+
     addChild(MODULE_CONTROLLER, createModule(PLUGIN_COUNTER, CounterComponent));
 }

src/plugins/counter/index.ts

@@ -4,8 +4,14 @@ import { Counter } from "./Counter.js";
 
 declare module "../../types.js" {
     interface LightboxProps {
-        /** HTML div element attributes to be passed to the Counter plugin container */
-        counter?: React.HTMLAttributes<HTMLDivElement>;
+        // TODO v4: remove html attributes from `counter` prop
+        /** Counter plugin settings */
+        counter?: React.HTMLAttributes<HTMLDivElement> & {
+            /** custom separator */
+            separator?: string;
+            /** counter container HTML attributes */
+            container?: React.HTMLAttributes<HTMLDivElement>;
+        };
     }
 }
 

src/plugins/counter/props.ts

@@ -0,0 +1,11 @@
+import { LightboxProps } from "../../index.js";
+
+export const defaultCounterProps = {
+    separator: "/",
+    container: {},
+} as Required<NonNullable<LightboxProps["counter"]>>;
+
+export const resolveCounterProps = (counter: LightboxProps["counter"]) => ({
+    ...defaultCounterProps,
+    ...counter,
+});