nasso.dev
my fork of the bluesky client
danabra.mov
1import React from 'react'
2import DatePicker from 'react-native-date-picker'
3
4import {useTheme} from '#/alf'
5import {DateFieldProps} from '#/components/forms/DateField/types'
6import {toSimpleDateString} from '#/components/forms/DateField/utils'
7import * as TextField from '#/components/forms/TextField'
8import {DateFieldButton} from './index.shared'
9
10export * as utils from '#/components/forms/DateField/utils'
11export const LabelText = TextField.LabelText
12
13export function DateField({
14 value,
15 onChangeDate,
16 label,
17 isInvalid,
18 testID,
19 accessibilityHint,
20}: DateFieldProps) {
21 const t = useTheme()
22 const [open, setOpen] = React.useState(false)
23
24 const onChangeInternal = React.useCallback(
25 (date: Date) => {
26 setOpen(false)
27
28 const formatted = toSimpleDateString(date)
29 onChangeDate(formatted)
30 },
31 [onChangeDate, setOpen],
32 )
33
34 const onPress = React.useCallback(() => {
35 setOpen(true)
36 }, [])
37
38 const onCancel = React.useCallback(() => {
39 setOpen(false)
40 }, [])
41
42 return (
43 <>
44 <DateFieldButton
45 label={label}
46 value={value}
47 onPress={onPress}
48 isInvalid={isInvalid}
49 accessibilityHint={accessibilityHint}
50 />
51
52 {open && (
53 <DatePicker
54 modal
55 open
56 timeZoneOffsetInMinutes={0}
57 theme={t.name === 'light' ? 'light' : 'dark'}
58 date={new Date(value)}
59 onConfirm={onChangeInternal}
60 onCancel={onCancel}
61 mode="date"
62 testID={`${testID}-datepicker`}
63 aria-label={label}
64 accessibilityLabel={label}
65 accessibilityHint={accessibilityHint}
66 />
67 )}
68 </>
69 )
70}