Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-30 22:34:10 -05:00
Code Issues Activity

chore: clean up component

Browse source
This commit is contained in:
Juan Picado @jotadeveloper 2019-01-20 11:04:37 +01:00
parent 84494f448a
commit eb8ef781b8
No known key found for this signature in database
GPG key ID: 18AC54485952D158
2 changed files with 73 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,19 +1,11 @@
/* eslint react/jsx-max-depth: 0 */
import React, {Component} from 'react'; import React, {Component} from 'react';
import { DetailContextConsumer } from '../../pages/version/index'; import { DetailContextConsumer } from '../../pages/version/index';
// import Paper from '@material-ui/core/Paper/index';
import Typography from '@material-ui/core/Typography/index'; import Typography from '@material-ui/core/Typography/index';
import Grid from '@material-ui/core/Grid/index'; import Grid from '@material-ui/core/Grid/index';
// import CardHeader from '@material-ui/core/CardHeader';
import Card from '@material-ui/core/Card/index'; import Install from '../Install';
import CardContent from '@material-ui/core/CardContent/index';
import { Content } from './styles'; import { Content } from './styles';
import CopyToClipBoard from '../CopyToClipBoard';
import Button from '@material-ui/core/Button';
import CardActions from '@material-ui/core/CardActions';
// import Paper from '@material-ui/core/Paper/index';
class DetailSidebar extends Component<any, any> { class DetailSidebar extends Component<any, any> {
render() { render() {
@ -28,46 +20,34 @@ class DetailSidebar extends Component<any, any> {
renderSideBar = ({packageMeta, packageName}) => { renderSideBar = ({packageMeta, packageName}) => {
return ( return (
<React.Fragment> <Content>
{this.renderDescription(packageMeta, packageName)} <Grid container={true} spacing={24}>
<Content> <Grid item={true} xs={12}>
<Grid container={true} spacing={24}> {this.renderTitle(packageName, packageMeta)}
<Grid item={true} xs={12}>
<Typography color={"textPrimary"} gutterBottom={true} variant={'title'}>
{packageName}
</Typography>
<Typography color={"textSecondary"} gutterBottom={true} variant={'body2'}>
{packageMeta.latest.description}
</Typography>
</Grid>
<Grid item={true} xs={12}>
<Card>
<CardContent>
<CopyToClipBoard text={`npm install ${packageName}`} />
<CopyToClipBoard text={`pnpm install ${packageName}`} />
<CopyToClipBoard text={`yarn add ${packageName}`} />
<CardActions>
<Button color={"primary"} size={'small'} variant={"contained"}>
{'Download Tarball'}
</Button>
</CardActions>
</CardContent>
</Card>
</Grid>
</Grid> </Grid>
</Content> <Grid item={true} xs={12}>
</React.Fragment> {this.renderCopyCLI()}
</Grid>
</Grid>
</Content>
); );
} }
renderDescription = (packageMeta) => { renderTitle = (packageName, packageMeta) => {
console.log('packageMeta', packageMeta); return (
<React.Fragment>
<Typography color={"textPrimary"} gutterBottom={true} variant={'title'}>
{packageName}
</Typography>
<Typography color={"textSecondary"} gutterBottom={true} variant={'body2'}>
{packageMeta.latest.description}
</Typography>
</React.Fragment>
);
}
return ( renderCopyCLI = () => {
<React.Fragment> return <Install />;
</React.Fragment>
);
} }
} }

48
src/webui/components/Install/index.js Normal file
View file

@ -0,0 +1,48 @@
import React, {Component} from 'react';
import { DetailContextConsumer } from '../../pages/version/index';
import Card from '@material-ui/core/Card/index';
import CardContent from '@material-ui/core/CardContent/index';
import CopyToClipBoard from '../CopyToClipBoard';
import Button from '@material-ui/core/Button';
import CardActions from '@material-ui/core/CardActions';
class Install extends Component<any, any> {
render() {
return (
<DetailContextConsumer>
{(context) => {
return this.renderCopyCLI(context);
}}
</DetailContextConsumer>
);
};
renderCopyCLI = ({packageName}) => {
return (
<Card>
<CardContent>
<CopyToClipBoard text={`npm install ${packageName}`} />
<CopyToClipBoard text={`pnpm install ${packageName}`} />
<CopyToClipBoard text={`yarn add ${packageName}`} />
<CardActions>
{this.renderDownloadButton()}
</CardActions>
</CardContent>
</Card>
);
}
renderDownloadButton = () => {
return (
<CardActions>
<Button color={"primary"} size={'small'} variant={"contained"}>
{'Download Tarball'}
</Button>
</CardActions>
);
}
}
export default Install;