callstack / callstack/react-native-paper

Autocomplete text input component

Ouverte
#4,587 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
feature request TextInput
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

**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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.