eletrotupi / tcc/ commit / ddfbd4e

frontend/components: make sections rely on layout helpers and add subtitle

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago ddfbd4ec78f4f9c7560c84b26be4095c1370fc6f Browse files
Parents 87bfdbe
Changed files
1
Additions
+37
Deletions
-20
frontend/components/ui/Sections.tsx modified+37 -20
frontend/components/ui/Sections.tsx
1 1 
import React from 'react';
2 2 
import {
3 3 
  View,
4 4 
  StyleSheet,
5 5 
  Pressable,
6 6 
  ViewStyle,
7 7 
} from 'react-native';
8 8 
import { ThemedText } from '@/components/misc/themed-text'
9 + 
import { Row, Between } from '@/components/ui/LayoutHelpers';
9 10
10 11 
import { Colors, Typography, Spacing, BorderRadius } from '@/constants/theme';
11 12 
import { useThemeColor } from '@/hooks/use-theme-color';
12 13
13 14 
interface SectionProps {
24 25 
  return <View style={[styles.section, style]}>{children}</View>;
25 26 
};
26 27
27 28 
interface SectionHeaderProps {
28 29 
  title: string;
30 + 
  subtitle?: string;
29 31 
  actionLabel?: string;
30 32 
  onActionPress?: () => void;
31 33 
  style?: ViewStyle;
32 34 
}
33 35
34 36 
// XXX: A Section must either have a label as a pill/informative thing
35 37 
// or it should be a link
36 38 
export const SectionHeader: React.FC<SectionHeaderProps> = ({
37 39 
  title,
40 + 
  subtitle,
38 41 
  info,
39 42 
  actionLabel,
40 43 
  onActionPress,
41 44 
  style,
42 45 
}) => {
43 46 
  const textColor = useThemeColor({}, 'text');
44 47 
  const tintColor = useThemeColor({}, 'tint');
48 + 
  const textSecondaryColor = useThemeColor({}, 'textSecondary')
45 49
46 50 
  const styles = StyleSheet.create({
47 51 
    headerContainer: {
48 - 
      flexDirection: 'row',
49 - 
      justifyContent: 'space-between',
50 - 
      alignItems: 'center',
51 52 
      marginBottom: (Spacing.cardGap * 2),
52 53 
    },
53 54 
    title: {
54 55 
      fontSize: Typography.headlineMd.fontSize,
55 56 
      fontWeight: Typography.headlineMd.fontWeight,
56 57 
      color: textColor,
57 58 
    },
59 + 
    subtitle: {
60 + 
      fontSize: 14,
61 + 
      color: textSecondaryColor,
62 + 
      lineHeight: 20,
63 + 
      marginTop: 4
64 + 
    },
58 65 
    actionButton: {
59 66 
      padding: 4,
60 67 
    },
61 68 
    actionText: {
62 69 
      fontSize: Typography.bodyMd.fontSize,
66 73 
  });
67 74
68 75 
  // TODO: Rework these when we finally have chips/badges
69 76 
  return (
70 77 
    <View style={[styles.headerContainer, style]}>
71 - 
      <ThemedText style={styles.title}>
72 - 
        {title}
73 - 
      </ThemedText>
78 + 
      <Between>
79 + 
        <ThemedText style={styles.title}>
80 + 
          {title}
81 + 
        </ThemedText>
74 82
75 - 
      {info && !actionLabel && (
76 - 
        <ThemedText>
77 - 
          {info}
78 - 
        </ThemedText>
79 - 
      )}
83 + 
        {info && !actionLabel && (
84 + 
          <ThemedText>
85 + 
            {info}
86 + 
          </ThemedText>
87 + 
        )}
88 +
89 + 
        {actionLabel && !info && onActionPress && (
90 + 
          <Pressable
91 + 
            style={styles.actionButton}
92 + 
            onPress={onActionPress}
93 + 
            hitSlop={8}
94 + 
          >
95 + 
            <ThemedText style={styles.actionText}>
96 + 
              {actionLabel}
97 + 
            </ThemedText>
98 + 
          </Pressable>
99 + 
        )}
100 + 
      </Between>
80 101
81 - 
      {actionLabel && !info && onActionPress && (
82 - 
        <Pressable
83 - 
          style={styles.actionButton}
84 - 
          onPress={onActionPress}
85 - 
          hitSlop={8}
86 - 
        >
87 - 
          <ThemedText style={styles.actionText}>
88 - 
            {actionLabel}
102 + 
      {subtitle && (
103 + 
        <Row>
104 + 
          <ThemedText style={styles.subtitle}>
105 + 
            {subtitle}
89 106 
          </ThemedText>
90 - 
        </Pressable>
107 + 
        </Row>
91 108 
      )}
92 109 
    </View>
93 110 
  );
94 111 
};
95 112