AddChildrenTask.js 4.13 KB
import React from "react"
import {
	View,
	StyleSheet,
	Text,
	Image,
	TextInput,
	PixelRatio,
	TouchableWithoutFeedback,
	TouchableOpacity,
	KeyboardAvoidingView,
	Alert,
	Animated,
	Keyboard,
	Easing
} from "react-native"
import 'moment/locale/zh-cn'
import {observer} from 'mobx-react/native'
import {observable} from 'mobx'
import Toast from "react-native-simple-toast";
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: '#999999',
		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',
		borderTopWidth:line,
		borderTopColor:"#eeeeee",
	},
	leftItem: {
		flex: 1,
		flexDirection: 'row',
		paddingLeft:15,
	},
	centerItem: {
		flex: 1,
		flexDirection: 'row',
	},
	rightItem: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'flex-end',
		paddingRight:15,
	},
	icon: {
		height: 20,
		width: 20,
	},
	leftItem1: {
		flex: 1,
	},
	centerText: {
		fontSize: 16,
		color: "#333333",
		marginLeft: 10,
	},
	textView: {
		flexDirection: 'row',
		height: 40,
		alignItems: 'center',
		paddingHorizontal:10,
	},
	textView1: {
		flex: 1,
	},
	titleText: {
		color: '#8e8e8e',
		fontSize:13
	},
	titleText1:{
		fontSize:13
	},
	buttonText:{
		fontSize:16,
	}
})
@observer
export default class AddChildrenTask extends React.Component {
	@observable
		text=''
	animationValue=new Animated.Value(0)
	componentWillMount(){
		const {state}=this.props.navigation
		this.listener1=!isAndroid&&Keyboard.addListener("keyboardDidShow",this._showKeyboard)
		this.listener2=!isAndroid&&Keyboard.addListener("keyboardDidHide",this._hideKeyboard)
		if(state.params.value){
			this.text=state.params.value
		}
	}

	back = () => {
		const {navigation} = this.props
		navigation.goBack()
	}
	back1=()=>{
		const {state}=this.props.navigation
		Alert.alert(
			'注意',
			`是否取消${state.params.value?"编辑":"新建"}任务`,
			[{text:"取消",onPress:()=>{}},
				{text:"确定",onPress:this.back},
			]);
	}
	finish=()=>{
		if(this.text.length>0){
			if(this.notouch){
				return
			}
			this.notouch=true
			const {state}=this.props.navigation
			state.params.onChange(this.text)
			this.back()

		}else{
			Toast.show("请输入内容")
		}
	}
	componentWillUnmount(){
		this.notouch=false
	}
	footer() {
		return (
			<View style={styles.footer}>
				<TouchableOpacity style={styles.leftItem} onPress={this.back}>
					<Text style={styles.buttonText}>取消</Text>
				</TouchableOpacity>
				<TouchableOpacity style={styles.rightItem} onPress={this.finish}>
					<Text style={styles.buttonText}>完成</Text>
				</TouchableOpacity>
			</View>
		)
	}
	componentWillUnmount(){
		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
									underlineColorAndroid={"transparent"}
									style={styles.input}
									multiline
									placeholder={"准备添加啥子任务"}
									value={this.text}
									onChangeText={v=>this.text=v}
									autoFocus={true}
									maxLength={100}
									returnKeyType={"done"}
								/>
							</View>
							{this.footer()}
						</Animated.View>
				</View>


		)
	}
}