feat: add mode updater & inverter to SaltThemeProvider

jpmorganchase · Apr 11, 2024 · 6466fbc · 6466fbc
1 parent ed32f6e
commit 6466fbc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx
@@ -1,11 +1,14 @@
 import { clsx } from "clsx";
 import React, {
   createContext,
+  Dispatch,
   HTMLAttributes,
   ReactElement,
   ReactNode,
+  SetStateAction,
   useContext,
   useMemo,
+  useState,
 } from "react";
 import { AriaAnnouncerProvider } from "../aria-announcer";
 import { Breakpoints, DEFAULT_BREAKPOINTS } from "../breakpoints";
@@ -37,6 +40,14 @@ export interface ThemeContextProps {
   UNSTABLE_corner: UNSTABLE_Corner;
 }
 
+export const invertMode = (mode: string): "light" | "dark" =>
+  mode === "light" ? "dark" : "light";
+
+export interface ThemeContextValue extends ThemeContextProps {
+  setMode: Dispatch<SetStateAction<Mode>>;
+  invertMode: () => void;
+}
+
 export const DensityContext = createContext<Density>(DEFAULT_DENSITY);
 
 export const ThemeContext = createContext<ThemeContextProps>({
@@ -185,9 +196,13 @@ function InternalSaltProvider({
   const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;
   const themeName =
     themeProp ?? (inheritedTheme === "" ? DEFAULT_THEME_NAME : inheritedTheme);
-  const mode = modeProp ?? inheritedMode;
   const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;
   const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
+  const [modeFromState, setMode] = useState<Mode>(
+    modeProp ?? (inheritedMode ?? DEFAULT_MODE)
+  );
+
+  const mode = modeProp || modeFromState;
 
   const applyClassesTo =
     applyClassesToProp ?? (isRootProvider ? "root" : "scope");
@@ -199,13 +214,15 @@ function InternalSaltProvider({
     window: targetWindow,
   });
 
-  const themeContextValue = useMemo(
+  const themeContextValue = useMemo<ThemeContextValue>(
     () => ({
       theme: themeName,
       mode,
       window: targetWindow,
       themeNext: Boolean(themeNext),
       UNSTABLE_corner: corner,
+      setMode,
+      invertMode: () => setMode((prevState) => invertMode(prevState)),
     }),
     [themeName, mode, targetWindow, themeNext, corner]
   );
@@ -311,11 +328,11 @@ export function UNSTABLE_SaltProviderNext({
   );
 }
 
-export const useTheme = (): ThemeContextProps => {
+export const useTheme = (): ThemeContextValue => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { window, ...contextWithoutWindow } = useContext(ThemeContext);
 
-  return contextWithoutWindow;
+  return contextWithoutWindow as ThemeContextValue;
 };
 
 /**

diff --git a/packages/core/stories/salt-provider/salt-provider.stories.tsx b/packages/core/stories/salt-provider/salt-provider.stories.tsx
@@ -8,6 +8,7 @@ import {
   SaltProvider,
   ToggleButton,
   ToggleButtonGroup,
+  useTheme,
 } from "@salt-ds/core";
 
 import "docs/story.css";
@@ -31,7 +32,7 @@ export const Default = () => {
 };
 
 export const ToggleTheme = () => {
-  const [mode, setMode] = useState<Mode>("light");
+  const { mode, setMode } = useTheme();
 
   const handleChangeTheme = (event: SyntheticEvent<HTMLButtonElement>) => {
     setMode(event.currentTarget.value as Mode);