ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import {Pressable, View} from 'react-native'
2import {useLingui} from '@lingui/react'
3
4import {atoms as a, native, useTheme, web} from '#/alf'
5import * as TextField from '#/components/forms/TextField'
6import {useInteractionState} from '#/components/hooks/useInteractionState'
7import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
8import {Text} from '#/components/Typography'
9
10// looks like a TextField.Input, but is just a button. It'll do something different on each platform on press
11// iOS: open a dialog with an inline date picker
12// Android: open the date picker modal
13
14export function DateFieldButton({
15 label,
16 value,
17 onPress,
18 isInvalid,
19 accessibilityHint,
20}: {
21 label: string
22 value: string | Date
23 onPress: () => void
24 isInvalid?: boolean
25 accessibilityHint?: string
26}) {
27 const {i18n} = useLingui()
28 const t = useTheme()
29
30 const {
31 state: pressed,
32 onIn: onPressIn,
33 onOut: onPressOut,
34 } = useInteractionState()
35 const {
36 state: hovered,
37 onIn: onHoverIn,
38 onOut: onHoverOut,
39 } = useInteractionState()
40 const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
41
42 const {chromeHover, chromeFocus, chromeError, chromeErrorHover} =
43 TextField.useSharedInputStyles()
44
45 return (
46 <View
47 style={[a.relative, a.w_full]}
48 {...web({
49 onMouseOver: onHoverIn,
50 onMouseOut: onHoverOut,
51 })}>
52 <Pressable
53 aria-label={label}
54 accessibilityLabel={label}
55 accessibilityHint={accessibilityHint}
56 onPress={onPress}
57 onPressIn={onPressIn}
58 onPressOut={onPressOut}
59 onFocus={onFocus}
60 onBlur={onBlur}
61 style={[
62 {
63 paddingLeft: 14,
64 paddingRight: 14,
65 borderColor: 'transparent',
66 borderWidth: 2,
67 },
68 native({
69 paddingTop: 10,
70 paddingBottom: 10,
71 }),
72 web(a.py_md),
73 a.flex_row,
74 a.flex_1,
75 a.w_full,
76 {borderRadius: 10},
77 t.atoms.bg_contrast_50,
78 a.align_center,
79 hovered ? chromeHover : {},
80 focused || pressed ? chromeFocus : {},
81 isInvalid || isInvalid ? chromeError : {},
82 (isInvalid || isInvalid) && (hovered || focused)
83 ? chromeErrorHover
84 : {},
85 ]}>
86 <TextField.Icon icon={CalendarDays} />
87 <Text
88 style={[
89 a.text_md,
90 a.pl_xs,
91 t.atoms.text,
92 {lineHeight: a.text_md.fontSize * 1.1875},
93 ]}>
94 {i18n.date(value, {timeZone: 'UTC'})}
95 </Text>
96 </Pressable>
97 </View>
98 )
99}