@streamplace/components 0.8.6 → 0.8.9

package/src/components/ui/select.tsx

@@ -1,15 +1,20 @@
-import { ChevronDown } from "lucide-react-native";
-import { forwardRef, useState } from "react";
-import {
-  FlatList,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { Check, ChevronDown } from "lucide-react-native";
+import { forwardRef } from "react";
+import { View } from "react-native";
+import { zero } from "../..";
 import { useTheme } from "../../lib/theme/theme";
+import { flex } from "../../ui";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+} from "./dropdown";
 import { Text } from "./text";
 
+const { layout, px, py, borders, r, gap } = zero;
+
 export interface SelectItem {
   label: string;
   value: string;
@@ -25,7 +30,7 @@ export interface SelectProps {
   style?: any;
 }
 
-export const Select = forwardRef<any, SelectProps>(
+export const Select = forwardRef<View, SelectProps>(
   (
     {
       value,
@@ -38,138 +43,105 @@ export const Select = forwardRef<any, SelectProps>(
     ref,
   ) => {
     const { theme } = useTheme();
-    const [isOpen, setIsOpen] = useState(false);
 
     const selectedItem = items.find((item) => item.value === value);
 
-    const handleSelect = (itemValue: string) => {
-      onValueChange(itemValue);
-      setIsOpen(false);
-    };
-
-    const styles = createStyles(theme, disabled);
-
     return (
-      <>
-        <TouchableOpacity
-          ref={ref}
-          style={[styles.container, style]}
-          onPress={() => !disabled && setIsOpen(true)}
-          disabled={disabled}
-        >
-          <Text style={styles.value}>{selectedItem?.label || placeholder}</Text>
-          <ChevronDown size={16} color={theme.colors.textMuted} />
-        </TouchableOpacity>
+      <DropdownMenu>
+        <DropdownMenuTrigger disabled={disabled}>
+          <View
+            ref={ref}
+            style={[
+              {
+                width: "100%",
+                paddingHorizontal: theme.spacing[3],
+                paddingVertical: theme.spacing[3],
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: theme.borderRadius.md,
+                backgroundColor: disabled
+                  ? theme.colors.muted
+                  : theme.colors.card,
+                minHeight: theme.touchTargets.minimum,
+                opacity: disabled ? 0.5 : 1,
+              },
+              style,
+            ]}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                gap: 8,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: disabled
+                    ? theme.colors.textDisabled
+                    : theme.colors.text,
+                  flex: 1,
+                }}
+              >
+                {selectedItem?.label || placeholder}
+              </Text>
+              <ChevronDown size={16} color={theme.colors.textMuted} />
+            </View>
+          </View>
+        </DropdownMenuTrigger>
 
-        <Modal
-          visible={isOpen}
-          transparent
-          animationType="fade"
-          onRequestClose={() => setIsOpen(false)}
+        <ResponsiveDropdownMenuContent
+          align="start"
+          style={[
+            {
+              maxHeight: 400,
+            },
+          ]}
         >
-          <TouchableOpacity
-            style={styles.overlay}
-            activeOpacity={1}
-            onPress={() => setIsOpen(false)}
-          >
-            <View style={styles.dropdown}>
-              <FlatList
-                data={items}
-                keyExtractor={(item) => item.value}
-                renderItem={({ item }) => (
-                  <TouchableOpacity
-                    style={[
-                      styles.item,
-                      item.value === value && styles.selectedItem,
-                    ]}
-                    onPress={() => handleSelect(item.value)}
-                  >
+          {items.map((item, index) => (
+            <View key={item.value}>
+              <DropdownMenuItem onPress={() => onValueChange(item.value)}>
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    gap: 8,
+                  }}
+                >
+                  <View style={[gap.all[1], py[1], flex.values[1]]}>
                     <Text
-                      style={[
-                        styles.itemText,
-                        item.value === value ? styles.selectedItemText : {},
-                      ]}
+                      style={{
+                        fontWeight: item.value === value ? "500" : "400",
+                      }}
+                      color={item.value === value ? "primary" : "default"}
                     >
                       {item.label}
                     </Text>
                     {item.description && (
-                      <Text style={styles.itemDescription}>
+                      <Text size="sm" color="muted">
                         {item.description}
                       </Text>
                     )}
-                  </TouchableOpacity>
-                )}
-                style={styles.list}
-              />
+                  </View>
+                  {item.value === value ? (
+                    <Check size={16} color={theme.colors.primary} />
+                  ) : (
+                    <View style={{ width: 16 }} />
+                  )}
+                </View>
+              </DropdownMenuItem>
+              {index < items.length - 1 && <DropdownMenuSeparator />}
             </View>
-          </TouchableOpacity>
-        </Modal>
-      </>
+          ))}
+        </ResponsiveDropdownMenuContent>
+      </DropdownMenu>
     );
   },
 );
 
 Select.displayName = "Select";
-
-function createStyles(theme: any, disabled: boolean) {
-  return StyleSheet.create({
-    container: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      paddingHorizontal: theme.spacing[3],
-      paddingVertical: theme.spacing[3],
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: theme.borderRadius.md,
-      backgroundColor: disabled ? theme.colors.muted : theme.colors.card,
-      minHeight: theme.touchTargets.minimum,
-    },
-    value: {
-      fontSize: 16,
-      color: disabled ? theme.colors.textDisabled : theme.colors.text,
-      flex: 1,
-    },
-    overlay: {
-      flex: 1,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    dropdown: {
-      backgroundColor: theme.colors.background,
-      borderRadius: theme.borderRadius.md,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      maxHeight: 300,
-      width: "90%",
-      maxWidth: 400,
-      ...theme.shadows.lg,
-    },
-    list: {
-      maxHeight: 300,
-    },
-    item: {
-      paddingHorizontal: theme.spacing[4],
-      paddingVertical: theme.spacing[3],
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.border,
-    },
-    selectedItem: {
-      backgroundColor: theme.colors.primary,
-    },
-    itemText: {
-      fontSize: 16,
-      color: theme.colors.text,
-    },
-    selectedItemText: {
-      color: theme.colors.primaryForeground,
-      fontWeight: "500",
-    },
-    itemDescription: {
-      fontSize: 14,
-      color: theme.colors.textMuted,
-      marginTop: theme.spacing[1],
-    },
-  });
-}