xref: /expo/home/menu/DevMenuTaskInfo.tsx (revision e5f02478) 
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    flex: 1,
79    justifyContent: 'center',
80    alignItems: 'center',
81  },
82  taskName: {
83    backgroundColor: 'transparent',
84    fontWeight: '700',
85    fontSize: 16,
86    marginTop: 14,
87    marginBottom: 1,
88    marginRight: 24,
89  },
90  taskUrl: {
91    color: '#9ca0a6',
92    backgroundColor: 'transparent',
93    marginRight: 16,
94    marginBottom: 2,
95    marginTop: 1,
96    fontSize: 11,
97  },
98  taskSdkVersion: {
99    color: '#9ca0a6',
100    fontSize: 11,
101  },
102  taskSdkVersionBold: {
103    fontWeight: 'bold',
104  },
105  taskIcon: {
106    width: 52,
107    height: 52,
108    marginTop: 12,
109    marginRight: 10,
110    alignSelf: 'center',
111    backgroundColor: 'transparent',
112  },
113  taskDevServerRow: {
114    flexDirection: 'row',
115  },
116  taskDevServerName: {
117    fontSize: 11,
118    color: '#9ca0a6',
119    fontWeight: '700',
120  },
121  taskDevServerIndicator: {
122    marginTop: 4,
123    marginRight: 7,
124  },
125});
126
127export default DevMenuTaskInfo;
128