78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
require("./App.css");
|
|
|
|
const React = require("react");
|
|
|
|
const DirectoryListing = require("./DirectoryListing");
|
|
|
|
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 className="app">
|
|
<header className="app-header">
|
|
<h1>
|
|
Index of /{this.props.packageName}@{this.props.packageVersion}
|
|
{this.props.filename}
|
|
</h1>
|
|
|
|
<div className="app-version-selector">
|
|
Version:{" "}
|
|
<select
|
|
id="version"
|
|
defaultValue={this.props.packageVersion}
|
|
onChange={this.handleChange}
|
|
>
|
|
{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 className="app-address">
|
|
{this.props.packageName}@{this.props.packageVersion}
|
|
</address>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
if (process.env.NODE_ENV === "development") {
|
|
const PropTypes = require("prop-types");
|
|
|
|
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
|
|
};
|
|
}
|
|
|
|
module.exports = App;
|