react-native-svg-e2e/App.js at master · msand/react-native-svg-e2e · GitHub

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, { Component } from 'react';
import {
  Text,
  View,
  FlatList,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import * as src from './src';

const tests = Object.keys(src).map(key => ({ key }));

class TestItem extends React.PureComponent {
  render() {
    const { test } = this.props;
    const Test = src[test];
    return (
      <View style={styles.flatTest} testID={test + 'View'}>
        <Test width="100%" height="100%" />
      </View>
    );
  }
}

class ListItem extends React.PureComponent {
  onPress = () => {
    const { onPress, test } = this.props;
    onPress(test);
  };
  render() {
    const { test } = this.props;
    return (
      <TouchableOpacity testID={test} onPress={this.onPress}>
        <Text>{test}</Text>
      </TouchableOpacity>
    );
  }
}

const ALL = {};

const toggleAll = ({ test }) => ({ test: test === null ? ALL : null });

export default class App extends Component {
  state = {
    test: null,
  };
  onAll = () => this.setState(toggleAll);
  onTest = test => this.setState({ test });
  renderTest = ({ item }) => <TestItem test={item.key} />;
  renderItem = ({ item }) => <ListItem test={item.key} onPress={this.onTest} />;
  render() {
    const { test } = this.state;
    const Test = test && src[test];
    return (
      <View style={styles.container} testID="container">
        <TouchableOpacity style={styles.button} onPress={this.onAll}>
          <Text>{test === null ? 'All' : 'Back'}</Text>
        </TouchableOpacity>
        {Test ? (
          <View style={styles.test} testID={test + 'View'}>
            <Test width="100%" height="100%" />
          </View>
        ) : (
          <FlatList
            data={tests}
            extraData={test}
            renderItem={test === ALL ? this.renderTest : this.renderItem}
          />
        )}
      </View>
    );
  }
}

const { width } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    paddingBottom: 40,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  test: {
    padding: 5,
    width: '98%',
    flex: 1,
    borderWidth: 1,
  },
  flatTest: {
    padding: 5,
    borderWidth: 1,
    marginBottom: 5,
    width: width * 0.98,
    height: width * 0.98,
  },
  button: {
    width: 50,
    height: 40,
    borderWidth: 1,
    marginBottom: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
});