From 23e62b18de9537b50c8b1df2b4744adc030501d0 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 3 Feb 2025 12:27:58 -0800 Subject: Date input improvements (#7639) * add max date, use modern field for birthday input * rm legacy date input * handle simplifying to simpleDateString internally * update jsdoc --- src/view/com/util/forms/DateInput.web.tsx | 76 ------------------------------- 1 file changed, 76 deletions(-) delete mode 100644 src/view/com/util/forms/DateInput.web.tsx (limited to 'src/view/com/util/forms/DateInput.web.tsx') diff --git a/src/view/com/util/forms/DateInput.web.tsx b/src/view/com/util/forms/DateInput.web.tsx deleted file mode 100644 index 988d8aee6..000000000 --- a/src/view/com/util/forms/DateInput.web.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import {useCallback, useState} from 'react' -import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' -// @ts-ignore types not available -prf -import {unstable_createElement} from 'react-native-web' - -import {usePalette} from '#/lib/hooks/usePalette' - -interface Props { - testID?: string - value: Date - onChange: (date: Date) => void - buttonType?: string - buttonStyle?: StyleProp - buttonLabelType?: string - buttonLabelStyle?: StyleProp - accessibilityLabel: string - accessibilityHint: string - accessibilityLabelledBy?: string -} - -export function DateInput(props: Props) { - const pal = usePalette('default') - const [value, setValue] = useState(toDateInputValue(props.value)) - - const onChangeInternal = useCallback( - (v: Date) => { - if (!v) { - return - } - setValue(toDateInputValue(v)) - props.onChange(v) - }, - [setValue, props], - ) - - return ( - - {unstable_createElement('input', { - type: 'date', - testID: props.testID, - value, - onChange: (e: any) => onChangeInternal(e.currentTarget.valueAsDate), - style: [pal.text, pal.view, pal.border, styles.textInput], - placeholderTextColor: pal.colors.textLight, - accessibilityLabel: props.accessibilityLabel, - accessibilityHint: props.accessibilityHint, - accessibilityLabelledBy: props.accessibilityLabelledBy, - })} - - ) -} - -// we need the date in the form yyyy-MM-dd to pass to the input -function toDateInputValue(d: Date): string { - return d.toISOString().split('T')[0] -} - -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - paddingHorizontal: 4, - borderWidth: 1, - borderRadius: 10, - }, - textInput: { - flex: 1, - width: '100%', - paddingVertical: 10, - paddingHorizontal: 10, - fontSize: 17, - letterSpacing: 0.25, - fontWeight: '400', - borderRadius: 10, - borderWidth: 0, - }, -}) -- cgit 1.4.1