review ts-ignore lines
- Dominant language
- JavaScript
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
https://github.com/ecelis/e-react-ui/blob/a9f03297b9c87178d33705c5544488fba163fab0/src/components/Autocomplete.tsx#L54
```javascript
import * as React from 'react';
import { useState } from 'react';
import * as PropTypes from 'prop-types';
export declare interface IAutocomplete {
items: string[];
label: string;
// TODO handler?: Function
onChange: (event: React.ChangeEvent) => void;
}
export declare interface IState {
activeSuggestion: number;
filteredSuggestions?: string[];
showSuggestions: boolean;
userInput?: string;
}
export default function Autocomplete(
{ items, label, onChange }: IAutocomplete
): JSX.Element {
const [state, setState] = useState({
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: ''
} as IState);
const onChangeHandler = e => {
const userInput = e.currentTarget.value;
const filteredSuggestions = items.filter(
suggestion => {
return suggestion.toLowerCase()
.indexOf(userInput.toLowerCase()) > -1
}
);
setState({
activeSuggestion: 0,
filteredSuggestions,
showSuggestions: true,
userInput: e.currentTarget.value,
});
};
const onClick = e => {
setState({
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: e.currentTarget.innerText,
});
};
const onKeyDown = e => { // TODO review ts-ignore lines
//const { activeSuggestion, filteredSuggestions } = state;
if (e.keyCode === 13) {
const userInput = e.currentTarget.value;
const filteredSuggestions = items.filter(
suggestion => {
return suggestion.toLowerCase()
.indexOf(userInput.toLowerCase()) > -1
}
);
setState({
activeSuggestion: 0,
filteredSuggestions,
showSuggestions: true,
userInput: state?.filteredSuggestions?[state.activeSuggestion]
});
} else if (e.keyCode === 38) {
if (state?.activeSuggestion === 0) { return };
// @ts-ignore
setState({ ...state, ...{activeSuggestion: state?.activeSuggestion - 1} });
} else if (e.keyCode === 40) {
// @ts-ignore
if (state?.activeSuggestion - 1 === state?.filteredSuggestions.length) {
return;
}
// @ts-ignore
setState({ activeSuggestion: state?.activeSuggestion + 1 })
}
}
let suggestionsListComponent;
if (state?.showSuggestions && state.userInput) {
// @ts-ignore
if (state.filteredSuggestions.length) {
suggestionsListComponent = (
- {suggestion}
{state?.filteredSuggestions?.map((suggestion, index) => {
let className;
if (index === state.activeSuggestion) {
className = 'suggestion-active';
}
return (
);
})}
);
} else {
suggestionsListComponent = (
No suggestions available.
);
}
}
return (
{suggestionsListComponent}
);
}
Autocomplete.propTypes = {
label: PropTypes.string,
items: PropTypes.array.isRequired,
handler: PropTypes.func
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.