callstack / callstack/react-native-paper
Autocomplete text input component
- 主要语言
- 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