-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
implemented viewmode picker & buttons visuals
- Loading branch information
Showing
11 changed files
with
493 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import IconSVG from 'components/Shared/icons/IconSVG'; | ||
| import { useColors } from 'context/ColorContext'; | ||
| import { Dimensions, StyleSheet } from 'react-native'; | ||
| import { Colors, Text, View } from 'react-native-ui-lib'; | ||
| import SegmentedMacrosBarChart from './SegmentedMacrosBarChart'; | ||
|
|
||
| export default function MacrosGrid({ protein, carbs, fat, kcal }) { | ||
| const colors = useColors(); | ||
| const screenWidth = Dimensions.get('window').width; | ||
|
|
||
| const macros = { | ||
| fat: { | ||
| amount: fat, | ||
| unit: 'g', | ||
| icon: 'bacon-solid', | ||
| accentColor: Colors.violet60, | ||
| }, | ||
| carbs: { | ||
| amount: carbs, | ||
| unit: 'g', | ||
| icon: 'wheat-solid', | ||
| accentColor: Colors.violet50, | ||
| }, | ||
| protein: { | ||
| amount: protein, | ||
| unit: 'g', | ||
| icon: 'meat-solid', | ||
| accentColor: Colors.violet40, | ||
| }, | ||
| kcals: { | ||
| amount: kcal, | ||
| unit: 'kcal', | ||
| icon: 'ball-pile-solid', | ||
| accentColor: Colors.violet30, | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}> | ||
| {Object.entries(macros).map(([key, macro]) => ( | ||
| <View | ||
| style={[ | ||
| styles.gridItem, | ||
| { width: (screenWidth - 44) / 2, backgroundColor: colors.get(key) }, | ||
| ]}> | ||
| <IconSVG name={macro.icon} color={macro.accentColor} width={40} /> | ||
| <Text style={styles.gridText}> | ||
| {macro.amount} {macro.unit} | ||
| </Text> | ||
| <SegmentedMacrosBarChart /> | ||
| </View> | ||
| ))} | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| gridItem: { | ||
| flexDirection: 'row', | ||
| height: 60, | ||
| borderRadius: 4, | ||
| alignItems: 'center', | ||
| paddingHorizontal: 20, | ||
| }, | ||
| gridText: { | ||
| flex: 1, | ||
| textAlign: 'center', | ||
| fontSize: 20, | ||
| color: Colors.violet80, | ||
| fontWeight: 500, | ||
| paddingLeft: 10, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import IconSVG from 'components/Shared/icons/IconSVG'; | ||
| import { useColors } from 'context/ColorContext'; | ||
| import React from 'react'; | ||
| import { StyleSheet } from 'react-native'; | ||
| import { Colors, Text, View } from 'react-native-ui-lib'; | ||
|
|
||
| export default function SegmentedMacrosBarChart() { | ||
| const colors = useColors(); | ||
|
|
||
| return ( | ||
| <View> | ||
| <MacroMathView icon={'bacon-solid'} color={colors.get('fat')} /> | ||
| <MacroMathView icon={'wheat-solid'} color={colors.get('carbs')} /> | ||
| <MacroMathView icon={'meat-solid'} color={colors.get('protein')} /> | ||
| <MacroMathView icon={'ball-pile-solid'} color={colors.get('kcals')} /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| function MacroMathView({ color, icon }) { | ||
| return ( | ||
| <View style={[styles.flex, { backgroundColor: color }]}> | ||
| {/* macro icon */} | ||
| <IconSVG name={icon} width={28} color={'white'} style={{ marginRight: 8 }} /> | ||
| {/* current amount */} | ||
| <Text style={styles.text}>0g</Text> | ||
| {/* plus sign */} | ||
| <IconSVG name="plus-solid" width={20} color={'white'} style={{ marginHorizontal: 8 }} /> | ||
| {/* amount to be added */} | ||
| <Text style={styles.text}>0g</Text> | ||
| {/* equals sign */} | ||
| <IconSVG name="equals-solid" width={20} color={'white'} style={{ marginHorizontal: 8 }} /> | ||
| {/* resulting amount */} | ||
| <Text style={styles.text}>0g</Text> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| text: { | ||
| flex: 1, | ||
| color: 'white', | ||
| textAlign: 'center', | ||
| textAlignVertical: 'center', | ||
| fontSize: 18, | ||
| }, | ||
| flex: { | ||
| flex: 1, | ||
| flexDirection: 'row', | ||
| height: 48, | ||
| backgroundColor: Colors.violet30, | ||
| alignItems: 'center', | ||
| paddingHorizontal: 12, | ||
|
|
||
| // borderRadius: 8, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { StyleSheet } from 'react-native'; | ||
| import { Pressable } from 'react-native-gesture-handler'; | ||
| import { Colors, Text, View } from 'react-native-ui-lib'; | ||
| import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'; | ||
| import IconSVG from 'components/Shared/icons/IconSVG'; | ||
| import { ViewMode } from 'screens/Read'; | ||
|
|
||
| // Define the structure for each mode | ||
| const MODES: { mode: ViewMode; label: string }[] = [ | ||
| { mode: ViewMode.Simple, label: 'Simple' }, | ||
| { mode: ViewMode.Meal, label: 'Meal' }, | ||
| { mode: ViewMode.Day, label: 'Day' }, | ||
| ]; | ||
|
|
||
| // Define the Props Interface | ||
| interface ToggleViewProps { | ||
| viewMode: ViewMode; | ||
| setViewMode: (mode: ViewMode) => void; | ||
| } | ||
|
|
||
| // ToggleButton Component | ||
| interface ToggleButtonProps { | ||
| label: string; | ||
| isSelected: boolean; | ||
| onPress: () => void; | ||
| } | ||
|
|
||
| const ToggleButton: React.FC<ToggleButtonProps> = ({ label, isSelected, onPress }) => { | ||
| // Shared values for animation | ||
| const scale = useSharedValue(1); | ||
| const color = useSharedValue(Colors.grey40); | ||
|
|
||
| // Animated style | ||
| const animatedStyle = useAnimatedStyle(() => ({ | ||
| transform: [{ scale: scale.value }], | ||
| color: color.value, | ||
| })); | ||
|
|
||
| // Effect to handle animations based on selection | ||
| useEffect(() => { | ||
| if (isSelected) { | ||
| scale.value = withTiming(1.1, { duration: 200 }); | ||
| color.value = Colors.violet30; | ||
| } else { | ||
| scale.value = withTiming(1, { duration: 200 }); | ||
| color.value = Colors.grey40; | ||
| } | ||
| }, [isSelected, scale, color]); | ||
|
|
||
| return ( | ||
| <Pressable style={styles.button} onPress={onPress}> | ||
| <Animated.Text style={[styles.text, animatedStyle]}>{label}</Animated.Text> | ||
| </Pressable> | ||
| ); | ||
| }; | ||
|
|
||
| // Main ToggleView Component | ||
| const ToggleView: React.FC<ToggleViewProps> = ({ viewMode, setViewMode }) => { | ||
| return ( | ||
| <View style={styles.container}> | ||
| {/* Animated Background Circle */} | ||
| <View style={styles.circle}> | ||
| <IconSVG | ||
| name="table-layout-regular" | ||
| color={'white'} | ||
| width={20} | ||
| style={{ margin: 'auto' }} | ||
| /> | ||
| </View> | ||
|
|
||
| {/* Toggle Buttons */} | ||
| <View style={styles.buttonsContainer}> | ||
| {MODES.map(({ mode, label }) => ( | ||
| <ToggleButton | ||
| key={mode} | ||
| label={label} | ||
| isSelected={viewMode === mode} | ||
| onPress={() => setViewMode(mode)} | ||
| /> | ||
| ))} | ||
| </View> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default ToggleView; | ||
|
|
||
| // Stylesheet | ||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flexDirection: 'row', | ||
| backgroundColor: Colors.white, | ||
| borderRadius: 100, | ||
| height: 40, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| position: 'relative', // Needed for the animated background | ||
| }, | ||
| circle: { | ||
| width: 40, | ||
| height: 40, | ||
| borderRadius: 20, | ||
| backgroundColor: Colors.violet30, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| buttonsContainer: { | ||
| flexDirection: 'row', | ||
| flex: 1, | ||
| }, | ||
| button: { | ||
| flex: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| text: { | ||
| fontSize: 16, | ||
| textAlign: 'center', | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.