Skip to content

Commit a59281c

Browse files
lukewalczaklukewalczak
committed
refactor: isV3 from components
1 parent 64b3745 commit a59281c

Some content is hidden

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

88 files changed

+541
-1894
lines changed

‎src/components/ActivityIndicator.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,11 @@ const ActivityIndicator = ({
6363
theme: themeOverrides,
6464
...rest
6565
}: Props) => {
66-
const theme = useInternalTheme(themeOverrides);
66+
const {
67+
animation: { scale },
68+
colors: { primary },
69+
} = useInternalTheme(themeOverrides);
70+
6771
const { current: timer } = React.useRef<Animated.Value>(
6872
new Animated.Value(0)
6973
);
@@ -75,10 +79,6 @@ const ActivityIndicator = ({
7579
undefined
7680
);
7781

78-
const {
79-
animation: { scale },
80-
} = theme;
81-
8282
const startRotation = React.useCallback(() => {
8383
// Show indicator
8484
Animated.timing(fade, {
@@ -130,7 +130,7 @@ const ActivityIndicator = ({
130130
}
131131
}, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);
132132

133-
const color = indicatorColor || theme.colors?.primary;
133+
const color = indicatorColor || primary;
134134
const size =
135135
typeof indicatorSize === 'string'
136136
? indicatorSize === 'small'

‎src/components/Appbar/Appbar.tsx‎

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
import * as React from 'react';
22
import {
33
Animated,
4-
Platform,
54
StyleProp,
65
StyleSheet,
76
View,
87
ViewStyle,
98
ColorValue,
109
} from 'react-native';
1110

12-
import color from 'color';
13-
1411
import AppbarContent from './AppbarContent';
1512
import {
1613
AppbarModes,
17-
DEFAULT_APPBAR_HEIGHT,
1814
getAppbarBackgroundColor,
1915
modeAppbarHeight,
2016
renderAppbarContent,
@@ -165,11 +161,10 @@ const Appbar = ({
165161
...rest
166162
}: Props) => {
167163
const theme = useInternalTheme(themeOverrides);
168-
const { isV3 } = theme;
169164
const flattenedStyle = StyleSheet.flatten(style);
170165
const {
171166
backgroundColor: customBackground,
172-
elevation = isV3 ? (elevated ? 2 : 0) : 4,
167+
elevation = elevated ? 2 : 0,
173168
...restStyle
174169
} = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
175170
elevation?: number;
@@ -178,34 +173,26 @@ const Appbar = ({
178173

179174
const backgroundColor = getAppbarBackgroundColor(
180175
theme,
181-
elevation,
182176
customBackground,
183177
elevated
184178
);
185179

186180
const isMode = (modeToCompare: AppbarModes) => {
187-
return isV3 && mode === modeToCompare;
181+
return mode === modeToCompare;
188182
};
189183

190184
let isDark = false;
191185

192186
if (typeof dark === 'boolean') {
193187
isDark = dark;
194-
} else if (!isV3) {
195-
isDark =
196-
backgroundColor === 'transparent'
197-
? false
198-
: typeof backgroundColor === 'string'
199-
? !color(backgroundColor).isLight()
200-
: true;
201188
}
202189

203-
const isV3CenterAlignedMode = isV3 && isMode('center-aligned');
190+
const isCenterAlignedMode = isMode('center-aligned');
204191

205192
let shouldCenterContent = false;
206193
let shouldAddLeftSpacing = false;
207194
let shouldAddRightSpacing = false;
208-
if ((!isV3 && Platform.OS === 'ios') || isV3CenterAlignedMode) {
195+
if (isCenterAlignedMode) {
209196
let hasAppbarContent = false;
210197
let leftItemsCount = 0;
211198
let rightItemsCount = 0;
@@ -225,14 +212,12 @@ const Appbar = ({
225212
});
226213

227214
shouldCenterContent =
228-
hasAppbarContent &&
229-
leftItemsCount < 2 &&
230-
rightItemsCount < (isV3 ? 3 : 2);
215+
hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 3;
231216
shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
232217
shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
233218
}
234219

235-
const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing;
220+
const spacingStyle = styles.v3Spacing;
236221

237222
const insets = {
238223
paddingBottom: safeAreaInsets?.bottom,
@@ -247,26 +232,24 @@ const Appbar = ({
247232
{ backgroundColor },
248233
styles.appbar,
249234
{
250-
height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
235+
height: modeAppbarHeight[mode],
251236
},
252237
insets,
253238
restStyle,
254-
!theme.isV3 && { elevation },
255239
]}
256240
elevation={elevation as MD3Elevation}
257241
{...rest}
258242
>
259243
{shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
260-
{(!isV3 || isMode('small') || isMode('center-aligned')) && (
244+
{(isMode('small') || isMode('center-aligned')) && (
261245
<>
262246
{/* Render only the back action at first place */}
263247
{renderAppbarContent({
264248
children,
265249
isDark,
266250
theme,
267-
isV3,
268251
renderOnly: ['Appbar.BackAction'],
269-
shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
252+
shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
270253
})}
271254
{/* Render the rest of the content except the back action */}
272255
{renderAppbarContent({
@@ -277,9 +260,8 @@ const Appbar = ({
277260
],
278261
isDark,
279262
theme,
280-
isV3,
281263
renderExcept: ['Appbar.BackAction'],
282-
shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
264+
shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
283265
})}
284266
</>
285267
)}
@@ -296,14 +278,12 @@ const Appbar = ({
296278
{renderAppbarContent({
297279
children,
298280
isDark,
299-
isV3,
300281
renderOnly: ['Appbar.BackAction'],
301282
mode,
302283
})}
303284
{renderAppbarContent({
304285
children: filterAppbarActions(children, true),
305286
isDark,
306-
isV3,
307287
renderOnly: ['Appbar.Action'],
308288
mode,
309289
})}
@@ -312,7 +292,6 @@ const Appbar = ({
312292
{renderAppbarContent({
313293
children: filterAppbarActions(children),
314294
isDark,
315-
isV3,
316295
renderExcept: [
317296
'Appbar',
318297
'Appbar.BackAction',
@@ -326,7 +305,6 @@ const Appbar = ({
326305
{renderAppbarContent({
327306
children,
328307
isDark,
329-
isV3,
330308
renderOnly: ['Appbar.Content'],
331309
mode,
332310
})}
@@ -343,9 +321,6 @@ const styles = StyleSheet.create({
343321
alignItems: 'center',
344322
paddingHorizontal: 4,
345323
},
346-
spacing: {
347-
width: 48,
348-
},
349324
v3Spacing: {
350325
width: 52,
351326
},

‎src/components/Appbar/AppbarAction.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@ import type {
77
ViewStyle,
88
} from 'react-native';
99

10-
import color from 'color';
1110
import type { ThemeProp } from 'src/types';
1211

1312
import { useInternalTheme } from '../../core/theming';
14-
import { black } from '../../styles/themes/v2/colors';
1513
import { forwardRef } from '../../utils/forwardRef';
1614
import type { IconSource } from '../Icon';
1715
import IconButton from '../IconButton/IconButton';
@@ -97,15 +95,15 @@ const AppbarAction = forwardRef<View, Props>(
9795
}: Props,
9896
ref
9997
) => {
100-
const theme = useInternalTheme(themeOverrides);
98+
const {
99+
colors: { onSurface, onSurfaceVariant },
100+
} = useInternalTheme(themeOverrides);
101101

102102
const actionIconColor = iconColor
103103
? iconColor
104-
: theme.isV3
105-
? isLeading
106-
? theme.colors.onSurface
107-
: theme.colors.onSurfaceVariant
108-
: color(black).alpha(0.54).rgb().string();
104+
: isLeading
105+
? onSurface
106+
: onSurfaceVariant;
109107

110108
return (
111109
<IconButton

‎src/components/Appbar/AppbarContent.tsx‎

Lines changed: 8 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,8 @@ import {
1212
ViewProps,
1313
} from 'react-native';
1414

15-
import color from 'color';
16-
1715
import { modeTextVariant } from './utils';
1816
import { useInternalTheme } from '../../core/theming';
19-
import { white } from '../../styles/themes/v2/colors';
2017
import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types';
2118
import Text, { TextRef } from '../Typography/Text';
2219

@@ -102,8 +99,6 @@ export type Props = $RemoveChildren<typeof View> & {
10299
*/
103100
const AppbarContent = ({
104101
color: titleColor,
105-
subtitle,
106-
subtitleStyle,
107102
onPress,
108103
disabled,
109104
style,
@@ -116,16 +111,12 @@ const AppbarContent = ({
116111
testID = 'appbar-content',
117112
...rest
118113
}: Props) => {
119-
const theme = useInternalTheme(themeOverrides);
120-
const { isV3, colors } = theme;
121-
122-
const titleTextColor = titleColor
123-
? titleColor
124-
: isV3
125-
? colors.onSurface
126-
: white;
114+
const {
115+
colors: { onSurface },
116+
fonts,
117+
} = useInternalTheme(themeOverrides);
127118

128-
const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string();
119+
const titleTextColor = titleColor ? titleColor : onSurface;
129120

130121
const modeContainerStyles = {
131122
small: styles.v3DefaultContainer,
@@ -138,7 +129,7 @@ const AppbarContent = ({
138129

139130
const contentWrapperProps = {
140131
pointerEvents: 'box-none' as ViewProps['pointerEvents'],
141-
style: [styles.container, isV3 && modeContainerStyles[mode], style],
132+
style: [styles.container, modeContainerStyles[mode], style],
142133
testID,
143134
...rest,
144135
};
@@ -147,18 +138,13 @@ const AppbarContent = ({
147138
<>
148139
{typeof title === 'string' ? (
149140
<Text
150-
{...(isV3 && { variant })}
141+
variant={variant}
151142
ref={titleRef}
152143
style={[
153144
{
154145
color: titleTextColor,
155-
...(isV3
156-
? theme.fonts[variant]
157-
: Platform.OS === 'ios'
158-
? theme.fonts.regular
159-
: theme.fonts.medium),
146+
...fonts[variant],
160147
},
161-
!isV3 && styles.title,
162148
titleStyle,
163149
]}
164150
numberOfLines={1}
@@ -180,14 +166,6 @@ const AppbarContent = ({
180166
) : (
181167
title
182168
)}
183-
{!isV3 && subtitle ? (
184-
<Text
185-
style={[styles.subtitle, { color: subtitleColor }, subtitleStyle]}
186-
numberOfLines={1}
187-
>
188-
{subtitle}
189-
</Text>
190-
) : null}
191169
</>
192170
);
193171

@@ -233,12 +211,6 @@ const styles = StyleSheet.create({
233211
justifyContent: 'flex-end',
234212
paddingBottom: 28,
235213
},
236-
title: {
237-
fontSize: Platform.OS === 'ios' ? 17 : 20,
238-
},
239-
subtitle: {
240-
fontSize: Platform.OS === 'ios' ? 11 : 14,
241-
},
242214
});
243215

244216
const touchableRole: AccessibilityRole = 'button';

‎src/components/Appbar/AppbarHeader.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
1313

1414
import { Appbar } from './Appbar';
1515
import {
16-
DEFAULT_APPBAR_HEIGHT,
1716
getAppbarBackgroundColor,
1817
modeAppbarHeight,
1918
getAppbarBorders,
@@ -104,14 +103,13 @@ const AppbarHeader = ({
104103
...rest
105104
}: Props) => {
106105
const theme = useInternalTheme(themeOverrides);
107-
const { isV3 } = theme;
108106

109107
const flattenedStyle = StyleSheet.flatten(style);
110108
const {
111-
height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
112-
elevation = isV3 ? (elevated ? 2 : 0) : 4,
109+
height = modeAppbarHeight[mode],
110+
elevation = elevated ? 2 : 0,
113111
backgroundColor: customBackground,
114-
zIndex = isV3 && elevated ? 1 : 0,
112+
zIndex = elevated ? 1 : 0,
115113
...restStyle
116114
} = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
117115
height?: number;
@@ -124,7 +122,6 @@ const AppbarHeader = ({
124122

125123
const backgroundColor = getAppbarBackgroundColor(
126124
theme,
127-
elevation,
128125
customBackground,
129126
elevated
130127
);
@@ -150,9 +147,7 @@ const AppbarHeader = ({
150147
testID={testID}
151148
style={[{ height, backgroundColor }, styles.appbar, restStyle]}
152149
dark={dark}
153-
{...(isV3 && {
154-
mode,
155-
})}
150+
mode={mode}
156151
{...rest}
157152
theme={theme}
158153
/>

0 commit comments

Comments
 (0)