forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+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
})