fix: disable auto focus in inline mode

igordanchenko · May 31, 2022 · 3e69bc7 · 3e69bc7
1 parent 51cc4c6
commit 3e69bc7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/src/Lightbox.tsx b/src/Lightbox.tsx
@@ -53,12 +53,13 @@ type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
 export const Lightbox = (
     props: DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "on">
 ) => {
-    const { carousel, animation, render, toolbar, on, ...restProps } = props;
+    const { carousel, animation, render, toolbar, controller, on, ...restProps } = props;
     const {
         carousel: defaultCarousel,
         animation: defaultAnimation,
         render: defaultRender,
         toolbar: defaultToolbar,
+        controller: defaultController,
         on: defaultOn,
         ...restDefaultProps
     } = LightboxDefaultProps;
@@ -69,6 +70,7 @@ export const Lightbox = (
             animation={{ ...defaultAnimation, ...animation }}
             render={{ ...defaultRender, ...render }}
             toolbar={{ ...defaultToolbar, ...toolbar }}
+            controller={{ ...defaultController, ...controller }}
             on={{ ...defaultOn, ...on }}
             {...restDefaultProps}
             {...restProps}

diff --git a/src/core/modules/Controller.tsx b/src/core/modules/Controller.tsx
@@ -84,8 +84,10 @@ export const Controller: Component = ({ children, ...props }) => {
     }, [containerRef]);
 
     React.useEffect(() => {
-        containerRef.current?.focus();
-    }, [containerRef]);
+        if (refs.current.props.controller.focus) {
+            containerRef.current?.focus();
+        }
+    }, [containerRef, refs]);
 
     React.useEffect(() => {
         refs.current.props.on.view?.(state.currentIndex);

diff --git a/src/plugins/Inline.tsx b/src/plugins/Inline.tsx
@@ -14,16 +14,25 @@ const InlineContainer: Component = ({ inline, children }) => <div {...inline}>{c
 const InlineModule = createModule("inline", InlineContainer);
 
 const Inline: Plugin = ({ augment, replace, remove }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, open, close, ...restProps }) => ({
-        open: true,
-        close: () => {},
-        toolbar: {
-            buttons: buttons.filter((button) => button !== "close"),
-            ...restToolbar,
-        },
-        inline: { style: { width: "100%", height: "100%" } },
-        ...restProps,
-    }));
+    augment(
+        ({
+            toolbar: { buttons, ...restToolbar },
+            open,
+            close,
+            controller: { focus, ...restController },
+            ...restProps
+        }) => ({
+            open: true,
+            close: () => {},
+            toolbar: {
+                buttons: buttons.filter((button) => button !== "close"),
+                ...restToolbar,
+            },
+            inline: { style: { width: "100%", height: "100%" } },
+            controller: { focus: false, ...restController },
+            ...restProps,
+        })
+    );
 
     remove("no-scroll");
     replace("portal", InlineModule);

diff --git a/src/types.ts b/src/types.ts
@@ -26,6 +26,10 @@ export interface AnimationSettings {
     swipe: number;
 }
 
+export interface ControllerSettings {
+    focus: boolean;
+}
+
 export interface Render {
     slide?: (slide: Slide) => React.ReactNode;
     iconPrev?: () => React.ReactNode;
@@ -57,6 +61,7 @@ export interface LightboxProps {
     toolbar: ToolbarSettings;
     carousel: CarouselSettings;
     animation: AnimationSettings;
+    controller: ControllerSettings;
     on: Callbacks;
 }
 
@@ -108,6 +113,9 @@ export const LightboxPropTypes = {
         fade: PropTypes.number.isRequired,
         swipe: PropTypes.number.isRequired,
     }).isRequired,
+    controller: PropTypes.shape({
+        focus: PropTypes.bool.isRequired,
+    }).isRequired,
     on: PropTypes.shape({
         view: PropTypes.func,
         entering: PropTypes.func,
@@ -136,6 +144,9 @@ export const LightboxDefaultProps = {
         padding: "16px",
         spacing: "30%",
     } as CarouselSettings,
+    controller: {
+        focus: true,
+    } as ControllerSettings,
     on: {} as Callbacks,
 };