forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
connect inputs together in signup (#7809)
authored by
Samuel Newman
and committed by
GitHub
ca7116ec
80e59d31
+70
-10
+21
-5
src/components/forms/DateField/index.android.tsx
+21
-5
src/components/forms/DateField/index.android.tsx
···
1
-
import React from 'react'
1
+
import {useCallback, useImperativeHandle, useState} from 'react'
2
+
import {Keyboard} from 'react-native'
2
3
import DatePicker from 'react-native-date-picker'
3
4
4
5
import {useTheme} from '#/alf'
···
12
13
13
14
export function DateField({
14
15
value,
16
+
inputRef,
15
17
onChangeDate,
16
18
label,
17
19
isInvalid,
···
20
22
maximumDate,
21
23
}: DateFieldProps) {
22
24
const t = useTheme()
23
-
const [open, setOpen] = React.useState(false)
25
+
const [open, setOpen] = useState(false)
24
26
25
-
const onChangeInternal = React.useCallback(
27
+
const onChangeInternal = useCallback(
26
28
(date: Date) => {
27
29
setOpen(false)
28
30
···
32
34
[onChangeDate, setOpen],
33
35
)
34
36
35
-
const onPress = React.useCallback(() => {
37
+
useImperativeHandle(
38
+
inputRef,
39
+
() => ({
40
+
focus: () => {
41
+
Keyboard.dismiss()
42
+
setOpen(true)
43
+
},
44
+
blur: () => {
45
+
setOpen(false)
46
+
},
47
+
}),
48
+
[],
49
+
)
50
+
51
+
const onPress = useCallback(() => {
36
52
setOpen(true)
37
53
}, [])
38
54
39
-
const onCancel = React.useCallback(() => {
55
+
const onCancel = useCallback(() => {
40
56
setOpen(false)
41
57
}, [])
42
58
+17
-2
src/components/forms/DateField/index.tsx
+17
-2
src/components/forms/DateField/index.tsx
···
1
-
import React from 'react'
1
+
import {useCallback, useImperativeHandle} from 'react'
2
2
import {Keyboard, View} from 'react-native'
3
3
import DatePicker from 'react-native-date-picker'
4
4
import {msg, Trans} from '@lingui/macro'
···
25
25
*/
26
26
export function DateField({
27
27
value,
28
+
inputRef,
28
29
onChangeDate,
29
30
testID,
30
31
label,
···
36
37
const t = useTheme()
37
38
const control = Dialog.useDialogControl()
38
39
39
-
const onChangeInternal = React.useCallback(
40
+
const onChangeInternal = useCallback(
40
41
(date: Date | undefined) => {
41
42
if (date) {
42
43
const formatted = toSimpleDateString(date)
···
44
45
}
45
46
},
46
47
[onChangeDate],
48
+
)
49
+
50
+
useImperativeHandle(
51
+
inputRef,
52
+
() => ({
53
+
focus: () => {
54
+
Keyboard.dismiss()
55
+
control.open()
56
+
},
57
+
blur: () => {
58
+
control.close()
59
+
},
60
+
}),
61
+
[control],
47
62
)
48
63
49
64
return (
+2
-1
src/components/forms/DateField/index.web.tsx
+2
-1
src/components/forms/DateField/index.web.tsx
···
34
34
35
35
export function DateField({
36
36
value,
37
+
inputRef,
37
38
onChangeDate,
38
39
label,
39
40
isInvalid,
···
58
59
<TextField.Icon icon={CalendarDays} />
59
60
<Input
60
61
value={toSimpleDateString(value)}
62
+
inputRef={inputRef as React.Ref<TextInput>}
61
63
label={label}
62
64
onChange={handleOnChange}
63
-
onChangeText={() => {}}
64
65
testID={testID}
65
66
accessibilityHint={accessibilityHint}
66
67
// @ts-expect-error not typed as <input type="date"> even though it is one
+5
src/components/forms/DateField/types.ts
+5
src/components/forms/DateField/types.ts
···
1
+
export type DateFieldRef = {
2
+
focus: () => void
3
+
blur: () => void
4
+
}
1
5
export type DateFieldProps = {
2
6
value: string | Date
3
7
onChangeDate: (date: string) => void
4
8
label: string
9
+
inputRef?: React.Ref<DateFieldRef>
5
10
isInvalid?: boolean
6
11
testID?: string
7
12
accessibilityHint?: string
+25
-2
src/screens/Signup/StepInfo/index.tsx
+25
-2
src/screens/Signup/StepInfo/index.tsx
···
1
1
import React, {useRef} from 'react'
2
-
import {View} from 'react-native'
2
+
import {TextInput, View} from 'react-native'
3
3
import {msg, Trans} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
import * as EmailValidator from 'email-validator'
···
11
11
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
12
12
import {is13, is18, useSignupContext} from '#/screens/Signup/state'
13
13
import {Policies} from '#/screens/Signup/StepInfo/Policies'
14
-
import {atoms as a} from '#/alf'
14
+
import {atoms as a, native} from '#/alf'
15
15
import * as DateField from '#/components/forms/DateField'
16
+
import {DateFieldRef} from '#/components/forms/DateField/types'
16
17
import {FormError} from '#/components/forms/FormError'
17
18
import {HostingProvider} from '#/components/forms/HostingProvider'
18
19
import * as TextField from '#/components/forms/TextField'
···
50
51
const emailValueRef = useRef<string>(state.email)
51
52
const prevEmailValueRef = useRef<string>(state.email)
52
53
const passwordValueRef = useRef<string>(state.password)
54
+
55
+
const emailInputRef = useRef<TextInput>(null)
56
+
const passwordInputRef = useRef<TextInput>(null)
57
+
const birthdateInputRef = useRef<DateFieldRef>(null)
53
58
54
59
const [hasWarnedEmail, setHasWarnedEmail] = React.useState<boolean>(false)
55
60
···
155
160
autoCapitalize="none"
156
161
autoComplete="email"
157
162
keyboardType="email-address"
163
+
returnKeyType="next"
164
+
submitBehavior={native('submit')}
165
+
onSubmitEditing={native(() =>
166
+
emailInputRef.current?.focus(),
167
+
)}
158
168
/>
159
169
</TextField.Root>
160
170
</View>
···
167
177
<TextField.Icon icon={Envelope} />
168
178
<TextField.Input
169
179
testID="emailInput"
180
+
inputRef={emailInputRef}
170
181
onChangeText={value => {
171
182
emailValueRef.current = value.trim()
172
183
if (hasWarnedEmail) {
···
178
189
autoCapitalize="none"
179
190
autoComplete="email"
180
191
keyboardType="email-address"
192
+
returnKeyType="next"
193
+
submitBehavior={native('submit')}
194
+
onSubmitEditing={native(() =>
195
+
passwordInputRef.current?.focus(),
196
+
)}
181
197
/>
182
198
</TextField.Root>
183
199
</View>
···
189
205
<TextField.Icon icon={Lock} />
190
206
<TextField.Input
191
207
testID="passwordInput"
208
+
inputRef={passwordInputRef}
192
209
onChangeText={value => {
193
210
passwordValueRef.current = value
194
211
}}
···
197
214
secureTextEntry
198
215
autoComplete="new-password"
199
216
autoCapitalize="none"
217
+
returnKeyType="next"
218
+
submitBehavior={native('blurAndSubmit')}
219
+
onSubmitEditing={native(() =>
220
+
birthdateInputRef.current?.focus(),
221
+
)}
200
222
/>
201
223
</TextField.Root>
202
224
</View>
···
206
228
</DateField.LabelText>
207
229
<DateField.DateField
208
230
testID="date"
231
+
inputRef={birthdateInputRef}
209
232
value={state.dateOfBirth}
210
233
onChangeDate={date => {
211
234
dispatch({