xref: /expo/home/menu/DevMenuTaskInfo.tsx (revision cd4bd26b) 
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;
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        <View style={styles.taskIconColumn}>
39          {iconUrl ? (
40            <Image source={{ uri: iconUrl }} style={styles.taskIcon} />
41          ) : (
42            <View style={[styles.taskIcon, { backgroundColor: '#eee' }]} />
43          )}
44        </View>
45        <View style={styles.taskInfoColumn}>
46          <StyledText style={taskNameStyles} numberOfLines={1} lightColor="#595c68">
47            {taskName ? taskName : 'Untitled Experience'}
48          </StyledText>
49          <Text style={[styles.taskUrl]} numberOfLines={1}>
50            {taskUrl}
51          </Text>
52          {sdkVersion && (
53            <StyledText style={styles.taskSdkVersion}>
54              SDK: <Text style={styles.taskSdkVersionBold}>{sdkVersion}</Text>
55            </StyledText>
56          )}
57          {this._maybeRenderDevServerName(manifest)}
58        </View>
59      </View>
60    );
61  }
62}
63
64const styles = StyleSheet.create({
65  taskMetaRow: {
66    flexDirection: 'row',
67    paddingHorizontal: 14,
68    paddingBottom: 12,
69  },
70  taskInfoColumn: {
71    flex: 4,
72    justifyContent: 'center',
73  },
74  taskIconColumn: {
75    flex: 1,
76    justifyContent: 'center',
77    alignItems: 'center',
78  },
79  taskName: {
80    backgroundColor: 'transparent',
81    fontWeight: '700',
82    fontSize: 16,
83    marginTop: 14,
84    marginBottom: 1,
85    marginRight: 24,
86  },
87  taskUrl: {
88    color: '#9ca0a6',
89    backgroundColor: 'transparent',
90    marginRight: 16,
91    marginBottom: 2,
92    marginTop: 1,
93    fontSize: 11,
94  },
95  taskSdkVersion: {
96    color: '#9ca0a6',
97    fontSize: 11,
98  },
99  taskSdkVersionBold: {
100    fontWeight: 'bold',
101  },
102  taskIcon: {
103    width: 52,
104    height: 52,
105    marginTop: 12,
106    marginRight: 10,
107    alignSelf: 'center',
108    backgroundColor: 'transparent',
109  },
110  taskDevServerRow: {
111    flexDirection: 'row',
112  },
113  taskDevServerName: {
114    fontSize: 11,
115    color: '#9ca0a6',
116    fontWeight: '700',
117  },
118  taskDevServerIndicator: {
119    marginTop: 4,
120    marginRight: 7,
121  },
122});
123
124export default DevMenuTaskInfo;
125