fix: verdaccio/jsx-no-style

This commit is contained in:
Griffithtp 2019-06-29 23:39:56 +01:00
parent 4746f4070c
commit 55b1402456
5 changed files with 58 additions and 32 deletions

View File

@ -1,4 +1,5 @@
import React, { KeyboardEvent } from 'react';
import { css } from 'emotion';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
@ -53,12 +54,14 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
<MenuItem component="div" selected={isHighlighted}>
<div>
{parts.map((part, index) => {
return part.highlight ? (
<a href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.semiBold }}>
{part.text}
</a>
) : (
<a href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.light }}>
const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
return (
<a
className={css`
font-weight: ${fw};
`}
href={suggestion.link}
key={String(index)}>
{part.text}
</a>
);

View File

@ -1,5 +1,6 @@
import React, { SyntheticEvent, Component, Fragment, ReactElement } from 'react';
import { Link } from 'react-router-dom';
import { css } from 'emotion';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
@ -141,7 +142,11 @@ class Header extends Component<Props, State> {
const { withoutSearch = false } = this.props;
return (
<LeftSide>
<Link style={{ marginRight: '1em' }} to={'/'}>
<Link
className={css`
margin-right: '1em';
`}
to={'/'}>
{this.renderLogo()}
</Link>
{!withoutSearch && (

View File

@ -10,6 +10,7 @@ import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import { css } from 'emotion';
// @ts-ignore
import classes from './login.scss';
@ -192,7 +193,13 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
form: { password },
} = this.state;
return (
<FormControl error={!password.value && !password.pristine} fullWidth={true} required={password.required} style={{ marginTop: '8px' }}>
<FormControl
className={css`
margin-top: '8px';
`}
error={!password.value && !password.pristine}
fullWidth={true}
required={password.required}>
<InputLabel htmlFor={'password'}>{'Password'}</InputLabel>
<Input id={'login--form-password'} onChange={this.handlePasswordChange} placeholder={'Your strong password'} type={'password'} value={password.value} />
{!password.value && !password.pristine && <FormHelperText id={'password-error'}>{password.helperText}</FormHelperText>}

View File

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import { css } from 'emotion';
import { Props, State } from './types';
import { CommandContainer } from './styles';
@ -14,7 +15,12 @@ import { NODE_MANAGER } from '../../utils/constants';
function TabContainer({ children }): JSX.Element {
return (
<CommandContainer>
<Typography component="div" style={{ padding: 0, minHeight: 170 }}>
<Typography
className={css`
padding: 0;
min-height: 170;
`}
component="div">
{children}
</Typography>
</CommandContainer>

View File

@ -1,5 +1,6 @@
import React, { KeyboardEvent, Component, ReactElement } from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { css } from 'emotion';
import { default as IconSearch } from '@material-ui/icons/Search';
import InputAdornment from '@material-ui/core/InputAdornment';
@ -50,6 +51,28 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
this.requestList = [];
}
public render(): ReactElement<HTMLElement> {
const { suggestions, search, loaded, loading, error } = this.state;
return (
<AutoComplete
color={colors.white}
onBlur={this.handleOnBlur}
onChange={this.handleSearch}
onCleanSuggestions={this.handlePackagesClearRequested}
onClick={this.handleClickSearch}
onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
placeholder={CONSTANTS.PLACEHOLDER_TEXT}
startAdornment={this.getAdorment()}
suggestions={suggestions}
suggestionsError={error}
suggestionsLoaded={loaded}
suggestionsLoading={loading}
value={search}
/>
);
}
/**
* Cancel all the requests which are in pending state.
*/
@ -146,33 +169,15 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
}
};
public render(): ReactElement<HTMLElement> {
const { suggestions, search, loaded, loading, error } = this.state;
return (
<AutoComplete
color={colors.white}
onBlur={this.handleOnBlur}
onChange={this.handleSearch}
onCleanSuggestions={this.handlePackagesClearRequested}
onClick={this.handleClickSearch}
onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
placeholder={CONSTANTS.PLACEHOLDER_TEXT}
startAdornment={this.getAdorment()}
suggestions={suggestions}
suggestionsError={error}
suggestionsLoaded={loaded}
suggestionsLoading={loading}
value={search}
/>
);
}
private requestList: AbortControllerInterface[];
public getAdorment(): JSX.Element {
return (
<InputAdornment position={'start'} style={{ color: colors.white }}>
<InputAdornment
className={css`
color: ${colors.white};
`}
position={'start'}>
<IconSearch />
</InputAdornment>
);