mirror of
https://github.com/verdaccio/verdaccio.git
synced 2024-12-16 21:56:25 -05:00
fix: applied jsx-max-depth
This commit is contained in:
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() {
|
||||
const { visibility, onCancel, error } = this.props;
|
||||
const { form: { username, password } } = this.state;
|
||||
|
@ -152,44 +202,8 @@ export default class LoginModal extends Component {
|
|||
<DialogTitle>Login</DialogTitle>
|
||||
<DialogContent>
|
||||
{this.renderLoginError(error)}
|
||||
<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>
|
||||
<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>
|
||||
{this.renderNameField()}
|
||||
{this.renderPasswordField()}
|
||||
</DialogContent>
|
||||
<DialogActions className={"dialog-footer"}>
|
||||
<Button
|
||||
|
|
|
@ -37,52 +37,69 @@ const getInitialsName = (name: string) =>
|
|||
.reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '')
|
||||
.toUpperCase();
|
||||
|
||||
const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => (
|
||||
<Wrapper className={'package'} to={`detail/${label}`}>
|
||||
<Header>
|
||||
<MainInfo>
|
||||
<Name>{label}</Name>
|
||||
<Version>{`v${version}`}</Version>
|
||||
</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 Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => {
|
||||
const renderMainInfo = () => (
|
||||
<MainInfo>
|
||||
<Name>{label}</Name>
|
||||
<Version>{`v${version}`}</Version>
|
||||
</MainInfo>
|
||||
);
|
||||
|
||||
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;
|
||||
|
|
Loading…
Reference in a new issue