Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-16 21:56:25 -05:00
Code Issues Activity

refactor: actived the rule jsx-max-depth

Browse source
This commit is contained in:
Priscila Oliveira 2019-01-06 12:44:24 +01:00
parent 0a2ea1f35e
commit a5e2853518
5 changed files with 86 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc
View file

@ -81,7 +81,7 @@
"react/jsx-indent": ["error", 2],
"react/jsx-indent-props": ["error", 2],
"react/jsx-key": ["error"],
"react/jsx-max-depth": ["warn", { "max": 2}],
"react/jsx-max-depth": ["error", { "max": 2}],
"react/jsx-max-props-per-line": ["error", {"maximum": 3, "when": "multiline" }],
"react/jsx-no-bind": ["error"],
"react/jsx-no-comment-textnodes": ["error"],

15
src/webui/components/CopyToClipBoard/index.js
View file

@ -29,15 +29,20 @@ const copyToClipBoardUtility = (str: string) => (event: SyntheticEvent<HTMLEleme
}
};
const CopyToClipBoard = ({ text }: IProps): Node => (
<ClipBoardCopy>
<ClipBoardCopyText>{text}</ClipBoardCopyText>
const CopyToClipBoard = ({ text }: IProps): Node => {
const renderToolTipFileCopy = () => (
<Tooltip disableFocusListener={true} title={'Copy to Clipboard'}>
<CopyIcon onClick={copyToClipBoardUtility(text)}>
<FileCopy />
</CopyIcon>
</Tooltip>
</ClipBoardCopy>
);
);
return (
<ClipBoardCopy>
<ClipBoardCopyText>{text}</ClipBoardCopyText>
{renderToolTipFileCopy()}
</ClipBoardCopy>
);
};
export default CopyToClipBoard;

70
src/webui/components/Header/index.js
View file

@ -24,7 +24,7 @@ import RegistryInfoDialog from '../RegistryInfoDialog';
import Label from '../Label';
import Search from '../Search';
import { IProps, IState } from './types';
import { IProps, IState, ToolTipType } from './types';
import { Greetings, NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar, LeftSide, RightSide, IconSearchButton, SearchWrapper } from './styles';
class Header extends Component<IProps, IState> {
@ -129,28 +129,45 @@ class Header extends Component<IProps, IState> {
);
};
renderRightSide = (): Node => {
const { username = '', withoutSearch = false } = this.props;
const installationLink = 'https://verdaccio.org/docs/en/installation';
return (
<RightSide>
{!withoutSearch && (
<Tooltip disableFocusListener={true} title={'Search packages'}>
<IconSearchButton color={'inherit'} onClick={this.handleToggleMNav}>
<IconSearch />
</IconSearchButton>
</Tooltip>
)}
<Tooltip disableFocusListener={true} title={'Documentation'}>
<IconButton blank={true} color={'inherit'} component={Link} to={installationLink}>
renderToolTipIcon = (title: string, type: ToolTipType) => {
let content;
switch (type) {
case 'help':
content = (
<IconButton blank={true} color={'inherit'} component={Link} to={'https://verdaccio.org/docs/en/installation'}>
<Help />
</IconButton>
</Tooltip>
<Tooltip disableFocusListener={true} title={'Registry Information'}>
);
break;
case 'info':
content = (
<IconButton color={'inherit'} id={'header--button-registryInfo'} onClick={this.handleOpenRegistryInfoDialog}>
<Info />
</IconButton>
</Tooltip>
);
break;
case 'search':
content = (
<IconSearchButton color={'inherit'} onClick={this.handleToggleMNav}>
<IconSearch />
</IconSearchButton>
);
break;
}
return (
<Tooltip disableFocusListener={true} title={title}>
{content}
</Tooltip>
);
};
renderRightSide = (): Node => {
const { username = '', withoutSearch = false } = this.props;
return (
<RightSide>
{!withoutSearch && this.renderToolTip('Search packages', 'search')}
{this.renderToolTipIcon('Documentation', 'help')}
{this.renderToolTipIcon('Registry Information', 'info')}
{username ? (
this.renderMenu()
) : (
@ -162,11 +179,21 @@ class Header extends Component<IProps, IState> {
);
};
renderGreetings = () => {
const { username = '' } = this.props;
return (
<>
<Greetings>{`Hi,`}</Greetings>
<Label capitalize={true} limit={140} text={username} weight={'bold'} />
</>
);
};
/**
* render popover menu
*/
renderMenu = (): Node => {
const { onLogout, username = '' } = this.props;
const { onLogout } = this.props;
const { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
@ -187,10 +214,7 @@ class Header extends Component<IProps, IState> {
vertical: 'top',
horizontal: 'right',
}}>
<MenuItem disabled={true}>
<Greetings>{`Hi,`}</Greetings>
<Label capitalize={true} limit={140} text={username} weight={'bold'} />
</MenuItem>
<MenuItem disabled={true}>{this.renderGreetings()}</MenuItem>
<MenuItem id={'header--button-logout'} onClick={onLogout}>
{'Logout'}
</MenuItem>

2
src/webui/components/Header/types.js
View file

@ -17,3 +17,5 @@ export interface IState {
registryUrl: string;
showMobileNavBar: boolean;
}
export type ToolTipType = 'search' | 'help' | 'info';

45
src/webui/components/Login/index.js
View file

@ -190,9 +190,33 @@ export default class LoginModal extends Component {
);
}
renderActions = () => {
const { form: { username, password } } = this.state;
const { onCancel } = this.props;
return (
<DialogActions className={"dialog-footer"}>
<Button
color={"inherit"}
id={"login--form-cancel"}
onClick={onCancel}
type={"button"}
>
{'Cancel'}
</Button>
<Button
color={"inherit"}
disabled={!password.value || !username.value}
id={"login--form-submit"}
type={"submit"}
>
{'Login'}
</Button>
</DialogActions>
);
}
render() {
const { visibility, onCancel, error } = this.props;
const { form: { username, password } } = this.state;
return (
<Dialog
fullWidth={true}
@ -208,24 +232,7 @@ export default class LoginModal extends Component {
{this.renderNameField()}
{this.renderPasswordField()}
</DialogContent>
<DialogActions className={"dialog-footer"}>
<Button
color={"inherit"}
id={"login--form-cancel"}
onClick={onCancel}
type={"button"}
>
{'Cancel'}
</Button>
<Button
color={"inherit"}
disabled={!password.value || !username.value}
id={"login--form-submit"}
type={"submit"}
>
{'Login'}
</Button>
</DialogActions>
{this.renderActions()}
</form>
</Dialog>
);