Switch date picker libraries (#3126) · bwc9876.dev/witchsky.app@2d9a5db

+1 -1

package.json

··· 63 63 "@react-native-camera-roll/camera-roll": "^5.2.2", 64 64 "@react-native-clipboard/clipboard": "^1.10.0", 65 65 "@react-native-community/blur": "^4.3.0", 66 - "@react-native-community/datetimepicker": "7.6.1", 67 66 "@react-native-masked-view/masked-view": "0.3.0", 68 67 "@react-native-menu/menu": "^0.8.0", 69 68 "@react-native-picker/picker": "2.6.1", ··· 152 151 "react-keyed-flatten-children": "^3.0.0", 153 152 "react-native": "0.73.2", 154 153 "react-native-appstate-hook": "^1.0.6", 154 + "react-native-date-picker": "^4.4.0", 155 155 "react-native-drawer-layout": "^4.0.0-alpha.3", 156 156 "react-native-fs": "^2.20.0", 157 157 "react-native-gesture-handler": "~2.14.0",

+19 -20

src/components/forms/DateField/index.android.tsx

··· 1 1 import React from 'react' 2 2 import {View, Pressable} from 'react-native' 3 - import DateTimePicker, { 4 - BaseProps as DateTimePickerProps, 5 - } from '@react-native-community/datetimepicker' 6 3 7 4 import {useTheme, atoms} from '#/alf' 8 5 import {Text} from '#/components/Typography' ··· 15 12 localizeDate, 16 13 toSimpleDateString, 17 14 } from '#/components/forms/DateField/utils' 15 + import DatePicker from 'react-native-date-picker' 16 + import {isAndroid} from 'platform/detection' 18 17 19 18 export * as utils from '#/components/forms/DateField/utils' 20 19 export const Label = TextField.Label ··· 38 37 const {chromeFocus, chromeError, chromeErrorHover} = 39 38 TextField.useSharedInputStyles() 40 39 41 - const onChangeInternal = React.useCallback< 42 - Required<DateTimePickerProps>['onChange'] 43 - >( 44 - (_event, date) => { 40 + const onChangeInternal = React.useCallback( 41 + (date: Date) => { 45 42 setOpen(false) 46 43 47 - if (date) { 48 - const formatted = toSimpleDateString(date) 49 - onChangeDate(formatted) 50 - } 44 + const formatted = toSimpleDateString(date) 45 + onChangeDate(formatted) 51 46 }, 52 47 [onChangeDate, setOpen], 53 48 ) 54 49 50 + const onCancel = React.useCallback(() => { 51 + setOpen(false) 52 + }, []) 53 + 55 54 return ( 56 55 <View style={[atoms.relative, atoms.w_full]}> 57 56 <Pressable ··· 89 88 </Pressable> 90 89 91 90 {open && ( 92 - <DateTimePicker 91 + <DatePicker 92 + modal={isAndroid} 93 + open={isAndroid} 94 + theme={t.name === 'light' ? 'light' : 'dark'} 95 + date={new Date(value)} 96 + onConfirm={onChangeInternal} 97 + onCancel={onCancel} 98 + mode="date" 99 + testID={`${testID}-datepicker`} 93 100 aria-label={label} 94 101 accessibilityLabel={label} 95 102 accessibilityHint={undefined} 96 - testID={`${testID}-datepicker`} 97 - mode="date" 98 - timeZoneName={'Etc/UTC'} 99 - display="spinner" 100 - // @ts-ignore applies in iOS only -prf 101 - themeVariant={t.name === 'light' ? 'light' : 'dark'} 102 - value={new Date(value)} 103 - onChange={onChangeInternal} 104 103 /> 105 104 )} 106 105 </View>

+8 -12

src/components/forms/DateField/index.tsx

··· 1 1 import React from 'react' 2 2 import {View} from 'react-native' 3 - import DateTimePicker, { 4 - DateTimePickerEvent, 5 - } from '@react-native-community/datetimepicker' 6 3 7 4 import {useTheme, atoms} from '#/alf' 8 5 import * as TextField from '#/components/forms/TextField' 9 6 import {toSimpleDateString} from '#/components/forms/DateField/utils' 10 7 import {DateFieldProps} from '#/components/forms/DateField/types' 8 + import DatePicker from 'react-native-date-picker' 11 9 12 10 export * as utils from '#/components/forms/DateField/utils' 13 11 export const Label = TextField.Label ··· 28 26 const t = useTheme() 29 27 30 28 const onChangeInternal = React.useCallback( 31 - (event: DateTimePickerEvent, date: Date | undefined) => { 29 + (date: Date | undefined) => { 32 30 if (date) { 33 31 const formatted = toSimpleDateString(date) 34 32 onChangeDate(formatted) ··· 39 37 40 38 return ( 41 39 <View style={[atoms.relative, atoms.w_full]}> 42 - <DateTimePicker 40 + <DatePicker 41 + theme={t.name === 'light' ? 'light' : 'dark'} 42 + date={new Date(value)} 43 + onDateChange={onChangeInternal} 44 + mode="date" 45 + testID={`${testID}-datepicker`} 43 46 aria-label={label} 44 47 accessibilityLabel={label} 45 48 accessibilityHint={undefined} 46 - testID={`${testID}-datepicker`} 47 - mode="date" 48 - timeZoneName={'Etc/UTC'} 49 - display="spinner" 50 - themeVariant={t.name === 'light' ? 'light' : 'dark'} 51 - value={new Date(value)} 52 - onChange={onChangeInternal} 53 49 /> 54 50 </View> 55 51 )

+1 -1

src/state/queries/preferences/index.ts

··· 169 169 170 170 return useMutation<void, unknown, {birthDate: Date}>({ 171 171 mutationFn: async ({birthDate}: {birthDate: Date}) => { 172 - await getAgent().setPersonalDetails({birthDate}) 172 + await getAgent().setPersonalDetails({birthDate: birthDate.toISOString()}) 173 173 // triggers a refetch 174 174 await queryClient.invalidateQueries({ 175 175 queryKey: preferencesQueryKey,

+17 -15

src/view/com/util/forms/DateInput.tsx

··· 1 1 import React, {useState, useCallback} from 'react' 2 2 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' 3 - import DateTimePicker, { 4 - DateTimePickerEvent, 5 - } from '@react-native-community/datetimepicker' 6 3 import { 7 4 FontAwesomeIcon, 8 5 FontAwesomeIconStyle, ··· 14 11 import {useTheme} from 'lib/ThemeContext' 15 12 import {usePalette} from 'lib/hooks/usePalette' 16 13 import {getLocales} from 'expo-localization' 14 + import DatePicker from 'react-native-date-picker' 17 15 18 16 const LOCALE = getLocales()[0] 19 17 ··· 43 41 }, [props.handleAsUTC]) 44 42 45 43 const onChangeInternal = useCallback( 46 - (event: DateTimePickerEvent, date: Date | undefined) => { 44 + (date: Date) => { 47 45 setShow(false) 48 - if (date) { 49 - props.onChange(date) 50 - } 46 + props.onChange(date) 51 47 }, 52 48 [setShow, props], 53 49 ) ··· 55 51 const onPress = useCallback(() => { 56 52 setShow(true) 57 53 }, [setShow]) 54 + 55 + const onCancel = useCallback(() => { 56 + setShow(false) 57 + }, []) 58 58 59 59 return ( 60 60 <View> ··· 80 80 </Button> 81 81 )} 82 82 {(isIOS || show) && ( 83 - <DateTimePicker 84 - testID={props.testID ? `${props.testID}-datepicker` : undefined} 83 + <DatePicker 84 + timeZoneOffsetInMinutes={0} 85 + modal={isAndroid} 86 + open={isAndroid} 87 + theme={theme.colorScheme} 88 + date={props.value} 89 + onDateChange={onChangeInternal} 90 + onConfirm={onChangeInternal} 91 + onCancel={onCancel} 85 92 mode="date" 86 - timeZoneName={props.handleAsUTC ? 'Etc/UTC' : undefined} 87 - display="spinner" 88 - // @ts-ignore applies in iOS only -prf 89 - themeVariant={theme.colorScheme} 90 - value={props.value} 91 - onChange={onChangeInternal} 93 + testID={props.testID ? `${props.testID}-datepicker` : undefined} 92 94 accessibilityLabel={props.accessibilityLabel} 93 95 accessibilityHint={props.accessibilityHint} 94 96 accessibilityLabelledBy={props.accessibilityLabelledBy}

+5 -7

yarn.lock

··· 4986 4986 prompts "^2.4.2" 4987 4987 semver "^7.5.2" 4988 4988 4989 - "@react-native-community/datetimepicker@7.6.1": 4990 - version "7.6.1" 4991 - resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-7.6.1.tgz#98bdee01e3df490526ee1125e438c2030becac1f" 4992 - integrity sha512-g66Q2Kd9Uw3eRL7kkrTsGhi+eXxNoPDRFYH6z78sZQuYjPkUQgJDDMUYgBmaBsQx/fKMtemPrCj1ulGmyi0OSw== 4993 - dependencies: 4994 - invariant "^2.2.4" 4995 - 4996 4989 "@react-native-community/eslint-config@^3.0.0": 4997 4990 version "3.2.0" 4998 4991 resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-3.2.0.tgz#42f677d5fff385bccf1be1d3b8faa8c086cf998d" ··· 18562 18555 version "1.0.6" 18563 18556 resolved "https://registry.yarnpkg.com/react-native-appstate-hook/-/react-native-appstate-hook-1.0.6.tgz#cbc16e7b89cfaea034cabd999f00e99053cabd06" 18564 18557 integrity sha512-0hPVyf5yLxCSVrrNEuGqN1ZnSSj3Ye2gZex0NtcK/AHYwMc0rXWFNZjBKOoZSouspqu3hXBbQ6NOUSTzrME1AQ== 18558 + 18559 + react-native-date-picker@^4.4.0: 18560 + version "4.4.0" 18561 + resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-4.4.0.tgz#fe5b6eb8d85a4a30b2991ada5169a30ce5023ead" 18562 + integrity sha512-Axx3byihwwhKRLRVjPAr/UaEysapkRcKmjjM8/05UaVm4Q0xDn2RFUcRdy1QAahhRcjLjlVYhepxvU5bdgy7ZQ== 18565 18563 18566 18564 react-native-dotenv@^3.3.1: 18567 18565 version "3.4.9"

Configure Feed

Configure Feed