diff --git a/src/lib/ui/components/ErrorBoundary.tsx b/src/lib/ui/components/ErrorBoundary.tsx index 8a5b073..e6799bc 100644 --- a/src/lib/ui/components/ErrorBoundary.tsx +++ b/src/lib/ui/components/ErrorBoundary.tsx @@ -1,8 +1,8 @@ import { Strings } from "@core/i18n"; +import { createLegacyClassComponentStyles, ThemeContext } from "@lib/ui/styles"; import { React } from "@metro/common"; import { Button, LegacyFormText } from "@metro/common/components"; import { Codeblock } from "@ui/components"; -import { createThemedStyleSheet } from "@ui/styles"; import { Falsy, ScrollView } from "react-native"; type ErrorBoundaryState = { @@ -16,7 +16,7 @@ export interface ErrorBoundaryProps { children: JSX.Element | Falsy | (JSX.Element | Falsy)[]; } -const styles = createThemedStyleSheet({ +const getStyles = createLegacyClassComponentStyles({ view: { flex: 1, flexDirection: "column", @@ -35,9 +35,11 @@ export default class ErrorBoundary extends React.Component ({ hasErr: true, error }); render() { + const styles = getStyles(this.context); if (!this.state.hasErr) return this.props.children; return ( diff --git a/src/lib/ui/safeMode.tsx b/src/lib/ui/safeMode.tsx index a3c04a7..d8c0cd2 100644 --- a/src/lib/ui/safeMode.tsx +++ b/src/lib/ui/safeMode.tsx @@ -13,8 +13,6 @@ import { Codeblock, ErrorBoundary as _ErrorBoundary } from "@ui/components"; import { createThemedStyleSheet, TextStyleSheet } from "@ui/styles"; import { Text, View } from "react-native"; -const ErrorBoundary = findByNameLazy("ErrorBoundary"); - // Let's just pray they have this. const { BadgableTabBar } = lazyDestructure(() => findByProps("BadgableTabBar")); diff --git a/src/lib/ui/styles.ts b/src/lib/ui/styles.ts index c3bb9e5..2c5d7de 100644 --- a/src/lib/ui/styles.ts +++ b/src/lib/ui/styles.ts @@ -6,18 +6,60 @@ import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from "react-native"; type NamedStyles = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle }; -const CompatfulRedesign = findByPropsLazy("createStyles"); +const Styles = findByPropsLazy("createStyles"); +export const { ThemeContext } = lazyDestructure(() => findByProps("ThemeContext"), { hint: "object" }); export const { TextStyleSheet } = lazyDestructure(() => findByProps("TextStyleSheet")) as unknown as { - TextStyleSheet: { [key in DiscordTextStyles]: TextStyle; }; + TextStyleSheet: Record; }; +/** + * Get themed styles based on the current theme + * @returns A hook that returns the themed stylesheet + * @example + * const useStyles = createStyles({ + * container: { + * flex: 1, + * backgroundColor: tokens.colors.BACKGROUND_PRIMARY, + * }, + * }); + * + * function MyComponent() { + * const styles = useStyles(); + * return ; + * } + */ export function createStyles>(sheet: T | ((props: any) => T)): () => T { - return proxyLazy(() => CompatfulRedesign.createStyles(sheet)); + return proxyLazy(() => Styles.createStyles(sheet)); } -// Reimplementation of Discord's createThemedStyleSheet, which was removed since 204201 -// Not exactly a 1:1 reimplementation, but sufficient to keep compatibility with existing plugins +/** + * Get themed styles based on the current theme for class components + * @example + * const getStyles = createStyles({ + * container: { + * flex: 1, + * backgroundColor: tokens.colors.BACKGROUND_PRIMARY, + * }, + * }); + * + * class MyComponent extends React.Component { + * static contextType = ThemeContext; + * render() { + * const styles = getStyles(this.context); + * return ; + * } + * } + */ +export function createLegacyClassComponentStyles>(sheet: T | ((props: any) => T)): (ctxt: typeof ThemeContext) => T { + return proxyLazy(() => Styles.createLegacyClassComponentStyles(sheet)); +} + +/** + * Reimplementation of Discord's createThemedStyleSheet, which was removed since 204201 + * Not exactly a 1:1 reimplementation, but sufficient to keep compatibility with existing plugins + * @deprecated Use createStyles or createLegacyClassComponentStyles instead +*/ export function createThemedStyleSheet>(sheet: T) { for (const key in sheet) { // @ts-ignore