From cfb29ce325fe692108579b5142f20494284b2721 Mon Sep 17 00:00:00 2001 From: Thomas Klein Date: Tue, 15 Oct 2019 07:36:35 +0200 Subject: [PATCH] fix: added typings for react-autosuggest (#200) --- package.json | 3 +++ src/components/AutoComplete/AutoComplete.tsx | 12 ++++++------ src/components/Search/Search.tsx | 9 +++++---- yarn.lock | 7 +++++++ 4 files changed, 21 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index fcffa35..9213c21 100644 --- a/package.json +++ b/package.json @@ -213,5 +213,8 @@ "type": "opencollective", "url": "https://opencollective.com/verdaccio", "logo": "https://opencollective.com/verdaccio/logo.txt" + }, + "dependencies": { + "@types/react-autosuggest": "9.3.11" } } diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx index a7be397..40105f4 100644 --- a/src/components/AutoComplete/AutoComplete.tsx +++ b/src/components/AutoComplete/AutoComplete.tsx @@ -1,6 +1,6 @@ import React, { KeyboardEvent } from 'react'; import { css } from 'emotion'; -import Autosuggest from 'react-autosuggest'; +import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest'; import match from 'autosuggest-highlight/match'; import parse from 'autosuggest-highlight/parse'; import MenuItem from '@material-ui/core/MenuItem'; @@ -20,12 +20,12 @@ interface Props { placeholder?: string; startAdornment?: JSX.Element; disableUnderline?: boolean; - onChange?: (event: KeyboardEvent, { newValue, method }: { newValue: string; method: string }) => void; - onSuggestionsFetch?: ({ value: string }) => Promise; + onChange: (event: React.FormEvent, params: ChangeEvent) => void; + onSuggestionsFetch: ({ value: string }) => Promise; onCleanSuggestions?: () => void; - onClick?: (event: KeyboardEvent, { suggestionValue, method }: { suggestionValue: string[]; method: string }) => void; + onClick?: (event: React.FormEvent, data: SuggestionSelectedEventData) => void; onKeyDown?: (event: KeyboardEvent) => void; - onBlur?: (event: KeyboardEvent) => void; + onBlur?: (event: React.FormEvent) => void; } /* eslint-disable react/jsx-sort-props */ @@ -113,7 +113,7 @@ const AutoComplete = ({ onSuggestionsFetchRequested: onSuggestionsFetch, onSuggestionsClearRequested: onCleanSuggestions, }; - const inputProps = { + const inputProps: InputProps = { value, onChange, placeholder, diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 0d37feb..0143284 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -1,5 +1,6 @@ import React, { KeyboardEvent, Component, ReactElement } from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; +import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest'; import { css } from 'emotion'; import { default as IconSearch } from '@material-ui/icons/Search'; import InputAdornment from '@material-ui/core/InputAdornment'; @@ -19,10 +20,10 @@ export interface State { export type cancelAllSearchRequests = () => void; export type handlePackagesClearRequested = () => void; -export type handleSearch = (event: KeyboardEvent, { newValue, method }: { newValue: string; method: string }) => void; +export type handleSearch = (event: React.FormEvent, { newValue, method }: ChangeEvent) => void; export type handleClickSearch = (event: KeyboardEvent, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void; export type handleFetchPackages = ({ value: string }) => Promise; -export type onBlur = (event: KeyboardEvent) => void; +export type onBlur = (event: React.FormEvent) => void; const CONSTANTS = { API_DELAY: 300, @@ -117,8 +118,8 @@ export class Search extends Component, State> { * When an user select any package by clicking or pressing return key. */ private handleClickSearch = ( - event: React.KeyboardEvent, - { suggestionValue, method }: { suggestionValue: string[]; method: string } + event: React.FormEvent, + { suggestionValue, method }: SuggestionSelectedEventData ): void | undefined => { const { history } = this.props; // stops event bubbling diff --git a/yarn.lock b/yarn.lock index 45d1d13..bf38d37 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1699,6 +1699,13 @@ resolved "https://registry.verdaccio.org/@types%2fq/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw== +"@types/react-autosuggest@9.3.11": + version "9.3.11" + resolved "https://registry.yarnpkg.com/@types/react-autosuggest/-/react-autosuggest-9.3.11.tgz#2b554a4ac350da5bcd50ad368972f2e80e879232" + integrity sha512-OY0N0BZ2MiD4W3oTquRvpqYucExiLNgXgu4JkXZ2gKs4lONiS7B+fSotiQnjLdGIy+4sW3tzTvfbQfPgTZGInA== + dependencies: + "@types/react" "*" + "@types/react-dom@*": version "16.9.1" resolved "https://registry.verdaccio.org/@types%2freact-dom/-/react-dom-16.9.1.tgz#79206237cba9532a9f870b1cd5428bef6b66378c"