Implement autocomplete UI in composer

1 files changed, 76 insertions, 0 deletions

diff --git a/src/view/com/modals/composer/Autocomplete.tsx b/src/view/com/modals/composer/Autocomplete.tsx
new file mode 100644
index 000000000..4e4bdfc8e
--- /dev/null
+++ b/src/view/com/modals/composer/Autocomplete.tsx
@@ -0,0 +1,76 @@
+import React, {useEffect} from 'react'
+import {
+  useWindowDimensions,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolate,
+} from 'react-native-reanimated'
+import {colors} from '../../../lib/styles'
+
+export function Autocomplete({
+  active,
+  items,
+  onSelect,
+}: {
+  active: boolean
+  items: string[]
+  onSelect: (item: string) => void
+}) {
+  const winDim = useWindowDimensions()
+  const positionInterp = useSharedValue<number>(0)
+
+  useEffect(() => {
+    if (active) {
+      positionInterp.value = withTiming(1, {duration: 250})
+    } else {
+      positionInterp.value = withTiming(0, {duration: 250})
+    }
+  }, [positionInterp, active])
+
+  const topAnimStyle = useAnimatedStyle(() => ({
+    top: interpolate(
+      positionInterp.value,
+      [0, 1.0],
+      [winDim.height, winDim.height / 4],
+    ),
+  }))
+  return (
+    <Animated.View style={[styles.outer, topAnimStyle]}>
+      {items.map((item, i) => (
+        <TouchableOpacity
+          key={i}
+          style={styles.item}
+          onPress={() => onSelect(item)}>
+          <Text style={styles.itemText}>@{item}</Text>
+        </TouchableOpacity>
+      ))}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: colors.white,
+    borderTopWidth: 1,
+    borderTopColor: colors.gray2,
+  },
+  item: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.gray1,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  itemText: {
+    fontSize: 16,
+  },
+})