callstack / callstack/react-native-paper

Autocomplete text input component

Đang mở
#4,587 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
feature request TextInput
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

**Is your feature request related to a problem? Please describe.**
I have been using native paper for different projects and I came across a problem several times where I needed an autocomplete component, I tried 2 packages but I would love to have a component from the native paper so that my UI remains consistent

**Describe the solution you'd like**
I implemented an autocomplete component with the use of TextInput + Menu component from native paper
```ts
interface Props> {
theme?: AppTheme;
value: {
origValue: string | undefined;
};
label: string;
data: T[];
displayKey: keyof T;
containerStyle?: StyleProp;
onChange: (text: string) => void;
leadingIcon?: IconSource;
trailingIcon?: IconSource;
textInputstyle?: StyleProp;
menuStyle?: StyleProp;
textInputRight?: ReactNode;
textInputLeft?: ReactNode;
}

const Autocomplete = >({
theme = lightTheme,
value: propValue,
label,
data,
displayKey,
containerStyle = {},
onChange: originOnChange,
textInputstyle = {},
leadingIcon = "",
trailingIcon = "",
menuStyle = {},
textInputRight = null,
textInputLeft = null,
}: Props) => {
const [value, setValue] = useState(propValue.origValue);
const [menuVisible, setMenuVisible] = useState(false);

return (

{
if (value || value?.length === 0) {
setMenuVisible(true);
}
}}
outlineStyle={
menuVisible
? {
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}
: {}
}
onBlur={() => setMenuVisible(false)}
label={label}
{...(textInputRight ? { right: textInputRight } : {})}
{...(textInputLeft ? { left: textInputLeft } : {})}
style={textInputstyle}
onChangeText={(text) => {
originOnChange(text);
setMenuVisible(true);
setValue(text);
}}
value={value}
/>
{menuVisible && (

{data.length === 0 && (


No result found


)}
{data.map((item, index) => (
{
const selectedValue = String(item[displayKey]);
console.log(selectedValue);

setValue(selectedValue);
setMenuVisible(false);
originOnChange(selectedValue);
}}
title={String(item[displayKey])}
/>
))}

)}

);
};

```

**Describe alternatives you've considered**
I have tried two alternatives:
react-native-autocomplete-dropdown and react-native-autocomplete-input
I dropped those packages out of fear since they were backed only by one contributor.

**Additional context**
N/A

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start by reviewing the existing TextInput and Menu component APIs, then compare the proposed TypeScript component with the alternatives named in the issue. Clarify the intended autocomplete behavior, public API, styling, and interaction states before implementation. Done means the component fits the library's existing patterns and has agreed coverage for its expected behavior.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
frontend, mobile
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.