-
-
Notifications
You must be signed in to change notification settings - Fork 2k
/
CardContent.tsx
99 lines (90 loc) · 2.15 KB
/
CardContent.tsx
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
import * as React from 'react';
import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
export type Props = React.ComponentPropsWithRef<typeof View> & {
/**
* Items inside the `Card.Content`.
*/
children: React.ReactNode;
/**
* @internal
*/
index?: number;
/**
* @internal
*/
total?: number;
/**
* @internal
*/
siblings?: Array<string>;
style?: StyleProp<ViewStyle>;
};
/**
* A component to show content inside a Card.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Card, Text } from 'react-native-paper';
*
* const MyComponent = () => (
* <Card>
* <Card.Content>
* <Text variant="titleLarge">Card title</Text>
* <Text variant="bodyMedium">Card content</Text>
* </Card.Content>
* </Card>
* );
*
* export default MyComponent;
* ```
*/
const CardContent = ({ index, total, siblings, style, ...rest }: Props) => {
const cover = 'withInternalTheme(CardCover)';
const title = 'withInternalTheme(CardTitle)';
let contentStyle, prev, next;
if (typeof index === 'number' && siblings) {
prev = siblings[index - 1];
next = siblings[index + 1];
}
if (
(prev === cover && next === cover) ||
(prev === title && next === title) ||
total === 1
) {
contentStyle = styles.only;
} else if (index === 0) {
if (next === cover || next === title) {
contentStyle = styles.only;
} else {
contentStyle = styles.first;
}
} else if (typeof total === 'number' && index === total - 1) {
if (prev === cover || prev === title) {
contentStyle = styles.only;
} else {
contentStyle = styles.last;
}
} else if (prev === cover || prev === title) {
contentStyle = styles.first;
} else if (next === cover || next === title) {
contentStyle = styles.last;
}
return <View {...rest} style={[styles.container, contentStyle, style]} />;
};
CardContent.displayName = 'Card.Content';
const styles = StyleSheet.create({
container: {
paddingHorizontal: 16,
},
first: {
paddingTop: 16,
},
last: {
paddingBottom: 16,
},
only: {
paddingVertical: 16,
},
});
export default CardContent;