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
parent
b8f36a8bca
commit
2d9a5db967
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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}
|
||||||
|
|
12
yarn.lock
12
yarn.lock
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue