xref: /expo/home/menu/DevMenuTaskInfo.tsx (revision 51f41fa4) 
1import React from 'react';
2import { Image, StyleSheet, Text, View } from 'react-native';
3
4import DevIndicator from '../components/DevIndicator';
5import { StyledText } from '../components/Text';
6import FriendlyUrls from '../legacy/FriendlyUrls';
7
8type Props = {
9  task: { [key: string]: any };
10};
11
12class DevMenuTaskInfo extends React.PureComponent<Props, any> {
13  _maybeRenderDevServerName(manifest: Record<string, any>) {
14    const devServerName = manifest && manifest.developer ? manifest.developer.tool : null;
15
16    if (devServerName) {
17      return (
18        <View style={styles.taskDevServerRow}>
19          <DevIndicator style={styles.taskDevServerIndicator} isActive isNetworkAvailable />
20          <Text style={styles.taskDevServerName}>{devServerName}</Text>
21        </View>
22      );
23    }
24    return null;
25  }
26
27  render() {
28    const { task } = this.props;
29    const taskUrl = task.manifestUrl ? FriendlyUrls.toFriendlyString(task.manifestUrl) : '';
30    const manifest = task.manifestString && JSON.parse(task.manifestString);
31    const iconUrl = manifest && manifest.iconUrl;
32    const taskName = manifest && (manifest.name ?? manifest.extra.expoClient.name);
33    const taskNameStyles = taskName ? styles.taskName : [styles.taskName, { color: '#c5c6c7' }];
34    const sdkVersion = manifest && manifest.sdkVersion;
35
36    return (
37      <View style={styles.taskMetaRow}>
38        {!manifest?.metadata?.branchName ? (
39          // EAS Updates don't have icons
40          <View style={styles.taskIconColumn}>
41            {iconUrl ? (
42              <Image source={{ uri: iconUrl }} style={styles.taskIcon} />
43            ) : (
44              <View style={[styles.taskIcon, { backgroundColor: '#eee' }]} />
45            )}
46          </View>
47        ) : null}
48        <View style={styles.taskInfoColumn}>
49          <StyledText style={taskNameStyles} numberOfLines={1} lightColor="#595c68">
50            {taskName ? taskName : 'Untitled Experience'}
51          </StyledText>
52          <Text style={[styles.taskUrl]} numberOfLines={1}>
53            {taskUrl}
54          </Text>
55          {sdkVersion && (
56            <StyledText style={styles.taskSdkVersion}>
57              SDK: <Text style={styles.taskSdkVersionBold}>{sdkVersion}</Text>
58            </StyledText>
59          )}
60          {this._maybeRenderDevServerName(manifest)}
61        </View>
62      </View>
63    );
64  }
65}
66
67const styles = StyleSheet.create({
68  taskMetaRow: {
69    flexDirection: 'row',
70    paddingHorizontal: 14,
71    paddingBottom: 12,
72  },
73  taskInfoColumn: {
74    flex: 4,
75    justifyContent: 'center',
76  },
77  taskIconColumn: {
78    justifyContent: 'center',
79    alignItems: 'center',
80  },
81  taskName: {
82    backgroundColor: 'transparent',
83    fontWeight: '700',
84    fontSize: 16,
85    marginTop: 14,
86    marginBottom: 1,
87    marginRight: 24,
88  },
89  taskUrl: {
90    color: '#9ca0a6',
91    backgroundColor: 'transparent',
92    marginRight: 16,
93    marginBottom: 2,
94    marginTop: 1,
95    fontSize: 11,
96  },
97  taskSdkVersion: {
98    color: '#9ca0a6',
99    fontSize: 11,
100  },
101  taskSdkVersionBold: {
102    fontWeight: 'bold',
103  },
104  taskIcon: {
105    width: 52,
106    height: 52,
107    marginTop: 12,
108    marginRight: 10,
109    alignSelf: 'center',
110    backgroundColor: 'transparent',
111  },
112  taskDevServerRow: {
113    flexDirection: 'row',
114  },
115  taskDevServerName: {
116    fontSize: 11,
117    color: '#9ca0a6',
118    fontWeight: '700',
119  },
120  taskDevServerIndicator: {
121    marginTop: 4,
122    marginRight: 7,
123  },
124});
125
126export default DevMenuTaskInfo;
127