|
| 1 | +/** |
| 2 | + * A searchable chip list component for selecting users |
| 3 | + * Supports keyboard navigation and chip management |
| 4 | + * |
| 5 | + * @param {object} props Component props |
| 6 | + * @param {string} props.value Current search input value |
| 7 | + * @param {(value: string) => void} props.onChangeText Called when input changes |
| 8 | + * @param {(ref: TextInput | null) => void} props.onRef Called with input ref |
| 9 | + * @param {string} props.placeholder Placeholder text for empty input |
| 10 | + * @param {Array<{address: string, name: string}>} props.selectedUsers Currently selected users |
| 11 | + * @param {(address: string) => void} props.onRemoveUser Called when removing a user |
| 12 | + */ |
| 13 | + |
| 14 | +import React, { useRef, useState } from "react"; |
| 15 | +import { TextInput, View, ViewStyle, TextStyle } from "react-native"; |
| 16 | +import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme"; |
| 17 | +import { textSizeStyles } from "@/design-system/Text/Text.styles"; |
| 18 | +import { Text } from "@/design-system/Text"; |
| 19 | +import { Chip } from "./Chip"; |
| 20 | +// import { debugBorder } from "@/utils/debug-style"; |
| 21 | +import logger from "@/utils/logger"; |
| 22 | +// import { debugBorder } from "@/utils/debug-style"; |
| 23 | + |
| 24 | +type Props = { |
| 25 | + value: string; |
| 26 | + onChangeText: (value: string) => void; |
| 27 | + onRef: (ref: TextInput | null) => void; |
| 28 | + placeholder?: string; |
| 29 | + selectedUsers: Array<{ |
| 30 | + address: string; |
| 31 | + name: string; |
| 32 | + avatarUri: string | undefined; |
| 33 | + }>; |
| 34 | + onRemoveUser: (address: string) => void; |
| 35 | +}; |
| 36 | + |
| 37 | +export function UserInlineSearch({ |
| 38 | + value, |
| 39 | + onChangeText, |
| 40 | + onRef, |
| 41 | + placeholder = "Name, address or onchain ID", |
| 42 | + selectedUsers, |
| 43 | + onRemoveUser, |
| 44 | +}: Props) { |
| 45 | + const { theme, themed } = useAppTheme(); |
| 46 | + const [selectedChipIndex, setSelectedChipIndex] = useState<number | null>( |
| 47 | + null |
| 48 | + ); |
| 49 | + const inputRef = useRef<TextInput | null>(null); |
| 50 | + |
| 51 | + const handleKeyPress = ({ nativeEvent: { key } }: any) => { |
| 52 | + logger.debug("key", key); |
| 53 | + if (key === "Backspace" && value === "") { |
| 54 | + if (selectedChipIndex !== null) { |
| 55 | + onRemoveUser(selectedUsers[selectedChipIndex].address); |
| 56 | + setSelectedChipIndex(null); |
| 57 | + } else if (selectedUsers.length > 0) { |
| 58 | + setSelectedChipIndex(selectedUsers.length - 1); |
| 59 | + } |
| 60 | + } else { |
| 61 | + setSelectedChipIndex(null); |
| 62 | + } |
| 63 | + }; |
| 64 | + |
| 65 | + return ( |
| 66 | + <View style={themed($container)}> |
| 67 | + <View style={themed($inputContainer)}> |
| 68 | + <Text preset="formLabel" style={themed($toText)}> |
| 69 | + To |
| 70 | + </Text> |
| 71 | + {selectedUsers.map((user, index) => ( |
| 72 | + <Chip |
| 73 | + avatarUri={user.avatarUri} |
| 74 | + key={user.address} |
| 75 | + name={user.name} |
| 76 | + isSelected={selectedChipIndex === index} |
| 77 | + onPress={() => { |
| 78 | + if (selectedChipIndex === index) { |
| 79 | + setSelectedChipIndex(null); |
| 80 | + } else { |
| 81 | + setSelectedChipIndex(index); |
| 82 | + } |
| 83 | + }} |
| 84 | + /> |
| 85 | + ))} |
| 86 | + |
| 87 | + <TextInput |
| 88 | + ref={(r) => { |
| 89 | + inputRef.current = r; |
| 90 | + onRef(r); |
| 91 | + }} |
| 92 | + style={themed($input) as TextStyle} |
| 93 | + value={value} |
| 94 | + onChangeText={onChangeText} |
| 95 | + placeholder={selectedUsers.length === 0 ? placeholder : ""} |
| 96 | + placeholderTextColor={theme.colors.text.secondary} |
| 97 | + onKeyPress={handleKeyPress} |
| 98 | + autoCapitalize="none" |
| 99 | + autoCorrect={false} |
| 100 | + /> |
| 101 | + </View> |
| 102 | + </View> |
| 103 | + ); |
| 104 | +} |
| 105 | + |
| 106 | +const $container: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({ |
| 107 | + backgroundColor: colors.background.surface, |
| 108 | + marginHorizontal: 16, |
| 109 | + marginVertical: 8, |
| 110 | + // padding: spacing.sm, |
| 111 | + // borderColor: colors.border.subtle, |
| 112 | + // ...debugBorder("blue") |
| 113 | +}); |
| 114 | + |
| 115 | +const $inputContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({ |
| 116 | + flexDirection: "row", |
| 117 | + flexWrap: "wrap", |
| 118 | + alignItems: "center", |
| 119 | + gap: spacing.xxxs, |
| 120 | + // ...debugBorder("yellow"), |
| 121 | +}); |
| 122 | + |
| 123 | +const $input: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({ |
| 124 | + flex: 1, |
| 125 | + minWidth: 120, |
| 126 | + height: spacing["3xl"], |
| 127 | + color: colors.text.primary, |
| 128 | + paddingStart: spacing.xxs, |
| 129 | + ...textSizeStyles.xs, |
| 130 | + // ...debugBorder("purple"), |
| 131 | +}); |
| 132 | + |
| 133 | +const $toText: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({ |
| 134 | + color: colors.text.primary, |
| 135 | + marginEnd: spacing.xxs, |
| 136 | +}); |
0 commit comments