Skip to content

Commit 8ea863b

Browse files
LiamMorrowLiamMorrow
committed
Remove nativewind
1 parent a34cdf5 commit 8ea863b

14 files changed

+157
-717
lines changed

‎liftlog-react/app/_layout.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
import { Stack } from 'expo-router';
2-
3-
// Import your global CSS file
4-
import '../global.css';
52
import { StrictMode } from 'react';
63
import { BaseThemesetProvider } from '@/hooks/useBaseThemeset';
74

‎liftlog-react/app/index.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,22 @@ import { useState } from 'react';
55
import { View } from 'react-native';
66

77
export default function Index() {
8-
const style = useBaseThemeset();
98
const [weight, setWeight] = useState(new BigNumber(100));
109
const [showWeight, setShowWeight] = useState(true);
1110

1211
return (
1312
<View
14-
style={style}
15-
// className="flex-1 items-center justify-center gap-y-2 text-center"
13+
style={[
14+
{
15+
flex: 1,
16+
alignItems: 'center',
17+
justifyContent: 'center',
18+
gap: 8,
19+
alignContent: 'center',
20+
},
21+
]}
1622
>
17-
<View
18-
// className="items-center"
19-
>
23+
<View style={{ alignItems: 'center' }}>
2024
<PotentialSetCounter
2125
isReadonly={false}
2226
maxReps={8}

‎liftlog-react/components/presentation/potential-set-counter.tsx

+109-48
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
import { PotentialSet } from '@/models/session-models';
22
import BigNumber from 'bignumber.js';
3-
import { useState } from 'react';
4-
import { TouchableRipple } from 'react-native-paper';
5-
import { Text, View } from 'react-native';
3+
import { useEffect, useState } from 'react';
4+
import { TouchableRipple, useTheme } from 'react-native-paper';
5+
import {
6+
Animated,
7+
Easing,
8+
Text,
9+
Touchable,
10+
useAnimatedValue,
11+
View,
12+
} from 'react-native';
613
import WeightFormat from '@/components/presentation/weight-format';
714
import WeightDialog from '@/components/presentation/weight-dialog';
15+
import { useBaseThemeset } from '@/hooks/useBaseThemeset';
16+
import { PressableProps } from 'react-native-paper/lib/typescript/components/TouchableRipple/Pressable';
817

918
interface PotentialSetCounterProps {
1019
set: PotentialSet;
@@ -20,86 +29,138 @@ interface PotentialSetCounterProps {
2029
}
2130

2231
export default function PotentialSetCounter(props: PotentialSetCounterProps) {
32+
const theme = useBaseThemeset();
33+
const scaleValue = useAnimatedValue(1);
34+
const weightScaleValue = useAnimatedValue(props.showWeight ? 1 : 0);
2335
const [isHolding, setIsHolding] = useState(false);
2436
const [isWeightDialogOpen, setIsWeightDialogOpen] = useState(false);
2537
const repCountValue = props.set?.set?.repsCompleted;
2638
const repCountRounding = props.showWeight ? 'rounded-t-xl' : 'rounded-xl';
27-
const weightScale = props.showWeight ? 'p-2 h-8 w-14' : 'h-0 w-0 p-0';
2839
const boxShadowFill = repCountValue === undefined ? '2rem' : '0';
2940
const holdingClass = isHolding ? 'scale-110' : '';
30-
const colorClass =
31-
repCountValue !== undefined ? 'bg-primary' : 'bg-secondary-container';
41+
42+
useEffect(() => {
43+
Animated.timing(scaleValue, {
44+
toValue: isHolding ? 1.1 : 1,
45+
duration: 200,
46+
useNativeDriver: true,
47+
}).start();
48+
}, [isHolding, scaleValue]);
49+
50+
useEffect(() => {
51+
Animated.timing(weightScaleValue, {
52+
toValue: props.showWeight ? 1 : 0,
53+
duration: 150,
54+
easing: Easing.cubic,
55+
useNativeDriver: false,
56+
}).start();
57+
}, [props.showWeight, weightScaleValue]);
58+
3259
const textColorClass =
3360
repCountValue !== undefined
3461
? 'text-on-primary'
3562
: 'text-on-secondary-container';
3663

3764
const callbacks = props.isReadonly
3865
? {}
39-
: {
66+
: ({
4067
onPress: props.onTap,
4168
onLongPress: props.onHold,
69+
onTouchStart: () => setIsHolding(true),
4270
onPointerDown: () => setIsHolding(true),
4371
onPointerUp: () => setIsHolding(false),
4472
onPointerLeave: () => setIsHolding(false),
45-
};
73+
onTouchEnd: () => setIsHolding(false),
74+
} satisfies Touchable & Omit<PressableProps, 'children'>);
4675

4776
return (
48-
<View className="select-none justify-center items-center">
77+
<Animated.View
78+
style={{
79+
justifyContent: 'center',
80+
alignItems: 'center',
81+
userSelect: 'none',
82+
transform: [
83+
{
84+
scale: scaleValue,
85+
},
86+
],
87+
}}
88+
>
4989
<TouchableRipple
50-
className={`
51-
aspect-square
52-
flex-shrink-0
53-
text-center
54-
p-0
55-
h-14
56-
w-14
57-
${repCountRounding}
58-
[transition:border-radius_150ms_cubic-bezier(0.4,0,0.2,1),background-color_150ms_cubic-bezier(0.4,0,0.2,1),transform_400ms]
59-
items-center
60-
align-middle
61-
justify-center
62-
${holdingClass}
63-
${colorClass}`}
90+
style={{
91+
aspectRatio: 1,
92+
flexShrink: 0,
93+
padding: 0,
94+
height: 56,
95+
width: 56,
96+
borderTopLeftRadius: 10,
97+
borderTopRightRadius: 10,
98+
borderBottomRightRadius: props.showWeight ? 0 : 10,
99+
borderBottomLeftRadius: props.showWeight ? 0 : 10,
100+
alignItems: 'center',
101+
justifyContent: 'center',
102+
backgroundColor:
103+
repCountValue !== undefined
104+
? theme.primary
105+
: theme.secondaryContainer,
106+
}}
64107
{...callbacks}
65108
disabled={props.isReadonly}
66109
>
67-
<Text className={textColorClass}>
68-
<Text className="font-bold">{repCountValue ?? '-'}</Text>
69-
<Text className="inline text-sm align-text-top">
110+
<Text
111+
style={{
112+
color:
113+
repCountValue !== undefined
114+
? theme.onPrimary
115+
: theme.onSecondaryContainer,
116+
}}
117+
>
118+
<Text style={{ fontWeight: 'bold' }}>{repCountValue ?? '-'}</Text>
119+
<Text style={{ fontSize: 12, verticalAlign: 'top' }}>
70120
/{props.maxReps}
71121
</Text>
72122
</Text>
73123
</TouchableRipple>
74-
<TouchableRipple
75-
className={`
76-
rounded-b-xl
77-
${weightScale}
78-
overflow-hidden
79-
${holdingClass}
80-
text-xs
81-
[transition:height_150ms_cubic-bezier(0.4,0,0.2,1),padding_150ms_cubic-bezier(0.4,0,0.2,1),width_150ms_cubic-bezier(0.4,0,0.2,1),transform_400ms]
82-
flex
83-
flex-row
84-
border-t
85-
justify-center
86-
border-outline
87-
bg-surface-container-high
88-
text-on-surface-variant`}
89-
onPress={
90-
props.isReadonly ? undefined : () => setIsWeightDialogOpen(true)
91-
}
92-
disabled={props.isReadonly}
124+
<Animated.View
125+
style={{
126+
height: weightScaleValue.interpolate({
127+
inputRange: [0, 1],
128+
outputRange: [0, 36],
129+
}),
130+
paddingBlock: weightScaleValue.interpolate({
131+
inputRange: [0, 1],
132+
outputRange: [0, 8],
133+
}),
134+
width: weightScaleValue.interpolate({
135+
inputRange: [0, 1],
136+
outputRange: [0, 56],
137+
}),
138+
borderTopWidth: weightScaleValue,
139+
borderColor: theme.outline,
140+
backgroundColor: theme.surfaceContainerHigh,
141+
borderBottomLeftRadius: 10,
142+
borderBottomRightRadius: 10,
143+
}}
93144
>
94-
<WeightFormat weight={props.set.weight} suffixClass="" />
95-
</TouchableRipple>
145+
<TouchableRipple
146+
style={{
147+
alignItems: 'center',
148+
}}
149+
onPress={
150+
props.isReadonly ? undefined : () => setIsWeightDialogOpen(true)
151+
}
152+
disabled={props.isReadonly}
153+
>
154+
<WeightFormat weight={props.set.weight} suffixClass="" />
155+
</TouchableRipple>
156+
</Animated.View>
96157
<WeightDialog
97158
open={isWeightDialogOpen}
98159
increment={props.weightIncrement}
99160
weight={props.set.weight}
100161
onClose={() => setIsWeightDialogOpen(false)}
101162
updateWeight={props.onUpdateWeight}
102163
/>
103-
</View>
164+
</Animated.View>
104165
);
105166
}

‎liftlog-react/components/presentation/weight-dialog.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export default function WeightDialog(props: WeightDialogProps) {
3434
const [editorWeight, setEditorWeight] = useState<BigNumber | undefined>(
3535
props.weight,
3636
);
37-
console.log('weight dialog open', props.open);
3837

3938
useEffect(() => {
4039
setText(props.weight?.toFormat() ?? '');
@@ -89,7 +88,7 @@ export default function WeightDialog(props: WeightDialogProps) {
8988
<Dialog visible={props.open} onDismiss={props.onClose}>
9089
<Dialog.Title>{props.label ?? 'WEIGHT_TODO_TOLGEE'}</Dialog.Title>
9190
<Dialog.Content>
92-
<View className="flex gap-2">
91+
<View style={{ gap: 8 }}>
9392
<TextInput
9493
data-cy="weight-input"
9594
label={props.label ?? 'WEIGHT_TODO_TOLGEE'}
@@ -102,7 +101,9 @@ export default function WeightDialog(props: WeightDialogProps) {
102101
onChangeText={handleTextChange}
103102
style={{ backgroundColor: theme.colors.elevation.level3 }}
104103
/>
105-
<View className="flex-row justify-between">
104+
<View
105+
style={{ flexDirection: 'row', justifyContent: 'space-between' }}
106+
>
106107
<Button
107108
icon={'minus'}
108109
mode="outlined"

‎liftlog-react/components/presentation/weight-format.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import BigNumber from 'bignumber.js';
2-
import { Text } from 'react-native';
2+
import { Text } from 'react-native-paper';
33

44
interface WeightFormatProps {
55
weight: BigNumber | undefined;
@@ -13,9 +13,11 @@ export default function WeightFormat(props: WeightFormatProps) {
1313
const suffix = 'kg';
1414

1515
return (
16-
<Text className="flex items-center flex-row">
16+
<Text
17+
style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}
18+
>
1719
{weightDisplay}
18-
<Text className={suffixClass}>{suffix}</Text>
20+
<Text style={{ fontSize: 12 }}>{suffix}</Text>
1921
</Text>
2022
);
2123
}

‎liftlog-react/global.css

-3
This file was deleted.

‎liftlog-react/hooks/useBaseThemeset.tsx

+9-63
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
2-
import { vars } from 'nativewind';
1+
import {
2+
Material3Scheme,
3+
useMaterial3Theme,
4+
} from '@pchmn/expo-material3-theme';
35
import React, { createContext, ReactNode, useContext, useMemo } from 'react';
46
import { useColorScheme } from 'react-native';
57
import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper';
68

7-
interface Style {
8-
[key: string]: string;
9-
}
10-
11-
const BaseThemesetContext = createContext<Style | undefined>(undefined);
9+
const BaseThemesetContext = createContext<Material3Scheme | undefined>(
10+
undefined,
11+
);
1212

13-
export const useBaseThemeset = (): Style => {
13+
export const useBaseThemeset = (): Material3Scheme => {
1414
const context = useContext(BaseThemesetContext);
1515
if (!context) {
1616
throw new Error(
@@ -42,63 +42,9 @@ export const BaseThemesetProvider: React.FC<BaseThemesetProviderProps> = ({
4242
[colorScheme, theme],
4343
);
4444

45-
const style = useMemo<Style>(() => {
46-
console.log(schemedTheme);
47-
return vars({
48-
'--color-primary': hexToRgb(schemedTheme.primary),
49-
'--color-on-primary': hexToRgb(schemedTheme.onPrimary),
50-
'--color-secondary': hexToRgb(schemedTheme.secondary),
51-
'--color-on-secondary': hexToRgb(schemedTheme.onSecondary),
52-
'--color-primary-container': hexToRgb(schemedTheme.primaryContainer),
53-
'--color-on-primary-container': hexToRgb(schemedTheme.onPrimaryContainer),
54-
'--color-secondary-container': hexToRgb(schemedTheme.secondaryContainer),
55-
'--color-on-secondary-container': hexToRgb(
56-
schemedTheme.onSecondaryContainer,
57-
),
58-
'--color-tertiary': hexToRgb(schemedTheme.tertiary),
59-
'--color-on-tertiary': hexToRgb(schemedTheme.onTertiary),
60-
'--color-tertiary-container': hexToRgb(schemedTheme.tertiaryContainer),
61-
'--color-on-tertiary-container': hexToRgb(
62-
schemedTheme.onTertiaryContainer,
63-
),
64-
'--color-background': hexToRgb(schemedTheme.background),
65-
'--color-on-background': hexToRgb(schemedTheme.onBackground),
66-
'--color-surface': hexToRgb(schemedTheme.surface),
67-
'--color-surface-container-highest': hexToRgb(
68-
schemedTheme.surfaceContainerHighest,
69-
),
70-
'--color-on-surface': hexToRgb(schemedTheme.onSurface),
71-
'--color-on-surface-variant': hexToRgb(schemedTheme.onSurfaceVariant),
72-
'--color-inverse-surface': hexToRgb(schemedTheme.inverseSurface),
73-
'--color-inverse-on-surface': hexToRgb(schemedTheme.inverseOnSurface),
74-
'--color-surface-container': hexToRgb(schemedTheme.surfaceContainer),
75-
'--color-surface-container-high': hexToRgb(
76-
schemedTheme.surfaceContainerHigh,
77-
),
78-
'--color-surface-container-low': hexToRgb(
79-
schemedTheme.surfaceContainerLow,
80-
),
81-
'--color-inverse-primary': hexToRgb(schemedTheme.inversePrimary),
82-
'--color-outline': hexToRgb(schemedTheme.outline),
83-
'--color-outline-variant': hexToRgb(schemedTheme.outlineVariant),
84-
'--color-error': hexToRgb(schemedTheme.error),
85-
'--color-error-container': hexToRgb(schemedTheme.errorContainer),
86-
'--color-on-error': hexToRgb(schemedTheme.onError),
87-
'--color-on-error-container': hexToRgb(schemedTheme.onErrorContainer),
88-
});
89-
}, [schemedTheme]);
90-
9145
return (
92-
<BaseThemesetContext.Provider value={style}>
46+
<BaseThemesetContext.Provider value={schemedTheme}>
9347
<PaperProvider theme={paperTheme}>{children}</PaperProvider>
9448
</BaseThemesetContext.Provider>
9549
);
9650
};
97-
98-
const hexToRgb = (hex: string): string => {
99-
const bigint = parseInt(hex.slice(1), 16);
100-
const r = (bigint >> 16) & 255;
101-
const g = (bigint >> 8) & 255;
102-
const b = bigint & 255;
103-
return `${r} ${g} ${b}`;
104-
};

0 commit comments

Comments
 (0)