mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 13:44:31 +07:00
fix: verdaccio/jsx-no-style
This commit is contained in:
parent
4746f4070c
commit
55b1402456
@ -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>
|
||||
);
|
||||
|
@ -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 && (
|
||||
|
@ -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>}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user