OrdersModal.js 2.07 KB
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>
		)
	}
}