Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 4x 6x 6x 6x 2x 7x 14x 6x | import { useMemo } from 'react';
import { Pressable, Text, View } from 'react-native';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { textStyles } from '@repo/ui/themes/typography';
import { ChartRequestActivityItem } from './ChartRequestActivityItem';
import type { ChartRequestColoredActivity, ChartRequestPeriod } from './types';
import { buildRows } from './utils';
interface ChartRequestPeriodSummaryProps {
selectedPeriod: ChartRequestPeriod;
weekLabel: string;
monthLabel: string;
onPeriodChange: (period: ChartRequestPeriod) => void;
activities: ChartRequestColoredActivity[];
}
export const ChartRequestPeriodSummary = ({
selectedPeriod,
weekLabel,
monthLabel,
onPeriodChange,
activities,
}: ChartRequestPeriodSummaryProps) => {
const styles = useStyles();
const activityRows = useMemo(() => buildRows(activities, 2), [activities]);
return (
<View style={styles.container}>
<View style={styles.periodSwitch}>
<Pressable
testID="chart-request-week"
style={[styles.periodButton, selectedPeriod === 'week' && styles.periodButtonActive]}
onPress={() => onPeriodChange('week')}
>
<Text style={[styles.periodText, selectedPeriod === 'week' && styles.periodTextActive]}>
{weekLabel}
</Text>
</Pressable>
<Pressable
testID="chart-request-month"
style={[styles.periodButton, selectedPeriod === 'month' && styles.periodButtonActive]}
onPress={() => onPeriodChange('month')}
>
<Text style={[styles.periodText, selectedPeriod === 'month' && styles.periodTextActive]}>
{monthLabel}
</Text>
</Pressable>
</View>
<View style={styles.activityWrap}>
{activityRows.length === 0 ? (
<Text style={styles.emptyText}>No activity</Text>
) : (
activityRows.map((row, rowIndex) => (
<View key={`row-${rowIndex}`} style={styles.activityRow}>
{row.map((activity, activityIndex) => (
<ChartRequestActivityItem
key={`${activity.label}-${activityIndex}`}
activity={activity}
/>
))}
{row.length === 1 && <View style={styles.activityItemPlaceholder} />}
</View>
))
)}
</View>
</View>
);
};
const useStyles = makeStyles(theme => ({
container: {
width: theme.metrics.sizing.full,
gap: theme.metrics.spacing[7.5],
},
periodSwitch: {
width: theme.metrics.sizing.full,
backgroundColor: theme.colors.background.tertiary,
borderRadius: theme.metrics.borderRadius[2.5],
padding: theme.metrics.spacing[0.75],
flexDirection: 'row',
gap: theme.metrics.spacing[0.5],
},
periodButton: {
flex: 1,
borderRadius: theme.metrics.borderRadius[2],
minHeight: theme.metrics.spacing[10],
paddingVertical: theme.metrics.spacing[1.5],
alignItems: 'center',
justifyContent: 'center',
},
periodButtonActive: {
backgroundColor: theme.colors.background.selectedStrong,
borderWidth: theme.metrics.borderWidth.default,
borderColor: theme.colors.border.default,
},
periodText: {
...textStyles.content.semiBold,
color: theme.colors.text.muted,
fontSize: theme.metrics.textSize[16],
textTransform: 'uppercase',
},
periodTextActive: {
color: theme.colors.text.white,
},
activityWrap: {
width: theme.metrics.sizing.full,
gap: theme.metrics.spacing[8.75],
},
activityRow: {
flexDirection: 'row',
gap: theme.metrics.spacing[8.75],
marginLeft: theme.metrics.spacing[9],
alignItems: 'flex-start',
},
activityItemPlaceholder: {
flex: 1,
},
emptyText: {
...textStyles.content.regular,
color: theme.colors.text.placeholder,
fontSize: theme.metrics.textSize[20],
textAlign: 'center',
},
}));
|