OrdersModal.js
2.07 KB
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
import React from 'react'
import {View, Text, Image, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, Animated} from 'react-native'
import {observer} from 'mobx-react/native';
import {width, height} from "../pages/Home";
import {line} from "../pages/Write";
import {isAndroid} from "./SearchBar";
const styles = StyleSheet.create({
container: {
width,
height: height - 64,
justifyContent: 'flex-end',
paddingBottom: 55,
position: 'absolute',
top: 0,
left: 0,
},
content: {
height: 138,
backgroundColor: "#f5f5f5",
paddingLeft: 15,
},
item: {
flex: 1,
borderBottomWidth: line,
borderBottomColor: "#999999",
justifyContent: 'center',
paddingLeft: 22.5,
},
itemText: {
fontSize: 16,
color: "#333333",
}
})
@observer
export default class OrdersModal extends React.Component {
move = new Animated.Value(138)
componentDidMount() {
Animated.timing(
this.move,
{
toValue: isAndroid?-16:0,
useNativeDriver: true,
duration: 200,
}
).start()
}
item = (v, i) => {
const {name, onPress,type} = v
return (
<TouchableOpacity style={styles.item} onPress={async() => {onPress();await this.props.logic.taskFind(type)}} key={i}>
<Text style={styles.itemText}>{name}</Text>
</TouchableOpacity>
)
}
back = () => {
Animated.timing(
this.move,
{
toValue: 138,
useNativeDriver: true,
duration: 200,
}
).start()
setTimeout(() => this.props.logic.showOrdersBar = false, 200)
}
render() {
const data = [
{name: "按字母排序", onPress: this.back,type:"OBJECT_NAME_PINYIN"},
{name: "按到期日排序", onPress: this.back,type:"DEADLINE_DATE"},
{name: "按创建日期排序", onPress: this.back,type:"CREATION_TIME"},
]
const animation = {transform: [{translateY: this.move}]}
return (
<TouchableWithoutFeedback onPress={this.back}>
<View style={styles.container}>
<TouchableWithoutFeedback>
<Animated.View style={[styles.content, animation]}>
{data.map(this.item)}
</Animated.View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
)
}
}