From 5d99a70d561fdfc438a93275f77f83139567e094 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 3 Jun 2024 16:41:26 -0400 Subject: [PATCH 1/2] docs(theming): clean up event listeners in React demos --- .../automatic-dark-mode/react/main_tsx.md | 10 +++++++++- .../theming/manual-dark-mode/react/main_tsx.md | 10 +++++++++- .../theming/class-dark-mode/react/main_tsx.md | 10 +++++++++- .../class-high-contrast-mode/react/main_tsx.md | 17 +++++++++++++++-- 4 files changed, 42 insertions(+), 5 deletions(-) diff --git a/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md b/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md index dc92e1ad1cf..244ff92ff5c 100644 --- a/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md +++ b/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md @@ -33,8 +33,16 @@ function Example() { toggleDarkTheme(prefersDark.matches); + const setDarkThemeFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + toggleDarkTheme(mediaQuery.matches); + }; + // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); + prefersDark.addEventListener('change', setDarkThemeFromMediaQuery); + + return () => { + prefersDark.removeEventListener('change', setDarkThemeFromMediaQuery); + } }, []); return ( diff --git a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md index 70938e6a804..a07bb8e0996 100644 --- a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md +++ b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md @@ -49,8 +49,16 @@ function Example() { // value of the prefers-color-scheme media query initializeDarkTheme(prefersDark.matches); + const setDarkThemeFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + initializeDarkTheme(mediaQuery.matches); + }; + // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches)); + prefersDark.addEventListener('change', setDarkThemeFromMediaQuery); + + return () => { + prefersDark.removeEventListener('change', setDarkThemeFromMediaQuery); + } }, []); return ( diff --git a/static/usage/v8/theming/class-dark-mode/react/main_tsx.md b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md index 78fe98b1df6..6a3c03f0b10 100644 --- a/static/usage/v8/theming/class-dark-mode/react/main_tsx.md +++ b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md @@ -49,8 +49,16 @@ function Example() { // value of the prefers-color-scheme media query initializeDarkPalette(prefersDark.matches); + const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + initializeDarkPalette(mediaQuery.matches); + }; + // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => initializeDarkPalette(mediaQuery.matches)); + prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery); + + return () => { + prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery); + } }, []); return ( diff --git a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md index d44640fdbf9..a6a8738c57d 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md +++ b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md @@ -66,9 +66,22 @@ function Example() { initializeDarkPalette(prefersDark.matches); initializeHighContrastPalette(prefersHighContrast.matches); + const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + initializeDarkPalette(mediaQuery.matches); + }; + + const setHighContrastPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + initializeHighContrastPalette(mediaQuery.matches); + }; + // Listen for changes to the media queries - prefersDark.addEventListener('change', (mediaQuery) => initializeDarkPalette(mediaQuery.matches)); - prefersHighContrast.addEventListener('change', (mediaQuery) => initializeHighContrastPalette(mediaQuery.matches)); + prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery); + prefersHighContrast.addEventListener('change', setHighContrastPaletteFromMediaQuery); + + return () => { + prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery); + prefersHighContrast.removeEventListener('change', setHighContrastPaletteFromMediaQuery); + } }, []); return ( From 5203eb840e7d06cc715db87d5a484c4ba0140f6f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 3 Jun 2024 16:46:07 -0400 Subject: [PATCH 2/2] style: lint --- static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md | 2 +- static/usage/v7/theming/manual-dark-mode/react/main_tsx.md | 2 +- static/usage/v8/theming/class-dark-mode/react/main_tsx.md | 2 +- .../usage/v8/theming/class-high-contrast-mode/react/main_tsx.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md b/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md index 244ff92ff5c..4ee3ab73192 100644 --- a/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md +++ b/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md @@ -42,7 +42,7 @@ function Example() { return () => { prefersDark.removeEventListener('change', setDarkThemeFromMediaQuery); - } + }; }, []); return ( diff --git a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md index a07bb8e0996..390cedcba80 100644 --- a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md +++ b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md @@ -58,7 +58,7 @@ function Example() { return () => { prefersDark.removeEventListener('change', setDarkThemeFromMediaQuery); - } + }; }, []); return ( diff --git a/static/usage/v8/theming/class-dark-mode/react/main_tsx.md b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md index 6a3c03f0b10..2c80eac0083 100644 --- a/static/usage/v8/theming/class-dark-mode/react/main_tsx.md +++ b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md @@ -58,7 +58,7 @@ function Example() { return () => { prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery); - } + }; }, []); return ( diff --git a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md index a6a8738c57d..913136d826b 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md +++ b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md @@ -81,7 +81,7 @@ function Example() { return () => { prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery); prefersHighContrast.removeEventListener('change', setHighContrastPaletteFromMediaQuery); - } + }; }, []); return (