1import React from 'react';
2import {
3  FlatList,
4  PixelRatio,
5  StyleSheet,
6  Text,
7  TouchableHighlight,
8  View,
9  ListRenderItem,
10} from 'react-native';
11import { withNavigation, NavigationScreenProps } from 'react-navigation';
12
13import { EvilIcons } from '@expo/vector-icons';
14
15import ExpoAPIIcon from '../components/ExpoAPIIcon';
16
17interface ListElement {
18  name: string;
19  isAvailable?: boolean;
20}
21
22interface Props {
23  apis: ListElement[];
24}
25
26class ComponentListScreen extends React.Component<NavigationScreenProps & Props> {
27  _listView?: FlatList<ListElement>;
28
29  _renderExampleSection: ListRenderItem<ListElement> = ({
30    item: { name: exampleName, isAvailable },
31  }) => {
32    return (
33      <TouchableHighlight
34        underlayColor="#dddddd"
35        style={styles.rowTouchable}
36        onPress={isAvailable ? () => this.props.navigation.navigate(exampleName) : undefined}
37      >
38        <View style={[styles.row, !isAvailable && styles.disabledRow]}>
39          <ExpoAPIIcon name={exampleName} style={styles.rowIcon} />
40          <Text style={styles.rowLabel}>{exampleName}</Text>
41          <Text style={styles.rowDecorator}>
42            <EvilIcons name="chevron-right" size={24} color="#595959" />
43          </Text>
44        </View>
45      </TouchableHighlight>
46    );
47  }
48
49  _keyExtractor = (item: ListElement) => item.name;
50
51  render() {
52    return (
53      // @ts-ignore
54      <FlatList<ListElement>
55        ref={view => {
56          this._listView = view!;
57        }}
58        stickySectionHeadersEnabled
59        removeClippedSubviews={false}
60        keyboardShouldPersistTaps="handled"
61        keyboardDismissMode="on-drag"
62        contentContainerStyle={{ backgroundColor: '#fff' }}
63        data={this.props.apis}
64        keyExtractor={this._keyExtractor}
65        renderItem={this._renderExampleSection}
66      />
67    );
68  }
69
70  _scrollToTop = () => {
71    // @ts-ignore
72    this._listView!.scrollTo({ x: 0, y: 0 });
73  }
74}
75
76const styles = StyleSheet.create({
77  container: {
78    flex: 1,
79    paddingTop: 100,
80  },
81  row: {
82    flexDirection: 'row',
83    justifyContent: 'space-between',
84    alignItems: 'center',
85  },
86  rowDecorator: {
87    alignSelf: 'flex-end',
88    paddingRight: 4,
89  },
90  rowTouchable: {
91    paddingHorizontal: 10,
92    paddingVertical: 14,
93    borderBottomWidth: 1.0 / PixelRatio.get(),
94    borderBottomColor: '#dddddd',
95  },
96  disabledRow: {
97    opacity: 0.3,
98  },
99  rowLabel: {
100    flex: 1,
101    fontSize: 15,
102  },
103  rowIcon: {
104    marginRight: 10,
105    marginLeft: 6,
106  },
107});
108
109export default withNavigation(ComponentListScreen);
110