xntalk / xntalk-rnapp

import React from "react"
import {
	View,
	StyleSheet,
	Text,
	Image,
	TextInput,
	PixelRatio,
	TouchableWithoutFeedback,
	TouchableOpacity,
	KeyboardAvoidingView,
	Alert,
	Animated,
	Keyboard,
	Easing,
} from "react-native"
import Picker from 'react-native-picker';
import moment from 'moment'
import 'moment/locale/zh-cn'
import writeLogic from '../logic/writeLogic'
import {observer} from 'mobx-react/native'
import {PickExpireDate, PickRemindDate, PickCategory} from "../components/Picker";
import DatePicker from 'react-native-datepicker';
import Toast from "react-native-simple-toast";
import {observable} from 'mobx'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import {isAndroid} from "../components/SearchBar";
export const line = 1 / PixelRatio.get()
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: 'rgba(0,0,0,0.5)',
	},
	content: {
		height: 220,
		backgroundColor: 'white',
		borderTopLeftRadius: 4,
		borderTopRightRadius: 4,
		borderColor: '#eeeeee',
		borderBottomWidth: line,
		padding: 13.5,
		paddingBottom: 0,
	},
	input: {
		flex: 1,
		fontSize: 16,
		textAlign:'left',
		textAlignVertical:'top',

	},
	footer: {
		height: 50,
		backgroundColor: 'white',
		flexDirection: 'row',
		paddingHorizontal: 15,
		alignItems: 'center',
	},
	leftItem: {
		flex: 1,
		flexDirection: 'row',
	},
	centerItem: {
		flex: 1,
		flexDirection: 'row',
		alignItems:'center',
	},
	rightItem: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'flex-end'
	},
	icon: {
		height: 20,
		width: 20,
	},
	leftItem1: {
		flex: 1,
	},
	centerText: {
		fontSize: 16,
		color: "#333333",
		marginLeft: 10,
	},
	textView1: {
		height:26,
		alignItems: 'center',
		flexDirection: 'row',
		paddingLeft:2,
	},
	titleText: {
		color: '#8e8e8e',
		fontSize: 13
	},
	titleText1: {
		fontSize: 13
	}
})
@observer
export default class Write extends React.Component {
	logic = new writeLogic()
	animationValue=new Animated.Value(0)
	@observable
		auto=false
	back = () => {
		const {navigation} = this.props
		navigation.goBack()
	}
	back1=()=>{
		Alert.alert(
			'注意',
			'是否取消新建任务',
			[{text:"取消",onPress:()=>{}},
			{text:"确定",onPress:this.back},
			]);
	}
	pickRemindDate = () => {
		this.picker2.onPressDate()
	}
	pickExpireDate = () => {
		this.picker1.onPressDate()
	}
	pickCategory1 = () => {
		const data = this.logic.list.map(v => v.name)
		PickCategory(data, (v) => {
			this.logic.category = v
			const tmp = this.logic.list.filter(z => z.name === v)
			this.logic.listId = tmp[0].id
			this.logic.taskObjectCategory = tmp[0].taskObjectCategory || null
			this.logic.objectType = tmp[0].objectType
		})
	}
	finish = async () => {
		if(this.logic.text.length===0){
			Toast.show("请输入内容")
			return
		}
		if(this.notouch){
			return
		}
		this.notouch=true
		await this.logic.send()
		this.back()

	}
	componentWillUnmount(){
		this.notouch=false
	}
	componentWillMount() {
		const {list} = this.props.navigation.state.params
		this.logic.list.replace(list)
		this.logic.category = list[0].name
		this.logic.listId = list[0].id
		this.logic.taskObjectCategory = list[0].taskObjectCategory || null
		this.logic.objectType = list[0].objectType
		this.listener1=!isAndroid&&Keyboard.addListener("keyboardDidShow",this._showKeyboard)
		this.listener2=!isAndroid&&Keyboard.addListener("keyboardDidHide",this._hideKeyboard)
	}

	footer() {
		const today = !!this.logic.expireDate ? require("./imgs/todayActive.png") : require("./imgs/today.png")
		const remind = this.logic.remindDate.length > 0 ? require("./imgs/ringActive.png") : require("./imgs/ring.png")
		return (
			<View style={styles.footer}>
				<View style={styles.leftItem}>
					<TouchableOpacity style={styles.leftItem1} onPress={this.pickExpireDate}>
						<Image style={styles.icon} source={today} resizeMode='contain'/>
					</TouchableOpacity>
					<TouchableOpacity style={styles.leftItem1} onPress={this.pickRemindDate}>
						<Image style={[styles.icon, {marginLeft: 5}]} source={remind} resizeMode='contain'/>
					</TouchableOpacity>
				</View>
				<TouchableOpacity style={styles.centerItem} onPress={this.pickCategory1}>
					<Image style={styles.icon} source={require('./imgs/menu.png')} resizeMode='contain'/>
					<Text style={[styles.centerText,{flex:1}]} numberOfLines={1}>{this.logic.category}</Text>
				</TouchableOpacity>
				<TouchableOpacity style={styles.rightItem} onPress={this.finish}>
					<Text style={styles.centerText}>完成</Text>
				</TouchableOpacity>
			</View>
		)
	}

	datePicker() {
		return (
			<DatePicker
				date={this.logic.expireDate}
				mode="date"
				format="YYYY-MM-DD"
				confirmBtnText="确定"
				cancelBtnText="取消"
				customStyles={{btnTextConfirm:{color:'#2b8fff'}}}
				onDateChange={(date) => {
					this.logic.expireDate = date;
				}}
				hideText={true}
				showIcon={false}
				style={{height: 0, width: 0, overflow: "hidden"}}
				ref={v => this.picker1 = v}
			/>
		)
	}

	datetimePicker() {
		return (
			<DatePicker
				date={this.logic.remindDate}
				mode="datetime"
				format="YYYY-MM-DD HH:mm:ss"
				confirmBtnText="确定"
				cancelBtnText="取消"
				customStyles={{btnTextConfirm:{color:'#2b8fff'}}}
				onDateChange={(date) => this.logic.remindDate = date}
				hideText={true}
				showIcon={false}
				ref={v => this.picker2 = v}
				style={{height: 0, width: 0, overflow: "hidden"}}

			/>
		)
	}

	timeView() {
		const {expireDate, remindDate} = this.logic
		const dateTime=new Date(remindDate).getTime()
		const now =new Date(new Date().setHours(0, 0, 0, 0)).getTime()+86400*1000
		// const check=dateTime-now<0
		const check=false
		return (
			<View style={{position:"absolute",bottom:0,left:15}}>
				{!!expireDate&&<Text style={styles.textView1}>
					{!!expireDate && <Text style={styles.titleText}>到期日期：</Text>}
					{!!expireDate && <Text style={styles.titleText1}>{expireDate}</Text>}
				</Text>}
				{!!remindDate &&<Text style={styles.textView1}>
					{!!remindDate && <Text style={styles.titleText}>提醒日期：</Text>}
					{!!remindDate && <Text style={[styles.titleText1,check&&{color:"red"}]}>{moment(remindDate).format("YYYY-MM-DD HH:mm")}</Text>}
				</Text>}
			</View>
		)
	}

	componentWillUnmount(){
		console.log("unmount")
		this.listener2&&this.listener2.remove();
		this.listener1&&this.listener1.remove();
	}
	_showKeyboard=(e)=>{
		if(this.e){
			return
		}
		this.e=e
			Animated.timing(this.animationValue,
				{
					toValue:-50,
					easing: Easing.linear,
					useNativeDriver:true,
					duration: 200,
				}).start();


	}
	_hideKeyboard=()=>{
		this.e=null
		Animated.timing(this.animationValue,{
			toValue:0,
			easing: Easing.linear,
			useNativeDriver:true
		}).start()
	}
	render() {
		return (
			<View style={styles.container}>
				<TouchableWithoutFeedback onPress={this.back1}>
					<View style={{flex: 1}}/>
				</TouchableWithoutFeedback>
				<Animated.View style={{transform:[{translateY:this.animationValue}]}}>
				<View style={styles.content}>
					<TextInput
						style={styles.input}
						multiline
						placeholder={"准备做些什么"}
						underlineColorAndroid={"transparent"}
						value={this.logic.text}
						onChangeText={v => this.logic.text = v}
						autoFocus={true}
						maxLength={100}
						returnKeyType={"done"}
					/>
					{this.timeView()}
				</View>
				{this.footer()}
				</Animated.View>
				{this.datePicker()}
				{this.datetimePicker()}
			</View>


		)
	}
}