From e90515de299ffa5e3f7fc7a1e0d4109f2c7f7141 Mon Sep 17 00:00:00 2001 From: Vitalii Yehorov Date: Sun, 21 May 2023 10:41:00 +0200 Subject: [PATCH] feat: added values progress bar --- .../available-values-item.styles.ts | 30 +++++++++++++------ .../available-values-item.tsx | 30 +++++++++---------- .../available-values.styles.ts | 10 ++----- .../available-values/available-values.tsx | 15 +++++++++- components/theme.ts | 2 +- constants/dimensions.contant.ts | 2 +- 6 files changed, 54 insertions(+), 35 deletions(-) diff --git a/components/available-values-item/available-values-item.styles.ts b/components/available-values-item/available-values-item.styles.ts index 619f0b7..605dc7b 100644 --- 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 index 9f9dddf..75f7419 100644 --- 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; } // 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 ( - - {value} - + + + {value} + + + ); }; diff --git a/components/available-values/available-values.styles.ts b/components/available-values/available-values.styles.ts index 5b4ae51..a1b7401 100644 --- 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 index 977bc53..378c9e9 100644 --- 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, 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 ( {availableValues.map(value => ( - + ))} ); diff --git a/components/theme.ts b/components/theme.ts index 5928122..a435c9d 100644 --- 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 index 2ebddff..44d5a63 100644 --- a/constants/dimensions.contant.ts +++ b/constants/dimensions.contant.ts @@ -1 +1 @@ -export const CellSizeConstant = 50; +export const CellSizeConstant = 45;