import * as React from 'react' import {View, StyleSheet, TouchableOpacity, Text, ScrollView, TextInput, Image, DeviceEventEmitter} from 'react-native' import { BirthdayDetailRefreshNotify, BirthdayEditName, BirthdayRefreshNotify, RootStackScreenProps, } from '../../Common/define/Defines' import BirthdaySelectDateAlert from './BirthdaySelectDateAlert' import BirthdaySelectTimeAlert from './BirthdaySelectTimeAlert' 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 BirthdayData from '../data/BirthdayData' import LunarSolarTransform from '../../Common/Solar&Lunar/LunarSolarTransform' import LunarSolarHelper from '../../Common/Solar&Lunar/LunarSolarHelper' import BirthdayDataManager from '../data/BirthdayDataManager' interface StateType { name: string remark: string year: number month: number day: number hour: number minute: number id: number isLunar: boolean isSecondLeapMonth: boolean } export default class BirthdayEdit 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) const data = this._getBirthdayData() const birthday = data?.birthday || 0 const date = new Date(birthday) const solar = Solar.createByDate(date) const lunar = LunarSolarTransform.solarToLunar(solar) const isLunar = data?.isLunar || false this.state = { name: data?.name || '', remark: data?.remark || '', id: data?.id || -1, year: isLunar ? lunar.year : solar.year, month: isLunar ? lunar.month : solar.month, day: isLunar ? lunar.day : solar.day, hour: date.getHours(), minute: date.getMinutes(), isLunar: isLunar, isSecondLeapMonth: isLunar ? lunar.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 id = this.state.id if (id === -1) { return } 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 const birthdayData = new BirthdayData(id, name, this.state.remark, birthday, isLunar) await BirthdayDataManager.updateData(birthdayData) DeviceEventEmitter.emit(BirthdayRefreshNotify) DeviceEventEmitter.emit(BirthdayDetailRefreshNotify) const navigation = this.props.navigation navigation.pop(2) } render() { return ( {this._renderNameInput()} {this._renderDateSelect()} {this._renderTimeSelect()} {this._renderRemarkInput()} {this._renderDateSelectAlert()} {this._renderTimeSelectAlert()} {this._renderResultTips()} {this._renderDeleteBtn()} ) } _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)} /> } _renderDeleteBtn = () => { return ( {'删除'} ) } _onPressDelete = async () => { const id = this.state.id if (id === -1) { return } await BirthdayDataManager.removeData(id) DeviceEventEmitter.emit(BirthdayRefreshNotify) const navigation = this.props.navigation navigation.pop(2) } _getBirthdayData = (): BirthdayData | null => { const routes = this.props.navigation.getState().routes let data: BirthdayData | null = null for (let i = 0; i < routes.length; i++) { const route = routes[i] if (route.name === BirthdayEditName) { data = route.params as BirthdayData break } } return data } } 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', }, deleteBtn: { borderRadius: 5, marginTop: 15, marginLeft: 15, marginRight: 15, height: 40, backgroundColor: '#FF464A', justifyContent: 'center', alignItems: 'center', }, deleteBtnTitle: { fontSize: 17, color: 'white', }, })