From 0b02b7f3c48ebf53bf84c9f562902f2b49127dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ricardo=20L=C3=BCders?= Date: Sun, 8 May 2022 11:27:11 +0200 Subject: [PATCH] refactor: organizing theme component --- src/hooks/useTheme.ts | 6 ---- .../components/Accordion/AccordionContent.tsx | 3 +- .../components/Accordion/AccordionTitle.tsx | 2 +- src/lib/components/Accordion/index.tsx | 2 +- src/lib/components/DarkThemeToggle/index.tsx | 2 +- .../components/Flowbite/ThemeContext.tsx} | 33 ++++++++++++++++--- src/lib/components/Flowbite/index.tsx | 7 ++-- src/lib/contexts/ThemeContext.tsx | 23 ------------- 8 files changed, 36 insertions(+), 42 deletions(-) delete mode 100644 src/hooks/useTheme.ts rename src/{hooks/useDarkMode.ts => lib/components/Flowbite/ThemeContext.tsx} (56%) delete mode 100644 src/lib/contexts/ThemeContext.tsx diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts deleted file mode 100644 index fcc0efa59..000000000 --- a/src/hooks/useTheme.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useContext } from 'react'; -import { ThemeContext, ThemeContextProps } from '../lib/contexts/ThemeContext'; - -export function useTheme(): ThemeContextProps { - return useContext(ThemeContext); -} diff --git a/src/lib/components/Accordion/AccordionContent.tsx b/src/lib/components/Accordion/AccordionContent.tsx index 772cd687c..9912c1d7b 100644 --- a/src/lib/components/Accordion/AccordionContent.tsx +++ b/src/lib/components/Accordion/AccordionContent.tsx @@ -1,6 +1,7 @@ import cn from 'classnames'; import { ComponentProps, FC } from 'react'; -import { useTheme } from '../../../hooks/useTheme'; +import { useTheme } from '../Flowbite/ThemeContext'; + import { useAccordionContext } from './AccordionPanelContext'; export const AccordionContent: FC> = ({ children, ...props }) => { diff --git a/src/lib/components/Accordion/AccordionTitle.tsx b/src/lib/components/Accordion/AccordionTitle.tsx index fae1f33d5..9000d8d77 100644 --- a/src/lib/components/Accordion/AccordionTitle.tsx +++ b/src/lib/components/Accordion/AccordionTitle.tsx @@ -2,7 +2,7 @@ import { ComponentProps, FC } from 'react'; import cn from 'classnames'; import { HiChevronDown } from 'react-icons/hi'; import { useAccordionContext } from './AccordionPanelContext'; -import { useTheme } from '../../../hooks/useTheme'; +import { useTheme } from '../Flowbite/ThemeContext'; export type AccordionTitleProps = ComponentProps<'button'> & { arrowIcon?: FC>; diff --git a/src/lib/components/Accordion/index.tsx b/src/lib/components/Accordion/index.tsx index 7e2ce4435..35ce3b9bc 100644 --- a/src/lib/components/Accordion/index.tsx +++ b/src/lib/components/Accordion/index.tsx @@ -3,7 +3,7 @@ import { AccordionPanel, AccordionPanelProps } from './AccordionPanel'; import { AccordionTitle } from './AccordionTitle'; import { AccordionContent } from './AccordionContent'; import cn from 'classnames'; -import { useTheme } from '../../../hooks/useTheme'; +import { useTheme } from '../Flowbite/ThemeContext'; export type AccordionProps = PropsWithChildren<{ flush?: boolean; diff --git a/src/lib/components/DarkThemeToggle/index.tsx b/src/lib/components/DarkThemeToggle/index.tsx index 5bb2c4c57..c83aa50d2 100644 --- a/src/lib/components/DarkThemeToggle/index.tsx +++ b/src/lib/components/DarkThemeToggle/index.tsx @@ -1,6 +1,6 @@ import { FC, useContext } from 'react'; import { HiMoon, HiSun } from 'react-icons/hi'; -import { ThemeContext } from '../../contexts/ThemeContext'; +import { ThemeContext } from '../Flowbite/ThemeContext'; export const DarkThemeToggle: FC = () => { const { mode, toggleMode } = useContext(ThemeContext); diff --git a/src/hooks/useDarkMode.ts b/src/lib/components/Flowbite/ThemeContext.tsx similarity index 56% rename from src/hooks/useDarkMode.ts rename to src/lib/components/Flowbite/ThemeContext.tsx index 6ae62040d..3879eb676 100644 --- a/src/hooks/useDarkMode.ts +++ b/src/lib/components/Flowbite/ThemeContext.tsx @@ -1,8 +1,33 @@ /* eslint-disable react-hooks/rules-of-hooks */ -import { useEffect, useState } from 'react'; -import { Mode } from '../lib/contexts/ThemeContext'; +import { FC, ReactNode, createContext, useContext, useState, useEffect } from 'react'; +import defaultTheme from '../../theme/default'; -export const useDarkMode = ( +export type Mode = string | undefined | 'light' | 'dark'; + +interface ThemeContextProps { + theme: any; + mode?: Mode; + toggleMode?: () => void | null; +} + +export const ThemeContext = createContext({ + theme: defaultTheme, +}); + +interface ThemeProviderProps { + children: ReactNode; + value?: any; +} + +export const ThemeProvider: FC = ({ children, value }) => { + return {children}; +}; + +export function useTheme(): ThemeContextProps { + return useContext(ThemeContext); +} + +export const useThemeMode = ( usePreferences: boolean, ): [Mode, React.Dispatch> | undefined, (() => void) | undefined] => { if (!usePreferences) return [undefined, undefined, undefined]; @@ -33,5 +58,3 @@ export const useDarkMode = ( return [mode, setMode, toggleMode]; }; - -export default useDarkMode; diff --git a/src/lib/components/Flowbite/index.tsx b/src/lib/components/Flowbite/index.tsx index 779795fa6..ed8dc75d9 100644 --- a/src/lib/components/Flowbite/index.tsx +++ b/src/lib/components/Flowbite/index.tsx @@ -1,18 +1,17 @@ import { FC, HTMLAttributes, useLayoutEffect, useMemo } from 'react'; -import useDarkMode from '../../../hooks/useDarkMode'; -import { ThemeContext } from '../../contexts/ThemeContext'; +import { ThemeContext, useThemeMode } from './ThemeContext'; import { mergeDeep } from '../../helpers/mergeDeep'; import defaultTheme from '../../theme/default'; interface FlowbiteProps extends HTMLAttributes { children: React.ReactNode; - theme?: any; + theme?: object; dark?: boolean; usePreferences?: boolean; } export const Flowbite: FC = ({ children, theme: customTheme, dark, usePreferences = true }) => { - const [mode, setMode, toggleMode] = useDarkMode(usePreferences); + const [mode, setMode, toggleMode] = useThemeMode(usePreferences); const mergedTheme = mergeDeep(defaultTheme, customTheme); diff --git a/src/lib/contexts/ThemeContext.tsx b/src/lib/contexts/ThemeContext.tsx deleted file mode 100644 index ab8fd637f..000000000 --- a/src/lib/contexts/ThemeContext.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC, ReactNode, createContext } from 'react'; -import defaultTheme from '../theme/default'; - -export type Mode = string | undefined | 'light' | 'dark'; - -export interface ThemeContextProps { - theme: any; - mode?: Mode; - toggleMode?: () => void | null; -} - -export const ThemeContext = createContext({ - theme: defaultTheme, -}); - -interface ThemeProviderProps { - children: ReactNode; - value?: any; -} - -export const ThemeProvider: FC = ({ children, value }) => { - return {children}; -};