Implement Web versions of the bottom sheet, toast, and progress circle

src/view/com/util/ProgressCircle.native.tsx

@@ -0,0 +1,3 @@
+// @ts-ignore no type definition -prf
+import ProgressCircle from 'react-native-progress/Circle'
+export default ProgressCircle

src/view/com/util/ProgressCircle.tsx

@@ -0,0 +1,20 @@
+import {View} from 'react-native'
+import {CircularProgressbar, buildStyles} from 'react-circular-progressbar'
+
+const ProgressCircle = ({
+  color,
+  progress,
+}: {
+  color?: string
+  progress: number
+}) => {
+  return (
+    <View style={{width: 20, height: 20}}>
+      <CircularProgressbar
+        value={progress * 100}
+        styles={buildStyles({pathColor: color || '#00f'})}
+      />
+    </View>
+  )
+}
+export default ProgressCircle

src/view/com/util/Toast.native.tsx

@@ -0,0 +1,2 @@
+import Toast from 'react-native-root-toast'
+export default Toast

src/view/com/util/Toast.tsx

@@ -0,0 +1,62 @@
+/*
+ * Note: the dataSet properties are used to leverage custom CSS in public/index.html
+ */
+
+import React, {useState, useEffect} from 'react'
+// @ts-ignore no declarations available -prf
+import {Text, View} from 'react-native-web'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+
+interface ActiveToast {
+  text: string
+}
+type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
+
+// globals
+// =
+let globalSetActiveToast: GlobalSetActiveToast | undefined
+let toastTimeout: NodeJS.Timeout | undefined
+
+// components
+// =
+type ToastContainerProps = {}
+const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
+  const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
+  useEffect(() => {
+    globalSetActiveToast = (t: ActiveToast | undefined) => {
+      setActiveToast(t)
+    }
+  })
+  return (
+    <>
+      {activeToast && (
+        <View dataSet={{'toast-container': 1}}>
+          <FontAwesomeIcon icon="check" size={24} />
+          <Text>{activeToast.text}</Text>
+        </View>
+      )}
+    </>
+  )
+}
+
+// exports
+// =
+export default {
+  show(text: string, _opts: any) {
+    console.log('TODO: toast', text)
+    if (toastTimeout) {
+      clearTimeout(toastTimeout)
+    }
+    globalSetActiveToast?.({text})
+    toastTimeout = setTimeout(() => {
+      globalSetActiveToast?.(undefined)
+    }, 2e3)
+  },
+  positions: {
+    TOP: 0,
+  },
+  durations: {
+    LONG: 0,
+  },
+  ToastContainer,
+}