Switch date picker libraries (#3126)

* Revert other base PR changes, switch date picker library

rm expo-linear-gradient

Revert "remove unused packages, switch to `expo-linear-gradient`"

This reverts commit 20a0ffcf

Revert "upgrade expo deps"

This reverts commit a43dca92caa120d45fb771431752dd2db3b37ab5.

Revert other library changes

This reverts commit 5219f66e

Revert "re-add normalize-url"

This reverts commit 654019c4babe2e455f6069a6c725eb51140ab1ab.

Revert "add `expo-haptics`"

This reverts commit ff3a0399b1c7eae07b83946f13543eedf7cdfe82.

Revert "add `expo-clipboard`"

This reverts commit 440ae91632153e22ff79050d8ac803a7305e88a0.

Revert "add `expo-file-system`"

This reverts commit c0fe0c94534564982399c22299a8a19052bf3e54.

fix android alf

use modal on android

migrate to `react-native-date-picker`

rm `@reactnativecommunity/datetimepicker`

add `react-native-date-picker`

add `expo-file-system`

add `expo-clipboard`

add `expo-haptics`

re-add normalize-url

rm blur view

upgrade expo deps

remove unused packages, switch to `expo-linear-gradient`

* rm old library

* Use UTC for dates

---------

Co-authored-by: Eric Bailey <git@esb.lol>
zio/stable
Hailey 2024-03-06 11:13:03 -08:00 committed by GitHub
parent b8f36a8bca
commit 2d9a5db967
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 51 additions and 56 deletions

View File

@ -63,7 +63,6 @@
"@react-native-camera-roll/camera-roll": "^5.2.2", "@react-native-camera-roll/camera-roll": "^5.2.2",
"@react-native-clipboard/clipboard": "^1.10.0", "@react-native-clipboard/clipboard": "^1.10.0",
"@react-native-community/blur": "^4.3.0", "@react-native-community/blur": "^4.3.0",
"@react-native-community/datetimepicker": "7.6.1",
"@react-native-masked-view/masked-view": "0.3.0", "@react-native-masked-view/masked-view": "0.3.0",
"@react-native-menu/menu": "^0.8.0", "@react-native-menu/menu": "^0.8.0",
"@react-native-picker/picker": "2.6.1", "@react-native-picker/picker": "2.6.1",
@ -152,6 +151,7 @@
"react-keyed-flatten-children": "^3.0.0", "react-keyed-flatten-children": "^3.0.0",
"react-native": "0.73.2", "react-native": "0.73.2",
"react-native-appstate-hook": "^1.0.6", "react-native-appstate-hook": "^1.0.6",
"react-native-date-picker": "^4.4.0",
"react-native-drawer-layout": "^4.0.0-alpha.3", "react-native-drawer-layout": "^4.0.0-alpha.3",
"react-native-fs": "^2.20.0", "react-native-fs": "^2.20.0",
"react-native-gesture-handler": "~2.14.0", "react-native-gesture-handler": "~2.14.0",

View File

@ -1,8 +1,5 @@
import React from 'react' import React from 'react'
import {View, Pressable} from 'react-native' import {View, Pressable} from 'react-native'
import DateTimePicker, {
BaseProps as DateTimePickerProps,
} from '@react-native-community/datetimepicker'
import {useTheme, atoms} from '#/alf' import {useTheme, atoms} from '#/alf'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
@ -15,6 +12,8 @@ import {
localizeDate, localizeDate,
toSimpleDateString, toSimpleDateString,
} from '#/components/forms/DateField/utils' } from '#/components/forms/DateField/utils'
import DatePicker from 'react-native-date-picker'
import {isAndroid} from 'platform/detection'
export * as utils from '#/components/forms/DateField/utils' export * as utils from '#/components/forms/DateField/utils'
export const Label = TextField.Label export const Label = TextField.Label
@ -38,20 +37,20 @@ export function DateField({
const {chromeFocus, chromeError, chromeErrorHover} = const {chromeFocus, chromeError, chromeErrorHover} =
TextField.useSharedInputStyles() TextField.useSharedInputStyles()
const onChangeInternal = React.useCallback< const onChangeInternal = React.useCallback(
Required<DateTimePickerProps>['onChange'] (date: Date) => {
>(
(_event, date) => {
setOpen(false) setOpen(false)
if (date) { const formatted = toSimpleDateString(date)
const formatted = toSimpleDateString(date) onChangeDate(formatted)
onChangeDate(formatted)
}
}, },
[onChangeDate, setOpen], [onChangeDate, setOpen],
) )
const onCancel = React.useCallback(() => {
setOpen(false)
}, [])
return ( return (
<View style={[atoms.relative, atoms.w_full]}> <View style={[atoms.relative, atoms.w_full]}>
<Pressable <Pressable
@ -89,18 +88,18 @@ export function DateField({
</Pressable> </Pressable>
{open && ( {open && (
<DateTimePicker <DatePicker
modal={isAndroid}
open={isAndroid}
theme={t.name === 'light' ? 'light' : 'dark'}
date={new Date(value)}
onConfirm={onChangeInternal}
onCancel={onCancel}
mode="date"
testID={`${testID}-datepicker`}
aria-label={label} aria-label={label}
accessibilityLabel={label} accessibilityLabel={label}
accessibilityHint={undefined} accessibilityHint={undefined}
testID={`${testID}-datepicker`}
mode="date"
timeZoneName={'Etc/UTC'}
display="spinner"
// @ts-ignore applies in iOS only -prf
themeVariant={t.name === 'light' ? 'light' : 'dark'}
value={new Date(value)}
onChange={onChangeInternal}
/> />
)} )}
</View> </View>

View File

@ -1,13 +1,11 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import DateTimePicker, {
DateTimePickerEvent,
} from '@react-native-community/datetimepicker'
import {useTheme, atoms} from '#/alf' import {useTheme, atoms} from '#/alf'
import * as TextField from '#/components/forms/TextField' import * as TextField from '#/components/forms/TextField'
import {toSimpleDateString} from '#/components/forms/DateField/utils' import {toSimpleDateString} from '#/components/forms/DateField/utils'
import {DateFieldProps} from '#/components/forms/DateField/types' import {DateFieldProps} from '#/components/forms/DateField/types'
import DatePicker from 'react-native-date-picker'
export * as utils from '#/components/forms/DateField/utils' export * as utils from '#/components/forms/DateField/utils'
export const Label = TextField.Label export const Label = TextField.Label
@ -28,7 +26,7 @@ export function DateField({
const t = useTheme() const t = useTheme()
const onChangeInternal = React.useCallback( const onChangeInternal = React.useCallback(
(event: DateTimePickerEvent, date: Date | undefined) => { (date: Date | undefined) => {
if (date) { if (date) {
const formatted = toSimpleDateString(date) const formatted = toSimpleDateString(date)
onChangeDate(formatted) onChangeDate(formatted)
@ -39,17 +37,15 @@ export function DateField({
return ( return (
<View style={[atoms.relative, atoms.w_full]}> <View style={[atoms.relative, atoms.w_full]}>
<DateTimePicker <DatePicker
theme={t.name === 'light' ? 'light' : 'dark'}
date={new Date(value)}
onDateChange={onChangeInternal}
mode="date"
testID={`${testID}-datepicker`}
aria-label={label} aria-label={label}
accessibilityLabel={label} accessibilityLabel={label}
accessibilityHint={undefined} accessibilityHint={undefined}
testID={`${testID}-datepicker`}
mode="date"
timeZoneName={'Etc/UTC'}
display="spinner"
themeVariant={t.name === 'light' ? 'light' : 'dark'}
value={new Date(value)}
onChange={onChangeInternal}
/> />
</View> </View>
) )

View File

@ -169,7 +169,7 @@ export function usePreferencesSetBirthDateMutation() {
return useMutation<void, unknown, {birthDate: Date}>({ return useMutation<void, unknown, {birthDate: Date}>({
mutationFn: async ({birthDate}: {birthDate: Date}) => { mutationFn: async ({birthDate}: {birthDate: Date}) => {
await getAgent().setPersonalDetails({birthDate}) await getAgent().setPersonalDetails({birthDate: birthDate.toISOString()})
// triggers a refetch // triggers a refetch
await queryClient.invalidateQueries({ await queryClient.invalidateQueries({
queryKey: preferencesQueryKey, queryKey: preferencesQueryKey,

View File

@ -1,8 +1,5 @@
import React, {useState, useCallback} from 'react' import React, {useState, useCallback} from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import DateTimePicker, {
DateTimePickerEvent,
} from '@react-native-community/datetimepicker'
import { import {
FontAwesomeIcon, FontAwesomeIcon,
FontAwesomeIconStyle, FontAwesomeIconStyle,
@ -14,6 +11,7 @@ import {TypographyVariant} from 'lib/ThemeContext'
import {useTheme} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {getLocales} from 'expo-localization' import {getLocales} from 'expo-localization'
import DatePicker from 'react-native-date-picker'
const LOCALE = getLocales()[0] const LOCALE = getLocales()[0]
@ -43,11 +41,9 @@ export function DateInput(props: Props) {
}, [props.handleAsUTC]) }, [props.handleAsUTC])
const onChangeInternal = useCallback( const onChangeInternal = useCallback(
(event: DateTimePickerEvent, date: Date | undefined) => { (date: Date) => {
setShow(false) setShow(false)
if (date) { props.onChange(date)
props.onChange(date)
}
}, },
[setShow, props], [setShow, props],
) )
@ -56,6 +52,10 @@ export function DateInput(props: Props) {
setShow(true) setShow(true)
}, [setShow]) }, [setShow])
const onCancel = useCallback(() => {
setShow(false)
}, [])
return ( return (
<View> <View>
{isAndroid && ( {isAndroid && (
@ -80,15 +80,17 @@ export function DateInput(props: Props) {
</Button> </Button>
)} )}
{(isIOS || show) && ( {(isIOS || show) && (
<DateTimePicker <DatePicker
testID={props.testID ? `${props.testID}-datepicker` : undefined} timeZoneOffsetInMinutes={0}
modal={isAndroid}
open={isAndroid}
theme={theme.colorScheme}
date={props.value}
onDateChange={onChangeInternal}
onConfirm={onChangeInternal}
onCancel={onCancel}
mode="date" mode="date"
timeZoneName={props.handleAsUTC ? 'Etc/UTC' : undefined} testID={props.testID ? `${props.testID}-datepicker` : undefined}
display="spinner"
// @ts-ignore applies in iOS only -prf
themeVariant={theme.colorScheme}
value={props.value}
onChange={onChangeInternal}
accessibilityLabel={props.accessibilityLabel} accessibilityLabel={props.accessibilityLabel}
accessibilityHint={props.accessibilityHint} accessibilityHint={props.accessibilityHint}
accessibilityLabelledBy={props.accessibilityLabelledBy} accessibilityLabelledBy={props.accessibilityLabelledBy}

View File

@ -4986,13 +4986,6 @@
prompts "^2.4.2" prompts "^2.4.2"
semver "^7.5.2" semver "^7.5.2"
"@react-native-community/datetimepicker@7.6.1":
version "7.6.1"
resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-7.6.1.tgz#98bdee01e3df490526ee1125e438c2030becac1f"
integrity sha512-g66Q2Kd9Uw3eRL7kkrTsGhi+eXxNoPDRFYH6z78sZQuYjPkUQgJDDMUYgBmaBsQx/fKMtemPrCj1ulGmyi0OSw==
dependencies:
invariant "^2.2.4"
"@react-native-community/eslint-config@^3.0.0": "@react-native-community/eslint-config@^3.0.0":
version "3.2.0" version "3.2.0"
resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-3.2.0.tgz#42f677d5fff385bccf1be1d3b8faa8c086cf998d" resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-3.2.0.tgz#42f677d5fff385bccf1be1d3b8faa8c086cf998d"
@ -18563,6 +18556,11 @@ react-native-appstate-hook@^1.0.6:
resolved "https://registry.yarnpkg.com/react-native-appstate-hook/-/react-native-appstate-hook-1.0.6.tgz#cbc16e7b89cfaea034cabd999f00e99053cabd06" resolved "https://registry.yarnpkg.com/react-native-appstate-hook/-/react-native-appstate-hook-1.0.6.tgz#cbc16e7b89cfaea034cabd999f00e99053cabd06"
integrity sha512-0hPVyf5yLxCSVrrNEuGqN1ZnSSj3Ye2gZex0NtcK/AHYwMc0rXWFNZjBKOoZSouspqu3hXBbQ6NOUSTzrME1AQ== integrity sha512-0hPVyf5yLxCSVrrNEuGqN1ZnSSj3Ye2gZex0NtcK/AHYwMc0rXWFNZjBKOoZSouspqu3hXBbQ6NOUSTzrME1AQ==
react-native-date-picker@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-4.4.0.tgz#fe5b6eb8d85a4a30b2991ada5169a30ce5023ead"
integrity sha512-Axx3byihwwhKRLRVjPAr/UaEysapkRcKmjjM8/05UaVm4Q0xDn2RFUcRdy1QAahhRcjLjlVYhepxvU5bdgy7ZQ==
react-native-dotenv@^3.3.1: react-native-dotenv@^3.3.1:
version "3.4.9" version "3.4.9"
resolved "https://registry.yarnpkg.com/react-native-dotenv/-/react-native-dotenv-3.4.9.tgz#621c5b0c1d0c5c7f569bfe5a1d804bec7885c010" resolved "https://registry.yarnpkg.com/react-native-dotenv/-/react-native-dotenv-3.4.9.tgz#621c5b0c1d0c5c7f569bfe5a1d804bec7885c010"