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

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

@@ -1,14 +1,7 @@
 import React, {useState, useCallback} from 'react'
-import {
+import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
-  StyleProp,
+// @ts-ignore types not available -prf
-  StyleSheet,
+import {unstable_createElement} from 'react-native-web'
-  TextInput as RNTextInput,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
 
 interface Props {
@@ -25,59 +18,48 @@ interface Props {
 }
 
 export function DateInput(props: Props) {
-  const theme = useTheme()
   const pal = usePalette('default')
-  const palError = usePalette('error')
+  const [value, setValue] = useState(toDateInputValue(props.value))
-  const [value, setValue] = useState(props.value.toLocaleDateString())
-  const [isValid, setIsValid] = useState(true)
 
   const onChangeInternal = useCallback(
-    (v: string) => {
+    (v: Date) => {
-      setValue(v)
+      if (!v) {
-      const d = new Date(v)
+        return
-      if (!isNaN(Number(d))) {
-        setIsValid(true)
-        props.onChange(d)
-      } else {
-        setIsValid(false)
       }
+      setValue(toDateInputValue(v))
+      props.onChange(v)
     },
-    [setValue, setIsValid, props],
+    [setValue, props],
   )
 
   return (
-    <View style={[isValid ? pal.border : palError.border, styles.container]}>
+    <View style={[pal.borderDark, styles.container]}>
-      <FontAwesomeIcon
+      {unstable_createElement('input', {
-        icon={['far', 'calendar']}
+        type: 'date',
-        style={[pal.textLight, styles.icon]}
+        testID: props.testID,
-      />
+        value,
-      <RNTextInput
+        onChange: (e: any) => onChangeInternal(e.currentTarget.valueAsDate),
-        testID={props.testID}
+        style: [pal.text, pal.view, pal.border, styles.textInput],
-        style={[pal.text, styles.textInput]}
+        placeholderTextColor: pal.colors.textLight,
-        placeholderTextColor={pal.colors.textLight}
+        accessibilityLabel: props.accessibilityLabel,
-        autoCapitalize="none"
+        accessibilityHint: props.accessibilityHint,
-        autoCorrect={false}
+        accessibilityLabelledBy: props.accessibilityLabelledBy,
-        keyboardAppearance={theme.colorScheme}
+      })}
-        onChangeText={v => onChangeInternal(v)}
-        value={value}
-        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: {
-    borderWidth: 1,
-    borderRadius: 6,
     flexDirection: 'row',
-    alignItems: 'center',
     paddingHorizontal: 4,
-  },
+    borderWidth: 1,
-  icon: {
+    borderRadius: 10,
-    marginLeft: 10,
   },
   textInput: {
     flex: 1,
@@ -88,5 +70,6 @@ const styles = StyleSheet.create({
     letterSpacing: 0.25,
     fontWeight: '400',
     borderRadius: 10,
+    borderWidth: 0,
   },
 })