From 6ca7b91063873d4d173760f397d4df2db53902a0 Mon Sep 17 00:00:00 2001 From: Daniel Szczepanik Date: Tue, 26 Jul 2022 09:14:08 +0200 Subject: [PATCH 01/13] feat: change global export type for theme --- example/index.d.ts | 4 +--- index.d.ts | 6 ++---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/example/index.d.ts b/example/index.d.ts index 19744c7ff5..e306f971a0 100644 --- a/example/index.d.ts +++ b/example/index.d.ts @@ -3,7 +3,5 @@ // import type { MD2Theme } from 'react-native-paper'; // declare global { -// namespace ReactNativePaper { -// interface Theme extends MD2Theme {} -// } +// export type ReactNativePaperTheme = MD2Theme; // } diff --git a/index.d.ts b/index.d.ts index bdeab7256b..cc9a1fd13c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,7 +1,5 @@ -import { MD3Theme } from './src/types'; +import type { InternalTheme } from 'src/types'; declare global { - namespace ReactNativePaper { - interface Theme extends MD3Theme {} - } + export type ReactNativePaperTheme = InternalTheme; } From 4c27fb4c5825c334fb5a1f6de078b6b28c9207e4 Mon Sep 17 00:00:00 2001 From: Daniel Szczepanik Date: Tue, 26 Jul 2022 09:21:25 +0200 Subject: [PATCH 02/13] feat: change internal hook approach --- example/src/DrawerItems.tsx | 2 +- example/src/index.tsx | 2 +- src/babel/__fixtures__/rewrite-imports/code.js | 2 +- .../__fixtures__/rewrite-imports/output.js | 3 +-- src/components/SegmentedButtons/utils.ts | 8 ++++---- src/core/theming.tsx | 18 +++++++++++++----- src/index.tsx | 8 +------- src/types.tsx | 4 ++-- 8 files changed, 24 insertions(+), 23 deletions(-) diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 81c066cfcf..6159e15b50 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -94,7 +94,7 @@ const DrawerItems = ({ const _setDrawerItem = (index: number) => setDrawerItemIndex(index); - const { colors, isV3 } = useTheme(); + const { isV3, colors } = useTheme(); const _handleToggleRTL = () => { toggleRTL(); diff --git a/example/src/index.tsx b/example/src/index.tsx index e5da8aabf1..75009d60ca 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -67,7 +67,7 @@ export default function PaperExample() { light: MD3LightTheme, dark: MD3DarkTheme, }, - }[themeVersion][themeMode] as ReactNativePaper.Theme; + }[themeVersion][themeMode]; React.useEffect(() => { const restoreState = async () => { diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js index 3859c26079..0d54e9f541 100644 --- a/src/babel/__fixtures__/rewrite-imports/code.js +++ b/src/babel/__fixtures__/rewrite-imports/code.js @@ -13,5 +13,5 @@ import { NonExistentSecond as Stuff, ThemeProvider, withTheme, - Theme + InternalTheme, } from 'react-native-paper'; diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index e1d98641e7..85acfccb4b 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -7,7 +7,6 @@ import FAB from "react-native-paper/lib/module/components/FAB"; import Appbar from "react-native-paper/lib/module/components/Appbar"; import * as MD2Colors from "react-native-paper/lib/module/styles/themes/v2/colors"; import { MD3Colors } from "react-native-paper/lib/module/styles/themes/v3/tokens"; -import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; +import { NonExistent, NonExistentSecond as Stuff, InternalTheme } from "react-native-paper/lib/module/index.js"; import { ThemeProvider } from "react-native-paper/lib/module/core/theming"; import { withTheme } from "react-native-paper/lib/module/core/theming"; -import { Theme } from "react-native-paper/lib/module/types"; diff --git a/src/components/SegmentedButtons/utils.ts b/src/components/SegmentedButtons/utils.ts index d1ba1acd94..39d4d47339 100644 --- a/src/components/SegmentedButtons/utils.ts +++ b/src/components/SegmentedButtons/utils.ts @@ -1,10 +1,10 @@ import { StyleSheet, ViewStyle } from 'react-native'; import color from 'color'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { black, white } from '../../styles/themes/v2/colors'; type BaseProps = { - theme: Theme; + theme: InternalTheme; disabled?: boolean; checked: boolean; }; @@ -35,7 +35,7 @@ export const getDisabledSegmentedButtonStyle = ({ index, buttons, }: { - theme: Theme; + theme: InternalTheme; buttons: { disabled?: boolean }[]; index: number; }): ViewStyle => { @@ -55,7 +55,7 @@ export const getSegmentedButtonBorderRadius = ({ segment, theme, }: { - theme: Theme; + theme: InternalTheme; segment?: 'first' | 'last'; }): ViewStyle => { if (segment === 'first') { diff --git a/src/core/theming.tsx b/src/core/theming.tsx index 59a491bc4a..a6caa61b25 100644 --- a/src/core/theming.tsx +++ b/src/core/theming.tsx @@ -1,5 +1,6 @@ -import { createTheming } from '@callstack/react-theme-provider'; -import type { Theme } from 'src/types'; +import { $DeepPartial, createTheming } from '@callstack/react-theme-provider'; +import type { ComponentType } from 'react'; +import type { InternalTheme } from 'src/types'; import { MD2DarkTheme, MD2LightTheme, @@ -9,9 +10,16 @@ import { export const DefaultTheme = MD3LightTheme; -export const { ThemeProvider, withTheme, useTheme } = createTheming( - DefaultTheme as ReactNativePaper.Theme -); +export const { ThemeProvider, withTheme, useTheme } = + createTheming(DefaultTheme); + +export const useInternalTheme = ( + themeOverrides?: $DeepPartial +) => useTheme(themeOverrides); + +export const withInternalTheme = ( + WrappedComponent: ComponentType & C +) => withTheme(WrappedComponent); export const defaultThemesByVersion = { 2: { diff --git a/src/index.tsx b/src/index.tsx index c1b4962811..b9e3c9c461 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -146,10 +146,4 @@ export type { Props as TitleProps } from './components/Typography/v2/Title'; export type { Props as TextProps } from './components/Typography/Text'; export type { Props as SegmentedButtonsProps } from './components/SegmentedButtons/SegmentedButtons'; -export type { - MD2Theme, - MD3Theme, - ThemeBase, - MD3Elevation, - Theme, -} from './types'; +export type { MD2Theme, MD3Theme, ThemeBase, MD3Elevation } from './types'; diff --git a/src/types.tsx b/src/types.tsx index 4a4acb5990..8f1a4d8df7 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -75,7 +75,7 @@ export type MD3Colors = { export type MD3Palette = {}; -export type ThemeProp = $DeepPartial; +export type ThemeProp = $DeepPartial; export type ThemeBase = { dark: boolean; @@ -100,7 +100,7 @@ export type MD2Theme = ThemeBase & { fonts: Fonts; }; -export type Theme = MD2Theme | MD3Theme; +export type InternalTheme = MD2Theme | MD3Theme; // MD3 types export enum MD3TypescaleKey { From cc66740135fcfdbe9f035491ad56975011b124ab Mon Sep 17 00:00:00 2001 From: Daniel Szczepanik Date: Tue, 26 Jul 2022 09:22:23 +0200 Subject: [PATCH 03/13] feat: use internal theme hook for components --- src/components/ActivityIndicator.tsx | 8 +++---- src/components/Appbar/Appbar.tsx | 13 ++++++----- src/components/Appbar/AppbarAction.tsx | 4 ++-- src/components/Appbar/AppbarContent.tsx | 14 +++++++----- src/components/Appbar/AppbarHeader.tsx | 10 ++++----- src/components/Appbar/utils.ts | 4 ++-- src/components/Avatar/AvatarIcon.tsx | 8 +++---- src/components/Avatar/AvatarImage.tsx | 8 +++---- src/components/Avatar/AvatarText.tsx | 8 +++---- src/components/Badge.tsx | 8 +++---- src/components/Banner.tsx | 8 +++---- .../BottomNavigation/BottomNavigation.tsx | 10 ++++----- src/components/Button/Button.tsx | 8 +++---- src/components/Button/utils.tsx | 6 ++--- src/components/Card/Card.tsx | 8 +++---- src/components/Card/CardActions.tsx | 4 ++-- src/components/Card/CardContent.tsx | 4 ++-- src/components/Card/CardCover.tsx | 8 +++---- src/components/Card/CardTitle.tsx | 8 +++---- src/components/Card/utils.tsx | 10 ++++----- src/components/Checkbox/Checkbox.tsx | 10 ++++----- src/components/Checkbox/CheckboxAndroid.tsx | 10 ++++----- src/components/Checkbox/CheckboxIOS.tsx | 10 ++++----- src/components/Checkbox/CheckboxItem.tsx | 10 ++++----- src/components/Checkbox/utils.ts | 18 +++++++-------- src/components/Chip/Chip.tsx | 8 +++---- src/components/Chip/helpers.tsx | 4 ++-- src/components/CrossFadeIcon.tsx | 8 +++---- src/components/DataTable/DataTableHeader.tsx | 8 +++---- .../DataTable/DataTablePagination.tsx | 22 +++++++++---------- src/components/DataTable/DataTableRow.tsx | 8 +++---- src/components/DataTable/DataTableTitle.tsx | 8 +++---- src/components/Dialog/Dialog.tsx | 8 +++---- src/components/Dialog/DialogActions.tsx | 4 ++-- src/components/Dialog/DialogIcon.tsx | 4 ++-- src/components/Dialog/DialogScrollArea.tsx | 4 ++-- src/components/Dialog/DialogTitle.tsx | 8 +++---- src/components/Divider.tsx | 8 +++---- src/components/Drawer/DrawerCollapsedItem.tsx | 8 +++---- src/components/Drawer/DrawerItem.tsx | 8 +++---- src/components/Drawer/DrawerSection.tsx | 8 +++---- src/components/FAB/AnimatedFAB.tsx | 8 +++---- src/components/FAB/FAB.tsx | 10 ++++----- src/components/FAB/FABGroup.tsx | 10 ++++----- src/components/FAB/utils.ts | 18 +++++++-------- src/components/HelperText.tsx | 8 +++---- src/components/Icon.tsx | 8 +++---- src/components/IconButton/IconButton.tsx | 11 +++++----- src/components/IconButton/utils.ts | 10 ++++----- src/components/List/ListAccordion.tsx | 8 +++---- src/components/List/ListItem.tsx | 8 +++---- src/components/List/ListSection.tsx | 8 +++---- src/components/List/ListSubheader.tsx | 8 +++---- src/components/Menu/Menu.tsx | 8 +++---- src/components/Menu/MenuItem.tsx | 8 +++---- src/components/Menu/utils.ts | 6 ++--- src/components/Modal.tsx | 7 +++--- src/components/Portal/Portal.tsx | 8 +++---- src/components/ProgressBar.tsx | 8 +++---- src/components/RadioButton/RadioButton.tsx | 10 ++++----- .../RadioButton/RadioButtonAndroid.tsx | 10 ++++----- src/components/RadioButton/RadioButtonIOS.tsx | 10 ++++----- .../RadioButton/RadioButtonItem.tsx | 10 ++++----- src/components/Searchbar.tsx | 8 +++---- src/components/Snackbar.tsx | 8 +++---- src/components/Surface.tsx | 18 +++++++-------- src/components/Switch/Switch.tsx | 8 +++---- src/components/Switch/utils.ts | 6 ++--- .../TextInput/Adornment/TextInputAffix.tsx | 8 +++---- .../TextInput/Adornment/TextInputIcon.tsx | 16 +++++++------- src/components/TextInput/Label/InputLabel.tsx | 4 ++-- .../TextInput/Label/LabelBackground.tsx | 4 ++-- src/components/TextInput/TextInput.tsx | 8 +++---- src/components/TextInput/TextInputFlat.tsx | 4 ++-- src/components/TextInput/helpers.tsx | 8 +++---- src/components/ToggleButton/ToggleButton.tsx | 10 ++++----- src/components/ToggleButton/utils.ts | 4 ++-- .../TouchableRipple.native.tsx | 8 +++---- .../TouchableRipple/TouchableRipple.tsx | 8 +++---- src/components/TouchableRipple/utils.ts | 8 +++---- src/components/Typography/AnimatedText.tsx | 8 +++---- src/components/Typography/Text.tsx | 4 ++-- src/components/Typography/v2/StyledText.tsx | 16 ++++++++++---- src/components/Typography/v2/Text.tsx | 8 +++---- src/core/Provider.tsx | 2 +- 85 files changed, 368 insertions(+), 351 deletions(-) diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx index 8b1b92e28f..35c3b766df 100644 --- a/src/components/ActivityIndicator.tsx +++ b/src/components/ActivityIndicator.tsx @@ -8,8 +8,8 @@ import { View, ViewStyle, } from 'react-native'; -import type { Theme } from '../types'; -import { withTheme } from '../core/theming'; +import type { InternalTheme } from '../types'; +import { withInternalTheme } from '../core/theming'; export type Props = React.ComponentPropsWithRef & { /** @@ -32,7 +32,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; const DURATION = 2400; @@ -253,4 +253,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ActivityIndicator); +export default withInternalTheme(ActivityIndicator); diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index 8242f85487..96d9d78e30 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -6,8 +6,8 @@ import AppbarContent from './AppbarContent'; import AppbarAction from './AppbarAction'; import AppbarBackAction from './AppbarBackAction'; import Surface from '../Surface'; -import { withTheme } from '../../core/theming'; -import type { MD3Elevation, Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { MD3Elevation, InternalTheme } from '../../types'; import { getAppbarColor, renderAppbarContent, @@ -54,7 +54,7 @@ export type Props = Partial> & { /** * @optional */ - theme: Theme; + theme: InternalTheme; style?: StyleProp; }; @@ -63,6 +63,9 @@ export type Props = Partial> & { * The top bar usually contains the screen title, controls such as navigation buttons, menu button etc. * The bottom bar usually provides access to a drawer and up to four actions. * + * By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead. + * See [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations + * *
* *
@@ -345,9 +348,9 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Appbar); +export default withInternalTheme(Appbar); // @component-docs ignore-next-line -const AppbarWithTheme = withTheme(Appbar); +const AppbarWithTheme = withInternalTheme(Appbar); // @component-docs ignore-next-line export { AppbarWithTheme as Appbar }; diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx index 73187e8b57..45fd7ce3db 100644 --- a/src/components/Appbar/AppbarAction.tsx +++ b/src/components/Appbar/AppbarAction.tsx @@ -8,7 +8,7 @@ import type { import { black } from '../../styles/themes/v2/colors'; import IconButton from '../IconButton/IconButton'; import type { IconSource } from '../Icon'; -import { useTheme } from '../../core/theming'; +import { useInternalTheme } from '../../core/theming'; export type Props = React.ComponentPropsWithoutRef & { /** @@ -80,7 +80,7 @@ const AppbarAction = ({ isLeading, ...rest }: Props) => { - const theme = useTheme(); + const theme = useInternalTheme(); const actionIconColor = iconColor ? iconColor diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index f7f297d17f..08434db606 100644 --- a/src/components/Appbar/AppbarContent.tsx +++ b/src/components/Appbar/AppbarContent.tsx @@ -12,10 +12,14 @@ import color from 'color'; import Text from '../Typography/Text'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import { white } from '../../styles/themes/v2/colors'; -import type { $RemoveChildren, MD3TypescaleKey, Theme } from '../../types'; +import type { + $RemoveChildren, + MD3TypescaleKey, + InternalTheme, +} from '../../types'; import { modeTextVariant } from './utils'; export type Props = $RemoveChildren & { @@ -57,7 +61,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -184,9 +188,9 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(AppbarContent); +export default withInternalTheme(AppbarContent); // @component-docs ignore-next-line -const AppbarContentWithTheme = withTheme(AppbarContent); +const AppbarContentWithTheme = withInternalTheme(AppbarContent); // @component-docs ignore-next-line export { AppbarContentWithTheme as AppbarContent }; diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx index 8e4c4bca08..a56b030d7c 100644 --- a/src/components/Appbar/AppbarHeader.tsx +++ b/src/components/Appbar/AppbarHeader.tsx @@ -9,9 +9,9 @@ import { } from 'react-native'; import { Appbar } from './Appbar'; import shadow from '../../styles/shadow'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import { APPROX_STATUSBAR_HEIGHT } from '../../constants'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { DEFAULT_APPBAR_HEIGHT, getAppbarColor, @@ -52,7 +52,7 @@ export type Props = React.ComponentProps & { /** * @optional */ - theme: Theme; + theme: InternalTheme; style?: StyleProp; }; @@ -166,9 +166,9 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(AppbarHeader); +export default withInternalTheme(AppbarHeader); // @component-docs ignore-next-line -const AppbarHeaderWithTheme = withTheme(AppbarHeader); +const AppbarHeaderWithTheme = withInternalTheme(AppbarHeader); // @component-docs ignore-next-line export { AppbarHeaderWithTheme as AppbarHeader }; diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts index 5cb0376fb9..a0d37f7cfa 100644 --- a/src/components/Appbar/utils.ts +++ b/src/components/Appbar/utils.ts @@ -6,13 +6,13 @@ import AppbarContent from './AppbarContent'; import AppbarAction from './AppbarAction'; import AppbarBackAction from './AppbarBackAction'; import overlay from '../../styles/overlay'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { black, white } from '../../styles/themes/v2/colors'; export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned'; export const getAppbarColor = ( - theme: Theme, + theme: InternalTheme, elevation: number, customBackground?: ColorValue, elevated?: boolean diff --git a/src/components/Avatar/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon.tsx index 6e1601cb74..1907d2f18a 100644 --- a/src/components/Avatar/AvatarIcon.tsx +++ b/src/components/Avatar/AvatarIcon.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native'; import Icon, { IconSource } from '../Icon'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import { white } from '../../styles/themes/v2/colors'; import getContrastingColor from '../../utils/getContrastingColor'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; const defaultSize = 64; @@ -25,7 +25,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -82,4 +82,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Avatar); +export default withInternalTheme(Avatar); diff --git a/src/components/Avatar/AvatarImage.tsx b/src/components/Avatar/AvatarImage.tsx index a115654dc4..8c83db473d 100644 --- a/src/components/Avatar/AvatarImage.tsx +++ b/src/components/Avatar/AvatarImage.tsx @@ -8,8 +8,8 @@ import { ViewStyle, StyleProp, } from 'react-native'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; const defaultSize = 64; @@ -56,7 +56,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -128,4 +128,4 @@ const AvatarImage = ({ AvatarImage.displayName = 'Avatar.Image'; -export default withTheme(AvatarImage); +export default withInternalTheme(AvatarImage); diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx index d4379ca53b..d279221ee4 100644 --- a/src/components/Avatar/AvatarText.tsx +++ b/src/components/Avatar/AvatarText.tsx @@ -8,10 +8,10 @@ import { useWindowDimensions, } from 'react-native'; import Text from '../Typography/Text'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import { white } from '../../styles/themes/v2/colors'; import getContrastingColor from '../../utils/getContrastingColor'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; const defaultSize = 64; @@ -39,7 +39,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -122,4 +122,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(AvatarText); +export default withInternalTheme(AvatarText); diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 9e285663c1..71e5954dd8 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -7,9 +7,9 @@ import { useWindowDimensions, } from 'react-native'; import { white, black } from '../styles/themes/v2/colors'; -import { withTheme } from '../core/theming'; +import { withInternalTheme } from '../core/theming'; import getContrastingColor from '../utils/getContrastingColor'; -import type { Theme } from '../types'; +import type { InternalTheme } from '../types'; const defaultSize = 20; @@ -31,7 +31,7 @@ export type Props = React.ComponentProps & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -135,7 +135,7 @@ const Badge = ({ ); }; -export default withTheme(Badge); +export default withInternalTheme(Badge); const styles = StyleSheet.create({ container: { diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index 757068cad9..7bc664b62e 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -4,8 +4,8 @@ import Surface from './Surface'; import Text from './Typography/Text'; import Button from './Button/Button'; import Icon, { IconSource } from './Icon'; -import { withTheme } from '../core/theming'; -import type { $RemoveChildren, Theme } from '../types'; +import { withInternalTheme } from '../core/theming'; +import type { $RemoveChildren, InternalTheme } from '../types'; const DEFAULT_MAX_WIDTH = 960; @@ -51,7 +51,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * @optional * Optional callback that will be called after the opening animation finished running normally @@ -290,4 +290,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Banner); +export default withInternalTheme(Banner); diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index 0fcc79f85d..fbd7eea557 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -19,13 +19,13 @@ import Badge from '../Badge'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; import Text from '../Typography/Text'; import { black, white } from '../../styles/themes/v2/colors'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import useAnimatedValue from '../../utils/useAnimatedValue'; import useAnimatedValueArray from '../../utils/useAnimatedValueArray'; import useLayout from '../../utils/useLayout'; import useIsKeyboardShown from '../../utils/useIsKeyboardShown'; import BottomNavigationRouteScreen from './BottomNavigationRouteScreen'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; type Route = { key: string; @@ -254,7 +254,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * TestID used for testing purposes */ @@ -306,7 +306,7 @@ const SceneComponent = React.memo(({ component, ...rest }: any) => * For integration with React Navigation, you can use [react-navigation-material-bottom-tabs](https://github.com/react-navigation/react-navigation/tree/main/packages/material-bottom-tabs) and consult [createMaterialBottomTabNavigator](https://reactnavigation.org/docs/material-bottom-tab-navigator/) documentation. * * By default Bottom navigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead. - * See [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more information. + * See [Dark InternalTheme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more information. * *
* @@ -1104,7 +1104,7 @@ BottomNavigation.SceneMap = (scenes: { ); }; -export default withTheme(BottomNavigation); +export default withInternalTheme(BottomNavigation); const styles = StyleSheet.create({ container: { diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index f1f3a5b0e4..50daeaf94f 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -14,8 +14,8 @@ import Icon, { IconSource } from '../Icon'; import Surface from '../Surface'; import Text from '../Typography/Text'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; import { ButtonMode, getButtonColors } from './utils'; export type Props = React.ComponentProps & { @@ -112,7 +112,7 @@ export type Props = React.ComponentProps & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * testID to be used on tests. */ @@ -423,4 +423,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Button); +export default withInternalTheme(Button); diff --git a/src/components/Button/utils.tsx b/src/components/Button/utils.tsx index 3e7ae978d0..888e8e3c6b 100644 --- a/src/components/Button/utils.tsx +++ b/src/components/Button/utils.tsx @@ -1,7 +1,7 @@ import { StyleSheet } from 'react-native'; import color from 'color'; import { black, white } from '../../styles/themes/v2/colors'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; export type ButtonMode = | 'text' @@ -12,7 +12,7 @@ export type ButtonMode = type BaseProps = { isMode: (mode: ButtonMode) => boolean; - theme: Theme; + theme: InternalTheme; disabled?: boolean; }; @@ -190,7 +190,7 @@ export const getButtonColors = ({ disabled, dark, }: { - theme: Theme; + theme: InternalTheme; mode: ButtonMode; customButtonColor?: string; customTextColor?: string; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index ed899d8a29..a3b0ebf9e0 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -14,8 +14,8 @@ import CardCover, { CardCover as _CardCover } from './CardCover'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import CardTitle, { CardTitle as _CardTitle } from './CardTitle'; import Surface from '../Surface'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; import { getCardColors } from './utils'; type OutlinedCardProps = { @@ -65,7 +65,7 @@ export type Props = React.ComponentProps & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * Pass down testID from card props to touchable */ @@ -301,4 +301,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Card); +export default withInternalTheme(Card); diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx index 86ea619652..288bd1b215 100644 --- a/src/components/Card/CardActions.tsx +++ b/src/components/Card/CardActions.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native'; -import { useTheme } from '../../core/theming'; +import { useInternalTheme } from '../../core/theming'; export type Props = React.ComponentPropsWithRef & { /** @@ -37,7 +37,7 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const CardActions = (props: Props) => { - const { isV3 } = useTheme(); + const { isV3 } = useInternalTheme(); const justifyContent = isV3 ? 'flex-end' : 'flex-start'; return ( diff --git a/src/components/Card/CardContent.tsx b/src/components/Card/CardContent.tsx index 557b06d7f3..6be45ce267 100644 --- a/src/components/Card/CardContent.tsx +++ b/src/components/Card/CardContent.tsx @@ -49,8 +49,8 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const CardContent = ({ index, total, siblings, style, ...rest }: Props) => { - const cover = 'withTheme(CardCover)'; - const title = 'withTheme(CardTitle)'; + const cover = 'withInternalTheme(CardCover)'; + const title = 'withInternalTheme(CardTitle)'; let contentStyle, prev, next; diff --git a/src/components/Card/CardCover.tsx b/src/components/Card/CardCover.tsx index a52e1a06a3..fbfca3ba44 100644 --- a/src/components/Card/CardCover.tsx +++ b/src/components/Card/CardCover.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { StyleSheet, View, ViewStyle, Image, StyleProp } from 'react-native'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import { grey200 } from '../../styles/themes/v2/colors'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { getCardCoverStyle } from './utils'; export type Props = React.ComponentPropsWithRef & { @@ -18,7 +18,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -72,7 +72,7 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(CardCover); +export default withInternalTheme(CardCover); // @component-docs ignore-next-line export { CardCover }; diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index 740379e761..c3af762655 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -7,8 +7,8 @@ import { ViewStyle, } from 'react-native'; -import { withTheme } from '../../core/theming'; -import type { MD3TypescaleKey, Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { MD3TypescaleKey, InternalTheme } from '../../types'; import Caption from '../Typography/v2/Caption'; import Title from '../Typography/v2/Title'; import Text from '../Typography/Text'; @@ -100,7 +100,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; const LEFT_SIZE = 40; @@ -236,7 +236,7 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(CardTitle); +export default withInternalTheme(CardTitle); // @component-docs ignore-next-line export { CardTitle }; diff --git a/src/components/Card/utils.tsx b/src/components/Card/utils.tsx index 2af9815241..114dd732a3 100644 --- a/src/components/Card/utils.tsx +++ b/src/components/Card/utils.tsx @@ -1,6 +1,6 @@ import color from 'color'; import { black, white } from '../../styles/themes/v2/colors'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; type CardMode = 'elevated' | 'outlined' | 'contained'; @@ -9,7 +9,7 @@ export const getCardCoverStyle = ({ index, total, }: { - theme: Theme; + theme: InternalTheme; index?: number; total?: number; }) => { @@ -43,7 +43,7 @@ export const getCardCoverStyle = ({ return undefined; }; -const getBorderColor = ({ theme }: { theme: Theme }) => { +const getBorderColor = ({ theme }: { theme: InternalTheme }) => { if (theme.isV3) { return theme.colors.outline; } @@ -58,7 +58,7 @@ const getBackgroundColor = ({ theme, isMode, }: { - theme: Theme; + theme: InternalTheme; isMode: (mode: CardMode) => boolean; }) => { if (theme.isV3) { @@ -74,7 +74,7 @@ export const getCardColors = ({ theme, mode, }: { - theme: Theme; + theme: InternalTheme; mode: CardMode; }) => { const isMode = (modeToCompare: CardMode) => { diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 49b09490eb..e4665a0806 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { Platform } from 'react-native'; import CheckboxIOS from './CheckboxIOS'; import CheckboxAndroid from './CheckboxAndroid'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; export type Props = { /** @@ -29,7 +29,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * testID to be used on tests. */ @@ -86,9 +86,9 @@ const Checkbox = (props: Props) => ); -export default withTheme(Checkbox); +export default withInternalTheme(Checkbox); // @component-docs ignore-next-line -const CheckboxWithTheme = withTheme(Checkbox); +const CheckboxWithTheme = withInternalTheme(Checkbox); // @component-docs ignore-next-line export { CheckboxWithTheme as Checkbox }; diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx index 0145e32a10..32a020e7a2 100644 --- a/src/components/Checkbox/CheckboxAndroid.tsx +++ b/src/components/Checkbox/CheckboxAndroid.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { Animated, View, StyleSheet } from 'react-native'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import { withTheme } from '../../core/theming'; -import type { $RemoveChildren, Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { $RemoveChildren, InternalTheme } from '../../types'; import { getAndroidSelectionControlColor } from './utils'; export type Props = $RemoveChildren & { @@ -30,7 +30,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * testID to be used on tests. */ @@ -175,9 +175,9 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(CheckboxAndroid); +export default withInternalTheme(CheckboxAndroid); // @component-docs ignore-next-line -const CheckboxAndroidWithTheme = withTheme(CheckboxAndroid); +const CheckboxAndroidWithTheme = withInternalTheme(CheckboxAndroid); // @component-docs ignore-next-line export { CheckboxAndroidWithTheme as CheckboxAndroid }; diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx index 3bf06d6d16..dfa01067e2 100644 --- a/src/components/Checkbox/CheckboxIOS.tsx +++ b/src/components/Checkbox/CheckboxIOS.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import { withTheme } from '../../core/theming'; -import type { $RemoveChildren, Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { $RemoveChildren, InternalTheme } from '../../types'; import { getSelectionControlIOSColor } from './utils'; export type Props = $RemoveChildren & { @@ -26,7 +26,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * testID to be used on tests. */ @@ -103,9 +103,9 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(CheckboxIOS); +export default withInternalTheme(CheckboxIOS); // @component-docs ignore-next-line -const CheckboxIOSWithTheme = withTheme(CheckboxIOS); +const CheckboxIOSWithTheme = withInternalTheme(CheckboxIOS); // @component-docs ignore-next-line export { CheckboxIOSWithTheme as CheckboxIOS }; diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 5d4f87d52f..455dae930b 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -13,8 +13,8 @@ import CheckboxAndroid from './CheckboxAndroid'; import CheckboxIOS from './CheckboxIOS'; import Text from '../Typography/Text'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import { withTheme } from '../../core/theming'; -import type { MD3TypescaleKey, Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { MD3TypescaleKey, InternalTheme } from '../../types'; export type Props = { /** @@ -73,7 +73,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * testID to be used on tests. */ @@ -183,10 +183,10 @@ const CheckboxItem = ({ CheckboxItem.displayName = 'Checkbox.Item'; -export default withTheme(CheckboxItem); +export default withInternalTheme(CheckboxItem); // @component-docs ignore-next-line -const CheckboxItemWithTheme = withTheme(CheckboxItem); +const CheckboxItemWithTheme = withInternalTheme(CheckboxItem); // @component-docs ignore-next-line export { CheckboxItemWithTheme as CheckboxItem }; diff --git a/src/components/Checkbox/utils.ts b/src/components/Checkbox/utils.ts index 6311d715ea..b78c2df75e 100644 --- a/src/components/Checkbox/utils.ts +++ b/src/components/Checkbox/utils.ts @@ -1,11 +1,11 @@ import color from 'color'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; const getAndroidCheckedColor = ({ theme, customColor, }: { - theme: Theme; + theme: InternalTheme; customColor?: string; }) => { if (customColor) { @@ -23,7 +23,7 @@ const getAndroidUncheckedColor = ({ theme, customUncheckedColor, }: { - theme: Theme; + theme: InternalTheme; customUncheckedColor?: string; }) => { if (customUncheckedColor) { @@ -46,7 +46,7 @@ const getAndroidRippleColor = ({ checkedColor, disabled, }: { - theme: Theme; + theme: InternalTheme; checkedColor: string; disabled?: boolean; }) => { @@ -67,7 +67,7 @@ const getAndroidControlColor = ({ checkedColor, uncheckedColor, }: { - theme: Theme; + theme: InternalTheme; checked: boolean; checkedColor: string; uncheckedColor: string; @@ -93,7 +93,7 @@ export const getAndroidSelectionControlColor = ({ customColor, customUncheckedColor, }: { - theme: Theme; + theme: InternalTheme; checked: boolean; disabled?: boolean; customColor?: string; @@ -121,7 +121,7 @@ const getIOSCheckedColor = ({ disabled, customColor, }: { - theme: Theme; + theme: InternalTheme; customColor?: string; disabled?: boolean; }) => { @@ -148,7 +148,7 @@ const getIOSRippleColor = ({ checkedColor, disabled, }: { - theme: Theme; + theme: InternalTheme; checkedColor: string; disabled?: boolean; }) => { @@ -166,7 +166,7 @@ export const getSelectionControlIOSColor = ({ disabled, customColor, }: { - theme: Theme; + theme: InternalTheme; disabled?: boolean; customColor?: string; }) => { diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 481af0cf35..767bdc8a51 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -16,9 +16,9 @@ import MaterialCommunityIcon from '../MaterialCommunityIcon'; import Surface from '../Surface'; import Text from '../Typography/Text'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import { white } from '../../styles/themes/v2/colors'; -import type { EllipsizeProp, Theme } from '../../types'; +import type { EllipsizeProp, InternalTheme } from '../../types'; import { getChipColors } from './helpers'; export type Props = React.ComponentProps & { @@ -100,7 +100,7 @@ export type Props = React.ComponentProps & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * Pass down testID from chip props to touchable for Detox tests. */ @@ -448,4 +448,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Chip); +export default withInternalTheme(Chip); diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx index 88e266d364..c46913dbf0 100644 --- a/src/components/Chip/helpers.tsx +++ b/src/components/Chip/helpers.tsx @@ -1,10 +1,10 @@ import color from 'color'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { black, white } from '../../styles/themes/v2/colors'; import type { ColorValue } from 'react-native'; type BaseProps = { - theme: Theme; + theme: InternalTheme; isOutlined: boolean; disabled?: boolean; }; diff --git a/src/components/CrossFadeIcon.tsx b/src/components/CrossFadeIcon.tsx index 6f5a0a27c3..2e6138aa88 100644 --- a/src/components/CrossFadeIcon.tsx +++ b/src/components/CrossFadeIcon.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { Animated, StyleSheet, View } from 'react-native'; import Icon, { isValidIcon, IconSource, isEqualIcon } from './Icon'; -import { withTheme } from '../core/theming'; -import type { Theme } from '../types'; +import { withInternalTheme } from '../core/theming'; +import type { InternalTheme } from '../types'; type Props = { /** @@ -21,7 +21,7 @@ type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; const CrossFadeIcon = ({ color, size, source, theme }: Props) => { @@ -110,7 +110,7 @@ const CrossFadeIcon = ({ color, size, source, theme }: Props) => { ); }; -export default withTheme(CrossFadeIcon); +export default withInternalTheme(CrossFadeIcon); const styles = StyleSheet.create({ content: { diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx index 05951cd8df..b5348ca19c 100644 --- a/src/components/DataTable/DataTableHeader.tsx +++ b/src/components/DataTable/DataTableHeader.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import color from 'color'; import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native'; import { black, white } from '../../styles/themes/v2/colors'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; export type Props = React.ComponentPropsWithRef & { /** @@ -14,7 +14,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -76,7 +76,7 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DataTableHeader); +export default withInternalTheme(DataTableHeader); // @component-docs ignore-next-line export { DataTableHeader }; diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index 6d3e6956d6..4d6b38069a 100644 --- a/src/components/DataTable/DataTablePagination.tsx +++ b/src/components/DataTable/DataTablePagination.tsx @@ -1,19 +1,19 @@ +import color from 'color'; import * as React from 'react'; import { - StyleSheet, + I18nManager, StyleProp, + StyleSheet, View, ViewStyle, - I18nManager, } from 'react-native'; -import color from 'color'; +import type { InternalTheme } from 'src/types'; +import { useInternalTheme, withInternalTheme } from '../../core/theming'; +import Button from '../Button/Button'; import IconButton from '../IconButton/IconButton'; -import Text from '../Typography/Text'; -import { withTheme, useTheme } from '../../core/theming'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import Menu from '../Menu/Menu'; -import Button from '../Button/Button'; -import type { Theme } from '../../types'; +import Text from '../Typography/Text'; export type Props = React.ComponentPropsWithRef & PaginationControlsProps & @@ -38,7 +38,7 @@ export type Props = React.ComponentPropsWithRef & /** * @optional */ - theme: Theme; + theme: InternalTheme; }; type PaginationDropdownProps = { @@ -81,7 +81,7 @@ const PaginationControls = ({ onPageChange, showFastPaginationControls, }: PaginationControlsProps) => { - const theme = useTheme(); + const theme = useInternalTheme(); const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; @@ -156,7 +156,7 @@ const PaginationDropdown = ({ numberOfItemsPerPage, onItemsPerPageChange, }: PaginationDropdownProps) => { - const { colors } = useTheme(); + const { colors } = useInternalTheme(); const [showSelect, toggleSelect] = React.useState(false); return ( @@ -359,7 +359,7 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DataTablePagination); +export default withInternalTheme(DataTablePagination); // @component-docs ignore-next-line export { DataTablePagination }; diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx index 6bd9397ee7..c3631dae59 100644 --- a/src/components/DataTable/DataTableRow.tsx +++ b/src/components/DataTable/DataTableRow.tsx @@ -9,8 +9,8 @@ import { } from 'react-native'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; import { black, white } from '../../styles/themes/v2/colors'; -import { withTheme } from '../../core/theming'; -import type { $RemoveChildren, Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { $RemoveChildren, InternalTheme } from '../../types'; export type Props = $RemoveChildren & { /** @@ -25,7 +25,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * `pointerEvents` passed to the `View` container, which is wrapping children within `TouchableRipple`. */ @@ -103,7 +103,7 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DataTableRow); +export default withInternalTheme(DataTableRow); // @component-docs ignore-next-line export { DataTableRow }; diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx index a4406fbbc1..1139aebb65 100644 --- a/src/components/DataTable/DataTableTitle.tsx +++ b/src/components/DataTable/DataTableTitle.tsx @@ -12,8 +12,8 @@ import { import color from 'color'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import Text from '../Typography/Text'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; export type Props = React.ComponentPropsWithRef< typeof TouchableWithoutFeedback @@ -46,7 +46,7 @@ export type Props = React.ComponentPropsWithRef< /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -198,7 +198,7 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DataTableTitle); +export default withInternalTheme(DataTableTitle); // @component-docs ignore-next-line export { DataTableTitle }; diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index f435a07420..87741bd352 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -6,9 +6,9 @@ import DialogActions from './DialogActions'; import DialogIcon from './DialogIcon'; import DialogTitle from './DialogTitle'; import DialogScrollArea from './DialogScrollArea'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import overlay from '../../styles/overlay'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; export type Props = { /** @@ -31,7 +31,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; const DIALOG_ELEVATION: number = 24; @@ -171,4 +171,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Dialog); +export default withInternalTheme(Dialog); diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index 26e3fb40a1..7a51fdb015 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native'; -import { useTheme } from '../../core/theming'; +import { useInternalTheme } from '../../core/theming'; export type Props = React.ComponentPropsWithRef & { /** @@ -45,7 +45,7 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const DialogActions = (props: Props) => { - const { isV3 } = useTheme(); + const { isV3 } = useInternalTheme(); const actionsLength = React.Children.toArray(props.children).length; return ( diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index d9fb93ba8f..a5a6897ba3 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { useTheme } from '../../core/theming'; +import { useInternalTheme } from '../../core/theming'; import Icon, { IconSource } from '../Icon'; export type Props = { @@ -60,7 +60,7 @@ export type Props = { * ``` */ const DialogIcon = ({ size = 24, color, icon }: Props) => { - const theme = useTheme(); + const theme = useInternalTheme(); if (!theme.isV3) { return null; diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index e8ed195a9c..1dfb00c91a 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native'; -import { useTheme } from '../../core/theming'; +import { useInternalTheme } from '../../core/theming'; export type Props = React.ComponentPropsWithRef & { /** @@ -48,7 +48,7 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const DialogScrollArea = (props: Props) => { - const theme = useTheme(); + const theme = useInternalTheme(); const borderStyles = { borderColor: theme.isV3 ? theme.colors.surfaceVariant diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index 24c79dbd89..67b42294c5 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { StyleSheet, StyleProp, TextStyle } from 'react-native'; import Title from '../Typography/v2/Title'; import Text from '../Typography/Text'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; export type Props = React.ComponentPropsWithRef & { /** @@ -14,7 +14,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -83,7 +83,7 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DialogTitle); +export default withInternalTheme(DialogTitle); // @component-docs ignore-next-line export { DialogTitle }; diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index c13f1286e4..e7364f1002 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import color from 'color'; import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native'; -import { withTheme } from '../core/theming'; +import { withInternalTheme } from '../core/theming'; import { black, white } from '../styles/themes/v2/colors'; -import type { $RemoveChildren, Theme } from '../types'; +import type { $RemoveChildren, InternalTheme } from '../types'; export type Props = $RemoveChildren & { /** @@ -25,7 +25,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -99,4 +99,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Divider); +export default withInternalTheme(Divider); diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index 6c5b361309..94ce61f95f 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -12,8 +12,8 @@ import { } from 'react-native'; import Text from '../Typography/Text'; import Icon, { IconSource } from '../Icon'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; import Badge from '../Badge'; export type Props = React.ComponentPropsWithRef & { @@ -41,7 +41,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * Badge to show on the icon, can be `true` to show a dot, `string` or `number` to show text. */ @@ -247,4 +247,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DrawerCollapsedItem); +export default withInternalTheme(DrawerCollapsedItem); diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index 150e433cf2..370d3be8e8 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -4,8 +4,8 @@ import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; import Text from '../Typography/Text'; import Icon, { IconSource } from '../Icon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; export type Props = React.ComponentPropsWithRef & { /** @@ -36,7 +36,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -179,4 +179,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DrawerItem); +export default withInternalTheme(DrawerItem); diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index 7fb5f436b0..fff5d4bc6d 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native'; import Text from '../Typography/Text'; import Divider from '../Divider'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; import { MD3Colors } from '../../styles/themes/v3/tokens'; export type Props = React.ComponentPropsWithRef & { @@ -20,7 +20,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -116,4 +116,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DrawerSection); +export default withInternalTheme(DrawerSection); diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index f4c44618a8..8054e82468 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -15,9 +15,9 @@ import { import Surface from '../Surface'; import Icon from '../Icon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import type { $RemoveChildren, Theme } from '../../types'; +import type { $RemoveChildren, InternalTheme } from '../../types'; import type { IconSource } from '../Icon'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import type { AccessibilityState, NativeSyntheticEvent, @@ -93,7 +93,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; testID?: string; }; @@ -515,4 +515,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(AnimatedFAB); +export default withInternalTheme(AnimatedFAB); diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index 166ed74512..7896d21ac6 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -13,9 +13,9 @@ import CrossFadeIcon from '../CrossFadeIcon'; import Icon, { IconSource } from '../Icon'; import Text from '../Typography/Text'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import { getExtendedFabStyle, getFABColors, getFabStyle } from './utils'; -import type { $RemoveChildren, Theme } from '../../types'; +import type { $RemoveChildren, InternalTheme } from '../../types'; type FABSize = 'small' | 'medium' | 'large'; @@ -110,7 +110,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; testID?: string; }; @@ -316,9 +316,9 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(FAB); +export default withInternalTheme(FAB); // @component-docs ignore-next-line -const FABWithTheme = withTheme(FAB); +const FABWithTheme = withInternalTheme(FAB); // @component-docs ignore-next-line export { FABWithTheme as FAB }; diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index 1ade83eaf3..3c38924132 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -11,9 +11,9 @@ import { import FAB from './FAB'; import Text from '../Typography/Text'; import Card from '../Card/Card'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import type { IconSource } from '../Icon'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { getFABGroupColors } from './utils'; export type Props = { @@ -95,7 +95,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * Pass down testID from Group props to FAB. */ @@ -409,10 +409,10 @@ const FABGroup = ({ FABGroup.displayName = 'FAB.Group'; -export default withTheme(FABGroup); +export default withInternalTheme(FABGroup); // @component-docs ignore-next-line -const FABGroupWithTheme = withTheme(FABGroup); +const FABGroupWithTheme = withInternalTheme(FABGroup); // @component-docs ignore-next-line export { FABGroupWithTheme as FABGroup }; diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index fb99e4c1db..88333f9505 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -6,7 +6,7 @@ import { ViewStyle, StyleSheet, } from 'react-native'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { white, black } from '../../styles/themes/v2/colors'; import getContrastingColor from '../../utils/getContrastingColor'; @@ -27,7 +27,7 @@ type Variant = 'primary' | 'secondary' | 'tertiary' | 'surface'; type BaseProps = { isVariant: (variant: Variant) => boolean; - theme: Theme; + theme: InternalTheme; disabled?: boolean; }; @@ -263,7 +263,7 @@ export const getFABColors = ({ customColor, style, }: { - theme: Theme; + theme: InternalTheme; variant: string; disabled?: boolean; customColor?: string; @@ -293,7 +293,7 @@ export const getFABColors = ({ }; }; -const getLabelColor = ({ theme }: { theme: Theme }) => { +const getLabelColor = ({ theme }: { theme: InternalTheme }) => { if (theme.isV3) { return theme.colors.onSurface; } @@ -309,7 +309,7 @@ const getBackdropColor = ({ theme, customBackdropColor, }: { - theme: Theme; + theme: InternalTheme; customBackdropColor?: string; }) => { if (customBackdropColor) { @@ -321,7 +321,7 @@ const getBackdropColor = ({ return theme.colors?.backdrop; }; -const getStackedFABBackgroundColor = ({ theme }: { theme: Theme }) => { +const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => { if (theme.isV3) { return theme.colors.elevation.level3; } @@ -332,7 +332,7 @@ export const getFABGroupColors = ({ theme, customBackdropColor, }: { - theme: Theme; + theme: InternalTheme; customBackdropColor?: string; }) => { return { @@ -378,7 +378,7 @@ export const getFabStyle = ({ }: { customSize?: number; size: 'small' | 'medium' | 'large'; - theme: Theme; + theme: InternalTheme; }) => { const { isV3, roundness } = theme; @@ -422,7 +422,7 @@ export const getExtendedFabStyle = ({ theme, }: { customSize?: number; - theme: Theme; + theme: InternalTheme; }) => { if (customSize) return getExtendedFabDimensions(customSize); diff --git a/src/components/HelperText.tsx b/src/components/HelperText.tsx index e1142f6db9..958bf407a9 100644 --- a/src/components/HelperText.tsx +++ b/src/components/HelperText.tsx @@ -8,8 +8,8 @@ import { LayoutChangeEvent, } from 'react-native'; import AnimatedText from './Typography/AnimatedText'; -import { withTheme } from '../core/theming'; -import type { $Omit, Theme } from '../types'; +import { withInternalTheme } from '../core/theming'; +import type { $Omit, InternalTheme } from '../types'; export type Props = $Omit< $Omit, 'padding'>, @@ -35,7 +35,7 @@ export type Props = $Omit< /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * TestID used for testing purposes */ @@ -170,4 +170,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(HelperText); +export default withInternalTheme(HelperText); diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 9bd0595e0f..fe6631fe81 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -7,8 +7,8 @@ import { } from 'react-native'; import { Consumer as SettingsConsumer } from '../core/settings'; import { accessibilityProps } from './MaterialCommunityIcon'; -import { withTheme } from '../core/theming'; -import type { Theme } from '../types'; +import { withInternalTheme } from '../core/theming'; +import type { InternalTheme } from '../types'; type IconSourceBase = string | ImageSourcePropType; @@ -28,7 +28,7 @@ type Props = IconProps & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; const isImageSource = (source: any) => @@ -122,4 +122,4 @@ const Icon = ({ source, color, size, theme, ...rest }: Props) => { return null; }; -export default withTheme(Icon); +export default withInternalTheme(Icon); diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 2d06b8cb1f..fade33f03b 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -10,8 +10,8 @@ import { import TouchableRipple from '../TouchableRipple/TouchableRipple'; import Icon, { IconSource } from '../Icon'; import CrossFadeIcon from '../CrossFadeIcon'; -import { withTheme } from '../../core/theming'; -import type { $RemoveChildren, Theme } from '../../types'; +import { useInternalTheme } from '../../core/theming'; +import type { $RemoveChildren, ThemeProp } from '../../types'; import { getIconButtonColor } from './utils'; import Surface from '../Surface'; @@ -69,7 +69,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme?: ThemeProp; }; /** @@ -124,11 +124,12 @@ const IconButton = ({ selected = false, animated = false, mode, - theme, style, ...rest }: Props) => { + const theme = useInternalTheme(); const { isV3 } = theme; + const IconComponent = animated ? CrossFadeIcon : Icon; const { iconColor, rippleColor, backgroundColor, borderColor } = @@ -208,4 +209,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(IconButton); +export default IconButton; diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts index ae7cd605e7..5f385822fb 100644 --- a/src/components/IconButton/utils.ts +++ b/src/components/IconButton/utils.ts @@ -1,10 +1,10 @@ import color from 'color'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal'; type BaseProps = { - theme: Theme; + theme: InternalTheme; isMode: (mode: IconButtonMode) => boolean; disabled?: boolean; selected?: boolean; @@ -14,7 +14,7 @@ const getBorderColor = ({ theme, disabled, }: { - theme: Theme; + theme: InternalTheme; disabled?: boolean; }) => { if (theme.isV3) { @@ -128,7 +128,7 @@ const getRippleColor = ({ theme, iconColor, }: { - theme: Theme; + theme: InternalTheme; iconColor: string; }) => { if (theme.isV3) { @@ -145,7 +145,7 @@ export const getIconButtonColor = ({ customIconColor, customContainerColor, }: { - theme: Theme; + theme: InternalTheme; disabled?: boolean; selected?: boolean; mode?: IconButtonMode; diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index b708efdc86..baa14be344 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -12,8 +12,8 @@ import { import TouchableRipple from '../TouchableRipple/TouchableRipple'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import Text from '../Typography/Text'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; import { ListAccordionGroupContext } from './ListAccordionGroup'; export type Props = { @@ -54,7 +54,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * Style that is passed to the wrapping TouchableRipple element. */ @@ -312,4 +312,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ListAccordion); +export default withInternalTheme(ListAccordion); diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 0940bca41d..19990add90 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,9 +10,9 @@ import { import TouchableRipple from '../TouchableRipple/TouchableRipple'; import Text from '../Typography/Text'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import type { $RemoveChildren, EllipsizeProp } from '../../types'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; type Title = | React.ReactNode @@ -69,7 +69,7 @@ export type Props = $RemoveChildren & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * Style that is passed to the wrapping TouchableRipple element. */ @@ -273,4 +273,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ListItem); +export default withInternalTheme(ListItem); diff --git a/src/components/List/ListSection.tsx b/src/components/List/ListSection.tsx index 57a1b9b481..bc73a46427 100644 --- a/src/components/List/ListSection.tsx +++ b/src/components/List/ListSection.tsx @@ -7,8 +7,8 @@ import { TextStyle, } from 'react-native'; import ListSubheader from './ListSubheader'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; export type Props = React.ComponentPropsWithRef & { /** @@ -22,7 +22,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * Style that is passed to Title element. */ @@ -77,4 +77,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ListSection); +export default withInternalTheme(ListSection); diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx index 228c56415a..c3b7aad26b 100644 --- a/src/components/List/ListSubheader.tsx +++ b/src/components/List/ListSubheader.tsx @@ -2,14 +2,14 @@ import * as React from 'react'; import { StyleSheet, StyleProp, TextStyle } from 'react-native'; import color from 'color'; import Text from '../Typography/Text'; -import { useTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { useInternalTheme } from '../../core/theming'; +import type { InternalTheme } from 'src/types'; export type Props = React.ComponentProps & { /** * @optional */ - theme?: Theme; + theme?: InternalTheme; /** * Style that is passed to Text element. */ @@ -30,7 +30,7 @@ export type Props = React.ComponentProps & { * ``` */ const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => { - const theme = useTheme(overrideTheme); + const theme = useInternalTheme(overrideTheme); const textColor = theme.isV3 ? theme.colors.onSurfaceVariant diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 06c78cbf54..e3ed4108c1 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -18,14 +18,14 @@ import { } from 'react-native'; import color from 'color'; -import { withTheme } from '../../core/theming'; +import { withInternalTheme } from '../../core/theming'; import type { $Omit } from '../../types'; import Portal from '../Portal/Portal'; import Surface from '../Surface'; import MenuItem from './MenuItem'; import { APPROX_STATUSBAR_HEIGHT } from '../../constants'; import { addEventListener } from '../../utils/addEventListener'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; export type Props = { /** @@ -63,7 +63,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; type Layout = $Omit<$Omit, 'y'>; @@ -607,4 +607,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(Menu); +export default withInternalTheme(Menu); diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index ccf222a6c4..2e5a5549e1 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -9,8 +9,8 @@ import { import Icon, { IconSource } from '../Icon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; import Text from '../Typography/Text'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from '../../types'; import { getContentMaxWidth, getMenuItemColor, @@ -58,7 +58,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; /** * TestID used for testing purposes */ @@ -222,4 +222,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(MenuItem); +export default withInternalTheme(MenuItem); diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts index 3ec9b32af1..4da2029210 100644 --- a/src/components/Menu/utils.ts +++ b/src/components/Menu/utils.ts @@ -1,5 +1,5 @@ import color from 'color'; -import type { Theme } from '../../types'; +import type { InternalTheme } from '../../types'; import { white, black } from '../../styles/themes/v2/colors'; import type { IconSource } from '../Icon'; @@ -14,11 +14,11 @@ type ContentProps = { }; type ColorProps = { - theme: Theme; + theme: InternalTheme; disabled?: boolean; }; -const getDisabledColor = (theme: Theme) => { +const getDisabledColor = (theme: InternalTheme) => { if (theme.isV3) { return theme.colors.onSurfaceDisabled; } diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 96c5089c27..060a7e6d97 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -15,9 +15,10 @@ import { getBottomSpace, } from 'react-native-iphone-x-helper'; import Surface from './Surface'; -import { withTheme } from '../core/theming'; +import { withInternalTheme } from '../core/theming'; import useAnimatedValue from '../utils/useAnimatedValue'; import { addEventListener } from '../utils/addEventListener'; +import type { InternalTheme } from 'src/types'; export type Props = { /** @@ -52,7 +53,7 @@ export type Props = { /** * @optional */ - theme: ReactNativePaper.Theme; + theme: InternalTheme; /** * testID to be used on tests. */ @@ -259,7 +260,7 @@ function Modal({ ); } -export default withTheme(Modal); +export default withInternalTheme(Modal); const styles = StyleSheet.create({ backdrop: { diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx index 7b3efcae91..367e28e8d6 100644 --- a/src/components/Portal/Portal.tsx +++ b/src/components/Portal/Portal.tsx @@ -5,8 +5,8 @@ import { Provider as SettingsProvider, Consumer as SettingsConsumer, } from '../../core/settings'; -import { ThemeProvider, withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { ThemeProvider, withInternalTheme } from '../../core/theming'; +import type { InternalTheme } from 'src/types'; export type Props = { /** @@ -16,7 +16,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; /** @@ -64,4 +64,4 @@ class Portal extends React.Component { } } -export default withTheme(Portal); +export default withInternalTheme(Portal); diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 3893f0bde9..7f01826972 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -10,8 +10,8 @@ import { I18nManager, } from 'react-native'; import setColor from 'color'; -import { withTheme } from '../core/theming'; -import type { Theme } from '../types'; +import { withInternalTheme } from '../core/theming'; +import type { InternalTheme } from '../types'; export type Props = React.ComponentPropsWithRef & { /** @@ -34,7 +34,7 @@ export type Props = React.ComponentPropsWithRef & { /** * @optional */ - theme: Theme; + theme: InternalTheme; }; const INDETERMINATE_DURATION = 2000; @@ -235,4 +235,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ProgressBar); +export default withInternalTheme(ProgressBar); diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 48d1ac5cd0..5ed92c4dce 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { Platform } from 'react-native'; import RadioButtonAndroid from './RadioButtonAndroid'; import RadioButtonIOS from './RadioButtonIOS'; -import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import { withInternalTheme } from '../../core/theming'; +import type { ThemeProp } from '../../types'; export type Props = { /** @@ -33,7 +33,7 @@ export type Props = { /** * @optional */ - theme: Theme; + theme: ThemeProp; /** * testID to be used on tests. */ @@ -99,9 +99,9 @@ const RadioButton = (props: Props) => { return - ); -} -``` +const theme = { + // Extend Material Design 2 theme -## Using the theme in your own components + ...MD2LightTheme, // or MD2DarkTheme -To access the theme in your own components, you can use the `withTheme` HOC exported from the library. If you wrap your component with the HOC, you'll receive the theme as a prop: + // Specify a custom property + myOwnProperty: true, -```js -import * as React from 'react'; -import { withTheme } from 'react-native-paper'; + // Specify a custom nested property + colors: { + ...MD2LightTheme.colors, + myOwnColor: '#BADA55', + }, +}; + +export type AppTheme = typeof theme; -function MyComponent(props) { - const { colors } = props.theme; +export const useAppTheme = () => useTheme(); - return Yo!; +export default function Main() { + return ( + + + + ); } -export default withTheme(MyComponent); +// App.tsx + +export default function App() { + const { theme } = useAppTheme(); + + return ; +} ``` -Components wrapped with `withTheme` support the theme from the `Provider` as well as from the `theme` prop. +### Migrating to Material You + +If you are migrating from Material Design 2 (4.x and lower) to Material You (5.x), please refer to our [Migration Guide](https://callstack.github.io/react-native-paper/introducing-v5-with-material-you.html) + +## Applying a theme to a paper component -You can also use the `useTheme` hook: +If you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `Provider`: ```js import * as React from 'react'; -import { useTheme } from 'react-native-paper'; - -function MyComponent(props) { - const { colors } = useTheme(); +import { Button } from 'react-native-paper'; - return Yo!; +export default function ButtonExample() { + return ( + + ); } ``` @@ -322,7 +434,12 @@ import * as React from 'react'; import { Button } from 'react-native-paper'; export default function FancyButton(props) { - return