96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
/** @jsx jsx */
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Global, css, jsx } from '@emotion/core';
|
|
|
|
import DirectoryListing from './DirectoryListing';
|
|
|
|
const globalStyles = css`
|
|
body {
|
|
font-size: 14px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
Helvetica, Arial, sans-serif;
|
|
line-height: 1.7;
|
|
padding: 0px 10px 5px;
|
|
color: #000000;
|
|
}
|
|
`;
|
|
|
|
export default class App extends React.Component {
|
|
static defaultProps = {
|
|
availableVersions: []
|
|
};
|
|
|
|
handleChange = event => {
|
|
window.location.href = window.location.href.replace(
|
|
'@' + this.props.packageVersion,
|
|
'@' + event.target.value
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div css={{ maxWidth: 900, margin: '0 auto' }}>
|
|
<Global styles={globalStyles} />
|
|
|
|
<header
|
|
css={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between'
|
|
}}
|
|
>
|
|
<h1>
|
|
Index of /{this.props.packageName}@{this.props.packageVersion}
|
|
{this.props.filename}
|
|
</h1>
|
|
|
|
<div css={{ float: 'right', lineHeight: '2.25em' }}>
|
|
Version:{' '}
|
|
<select
|
|
id="version"
|
|
defaultValue={this.props.packageVersion}
|
|
onChange={this.handleChange}
|
|
css={{ fontSize: '1em' }}
|
|
>
|
|
{this.props.availableVersions.map(v => (
|
|
<option key={v} value={v}>
|
|
{v}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<hr />
|
|
|
|
<DirectoryListing
|
|
filename={this.props.filename}
|
|
entry={this.props.entry}
|
|
entries={this.props.entries}
|
|
/>
|
|
|
|
<hr />
|
|
|
|
<address css={{ textAlign: 'right' }}>
|
|
{this.props.packageName}@{this.props.packageVersion}
|
|
</address>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const entryType = PropTypes.object;
|
|
|
|
App.propTypes = {
|
|
packageName: PropTypes.string.isRequired,
|
|
packageVersion: PropTypes.string.isRequired,
|
|
availableVersions: PropTypes.arrayOf(PropTypes.string),
|
|
filename: PropTypes.string.isRequired,
|
|
entry: entryType.isRequired,
|
|
entries: PropTypes.objectOf(entryType).isRequired
|
|
};
|
|
}
|