Skip to content

Commit 622598c

Browse files
BogiKayBogiKay
authored
refactor: replace withInternalTheme HOC with useInternalTheme (callstack#3606)
1 parent e2c493f commit 622598c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+628
-392
lines changed

Diff for: ‎src/components/ActivityIndicator.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import {
99
ViewStyle,
1010
} from 'react-native';
1111

12-
import { withInternalTheme } from '../core/theming';
13-
import type { InternalTheme } from '../types';
12+
import { useInternalTheme } from '../core/theming';
13+
import type { ThemeProp } from '../types';
1414

1515
export type Props = React.ComponentPropsWithRef<typeof View> & {
1616
/**
@@ -33,7 +33,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
3333
/**
3434
* @optional
3535
*/
36-
theme: InternalTheme;
36+
theme?: ThemeProp;
3737
};
3838

3939
const DURATION = 2400;
@@ -64,9 +64,10 @@ const ActivityIndicator = ({
6464
hidesWhenStopped = true,
6565
size: indicatorSize = 'small',
6666
style,
67-
theme,
67+
theme: themeOverrides,
6868
...rest
6969
}: Props) => {
70+
const theme = useInternalTheme(themeOverrides);
7071
const { current: timer } = React.useRef<Animated.Value>(
7172
new Animated.Value(0)
7273
);
@@ -254,4 +255,4 @@ const styles = StyleSheet.create({
254255
},
255256
});
256257

257-
export default withInternalTheme(ActivityIndicator);
258+
export default ActivityIndicator;

Diff for: ‎src/components/Appbar/Appbar.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
33

44
import color from 'color';
55

6-
import { withInternalTheme } from '../../core/theming';
7-
import type { InternalTheme, MD3Elevation } from '../../types';
6+
import { useInternalTheme } from '../../core/theming';
7+
import type { MD3Elevation, ThemeProp } from '../../types';
88
import Surface from '../Surface';
99
import AppbarAction from './AppbarAction';
1010
import AppbarBackAction from './AppbarBackAction';
@@ -54,7 +54,7 @@ export type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
5454
/**
5555
* @optional
5656
*/
57-
theme: InternalTheme;
57+
theme?: ThemeProp;
5858
style?: StyleProp<ViewStyle>;
5959
};
6060

@@ -152,12 +152,13 @@ const Appbar = ({
152152
children,
153153
dark,
154154
style,
155-
theme,
156155
mode = 'small',
157156
elevated,
158157
safeAreaInsets,
158+
theme: themeOverrides,
159159
...rest
160160
}: Props) => {
161+
const theme = useInternalTheme(themeOverrides);
161162
const { isV3 } = theme;
162163
const {
163164
backgroundColor: customBackground,
@@ -257,6 +258,7 @@ const Appbar = ({
257258
renderAppbarContent({
258259
children,
259260
isDark,
261+
theme,
260262
isV3,
261263
shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
262264
})}
@@ -348,9 +350,7 @@ const styles = StyleSheet.create({
348350
},
349351
});
350352

351-
export default withInternalTheme(Appbar);
353+
export default Appbar;
352354

353355
// @component-docs ignore-next-line
354-
const AppbarWithTheme = withInternalTheme(Appbar);
355-
// @component-docs ignore-next-line
356-
export { AppbarWithTheme as Appbar };
356+
export { Appbar };

Diff for: ‎src/components/Appbar/AppbarAction.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import type { StyleProp, ViewStyle, View } from 'react-native';
33

44
import color from 'color';
5+
import type { ThemeProp } from 'src/types';
56

67
import { useInternalTheme } from '../../core/theming';
78
import { black } from '../../styles/themes/v2/colors';
@@ -41,6 +42,10 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
4142
isLeading?: boolean;
4243
style?: StyleProp<ViewStyle>;
4344
ref?: React.RefObject<View>;
45+
/**
46+
* @optional
47+
*/
48+
theme?: ThemeProp;
4449
};
4550

4651
/**
@@ -78,11 +83,12 @@ const AppbarAction = React.forwardRef<View, Props>(
7883
onPress,
7984
accessibilityLabel,
8085
isLeading,
86+
theme: themeOverrides,
8187
...rest
8288
}: Props,
8389
ref
8490
) => {
85-
const theme = useInternalTheme();
91+
const theme = useInternalTheme(themeOverrides);
8692

8793
const actionIconColor = iconColor
8894
? iconColor

Diff for: ‎src/components/Appbar/AppbarContent.tsx

+7-12
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,9 @@ import {
1212

1313
import color from 'color';
1414

15-
import { withInternalTheme } from '../../core/theming';
15+
import { useInternalTheme } from '../../core/theming';
1616
import { white } from '../../styles/themes/v2/colors';
17-
import type {
18-
$RemoveChildren,
19-
InternalTheme,
20-
MD3TypescaleKey,
21-
} from '../../types';
17+
import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types';
2218
import Text from '../Typography/Text';
2319
import { modeTextVariant } from './utils';
2420

@@ -61,7 +57,7 @@ export type Props = $RemoveChildren<typeof View> & {
6157
/**
6258
* @optional
6359
*/
64-
theme: InternalTheme;
60+
theme?: ThemeProp;
6561
};
6662

6763
/**
@@ -93,11 +89,12 @@ const AppbarContent = ({
9389
style,
9490
titleRef,
9591
titleStyle,
96-
theme,
9792
title,
9893
mode = 'small',
94+
theme: themeOverrides,
9995
...rest
10096
}: Props) => {
97+
const theme = useInternalTheme(themeOverrides);
10198
const { isV3, colors } = theme;
10299

103100
const titleTextColor = titleColor
@@ -192,9 +189,7 @@ const styles = StyleSheet.create({
192189
},
193190
});
194191

195-
export default withInternalTheme(AppbarContent);
192+
export default AppbarContent;
196193

197194
// @component-docs ignore-next-line
198-
const AppbarContentWithTheme = withInternalTheme(AppbarContent);
199-
// @component-docs ignore-next-line
200-
export { AppbarContentWithTheme as AppbarContent };
195+
export { AppbarContent };

Diff for: ‎src/components/Appbar/AppbarHeader.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
33

44
import { useSafeAreaInsets } from 'react-native-safe-area-context';
55

6-
import { withInternalTheme } from '../../core/theming';
6+
import { useInternalTheme } from '../../core/theming';
77
import shadow from '../../styles/shadow';
8-
import type { InternalTheme } from '../../types';
8+
import type { ThemeProp } from '../../types';
99
import { Appbar } from './Appbar';
1010
import {
1111
DEFAULT_APPBAR_HEIGHT,
@@ -47,7 +47,7 @@ export type Props = React.ComponentProps<typeof Appbar> & {
4747
/**
4848
* @optional
4949
*/
50-
theme: InternalTheme;
50+
theme?: ThemeProp;
5151
style?: StyleProp<ViewStyle>;
5252
};
5353

@@ -106,9 +106,11 @@ const AppbarHeader = ({
106106
dark,
107107
mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
108108
elevated = false,
109+
theme: themeOverrides,
109110
...rest
110111
}: Props) => {
111-
const { isV3 } = rest.theme;
112+
const theme = useInternalTheme(themeOverrides);
113+
const { isV3 } = theme;
112114

113115
const {
114116
height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
@@ -119,7 +121,7 @@ const AppbarHeader = ({
119121
}: ViewStyle = StyleSheet.flatten(style) || {};
120122

121123
const backgroundColor = getAppbarColor(
122-
rest.theme,
124+
theme,
123125
elevation,
124126
customBackground,
125127
elevated
@@ -149,6 +151,7 @@ const AppbarHeader = ({
149151
mode,
150152
})}
151153
{...rest}
154+
theme={theme}
152155
/>
153156
</View>
154157
);
@@ -162,9 +165,7 @@ const styles = StyleSheet.create({
162165
},
163166
});
164167

165-
export default withInternalTheme(AppbarHeader);
168+
export default AppbarHeader;
166169

167170
// @component-docs ignore-next-line
168-
const AppbarHeaderWithTheme = withInternalTheme(AppbarHeader);
169-
// @component-docs ignore-next-line
170-
export { AppbarHeaderWithTheme as AppbarHeader };
171+
export { AppbarHeader };

Diff for: ‎src/components/Appbar/utils.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native';
44

55
import overlay from '../../styles/overlay';
66
import { black, white } from '../../styles/themes/v2/colors';
7-
import type { InternalTheme } from '../../types';
7+
import type { InternalTheme, ThemeProp } from '../../types';
88
import Tooltip from '../Tooltip/Tooltip';
99
import AppbarAction from './AppbarAction';
1010
import AppbarBackAction from './AppbarBackAction';
@@ -47,6 +47,7 @@ type RenderAppbarContentProps = {
4747
renderOnly?: React.ComponentType<any>[];
4848
renderExcept?: React.ComponentType<any>[];
4949
mode?: AppbarModes;
50+
theme?: ThemeProp;
5051
};
5152

5253
export const DEFAULT_APPBAR_HEIGHT = 56;
@@ -74,6 +75,7 @@ export const renderAppbarContent = ({
7475
renderOnly,
7576
renderExcept,
7677
mode = 'small',
78+
theme,
7779
}: RenderAppbarContentProps) => {
7880
return (
7981
React.Children.toArray(children as React.ReactNode | React.ReactNode[])
@@ -99,7 +101,9 @@ export const renderAppbarContent = ({
99101
color?: string;
100102
style?: StyleProp<ViewStyle>;
101103
mode?: AppbarModes;
104+
theme?: ThemeProp;
102105
} = {
106+
theme,
103107
color:
104108
typeof child.props.color !== 'undefined'
105109
? child.props.color

Diff for: ‎src/components/Avatar/AvatarIcon.tsx

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
22
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
33

4-
import { withInternalTheme } from '../../core/theming';
4+
import { useInternalTheme } from '../../core/theming';
55
import { white } from '../../styles/themes/v2/colors';
6-
import type { InternalTheme } from '../../types';
6+
import type { ThemeProp } from '../../types';
77
import getContrastingColor from '../../utils/getContrastingColor';
88
import Icon, { IconSource } from '../Icon';
99

@@ -26,7 +26,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
2626
/**
2727
* @optional
2828
*/
29-
theme: InternalTheme;
29+
theme?: ThemeProp;
3030
};
3131

3232
/**
@@ -48,7 +48,14 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
4848
* );
4949
* ```
5050
*/
51-
const Avatar = ({ icon, size = defaultSize, style, theme, ...rest }: Props) => {
51+
const Avatar = ({
52+
icon,
53+
size = defaultSize,
54+
style,
55+
theme: themeOverrides,
56+
...rest
57+
}: Props) => {
58+
const theme = useInternalTheme(themeOverrides);
5259
const { backgroundColor = theme.colors?.primary, ...restStyle } =
5360
StyleSheet.flatten(style) || {};
5461
const textColor =
@@ -83,4 +90,4 @@ const styles = StyleSheet.create({
8390
},
8491
});
8592

86-
export default withInternalTheme(Avatar);
93+
export default Avatar;

Diff for: ‎src/components/Avatar/AvatarImage.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import {
99
ViewStyle,
1010
} from 'react-native';
1111

12-
import { withInternalTheme } from '../../core/theming';
13-
import type { InternalTheme } from '../../types';
12+
import { useInternalTheme } from '../../core/theming';
13+
import type { ThemeProp } from '../../types';
1414

1515
const defaultSize = 64;
1616

@@ -57,7 +57,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
5757
/**
5858
* @optional
5959
*/
60-
theme: InternalTheme;
60+
theme?: ThemeProp;
6161
};
6262

6363
/**
@@ -90,11 +90,11 @@ const AvatarImage = ({
9090
onLoadEnd,
9191
onLoadStart,
9292
onProgress,
93-
theme,
93+
theme: themeOverrides,
94+
testID,
9495
...rest
9596
}: Props) => {
96-
const { colors } = theme;
97-
97+
const { colors } = useInternalTheme(themeOverrides);
9898
const { backgroundColor = colors?.primary } = StyleSheet.flatten(style) || {};
9999

100100
return (
@@ -113,6 +113,7 @@ const AvatarImage = ({
113113
{typeof source === 'function' && source({ size })}
114114
{typeof source !== 'function' && (
115115
<Image
116+
testID={testID}
116117
source={source}
117118
style={{ width: size, height: size, borderRadius: size / 2 }}
118119
onError={onError}
@@ -130,4 +131,4 @@ const AvatarImage = ({
130131

131132
AvatarImage.displayName = 'Avatar.Image';
132133

133-
export default withInternalTheme(AvatarImage);
134+
export default AvatarImage;

0 commit comments

Comments
 (0)