fix(component): Check for window in <Flowbite> context component

themesberg · May 17, 2022 · 688cb29 · 688cb29
1 parent b77cd9b
commit 688cb29
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/src/lib/components/Carousel/index.tsx b/src/lib/components/Carousel/index.tsx
@@ -15,6 +15,7 @@ import {
 import classNames from 'classnames';
 import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi';
 import ScrollContainer from 'react-indiana-drag-scroll';
+import windowExists from '../../helpers/window-exists';
 
 export type CarouselProps = PropsWithChildren<{
   slide?: boolean;
@@ -35,7 +36,7 @@ export const Carousel: FC<CarouselProps> = ({
   const [activeItem, setActiveItem] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
   const carouselContainer = useRef<HTMLDivElement>(null);
-  const isDeviceMobile = typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1;
+  const isDeviceMobile = windowExists() && navigator.userAgent.indexOf('IEMobile') !== -1;
 
   const items = useMemo(
     () =>

diff --git a/src/lib/components/Flowbite/ThemeContext.tsx b/src/lib/components/Flowbite/ThemeContext.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { FC, ReactNode, createContext, useContext, useState, useEffect } from 'react';
+import windowExists from '../../helpers/window-exists';
 import defaultTheme from '../../theme/default';
 
 export type Mode = string | undefined | 'light' | 'dark';
@@ -36,16 +37,22 @@ export const useThemeMode = (
   const savePreference = (m: string) => localStorage.setItem('theme', m);
 
   const toggleMode = () => {
-    if (!mode) return;
+    if (!mode) {
+      return;
+    }
+
+    if (windowExists()) {
+      document.documentElement.classList.toggle('dark');
+    }
 
-    document.documentElement.classList.toggle('dark');
     savePreference(mode);
     setMode(mode == 'dark' ? 'light' : 'dark');
   };
 
   if (usePreferences) {
     useEffect(() => {
-      const userPreference = !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const userPreference =
+        windowExists() && !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
       const userMode = localStorage.getItem('theme') || (userPreference ? 'dark' : 'light');
 
       if (userMode) {
@@ -54,10 +61,16 @@ export const useThemeMode = (
     }, []);
 
     useEffect(() => {
-      if (!mode) return;
+      if (!mode) {
+        return;
+      }
 
       savePreference(mode);
 
+      if (!windowExists()) {
+        return;
+      }
+
       if (mode != 'dark') {
         document.documentElement.classList.remove('dark');
       } else {

diff --git a/src/lib/components/Flowbite/index.tsx b/src/lib/components/Flowbite/index.tsx
@@ -2,6 +2,7 @@ import { FC, HTMLAttributes, useLayoutEffect, useMemo } from 'react';
 import { ThemeContext, useThemeMode } from './ThemeContext';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import defaultTheme from '../../theme/default';
+import windowExists from '../../helpers/window-exists';
 
 export interface ThemeProps {
   config?: object;
@@ -25,7 +26,10 @@ export const Flowbite: FC<FlowbiteProps> = ({ children, theme = {} }) => {
       if (setMode != null) {
         setMode('dark');
       }
-      document.documentElement.classList.add('dark');
+
+      if (windowExists()) {
+        document.documentElement.classList.add('dark');
+      }
     }
   }, [dark, setMode]);