feat: added values progress bar

vitalyiegorov · May 21, 2023 · e90515d · e90515d
1 parent 986a244
commit e90515d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 35 deletions.
diff --git a/components/available-values-item/available-values-item.styles.ts b/components/available-values-item/available-values-item.styles.ts
@@ -1,20 +1,32 @@
 import { StyleSheet } from 'react-native';
 
+import { CellSizeConstant } from '../../constants/dimensions.contant';
 import { Colors } from '../theme';
 
-const tileSize = 40;
 export const AvailableValuesItemStyles = StyleSheet.create({
-    text: { color: Colors.black },
-    textActive: {
-        color: Colors.cell.activeValueText
-    },
-    wrapper: {
+    button: {
         alignItems: 'center',
-        borderColor: Colors.black,
+        borderBottomColor: Colors.black,
+        borderColor: Colors.cell.highlighted,
         borderWidth: 1,
-        height: tileSize,
+        height: CellSizeConstant,
         justifyContent: 'center',
-        width: tileSize
+        width: CellSizeConstant
+    },
+    container: {
+        position: 'relative'
+    },
+    progress: {
+        backgroundColor: 'green',
+        height: 2,
+        left: 0,
+        position: 'absolute',
+        top: CellSizeConstant - 2,
+        zIndex: 5
+    },
+    text: { color: Colors.black },
+    textActive: {
+        color: Colors.cell.activeValueText
     },
     wrapperActive: {
         backgroundColor: Colors.cell.highlightedText

diff --git a/components/available-values-item/available-values-item.tsx b/components/available-values-item/available-values-item.tsx
@@ -1,30 +1,30 @@
-import { cs } from '@rnw-community/shared';
-import { Pressable, Text } from 'react-native';
-
-import { useAppDispatch } from '../../hooks/redux.hook';
-import { appRootSelectValueAction } from '../../store/app-root/actions/app-root-select-value.action';
+import { cs, type OnEventFn } from '@rnw-community/shared';
+import { Pressable, Text, View } from 'react-native';
 
 import { AvailableValuesItemStyles as styles } from './available-values-item.styles';
 
 interface Props {
     value: number;
+    isActive: boolean;
+    progress: number;
+    onSelect: OnEventFn<number>;
 }
 
 // TODO: Add animation when wrong value is selected
 // TODO: Add animation when correct value is selected
-export const AvailableValuesItem = ({ value }: Props) => {
-    const dispatch = useAppDispatch();
-
-    const isActive = false;
-
-    const handlePress = () => void dispatch(appRootSelectValueAction(value));
+export const AvailableValuesItem = ({ value, isActive, onSelect, progress }: Props) => {
+    const handlePress = () => onSelect(value);
 
-    const wrapperStyles = [styles.wrapper, cs(isActive, styles.wrapperActive)];
+    const buttonStyles = [styles.button, cs(isActive, styles.wrapperActive)];
     const textStyles = [styles.text, cs(isActive, styles.textActive)];
+    const progressStyles = [styles.progress, { width: `${progress}%` }];
 
     return (
-        <Pressable key={value} style={wrapperStyles} onPress={handlePress}>
-            <Text style={textStyles}>{value}</Text>
-        </Pressable>
+        <View style={styles.container}>
+            <Pressable key={value} style={buttonStyles} onPress={handlePress}>
+                <Text style={textStyles}>{value}</Text>
+            </Pressable>
+            <View style={progressStyles} />
+        </View>
     );
 };
diff --git a/components/available-values/available-values.styles.ts b/components/available-values/available-values.styles.ts
@@ -1,17 +1,11 @@
 import { StyleSheet } from 'react-native';
 
-import { CellSizeConstant } from '../../constants/dimensions.contant';
-
 export const AvailableValuesStyles = StyleSheet.create({
-    valueWrapper: {
-        borderWidth: 1,
-        height: CellSizeConstant,
-        width: CellSizeConstant
-    },
     wrapper: {
         flex: 1,
         flexDirection: 'row',
-        gap: 2,
+        flexWrap: 'wrap',
+        gap: 10,
         justifyContent: 'center'
     }
 });
diff --git a/components/available-values/available-values.tsx b/components/available-values/available-values.tsx
@@ -1,21 +1,34 @@
 import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 
+import { useAppDispatch } from '../../hooks/redux.hook';
+import { appRootSelectValueAction } from '../../store/app-root/actions/app-root-select-value.action';
 import { appRootAvailableValuesSelector } from '../../store/app-root/app-root.selectors';
 import { AvailableValuesItem } from '../available-values-item/available-values-item';
 
 import { AvailableValuesStyles as styles } from './available-values.styles';
 
+const getValueProgress = (allValues: Record<number, number>, value: number) => (allValues[value] / 9) * 100;
+
 export const AvailableValues = () => {
     const allValues = useSelector(appRootAvailableValuesSelector);
     const availableValues = Object.keys(allValues)
         .filter(key => allValues[Number(key)] < 9)
         .map(Number);
 
+    const dispatch = useAppDispatch();
+    const handleSelect = (value: number) => void dispatch(appRootSelectValueAction(value));
+
     return (
         <View style={styles.wrapper}>
             {availableValues.map(value => (
-                <AvailableValuesItem value={value} key={value} />
+                <AvailableValuesItem
+                    value={value}
+                    key={value}
+                    onSelect={handleSelect}
+                    isActive={false}
+                    progress={getValueProgress(allValues, value)}
+                />
             ))}
         </View>
     );

diff --git a/components/theme.ts b/components/theme.ts
@@ -24,7 +24,7 @@ export const BlackTheme = {
         black: 'rgb(255, 255, 255)',
         cell: {
             active: 'rgba(0, 255, 0, 1)',
-            highlighted: 'rgba(255,255,255,0.2)',
+            highlighted: 'rgba(255,255,255,0.15)',
             highlightedText: 'rgba(0, 255, 0, 1)',
             activeValueText: 'rgba(201, 242, 155, 0.5)'
         }

diff --git a/constants/dimensions.contant.ts b/constants/dimensions.contant.ts
@@ -1 +1 @@
-export const CellSizeConstant = 50;
+export const CellSizeConstant = 45;