Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-02-03 23:09:17 -05:00
Code Issues Activity

refactor: added new style

Browse source
This commit is contained in:
Priscila Oliveira 2019-01-20 12:02:02 +01:00
parent 3c541df8e1
commit e9168a8a30
2 changed files with 60 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/webui/components/Versions/index.js
View file

@ -3,37 +3,49 @@
* @flow
*/
import React from 'react';
import List from '@material-ui/core/List/index';
import ListItem from '@material-ui/core/ListItem/index';
import { DetailContextConsumer } from '../../pages/version/index';
import { formatDateDistance } from '../../utils/package';
import { Heading, Spacer, ListItemText } from './styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import React from 'react';
class Versions extends React.Component<any, any> {
class Versions extends React.PureComponent {
render() {
return (
// $FlowFixMe
<DetailContextConsumer>
{({ packageMeta }) => {
const { versions } = packageMeta;
if (versions) {
return this.renderVersions(versions);
}
}}
</DetailContextConsumer>
);
return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta['dist-tags'], packageMeta.versions)}</DetailContextConsumer>;
}
renderPackageList = (packages: object, isVersion: boolean = false) => (
<List>
{Object.keys(packages)
.reverse()
.map(version => (
<ListItem key={version}>
<ListItemText>{version}</ListItemText>
<Spacer />
<ListItemText>{isVersion ? `${formatDateDistance('2017-10-26T09:03:15.044Z')} ago` : packages[version]}</ListItemText>
</ListItem>
))}
</List>
);
// $FlowFixMe
renderVersions(versions) {
return (
<List>
{Object.keys(versions).map(version => (
<ListItem key={version}>{versions[version].name}</ListItem>
))}
</List>
);
}
renderContent = (distTags, versions) => (
<>
{distTags && (
<>
<Heading variant={'subheading'}>{'Current Tags'}</Heading>
{this.renderPackageList(distTags)}
</>
)}
{versions && (
<>
<Heading variant={'subheading'}>{'Version History'}</Heading>
{this.renderPackageList(versions, true)}
</>
)}
</>
);
}
export default Versions;

23
src/webui/components/Versions/styles.js Normal file
View file

@ -0,0 +1,23 @@
import styled from 'react-emotion';
import Typography from '@material-ui/core/Typography';
import { default as MuiListItemText } from '@material-ui/core/ListItemText';
export const Heading = styled(Typography)`
font-weight: 700;
`;
export const Spacer = styled('div')`
flex: 1 1 auto;
border-bottom: 1px dotted rgba(0, 0, 0, .2);
white-space: nowrap;
height: 0.5em;
`;
export const ListItemText = styled(MuiListItemText)`
&& {
flex: none;
color: black;
opacity: .6;
}
`;