callstack / callstack/react-native-paper

Autocomplete text input component

未关闭
#4,587 4 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
feature request TextInput
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

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

贡献指南

打开贡献指南

调研方向

首先审查现有的 TextInput 和 Menu 组件 API,然后将提议的 TypeScript 组件与 issue 中提到的替代方案进行比较。在实现之前,明确预期的 autocomplete 行为、公共 API、样式和交互状态。组件符合库中现有的模式,并且其预期行为有一致认可的覆盖范围,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
frontend, mobile
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。