Khởi tạo ban đầu
This commit is contained in:
Tran Anh Tuan
301
components/Select.tsx
Normal file
301
components/Select.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ScrollView,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from "react-native";
|
||||
|
||||
export interface SelectOption {
|
||||
label: string;
|
||||
value: string | number;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface SelectProps {
|
||||
value?: string | number;
|
||||
defaultValue?: string | number;
|
||||
options: SelectOption[];
|
||||
onChange?: (value: string | number | undefined) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
allowClear?: boolean;
|
||||
showSearch?: boolean;
|
||||
mode?: "single" | "multiple"; // multiple not implemented yet
|
||||
style?: StyleProp<ViewStyle>;
|
||||
size?: "small" | "middle" | "large";
|
||||
listStyle?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Select
|
||||
* A Select component inspired by Ant Design, adapted for React Native.
|
||||
* Supports single selection, search, clear, loading, disabled states.
|
||||
*/
|
||||
const Select: React.FC<SelectProps> = ({
|
||||
value,
|
||||
defaultValue,
|
||||
options,
|
||||
onChange,
|
||||
placeholder = "Select an option",
|
||||
disabled = false,
|
||||
loading = false,
|
||||
allowClear = false,
|
||||
showSearch = false,
|
||||
mode = "single",
|
||||
style,
|
||||
listStyle,
|
||||
size = "middle",
|
||||
}) => {
|
||||
const [selectedValue, setSelectedValue] = useState<
|
||||
string | number | undefined
|
||||
>(value ?? defaultValue);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [containerHeight, setContainerHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedValue(value);
|
||||
}, [value]);
|
||||
|
||||
const filteredOptions = showSearch
|
||||
? options.filter((opt) =>
|
||||
opt.label.toLowerCase().includes(searchText.toLowerCase())
|
||||
)
|
||||
: options;
|
||||
|
||||
const selectedOption = options.find((opt) => opt.value === selectedValue);
|
||||
|
||||
const handleSelect = (val: string | number) => {
|
||||
setSelectedValue(val);
|
||||
onChange?.(val);
|
||||
setIsOpen(false);
|
||||
setSearchText("");
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setSelectedValue(undefined);
|
||||
onChange?.(undefined);
|
||||
};
|
||||
|
||||
const sizeMap = {
|
||||
small: { height: 32, fontSize: 14, paddingHorizontal: 10 },
|
||||
middle: { height: 40, fontSize: 16, paddingHorizontal: 14 },
|
||||
large: { height: 48, fontSize: 18, paddingHorizontal: 18 },
|
||||
};
|
||||
|
||||
const sz = sizeMap[size];
|
||||
|
||||
// Theme colors from context (consistent with other components)
|
||||
const { colors } = useThemeContext();
|
||||
const selectBackgroundColor = disabled
|
||||
? colors.backgroundSecondary
|
||||
: colors.surface;
|
||||
|
||||
return (
|
||||
<View style={styles.wrapper}>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
height: sz.height,
|
||||
paddingHorizontal: sz.paddingHorizontal,
|
||||
backgroundColor: selectBackgroundColor,
|
||||
borderColor: disabled ? colors.border : colors.primary,
|
||||
},
|
||||
style,
|
||||
]}
|
||||
onPress={() => !disabled && !loading && setIsOpen(!isOpen)}
|
||||
disabled={disabled || loading}
|
||||
activeOpacity={0.8}
|
||||
onLayout={(e) => setContainerHeight(e.nativeEvent.layout.height)}
|
||||
>
|
||||
<View style={styles.content}>
|
||||
{loading ? (
|
||||
<ActivityIndicator size="small" color={colors.primary} />
|
||||
) : (
|
||||
<Text
|
||||
style={[
|
||||
styles.text,
|
||||
{
|
||||
fontSize: sz.fontSize,
|
||||
color: disabled
|
||||
? colors.textSecondary
|
||||
: selectedValue
|
||||
? colors.text
|
||||
: colors.textSecondary,
|
||||
},
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{selectedOption?.label || placeholder}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.suffix}>
|
||||
{allowClear && selectedValue && !loading ? (
|
||||
<TouchableOpacity onPress={handleClear} style={styles.icon}>
|
||||
<AntDesign name="close" size={16} color={colors.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
<AntDesign
|
||||
name={isOpen ? "up" : "down"}
|
||||
size={14}
|
||||
color={colors.textSecondary}
|
||||
style={styles.arrow}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{isOpen && (
|
||||
<View
|
||||
style={[
|
||||
styles.dropdown,
|
||||
{
|
||||
top: containerHeight,
|
||||
backgroundColor: colors.background,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{showSearch && (
|
||||
<TextInput
|
||||
style={[
|
||||
styles.searchInput,
|
||||
{
|
||||
backgroundColor: colors.background,
|
||||
borderColor: colors.border,
|
||||
color: colors.text,
|
||||
},
|
||||
]}
|
||||
placeholder="Search..."
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
value={searchText}
|
||||
onChangeText={setSearchText}
|
||||
autoFocus
|
||||
/>
|
||||
)}
|
||||
<ScrollView style={[styles.list, listStyle]}>
|
||||
{filteredOptions.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.value}
|
||||
style={[
|
||||
styles.option,
|
||||
{
|
||||
borderBottomColor: colors.separator,
|
||||
},
|
||||
item.disabled && styles.optionDisabled,
|
||||
selectedValue === item.value && {
|
||||
backgroundColor: colors.primary + "20", // Add transparency to primary color
|
||||
},
|
||||
]}
|
||||
onPress={() => !item.disabled && handleSelect(item.value)}
|
||||
disabled={item.disabled}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.optionText,
|
||||
{
|
||||
color: colors.text,
|
||||
},
|
||||
item.disabled && {
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
selectedValue === item.value && {
|
||||
color: colors.primary,
|
||||
fontWeight: "600",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{item.label}
|
||||
</Text>
|
||||
{selectedValue === item.value && (
|
||||
<AntDesign name="check" size={16} color={colors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
position: "relative",
|
||||
},
|
||||
container: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
text: {
|
||||
// Color is set dynamically via theme
|
||||
},
|
||||
suffix: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
icon: {
|
||||
marginRight: 8,
|
||||
},
|
||||
arrow: {
|
||||
marginLeft: 4,
|
||||
},
|
||||
dropdown: {
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
borderWidth: 1,
|
||||
borderTopWidth: 0,
|
||||
borderRadius: 10,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
elevation: 5,
|
||||
zIndex: 1000,
|
||||
},
|
||||
searchInput: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
padding: 8,
|
||||
margin: 8,
|
||||
},
|
||||
list: {
|
||||
maxHeight: 200,
|
||||
},
|
||||
option: {
|
||||
padding: 12,
|
||||
borderBottomWidth: 1,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
optionDisabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
// optionSelected is handled dynamically via inline styles
|
||||
optionText: {
|
||||
fontSize: 16,
|
||||
},
|
||||
// optionTextDisabled and optionTextSelected are handled dynamically via inline styles
|
||||
});
|
||||
|
||||
export default Select;
|
||||
Reference in New Issue
Block a user