1
0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-11-13 03:35:52 +01:00

fix: applied jsx-max-depth

This commit is contained in:
Priscila Oliveira 2018-12-16 22:25:48 +01:00
parent 3bda0cf566
commit d940da490e
2 changed files with 116 additions and 85 deletions

@ -137,6 +137,56 @@ export default class LoginModal extends Component {
); );
} }
renderNameField = () => {
const { form: { username } } = this.state;
return (
<FormControl
error={!username.value && !username.pristine}
fullWidth={true}
required={username.required}
>
<InputLabel htmlFor={"username"}>Username</InputLabel>
<Input
id={"login--form-username"}
onChange={this.setUsername}
placeholder={"Your username"}
value={username.value}
/>
{!username.value && !username.pristine && (
<FormHelperText id={"username-error"}>
{username.helperText}
</FormHelperText>
)}
</FormControl>
);
}
renderPasswordField = () => {
const { form: { password } } = this.state;
return (
<FormControl
error={!password.value && !password.pristine}
fullWidth={true}
required={password.required}
style={{ marginTop: '8px' }}
>
<InputLabel htmlFor={"password"}>Password</InputLabel>
<Input
id={"login--form-password"}
onChange={this.setPassword}
placeholder={"Your strong password"}
type={"password"}
value={password.value}
/>
{!password.value && !password.pristine && (
<FormHelperText id={"password-error"}>
{password.helperText}
</FormHelperText>
)}
</FormControl>
);
}
render() { render() {
const { visibility, onCancel, error } = this.props; const { visibility, onCancel, error } = this.props;
const { form: { username, password } } = this.state; const { form: { username, password } } = this.state;
@ -152,44 +202,8 @@ export default class LoginModal extends Component {
<DialogTitle>Login</DialogTitle> <DialogTitle>Login</DialogTitle>
<DialogContent> <DialogContent>
{this.renderLoginError(error)} {this.renderLoginError(error)}
<FormControl {this.renderNameField()}
error={!username.value && !username.pristine} {this.renderPasswordField()}
fullWidth={true}
required={username.required}
>
<InputLabel htmlFor={"username"}>Username</InputLabel>
<Input
id={"login--form-username"}
onChange={this.setUsername}
placeholder={"Your username"}
value={username.value}
/>
{!username.value && !username.pristine && (
<FormHelperText id={"username-error"}>
{username.helperText}
</FormHelperText>
)}
</FormControl>
<FormControl
error={!password.value && !password.pristine}
fullWidth={true}
required={password.required}
style={{ marginTop: '8px' }}
>
<InputLabel htmlFor={"password"}>Password</InputLabel>
<Input
id={"login--form-password"}
onChange={this.setPassword}
placeholder={"Your strong password"}
type={"password"}
value={password.value}
/>
{!password.value && !password.pristine && (
<FormHelperText id={"password-error"}>
{password.helperText}
</FormHelperText>
)}
</FormControl>
</DialogContent> </DialogContent>
<DialogActions className={"dialog-footer"}> <DialogActions className={"dialog-footer"}>
<Button <Button

@ -37,52 +37,69 @@ const getInitialsName = (name: string) =>
.reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '') .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '')
.toUpperCase(); .toUpperCase();
const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => ( const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => {
<Wrapper className={'package'} to={`detail/${label}`}> const renderMainInfo = () => (
<Header> <MainInfo>
<MainInfo> <Name>{label}</Name>
<Name>{label}</Name> <Version>{`v${version}`}</Version>
<Version>{`v${version}`}</Version> </MainInfo>
</MainInfo> );
<Overview>
{license && (
<OverviewItem>
<Icon modifiers={spacing('margin', '4px', '5px', '0px', '0px')} name={'license'} pointer={true} />
{license}
</OverviewItem>
)}
<OverviewItem>
<Icon name={'time'} pointer={true} />
<Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)}`}</Published>
{`${formatDateDistance(time)} ago`}
</OverviewItem>
</Overview>
</Header>
<Content>
<Field>
<Author>
<Avatar alt={name} src={avatar}>
{!avatar && getInitialsName(name)}
</Avatar>
<Details>
<Text text={name} weight={'bold'} />
</Details>
</Author>
</Field>
{description && (
<Field>
<Description>{description}</Description>
</Field>
)}
</Content>
{keywords.length > 0 && (
<Footer>
{keywords.sort().map((keyword, index) => (
<Tag key={index}>{keyword}</Tag>
))}
</Footer>
)}
</Wrapper>
);
const renderAuthorInfo = () => (
<Author>
<Avatar alt={name} src={avatar}>
{!avatar && getInitialsName(name)}
</Avatar>
<Details>
<Text text={name} weight={'bold'} />
</Details>
</Author>
);
const renderLicenseInfo = () =>
license && (
<OverviewItem>
<Icon modifiers={spacing('margin', '4px', '5px', '0px', '0px')} name={'license'} pointer={true} />
{license}
</OverviewItem>
);
const renderPublishedInfo = () => (
<OverviewItem>
<Icon name={'time'} pointer={true} />
<Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)}`}</Published>
{`${formatDateDistance(time)} ago`}
</OverviewItem>
);
const renderDescription = () =>
description && (
<Field>
<Description>{description}</Description>
</Field>
);
return (
<Wrapper className={'package'} to={`detail/${label}`}>
<Header>
{renderMainInfo()}
<Overview>
{renderLicenseInfo()}
{renderPublishedInfo()}
</Overview>
</Header>
<Content>
<Field>{renderAuthorInfo()}</Field>
{renderDescription()}
</Content>
{keywords.length > 0 && (
<Footer>
{keywords.sort().map((keyword, index) => (
<Tag key={index}>{keyword}</Tag>
))}
</Footer>
)}
</Wrapper>
);
};
export default Package; export default Package;