sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-11-24 06:54:27 +07:00
Code Issues Releases Wiki Activity

fix: search suggestion container height (#54)

Browse Source 
* fix: search suggestion container height

* fix: updates snapshot
This commit is contained in:
Ayush Sharma 2019-05-11 08:59:39 +02:00 committed by Juan Picado @jotadeveloper
parent 3d752e079c
commit c9fb3c4c50
3 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/webui/components/AutoComplete/index.js
View File

@ -8,11 +8,10 @@ import type { Node } from 'react';
import Autosuggest from 'react-autosuggest'; import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match'; import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse'; import parse from 'autosuggest-highlight/parse';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import { fontWeight } from '../../utils/styles/sizes'; import { fontWeight } from '../../utils/styles/sizes';
import { Wrapper, InputField } from './styles'; import { Wrapper, InputField, SuggestionContainer } from './styles';
import { IProps } from './types'; import { IProps } from './types';
const renderInputComponent = (inputProps): Node => { const renderInputComponent = (inputProps): Node => {
@ -110,12 +109,12 @@ const AutoComplete = ({
// this format avoid arrow function eslint rule // this format avoid arrow function eslint rule
function renderSuggestionsContainer({ containerProps, children, query }) { function renderSuggestionsContainer({ containerProps, children, query }) {
return ( return (
<Paper {...containerProps} square={true}> <SuggestionContainer {...containerProps} square={true}>
{suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)} {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
{suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)} {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
{suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)} {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
{children} {children}
</Paper> </SuggestionContainer>
); );
} }

8
src/webui/components/AutoComplete/styles.js
View File

@ -5,6 +5,7 @@
import React from 'react'; import React from 'react';
import styled, { css } from 'react-emotion'; import styled, { css } from 'react-emotion';
import Paper from '@material-ui/core/Paper';
import TextField from '../TextField'; import TextField from '../TextField';
import { IInputField } from './types'; import { IInputField } from './types';
@ -50,3 +51,10 @@ export const InputField = ({ color, ...others }: IInputField) => (
}} }}
/> />
); );
export const SuggestionContainer = styled(Paper)`
&& {
max-height: 500px;
overflow-y: scroll;
}
`;

2
test/unit/components/__snapshots__/search.spec.js.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e18292mt0\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root-1 MuiFormControl-fullWidth-4 react-autosuggest__input\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root-18 MuiInput-root-5 css-n9ojyg MuiInput-underline-9 MuiInputBase-fullWidth-27 MuiInput-fullWidth-12 MuiInputBase-formControl-19 MuiInput-formControl-6 MuiInputBase-adornedStart-22\\"><div class=\\"MuiInputAdornment-root-35 MuiInputAdornment-positionStart-37\\" style=\\"color: rgb(255, 255, 255);\\"><svg class=\\"MuiSvgIcon-root-40\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input-28 MuiInput-input-13 css-hodoyq MuiInputBase-inputAdornedStart-33\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root-49 MuiPaper-elevation2-53 react-autosuggest__suggestions-container\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`; exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e18292mt0\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root-1 MuiFormControl-fullWidth-4 react-autosuggest__input\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root-18 MuiInput-root-5 css-n9ojyg MuiInput-underline-9 MuiInputBase-fullWidth-27 MuiInput-fullWidth-12 MuiInputBase-formControl-19 MuiInput-formControl-6 MuiInputBase-adornedStart-22\\"><div class=\\"MuiInputAdornment-root-35 MuiInputAdornment-positionStart-37\\" style=\\"color: rgb(255, 255, 255);\\"><svg class=\\"MuiSvgIcon-root-40\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input-28 MuiInput-input-13 css-hodoyq MuiInputBase-inputAdornedStart-33\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root-49 MuiPaper-elevation2-53 react-autosuggest__suggestions-container css-1aijpo3 e18292mt1\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;