jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import {useCallback, useImperativeHandle, useState} from 'react'
2import {Keyboard} from 'react-native'
3import DatePicker from 'react-native-date-picker'
4import {useLingui} from '@lingui/react'
5
6import {useTheme} from '#/alf'
7import {type DateFieldProps} from '#/components/forms/DateField/types'
8import {toSimpleDateString} from '#/components/forms/DateField/utils'
9import * as TextField from '#/components/forms/TextField'
10import {DateFieldButton} from './index.shared'
11
12export * as utils from '#/components/forms/DateField/utils'
13export const LabelText = TextField.LabelText
14
15export function DateField({
16 value,
17 inputRef,
18 onChangeDate,
19 label,
20 isInvalid,
21 testID,
22 accessibilityHint,
23 maximumDate,
24}: DateFieldProps) {
25 const {i18n} = useLingui()
26 const t = useTheme()
27 const [open, setOpen] = useState(false)
28
29 const onChangeInternal = useCallback(
30 (date: Date) => {
31 setOpen(false)
32
33 const formatted = toSimpleDateString(date)
34 onChangeDate(formatted)
35 },
36 [onChangeDate, setOpen],
37 )
38
39 useImperativeHandle(
40 inputRef,
41 () => ({
42 focus: () => {
43 Keyboard.dismiss()
44 setOpen(true)
45 },
46 blur: () => {
47 setOpen(false)
48 },
49 }),
50 [],
51 )
52
53 const onPress = useCallback(() => {
54 setOpen(true)
55 }, [])
56
57 const onCancel = useCallback(() => {
58 setOpen(false)
59 }, [])
60
61 return (
62 <>
63 <DateFieldButton
64 label={label}
65 value={value}
66 onPress={onPress}
67 isInvalid={isInvalid}
68 accessibilityHint={accessibilityHint}
69 />
70
71 {open && (
72 // Android implementation of DatePicker currently does not change default button colors according to theme and only takes hex values for buttonColor
73 // Can remove the buttonColor setting if/when this PR is merged: https://github.com/henninghall/react-native-date-picker/pull/871
74 <DatePicker
75 modal
76 open
77 timeZoneOffsetInMinutes={0}
78 theme={t.scheme}
79 // @ts-ignore TODO
80 buttonColor={t.name === 'light' ? '#000000' : '#ffffff'}
81 date={new Date(value)}
82 onConfirm={onChangeInternal}
83 onCancel={onCancel}
84 mode="date"
85 locale={i18n.locale}
86 is24hourSource="locale"
87 testID={`${testID}-datepicker`}
88 aria-label={label}
89 accessibilityLabel={label}
90 accessibilityHint={accessibilityHint}
91 maximumDate={
92 maximumDate ? new Date(toSimpleDateString(maximumDate)) : undefined
93 }
94 />
95 )}
96 </>
97 )
98}