eletrotupi / tcc/ frontend/components/ui/LayoutHelpers.tsxc901c35af9c84b6a29e5185545ced1129f33b8f4
1.9 KB | 112 lines Raw
1
import React from 'react';
2
import { View, ViewStyle, type StyleProp } from 'react-native';
3
import { Spacing } from '@/constants/theme';
4
5
interface FlexLayoutProps {
6
  children: React.ReactNode;
7
  gap?: number;
8
  style?: ViewStyle;
9
}
10
11
export const Row: React.FC<FlexLayoutProps> = ({
12
  children,
13
  gap = Spacing.inlineGapSm,
14
  style,
15
}) => (
16
  <View
17
    style={[
18
      {
19
        flexDirection: 'row',
20
        gap,
21
      },
22
      style,
23
    ]}
24
  >
25
    {children}
26
  </View>
27
);
28
29
export const Col: React.FC<FlexLayoutProps> = ({
30
  children,
31
  gap = Spacing.inlineGapSm,
32
  style,
33
}) => (
34
  <View
35
    style={[
36
      {
37
        flexDirection: 'column',
38
        gap,
39
      },
40
      style,
41
    ]}
42
  >
43
    {children}
44
  </View>
45
);
46
47
export const Grid: React.FC<FlexLayoutProps & { columns?: number }> = ({
48
  children,
49
  gap = Spacing.cardGap,
50
  columns = 2,
51
  style,
52
}) => (
53
  <View
54
    style={[
55
      {
56
        flexDirection: 'row',
57
        flexWrap: 'wrap',
58
        gap,
59
        justifyContent: 'space-between',
60
      },
61
      style,
62
    ]}
63
  >
64
    {React.Children.map(children, (child) =>
65
      React.cloneElement(child as React.ReactElement<{ style?: StyleProp<ViewStyle> }>, {
66
        style: [
67
          {
68
            width: `${100 / columns - (gap * (columns - 1)) / columns}%`,
69
          },
70
          (child as React.ReactElement<{ style?: StyleProp<ViewStyle> }>).props.style,
71
        ],
72
      })
73
    )}
74
  </View>
75
);
76
77
export const Center: React.FC<{ children: React.ReactNode; style?: ViewStyle }> = ({
78
  children,
79
  style,
80
}) => (
81
  <View
82
    style={[
83
      {
84
        justifyContent: 'center',
85
        alignItems: 'center',
86
      },
87
      style,
88
    ]}
89
  >
90
    {children}
91
  </View>
92
);
93
94
export const Between: React.FC<FlexLayoutProps> = ({
95
  children,
96
  gap = 0,
97
  style,
98
}) => (
99
  <View
100
    style={[
101
      {
102
        flexDirection: 'row',
103
        justifyContent: 'space-between',
104
        alignItems: 'center',
105
        gap,
106
      },
107
      style,
108
    ]}
109
  >
110
    {children}
111
  </View>
112
);