diff options
author | Samuel Newman <mozzius@protonmail.com> | 2025-02-03 12:27:58 -0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2025-02-03 20:27:58 +0000 |
commit | 23e62b18de9537b50c8b1df2b4744adc030501d0 (patch) | |
tree | 557037a964f2a8f7a3583ae84fc3b67b498c1ed2 /src/view/com/util/forms/DateInput.web.tsx | |
parent | 25991af7224cd76a8722f0579c00b73a211a84cc (diff) | |
download | voidsky-23e62b18de9537b50c8b1df2b4744adc030501d0.tar.zst |
Date input improvements (#7639)
* add max date, use modern field for birthday input * rm legacy date input * handle simplifying to simpleDateString internally * update jsdoc
Diffstat (limited to 'src/view/com/util/forms/DateInput.web.tsx')
-rw-r--r-- | src/view/com/util/forms/DateInput.web.tsx | 76 |
1 files changed, 0 insertions, 76 deletions
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<ViewStyle> - buttonLabelType?: string - buttonLabelStyle?: StyleProp<TextStyle> - 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 ( - <View style={[pal.borderDark, styles.container]}> - {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, - })} - </View> - ) -} - -// 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, - }, -}) |