import * as React from 'react' ; import { Button } from 'react-native' ; import { getTheme } from '@frogpond/app-theme' ; import type { AppTheme } from '@frogpond/app-theme' ; import moment from 'moment-timezone' ; import type { Moment } from 'moment-timezone' ; import DateTimePicker from '@react-native-community/datetimepicker' ; import type { Event } from '@react-native-community/datetimepicker' ; import { BaseDatetimePickerProps } from './types' ; const FORMATS = { date : 'YYYY-MM-DD' , datetime : 'YYYY-MM-DD HH:mm' , time : 'HH:mm' , countdown : 'HH:mm' , } ; export const BaseDateTimePicker = ( props ) : JSX . Element => { let [ date , setDate ] = React . useState ( props . initialDate ) ; let [ timezone ] = React . useState ( props . initialDate . tz ( ) || '' ) ; const onChange = ( _event , selectedDate ? ) => { props . onChange ?. ( ) ; if ( ! selectedDate ) { return ; } setDate ( moment ( selectedDate ) ) ; props . onDateChange ( moment . tz ( selectedDate , timezone ) ) ; } ; const formatDate = ( date ) : string => { const { mode , format = FORMATS [ mode ] } = props ; return moment . tz ( date , timezone ) . format ( format ) ; } ; const getTimezoneOffsetInMinutes = ( ) : number => { let dateInUnixMs = date . valueOf ( ) ; let momentZone = moment . tz . zone ( timezone ) ; let offset = momentZone ? - momentZone . utcOffset ( dateInUnixMs ) : 0 ; return offset ; } ; let theme = getTheme ( ) ; return ( < > { props . showPickerButtonAndroid && ( < Button color = { theme . buttonBackground } onPress = { ( ) => props . setShowPickerAndroid ?. ( true ) } testID = "datepicker-button-android" title = { formatDate ( date ) } / > ) } { ( props . showPickerAndroid || props . showPickeriOS ) && ( < DateTimePicker minuteInterval = { props . minuteInterval } mode = { props . mode } onChange = { onChange } style = { props . style } testID = "datepicker" timeZoneOffsetInMinutes = { getTimezoneOffsetInMinutes ( ) } value = { moment . tz ( date , timezone ) . toDate ( ) } / > ) } < />); } ;