/
ActionButtons.js
136 lines (131 loc) · 3.72 KB
/
ActionButtons.js
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import React from 'react';
import { connect } from 'react-redux';
import {
Alert,
View,
StyleSheet,
Text,
TouchableNativeFeedback,
TouchableOpacity,
Platform,
} from 'react-native';
import { addOne, subOne, other, cancelOther } from '../redux/actions';
const Touchable = Platform.select({
android: TouchableNativeFeedback,
ios: TouchableOpacity,
});
const showInfo = actionType => () => {
const message = (() => {
switch (actionType) {
case 'ADD_1':
return (
'This action adds 1 to the counter state. It is configured to be enqueued if offline ' +
'and uses a unique id per action, so that we can add to the queue as many as we want.'
);
case 'SUB_1':
return (
'This action subtracts 1 to the counter state. It is configured to be enqueued if offline ' +
'and uses a unique id per action, so that we can add to the queue as many as we want.'
);
case 'OTHER':
return (
"This action does not change the UI state. It's only purpose is to demonstrate that if we dispatch the same " +
'action to the queue several times, it will replace the existing one and a new instance to the end of the queue. ' +
"It's also dismissable, so that if an action with type CANCEL_OTHER is dispatched, it will be removed from the queue."
);
case 'CANCEL_OTHER':
return (
"This action does not change the UI state and it's NOT configured to be added to the offline queue." +
' If dispatched, it will dismiss actions from the queue with type OTHER.'
);
default:
return '';
}
})();
Alert.alert(actionType, message, [{ text: 'OK', onPress: () => ({}) }], {
cancelable: false,
});
};
function ActionButtons({
addOneAction,
subOneAction,
otherAction,
cancelOtherAction,
}) {
return (
<View style={styles.container}>
<Text style={styles.title}>Actions to dispatch</Text>
<Text style={styles.subtitle}>Long tap on each action for more info</Text>
<View style={styles.row}>
<Touchable
onPress={addOneAction}
onLongPress={showInfo('ADD_1')}
style={{ justifyContent: 'center' }}
>
<Text style={styles.button}>ADD_1</Text>
</Touchable>
<Touchable
onPress={subOneAction}
onLongPress={showInfo('SUB_1')}
style={{ justifyContent: 'center' }}
>
<Text style={styles.button}>SUB_1</Text>
</Touchable>
</View>
<View style={styles.row}>
<Touchable
onPress={otherAction}
onLongPress={showInfo('OTHER')}
style={{ justifyContent: 'center' }}
>
<Text style={styles.button}>OTHER</Text>
</Touchable>
<Touchable
onPress={cancelOtherAction}
onLongPress={showInfo('CANCEL_OTHER')}
style={{ justifyContent: 'center' }}
>
<Text style={styles.button}>CANCEL_OTHER</Text>
</Touchable>
</View>
</View>
);
}
export default connect(
null,
{
addOneAction: addOne,
subOneAction: subOne,
otherAction: other,
cancelOtherAction: cancelOther,
},
)(ActionButtons);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
title: {
fontSize: 17,
color: 'rgba(96,100,109, 1)',
lineHeight: 24,
textAlign: 'center',
fontWeight: 'bold',
},
subtitle: {
fontSize: 14,
color: 'rgba(96,100,109, 1)',
textAlign: 'center',
fontStyle: 'italic',
},
row: {
justifyContent: 'center',
flexDirection: 'row',
marginVertical: 8,
},
button: {
color: '#388E3C',
marginHorizontal: 8,
fontSize: 18,
},
});