import * as React from 'react' import {View, StyleSheet, TouchableOpacity, Text, ScrollView, TextInput, Image, DeviceEventEmitter} from 'react-native' import {BirthdayRefreshNotify, RootStackScreenProps} from '../../Common/define/Defines' import BirthdaySelectDateAlert from './BirthdaySelectDateAlert' import BirthdaySelectTimeAlert from './BirthdaySelectTimeAlert' import BirthdayDataManager from '../data/BirthdayDataManager' import {isString} from '../../Common/tool/TypeTool' import PYResultTips from '../../Common/alert/PYResultTips' import Lunar from '../../Common/Solar&Lunar/Lunar' import Solar from '../../Common/Solar&Lunar/Solar' import LunarSolarTransform from '../../Common/Solar&Lunar/LunarSolarTransform' import LunarSolarHelper from '../../Common/Solar&Lunar/LunarSolarHelper' interface StateType { name: string remark: string year: number month: number day: number hour: number minute: number isLunar: boolean isSecondLeapMonth: boolean } export default class BirthdayAdd extends React.Component, StateType> { dateSelectRef: BirthdaySelectDateAlert | null = null timeSelectRef: BirthdaySelectTimeAlert | null = null nameInputRef: TextInput | null = null remarkInputRef: TextInput | null = null tipsRef: PYResultTips | null = null constructor(props: any) { super(props) this.state = { name: '', remark: '', year: 1970, month: 1, day: 1, hour: 0, minute: 0, isLunar: false, isSecondLeapMonth: false, } const navigation = this.props.navigation navigation.setOptions({ title: '添加生日', headerLeft: this._headerLeft.bind(this), headerRight: this._headerRight.bind(this), }) } _headerLeft = () => { return ( ) } _onPressNaviBackBtn = () => { const navigation = this.props.navigation navigation.pop(1) } _headerRight = () => { return ( {'保存'} ) } _onPressSave = async () => { const name = this.state.name if (!isString(name) || name.length <= 0) { this.tipsRef?.show('请输入姓名', false) return } const isLunar = this.state.isLunar const year = this.state.year const month = this.state.month const day = this.state.day let solar = new Solar(year, month, day) if (isLunar) { const lunar = new Lunar(year, month, day, this.state.isSecondLeapMonth) solar = LunarSolarTransform.lunarToSolar(lunar) } const hour = this.state.hour const minute = this.state.minute const birthday = solar.getTimeInterval() + hour * 3600 * 1000 + minute * 60 * 1000 await BirthdayDataManager.addData(name, this.state.remark, birthday, isLunar) DeviceEventEmitter.emit(BirthdayRefreshNotify) this._onPressNaviBackBtn() } render() { return ( {this._renderNameInput()} {this._renderDateSelect()} {this._renderTimeSelect()} {this._renderRemarkInput()} {this._renderDateSelectAlert()} {this._renderTimeSelectAlert()} {this._renderResultTips()} ) } _renderNameInput = () => { return ( {'姓名'} (this.nameInputRef = e)} style={styles.input} placeholder={'请输入姓名(必填)'} placeholderTextColor={'#aaaaaa'} value={this.state.name} onChangeText={this._onChangeName.bind(this)} /> ) } _onChangeName = (name: string) => { this.setState({ name: name, }) } _renderDateSelect = () => { let dateStr: string = '' if (this.state.isLunar) { const lunar = new Lunar(this.state.year, this.state.month, this.state.day, this.state.isSecondLeapMonth) dateStr = lunar.getInputDisplayStr() } else { const solar = new Solar(this.state.year, this.state.month, this.state.day) dateStr = solar.getInputDisplayStr() } return ( {'生日'} {dateStr} ) } _onPressDate = () => { this.dateSelectRef?.show( this.state.year, this.state.month, this.state.day, this.state.isLunar, this.state.isSecondLeapMonth, ) } _renderDateSelectAlert = () => { return (this.dateSelectRef = e)} onSelect={this._onSelectDate.bind(this)} /> } _onSelectDate = (year: number, month: number, day: number, isLunar: boolean, isSecondLeapMonth: boolean) => { this.setState({ year: year, month: month, day: day, isLunar: isLunar, isSecondLeapMonth: isSecondLeapMonth, }) } _renderTimeSelect = () => { const zhiName = LunarSolarHelper.getHourName(this.state.hour) const hourStr = String(this.state.hour).padStart(2, '0') const minuteStr = String(this.state.minute).padStart(2, '0') const timeStr = hourStr + ':' + minuteStr + '(' + zhiName + ')' return ( {'时间'} {timeStr} ) } _onPressTime = () => { this.timeSelectRef?.show(this.state.hour, this.state.minute) } _renderTimeSelectAlert = () => { return (this.timeSelectRef = e)} onSelect={this._onSelectTime.bind(this)} /> } _onSelectTime = (hour: number, minute: number) => { this.setState({ hour: hour, minute: minute, }) } _renderRemarkInput = () => { return ( {'备注'} (this.remarkInputRef = e)} style={styles.input} placeholder={'描述一下你们的关系(选填)'} placeholderTextColor={'#aaaaaa'} value={this.state.remark} onChangeText={this._onChangeRemark.bind(this)} /> ) } _onChangeRemark = (remark: string) => { this.setState({ remark: remark, }) } _renderResultTips = () => { return (this.tipsRef = e)} /> } } const styles = StyleSheet.create({ scrollView: { flex: 1, paddingTop: 10, }, container: { width: '100%', height: 55, paddingHorizontal: 15, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', }, itemLbl: { width: 70, fontSize: 17, color: '#191919', }, separateLine: { left: 85, right: 25, position: 'absolute', backgroundColor: '#e8e8e8', bottom: 0, height: 1, }, input: { height: 55, width: '100%', fontSize: 17, marginRight: 25, }, itemBtn: { height: 55, width: '100%', marginRight: 25, justifyContent: 'center', }, itemBtnTitle: { fontSize: 17, color: '#191919', }, saveBtn: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center', }, saveBtnTitle: { fontSize: 17, color: '#191919', }, naviBackBtn: { width: 40, height: 40, justifyContent: 'center', }, naviBackBtnImg: { width: 24, height: 24, resizeMode: 'contain', tintColor: '#191919', }, })