-
Notifications
You must be signed in to change notification settings - Fork 2
/
FeatureInfo.tsx
85 lines (77 loc) · 2.03 KB
/
FeatureInfo.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
import React from "react";
import { GestureResponderEvent, View } from "react-native";
import {
Body,
HSpacer,
IOIconSizeScale,
IOIcons,
IOPictogramSizeScale,
IOPictograms,
Icon,
LabelLink,
Pictogram,
VSpacer
} from "../../components";
import { IOStyles } from "../../core";
type PartialFeatureInfo = {
// Necessary to render main body with different formatting
body?: string | React.ReactNode;
};
type FeatureInfoActionProps =
| {
actionLabel?: string;
actionOnPress: (event: GestureResponderEvent) => void;
}
| {
actionLabel?: never;
actionOnPress?: never;
};
type FeatureInfoGraphicProps =
| { iconName?: never; pictogramName: IOPictograms }
| { iconName: IOIcons; pictogramName?: never };
type FeatureInfoProps = FeatureInfoGraphicProps &
PartialFeatureInfo &
FeatureInfoActionProps;
const DEFAULT_ICON_SIZE: IOIconSizeScale = 24;
const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
const renderNode = (body: FeatureInfoProps["body"]) => {
if (typeof body === "string") {
return (
<Body color="grey-700" testID="infoScreenBody">
{body}
</Body>
);
}
return body;
};
export const FeatureInfo = ({
iconName,
pictogramName,
body,
actionLabel,
actionOnPress
}: FeatureInfoProps) => (
<View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
{iconName && (
<Icon name={iconName} size={DEFAULT_ICON_SIZE} color="grey-300" />
)}
{pictogramName && (
<Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
)}
<HSpacer size={24} />
<View style={{ flexShrink: 1 }}>
{renderNode(body)}
{actionLabel && actionOnPress && (
<>
{/* Add "marginTop" equivalent if body text is present.
This verbose code could be deleted once we got "gap"
property support */}
{body && <VSpacer size={4} />}
<LabelLink fontSize="regular" onPress={actionOnPress}>
{actionLabel}
</LabelLink>
</>
)}
</View>
</View>
);