zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] Reviwed comments on the RP

Browse Source
This commit is contained in:
mathysPaul
2023-11-17 00:28:22 +01:00
parent 36316b0333
commit 22722082eb
9 changed files with 166 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/GtkUI/RawElement.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ import {
getElementToggleNode,
getElementRangeNode,
} from './ElementTypes';
import { ArrowDown2, Icon as IconSax } from 'iconsax-react-native';
import { ArrowDown2 } from 'iconsax-react-native';
import { useWindowDimensions } from 'react-native';
type RawElementProps = {
front/components/UI/Glassmorphism.tsx
+1 -5
View File
@@ -13,11 +13,7 @@ const GlassmorphismCC = ({ children, style }: GlassmorphismCCProps) => {
const colorScheme = useColorScheme();
return (
<BlurView
style={[{ borderRadius: 12 }, style]}
intensity={60}
tint={colorScheme}
>
<BlurView style={[{ borderRadius: 12 }, style]} intensity={60} tint={colorScheme}>
{children}
</BlurView>
);
front/components/UI/InteractiveCC.tsx
+124 -109
View File
@@ -5,132 +5,147 @@ type StyleObject = Record<string, any>;
type InterpolatedStyleObject = Record<string, Animated.AnimatedInterpolation<any>>;
interface InteractiveCCProps {
defaultStyle: StyleObject;
hoverStyle: StyleObject;
pressStyle: StyleObject;
duration?: number;
children?: React.ReactNode;
onPress?: () => void | Promise<void>;
isDisabled?: boolean;
style?: StyleProp<ViewStyle>;
styleContainer?: StyleProp<ViewStyle>;
defaultStyle: StyleObject;
hoverStyle: StyleObject;
pressStyle: StyleObject;
duration?: number;
children?: React.ReactNode;
onPress?: () => void | Promise<void>;
isDisabled?: boolean;
style?: StyleProp<ViewStyle>;
styleContainer?: StyleProp<ViewStyle>;
}
const InteractiveCC: React.FC<InteractiveCCProps> = ({ defaultStyle, hoverStyle, pressStyle, children, onPress, isDisabled, style, styleContainer, duration=250 }) => {
const animatedValues = useRef<Record<string, Animated.Value>>({}).current;
const InteractiveCC: React.FC<InteractiveCCProps> = ({
defaultStyle,
hoverStyle,
pressStyle,
children,
onPress,
isDisabled,
style,
styleContainer,
duration = 250,
}) => {
const animatedValues = useRef<Record<string, Animated.Value>>({}).current;
const extractTransformKeys = (styleObject: StyleObject) => {
const transformKeys = styleObject.transform ? styleObject.transform.map((t: any) => Object.keys(t)[0]) : [];
return transformKeys;
};
const extractTransformKeys = (styleObject: StyleObject) => {
const transformKeys = styleObject.transform
? styleObject.transform.map((t: any) => Object.keys(t)[0])
: [];
return transformKeys;
};
useEffect(() => {
// Initialisez les valeurs animées pour les propriétés de style non-transform
const allStyleKeys = new Set([
...Object.keys(defaultStyle),
...Object.keys(hoverStyle),
...Object.keys(pressStyle),
]);
useEffect(() => {
// Initialisez les valeurs animées pour les propriétés de style non-transform
const allStyleKeys = new Set([
...Object.keys(defaultStyle),
...Object.keys(hoverStyle),
...Object.keys(pressStyle),
]);
allStyleKeys.forEach(key => {
if (!animatedValues[key]) {
animatedValues[key] = new Animated.Value(0);
}
});
// Initialisez les valeurs animées pour les propriétés de style transform
const allTransformKeys = new Set([
...extractTransformKeys(defaultStyle),
...extractTransformKeys(hoverStyle),
...extractTransformKeys(pressStyle),
]);
allStyleKeys.forEach((key) => {
if (!animatedValues[key]) {
animatedValues[key] = new Animated.Value(0);
}
});
// Initialisez les valeurs animées pour les propriétés de style transform
const allTransformKeys = new Set([
...extractTransformKeys(defaultStyle),
...extractTransformKeys(hoverStyle),
...extractTransformKeys(pressStyle),
]);
allTransformKeys.forEach(key => {
if (!animatedValues[key]) {
animatedValues[key] = new Animated.Value(0);
}
});
}, [defaultStyle, hoverStyle, pressStyle]);
allTransformKeys.forEach((key) => {
if (!animatedValues[key]) {
animatedValues[key] = new Animated.Value(0);
}
});
}, [defaultStyle, hoverStyle, pressStyle]);
const getTransformValue = (key: string, style: StyleObject) => {
const transformObject = style.transform?.find((t: any) => t.hasOwnProperty(key));
return transformObject ? transformObject[key] : 0;
};
const getTransformValue = (key: string, style: StyleObject) => {
const transformObject = style.transform?.find((t: any) => t.hasOwnProperty(key));
return transformObject ? transformObject[key] : 0;
};
const interpolateStyle = (stateStyle: StyleObject, stateValue: number): InterpolatedStyleObject => {
const interpolatedStyle: InterpolatedStyleObject = { ...stateStyle };
const transform: any = [];
const interpolateStyle = (
stateStyle: StyleObject,
stateValue: number
): InterpolatedStyleObject => {
const interpolatedStyle: InterpolatedStyleObject = { ...stateStyle };
const transform: any = [];
Object.keys(animatedValues).forEach(key => {
if (stateStyle.transform?.some((t: any) => t.hasOwnProperty(key))) {
// Interpolation des transformations
const defaultValue = getTransformValue(key, defaultStyle);
const hoverValue = getTransformValue(key, hoverStyle);
const pressValue = getTransformValue(key, pressStyle);
Object.keys(animatedValues).forEach((key) => {
if (stateStyle.transform?.some((t: any) => t.hasOwnProperty(key))) {
// Interpolation des transformations
const defaultValue = getTransformValue(key, defaultStyle);
const hoverValue = getTransformValue(key, hoverStyle);
const pressValue = getTransformValue(key, pressStyle);
const interpolated = animatedValues[key].interpolate({
inputRange: [0, 1, 2],
outputRange: [defaultValue, hoverValue, pressValue],
});
const interpolated = animatedValues[key].interpolate({
inputRange: [0, 1, 2],
outputRange: [defaultValue, hoverValue, pressValue],
});
transform.push({ [key]: interpolated });
} else if (stateStyle[key]) {
// Interpolation des autres styles
const defaultValue = defaultStyle[key] || 0;
const hoverValue = hoverStyle[key] !== undefined ? hoverStyle[key] : defaultValue;
const pressValue = pressStyle[key] !== undefined ? pressStyle[key] : defaultValue;
transform.push({ [key]: interpolated });
} else if (stateStyle[key]) {
// Interpolation des autres styles
const defaultValue = defaultStyle[key] || 0;
const hoverValue = hoverStyle[key] !== undefined ? hoverStyle[key] : defaultValue;
const pressValue = pressStyle[key] !== undefined ? pressStyle[key] : defaultValue;
interpolatedStyle[key] = animatedValues[key].interpolate({
inputRange: [0, 1, 2],
outputRange: [defaultValue, hoverValue, pressValue],
});
}
});
interpolatedStyle[key] = animatedValues[key].interpolate({
inputRange: [0, 1, 2],
outputRange: [defaultValue, hoverValue, pressValue],
});
}
});
interpolatedStyle.transform = transform;
return interpolatedStyle;
};
interpolatedStyle.transform = transform;
return interpolatedStyle;
};
const animateToState = (stateValue: number) => {
Object.keys(animatedValues).forEach(key => {
Animated.timing(animatedValues[key], {
toValue: stateValue,
duration: duration,
useNativeDriver: true,
}).start();
});
};
const animateToState = (stateValue: number) => {
Object.keys(animatedValues).forEach((key) => {
Animated.timing(animatedValues[key], {
toValue: stateValue,
duration: duration,
useNativeDriver: true,
}).start();
});
};
const handleMouseEnter = () => animateToState(1);
const handlePressIn = () => animateToState(2);
const handlePressOut = () => {
animateToState(1);
if (onPress && !isDisabled) {
onPress();
}
};
const handleMouseLeave = () => animateToState(0);
const handleMouseEnter = () => animateToState(1);
const handlePressIn = () => animateToState(2);
const handlePressOut = () => {
animateToState(1);
if (onPress && !isDisabled) {
onPress();
}
};
const handleMouseLeave = () => animateToState(0);
const animatedStyle = StyleSheet.flatten([
styleContainer,
interpolateStyle(defaultStyle, 0),
interpolateStyle(hoverStyle, 1),
interpolateStyle(pressStyle, 2),
]);
const animatedStyle = StyleSheet.flatten([
styleContainer,
interpolateStyle(defaultStyle, 0),
interpolateStyle(hoverStyle, 1),
interpolateStyle(pressStyle, 2),
]);
return (
<Animated.View style={animatedStyle}>
<Pressable
style={[styles.content, style]}
focusable={false}
onHoverIn={handleMouseEnter}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
onHoverOut={handleMouseLeave}
>
{children}
</Pressable>
</Animated.View>
);
return (
<Animated.View style={animatedStyle}>
<Pressable
style={[styles.content, style]}
focusable={false}
onHoverIn={handleMouseEnter}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
onHoverOut={handleMouseLeave}
>
{children}
</Pressable>
</Animated.View>
);
};
const styles = StyleSheet.create({
front/components/UI/MusicList.tsx
+1 -1
View File
@@ -173,7 +173,7 @@ function MusicListComponent({
paddingRight: 60,
}}
>
{ translate('musicListTitleSong') }
{translate('musicListTitleSong')}
</Text>
{[
{ text: translate('musicListTitleLevel'), icon: Chart2 },
front/components/UI/ScaffoldCC.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import useColorScheme from '../../hooks/colorScheme';
import { useQuery } from '../../Queries';
import API from '../../API';
import { LinearGradient } from 'expo-linear-gradient';
import { Cup, Discover, Icon, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native';
import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native';
import { LoadingView } from '../Loading';
import ScaffoldDesktopCC from './ScaffoldDesktopCC';
import ScaffoldMobileCC from './ScaffoldMobileCC';
front/components/UI/ScaffoldDesktopCC.tsx
+21 -27
View File
@@ -20,7 +20,7 @@ type ScaffoldDesktopCCProps = {
user: User;
logo: string;
routeName: string;
menu: readonly{
menu: readonly {
type: 'main' | 'sub';
title: TranslationKey;
icon: Icon;
@@ -36,31 +36,25 @@ const SongHistory = (props: { quantity: number }) => {
);
const navigation = useNavigation();
const musics =
songHistory
.map((h) => h.data)
.filter((data): data is Song => data !== undefined)
.filter(
(song, i, array) =>
array.map((s) => s.id).findIndex((id) => id == song.id) == i
)
?.slice(0, props.quantity)
.map((song: Song) => (
<View
key={'short-history-tab' + song.id}
style={{
paddingHorizontal: 16,
paddingVertical: 10,
flex: 1,
}}
>
<TouchableOpacity
onPress={() => navigation.navigate('Song', { songId: song.id })}
>
<Text numberOfLines={1}>{song.name}</Text>
</TouchableOpacity>
</View>
))
const musics = songHistory
.map((h) => h.data)
.filter((data): data is Song => data !== undefined)
.filter((song, i, array) => array.map((s) => s.id).findIndex((id) => id == song.id) == i)
?.slice(0, props.quantity)
.map((song: Song) => (
<View
key={'short-history-tab' + song.id}
style={{
paddingHorizontal: 16,
paddingVertical: 10,
flex: 1,
}}
>
<TouchableOpacity onPress={() => navigation.navigate('Song', { songId: song.id })}>
<Text numberOfLines={1}>{song.name}</Text>
</TouchableOpacity>
</View>
));
if (!playHistoryQuery.data || playHistoryQuery.isLoading || !songHistory) {
return <LoadingView />;
@@ -158,7 +152,7 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
</View>
</View>
{!isSmallScreen && (
<View style={{width: '100%'}}>
<View style={{ width: '100%' }}>
<Divider my="2" _light={{ bg: colors.black[500] }} _dark={{ bg: '#FFF' }} />
<Spacer height="xs" />
<Text
front/i18n/Translations.ts
+13 -13
View File
@@ -40,12 +40,12 @@ export const en = {
// Form
formPlaceholderUsername: 'Username',
formPlaceholderEmail: "Email",
formPlaceholderEmail: 'Email',
formPlaceholderPassword: 'Password',
formPlaceholderRepeatPassword: 'Repeat password',
// MusicListTitle
musicListTitleSong : "Song",
musicListTitleSong: 'Song',
musicListTitleLevel: 'Level',
musicListTitleLastScore: 'Last Score',
musicListTitleBestScore: 'Best Score',
@@ -342,15 +342,15 @@ export const fr: typeof en = {
favoriteGenre: 'Genre favori : ',
// Form
formPlaceholderUsername : "Nom d'utilisateur",
formPlaceholderEmail : "Email",
formPlaceholderPassword : 'Mot de passe',
formPlaceholderRepeatPassword : 'Répéter le mot de passe',
formPlaceholderUsername: "Nom d'utilisateur",
formPlaceholderEmail: 'Email',
formPlaceholderPassword: 'Mot de passe',
formPlaceholderRepeatPassword: 'Répéter le mot de passe',
// MusicListTitle
musicListTitleSong : "Musique",
musicListTitleLevel : "Niveau",
musicListTitleLastScore : "Dernier",
musicListTitleBestScore : "Meilleur",
musicListTitleSong: 'Musique',
musicListTitleLevel: 'Niveau',
musicListTitleLastScore: 'Dernier',
musicListTitleBestScore: 'Meilleur',
// Menu
menuDiscovery: 'Découverte',
menuProfile: 'Profil',
@@ -658,12 +658,12 @@ export const sp: typeof en = {
// Form
formPlaceholderUsername: 'NombreUsuario',
formPlaceholderEmail: "Email",
formPlaceholderEmail: 'Email',
formPlaceholderPassword: 'Contraseña',
formPlaceholderRepeatPassword: 'Repetir contraseña',
// MusicListTitle
musicListTitleSong : "Canción",
musicListTitleSong: 'Canción',
musicListTitleLevel: 'Nivel',
musicListTitleLastScore: 'Última',
musicListTitleBestScore: 'Mejor',
front/views/MusicView.tsx
+2 -8
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { Center, Text, View, useBreakpointValue, useTheme } from 'native-base';
import { Center, Text, useBreakpointValue, useTheme } from 'native-base';
import { useWindowDimensions } from 'react-native';
import {
TabView,
@@ -19,8 +19,6 @@ import { useQueries, useQuery } from '../Queries';
import API from '../API';
import Song from '../models/Song';
import { LoadingView } from '../components/Loading';
import InteractiveCC from '../components/UI/InteractiveCC';
import ButtonBase from '../components/UI/ButtonBase';
export const FavoritesMusic = () => {
const navigation = useNavigation();
@@ -64,8 +62,6 @@ export const FavoritesMusic = () => {
onPlay: () => navigation.navigate('Song', { songId: song.id }),
})) ?? [];
const { colors } = useTheme();
if (isLoading) {
return <LoadingView />;
}
@@ -202,9 +198,7 @@ const MusicTab = (props: RouteProps<object>) => {
renderLabel={({ route, color }) =>
layout.width > 800 && (
<Text style={{ color: color, paddingLeft: 10, overflow: 'hidden' }}>
{translate(
route.title as TranslationKey
)}
{translate(route.title as TranslationKey)}
</Text>
)
}
front/views/settings/SettingsView.tsx
+2 -3
View File
@@ -27,7 +27,6 @@ import PremiumSettings from './SettingsPremium';
import { RouteProps } from '../../Navigation';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import { translate } from '../../i18n/i18n';
import { useLanguage } from '../../state/LanguageSlice';
export const PianoSettings = () => {
return (
@@ -70,14 +69,14 @@ const SettingsTab = (props: RouteProps<{}>) => {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const { colors } = useTheme();
const routes = ([
const routes = [
{ key: 'profile', title: 'settingsTabProfile' },
{ key: 'premium', title: 'settingsTabPremium' },
{ key: 'preferences', title: 'settingsTabPreferences' },
{ key: 'notifications', title: 'settingsTabNotifications' },
{ key: 'privacy', title: 'settingsTabPrivacy' },
{ key: 'piano', title: 'settingsTabPiano' },
]);
];
const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
const isSmallScreen = screenSize === 'small';
const renderTabBar = (