-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathFeatureInfo.tsx
93 lines (84 loc) · 2.08 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
86
87
88
89
90
91
92
93
import React, { ReactNode } from "react";
import { GestureResponderEvent } from "react-native";
import {
BodySmall,
HStack,
IOIconSizeScale,
IOIcons,
IOPictogramSizeScale,
IOPictograms,
Icon,
Pictogram,
VStack
} from "../../components";
import { useIOTheme } from "../../core";
type PartialFeatureInfo = {
// Necessary to render main body with different formatting
body?: string | ReactNode;
};
type FeatureInfoActionProps =
| {
action: {
label: string;
onPress: (event: GestureResponderEvent) => void;
};
}
| {
action?: 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 <BodySmall testID="infoScreenBody">{body}</BodySmall>;
}
return body;
};
export const FeatureInfo = ({
iconName,
pictogramName,
body,
action
}: FeatureInfoProps) => {
const theme = useIOTheme();
return (
<HStack style={{ alignItems: "center" }} space={24}>
{iconName && (
<Icon
allowFontScaling
name={iconName}
size={DEFAULT_ICON_SIZE}
color={theme["icon-decorative"]}
/>
)}
{pictogramName && (
<Pictogram
allowFontScaling
name={pictogramName}
size={DEFAULT_PICTOGRAM_SIZE}
/>
)}
<VStack allowScaleSpacing space={4} style={{ flexShrink: 1 }}>
{renderNode(body)}
{action && (
<BodySmall
asLink
weight="Semibold"
onPress={action.onPress}
accessible
importantForAccessibility={"yes"}
accessibilityElementsHidden={false}
>
{action.label}
</BodySmall>
)}
</VStack>
</HStack>
);
};