u

code/allapp/allapp-rn/src/app/(tabs)/chat.tsx

@@ -1,34 +1,64 @@
-import { useRouter } from 'expo-router'
-import { Text, View } from 'react-native'
-import { ScrollView } from 'react-native-gesture-handler'
-import { AButton, ACell, ACellGroup } from '@/components/common/ao'
-import EmptyState from '@/components/common/EmptyStatus'
-import { Grid, GridItem } from '@/components/ui/grid'
-import { useMoneyCategoryStore } from '@/store/moneyCategory'
-import { useSpaceStore } from '@/store/space'
+import { useCallback } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Sortable from 'react-native-sortables'
 
-export default function Demo() {
-  const router = useRouter()
-  const spaceStore = useSpaceStore()
+const DATA = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`)
 
-  function NoSpaceTip() {
-    return (
-      <EmptyState
-        description="还没有加入空间，选择一个加入或自己创建一个，开始聊天！"
-        footer={
-          <AButton size="sm">创建 / 加入 空间</AButton>
-        }
-      />
-    )
-  }
+export default function CustomHandleExample() {
+  const renderItem = useCallback(
+    ({ item }: { item: string }) => (
+      <View style={styles.card}>
+        <Text style={styles.text}>{item}</Text>
+        <Sortable.Handle>
+          <View style={styles.handle}>
+            <Text style={styles.handleText}>::</Text>
+          </View>
+        </Sortable.Handle>
+      </View>
+    ),
+    [],
+  )
 
   return (
-    <View className="flex-1">
-      {
-        spaceStore.inSpace()
-          ? (<View></View>)
-          : <NoSpaceTip />
-      }
+    <View style={styles.container}>
+      <Sortable.Grid
+        activeItemScale={1.05}
+        columns={1}
+        data={DATA}
+        overDrag="vertical"
+        renderItem={renderItem}
+        rowGap={10}
+        highlight-next-line
+        customHandle // must be set to use a custom handle
+      />
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    backgroundColor: '#2e8555',
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  container: {
+    padding: 16,
+  },
+  handle: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    borderRadius: 5,
+    padding: 10,
+  },
+  handleText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  text: {
+    color: 'white',
+    flex: 1,
+    fontWeight: 'bold',
+  },
+})