Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {forwardRef, useCallback} from 'react'
2import {StyleSheet, type TextInput, type TextInputProps} from 'react-native'
3// @ts-expect-error untyped
4import {unstable_createElement} from 'react-native-web'
5
6import {type DateFieldProps} from '#/components/forms/DateField/types'
7import {toSimpleDateString} from '#/components/forms/DateField/utils'
8import * as TextField from '#/components/forms/TextField'
9import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
10
11export * as utils from '#/components/forms/DateField/utils'
12export const LabelText = TextField.LabelText
13
14const InputBase = forwardRef<HTMLInputElement, TextInputProps>(
15 ({style, ...props}, ref) => {
16 return unstable_createElement('input', {
17 ...props,
18 ref,
19 type: 'date',
20 style: [
21 StyleSheet.flatten(style),
22 {
23 background: 'transparent',
24 border: 0,
25 },
26 ],
27 })
28 },
29)
30
31InputBase.displayName = 'InputBase'
32
33const Input = TextField.createInput(InputBase as unknown as typeof TextInput)
34
35export function DateField({
36 value,
37 inputRef,
38 onChangeDate,
39 label,
40 isInvalid,
41 testID,
42 accessibilityHint,
43 maximumDate,
44}: DateFieldProps) {
45 const handleOnChange = useCallback(
46 (e: any) => {
47 const date = e.target.valueAsDate || e.target.value
48
49 if (date) {
50 const formatted = toSimpleDateString(date)
51 onChangeDate(formatted)
52 }
53 },
54 [onChangeDate],
55 )
56
57 return (
58 <TextField.Root isInvalid={isInvalid}>
59 <TextField.Icon icon={CalendarDays} />
60 <Input
61 value={toSimpleDateString(value)}
62 inputRef={inputRef as React.Ref<TextInput>}
63 label={label}
64 onChange={handleOnChange}
65 testID={testID}
66 accessibilityHint={accessibilityHint}
67 // @ts-expect-error not typed as <input type="date"> even though it is one
68 max={maximumDate ? toSimpleDateString(maximumDate) : undefined}
69 />
70 </TextField.Root>
71 )
72}