Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Switch the date input web version to the date-input web control (#1510)

* Switch the date input web version to the date-input web control

* Fix types

authored by

Paul Frazee and committed by
GitHub
28b692a1 1abe5270

+30 -47
+30 -47
src/view/com/util/forms/DateInput.web.tsx
··· 1 1 import React, {useState, useCallback} from 'react' 2 - import { 3 - StyleProp, 4 - StyleSheet, 5 - TextInput as RNTextInput, 6 - TextStyle, 7 - View, 8 - ViewStyle, 9 - } from 'react-native' 10 - import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 11 - import {useTheme} from 'lib/ThemeContext' 2 + import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' 3 + // @ts-ignore types not available -prf 4 + import {unstable_createElement} from 'react-native-web' 12 5 import {usePalette} from 'lib/hooks/usePalette' 13 6 14 7 interface Props { ··· 25 18 } 26 19 27 20 export function DateInput(props: Props) { 28 - const theme = useTheme() 29 21 const pal = usePalette('default') 30 - const palError = usePalette('error') 31 - const [value, setValue] = useState(props.value.toLocaleDateString()) 32 - const [isValid, setIsValid] = useState(true) 22 + const [value, setValue] = useState(toDateInputValue(props.value)) 33 23 34 24 const onChangeInternal = useCallback( 35 - (v: string) => { 36 - setValue(v) 37 - const d = new Date(v) 38 - if (!isNaN(Number(d))) { 39 - setIsValid(true) 40 - props.onChange(d) 41 - } else { 42 - setIsValid(false) 25 + (v: Date) => { 26 + if (!v) { 27 + return 43 28 } 29 + setValue(toDateInputValue(v)) 30 + props.onChange(v) 44 31 }, 45 - [setValue, setIsValid, props], 32 + [setValue, props], 46 33 ) 47 34 48 35 return ( 49 - <View style={[isValid ? pal.border : palError.border, styles.container]}> 50 - <FontAwesomeIcon 51 - icon={['far', 'calendar']} 52 - style={[pal.textLight, styles.icon]} 53 - /> 54 - <RNTextInput 55 - testID={props.testID} 56 - style={[pal.text, styles.textInput]} 57 - placeholderTextColor={pal.colors.textLight} 58 - autoCapitalize="none" 59 - autoCorrect={false} 60 - keyboardAppearance={theme.colorScheme} 61 - onChangeText={v => onChangeInternal(v)} 62 - value={value} 63 - accessibilityLabel={props.accessibilityLabel} 64 - accessibilityHint={props.accessibilityHint} 65 - accessibilityLabelledBy={props.accessibilityLabelledBy} 66 - /> 36 + <View style={[pal.borderDark, styles.container]}> 37 + {unstable_createElement('input', { 38 + type: 'date', 39 + testID: props.testID, 40 + value, 41 + onChange: (e: any) => onChangeInternal(e.currentTarget.valueAsDate), 42 + style: [pal.text, pal.view, pal.border, styles.textInput], 43 + placeholderTextColor: pal.colors.textLight, 44 + accessibilityLabel: props.accessibilityLabel, 45 + accessibilityHint: props.accessibilityHint, 46 + accessibilityLabelledBy: props.accessibilityLabelledBy, 47 + })} 67 48 </View> 68 49 ) 50 + } 51 + 52 + // we need the date in the form yyyy-MM-dd to pass to the input 53 + function toDateInputValue(d: Date): string { 54 + return d.toISOString().split('T')[0] 69 55 } 70 56 71 57 const styles = StyleSheet.create({ 72 58 container: { 73 - borderWidth: 1, 74 - borderRadius: 6, 75 59 flexDirection: 'row', 76 - alignItems: 'center', 77 60 paddingHorizontal: 4, 78 - }, 79 - icon: { 80 - marginLeft: 10, 61 + borderWidth: 1, 62 + borderRadius: 10, 81 63 }, 82 64 textInput: { 83 65 flex: 1, ··· 88 70 letterSpacing: 0.25, 89 71 fontWeight: '400', 90 72 borderRadius: 10, 73 + borderWidth: 0, 91 74 }, 92 75 })