refactor: converting autoComplete to Mui's autocomplete

This commit is contained in:
Priscila Oliveira 2019-11-10 16:31:29 +01:00
parent f4dd8b01b4
commit 571d9c3fa7
6 changed files with 124 additions and 20 deletions

View File

@ -214,5 +214,8 @@
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/verdaccio", "url": "https://opencollective.com/verdaccio",
"logo": "https://opencollective.com/verdaccio/logo.txt" "logo": "https://opencollective.com/verdaccio/logo.txt"
},
"dependencies": {
"@material-ui/lab": "4.0.0-alpha.31"
} }
} }

View File

@ -3,10 +3,10 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest'; import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest';
import { css } from 'emotion'; import { css } from 'emotion';
import { default as IconSearch } from '@material-ui/icons/Search'; import { default as IconSearch } from '@material-ui/icons/Search';
import debounce from 'lodash/debounce'; // import debounce from 'lodash/debounce';
import InputAdornment from '../../muiComponents/InputAdornment'; import InputAdornment from '../../muiComponents/InputAdornment';
import AutoComplete from '../AutoComplete'; import AutoComplete from '../../muiComponents/AutoComplete';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
import { callSearch } from '../../utils/calls'; import { callSearch } from '../../utils/calls';
@ -21,10 +21,7 @@ export interface State {
export type cancelAllSearchRequests = () => void; export type cancelAllSearchRequests = () => void;
export type handlePackagesClearRequested = () => void; export type handlePackagesClearRequested = () => void;
export type handleSearch = (event: React.FormEvent<HTMLInputElement>, { newValue, method }: ChangeEvent) => void; export type handleSearch = (event: React.FormEvent<HTMLInputElement>, { newValue, method }: ChangeEvent) => void;
export type handleClickSearch = ( export type handleClickSearch = (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void;
event: KeyboardEvent<HTMLInputElement>,
{ suggestionValue, method }: { suggestionValue: object[]; method: string }
) => void;
export type handleFetchPackages = ({ value: string }) => Promise<void>; export type handleFetchPackages = ({ value: string }) => Promise<void>;
export type onBlur = (event: React.FormEvent<HTMLInputElement>) => void; export type onBlur = (event: React.FormEvent<HTMLInputElement>) => void;
@ -55,19 +52,19 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
return ( return (
<AutoComplete <AutoComplete
color={colors.white} // color={colors.white}
onBlur={this.handleOnBlur} // onBlur={this.handleOnBlur}
onChange={this.handleSearch} onChange={this.handleSearch}
onCleanSuggestions={this.handlePackagesClearRequested} // onCleanSuggestions={this.handlePackagesClearRequested}
onClick={this.handleClickSearch} // onClick={this.handleClickSearch}
onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)} // onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
options={suggestions}
placeholder={CONSTANTS.PLACEHOLDER_TEXT} placeholder={CONSTANTS.PLACEHOLDER_TEXT}
startAdornment={this.getAdorment()} // startAdornment={this.getAdorment()}
suggestions={suggestions} // suggestionsError={error}
suggestionsError={error} // suggestionsLoaded={loaded}
suggestionsLoaded={loaded} // suggestionsLoading={loading}
suggestionsLoading={loading} // value={search}
value={search}
/> />
); );
} }
@ -92,7 +89,7 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
/** /**
* onChange method for the input element. * onChange method for the input element.
*/ */
private handleSearch: handleSearch = (event, { newValue, method }) => { private handleSearch: handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
// stops event bubbling // stops event bubbling
event.stopPropagation(); event.stopPropagation();
if (method === 'type') { if (method === 'type') {

View File

@ -0,0 +1,93 @@
import React, { FC, ChangeEvent, useState } from 'react';
import { default as MuiAutoComplete, AutocompleteProps } from '@material-ui/lab/Autocomplete';
import styled from 'react-emotion';
import CircularProgress from '../CircularProgress';
import TextField from '../TextField';
const StyledAutoComplete = styled(MuiAutoComplete)({
width: '100%',
});
interface Props extends Pick<AutocompleteProps, 'options'> {
placeholder?: string;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}
// function sleep(delay = 0) {
// return new Promise(resolve => {
// setTimeout(resolve, delay);
// });
// }
/* eslint-disable react/jsx-no-bind */
const AutoComplete: FC<Props> = ({ placeholder, options = [], onChange }) => {
const [open, setOpen] = useState(false);
const isLoading = open && options.length === 0;
console.log('options', options);
// useEffect(() => {
// let active = true;
// if (!loading) {
// return undefined;
// }
// (async () => {
// const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');
// await sleep(1e3); // For demo purposes.
// const countries = await response.json();
// if (active) {
// setOptions(Object.keys(countries).map(key => countries[key].item[0]));
// }
// })();
// return () => {
// active = false;
// };
// }, [loading]);
// useEffect(() => {
// if (!open) {
// setOptions([]);
// }
// }, [open]);
return (
<StyledAutoComplete
autoHighlight={true}
// open={open}
// onOpen={() => {
// setOpen(true);
// }}
// onClose={() => {
// setOpen(false);
// }}
// getOptionLabel={option => option.name}
options={options}
loading={isLoading}
renderInput={params => (
<TextField
{...params}
onChange={onChange}
label={placeholder}
fullWidth={true}
InputProps={{
...params.InputProps,
endAdornment: (
<>
{isLoading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</>
),
type: 'search',
}}
/>
)}
/>
);
};
export default AutoComplete;

View File

@ -0,0 +1 @@
export { default } from './AutoComplete';

View File

@ -37,7 +37,7 @@ new WebpackDevServer(compiler, {
proxy: [ proxy: [
{ {
context: ['/-/verdaccio/**', '**/*.tgz'], context: ['/-/verdaccio/**', '**/*.tgz'],
target: 'http://localhost:8080', target: 'http://localhost:4873',
}, },
], ],
}).listen(4872, 'localhost', function(err) { }).listen(4872, 'localhost', function(err) {

View File

@ -1393,6 +1393,16 @@
dependencies: dependencies:
"@babel/runtime" "^7.4.4" "@babel/runtime" "^7.4.4"
"@material-ui/lab@4.0.0-alpha.31":
version "4.0.0-alpha.31"
resolved "https://registry.verdaccio.org/@material-ui%2flab/-/lab-4.0.0-alpha.31.tgz#d566678bd1a9ac969d515145b3b1a2fef4a16a26"
integrity sha512-sn9G2llXVMFbgIqkHvoYLMh5Z4Ea8O1qrecxvQEBs1aWs/0X1GOs8jpX+QkSs6MHvMQXijPmXNH5KVabS2aDUQ==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/utils" "^4.5.2"
clsx "^1.0.4"
prop-types "^15.7.2"
"@material-ui/styles@^4.6.0": "@material-ui/styles@^4.6.0":
version "4.6.0" version "4.6.0"
resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.6.0.tgz#15679fab6dcbe0cc2416f01a22966f3ea26607c5" resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.6.0.tgz#15679fab6dcbe0cc2416f01a22966f3ea26607c5"
@ -3567,7 +3577,7 @@ clone@^1.0.2:
resolved "https://registry.verdaccio.org/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" resolved "https://registry.verdaccio.org/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
clsx@^1.0.2: clsx@^1.0.2, clsx@^1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.verdaccio.org/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec" resolved "https://registry.verdaccio.org/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg== integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==