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

1 files changed, 62 insertions, 0 deletions

diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx
new file mode 100644
index 000000000..1726b71b3
--- /dev/null
+++ b/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,
+}