p5.js-web-editor/client/components/Nav.jsx

205 lines
6.3 KiB
React
Raw Normal View History

import React, { PropTypes } from 'react';
2016-06-24 00:29:55 +02:00
import { Link } from 'react-router';
class Nav extends React.PureComponent {
render() {
return (
<nav className="nav" role="navigation" title="main-navigation">
<ul className="nav__items-left" title="project-menu">
<li className="nav__item">
<button
className="nav__new"
onClick={() => {
if (!this.props.unsavedChanges) {
this.props.newProject();
} else if (this.props.warnIfUnsavedChanges()) {
this.props.newProject();
}
}}
>
New
</button>
</li>
{(() => { // eslint-disable-line
2017-06-06 04:33:32 +02:00
if (
!this.props.project.owner ||
(this.props.project.owner && this.props.project.owner.id === this.props.user.id)
) {
return (
<li className="nav__item">
<button
className="nav__save"
onClick={() => {
if (this.props.user.authenticated) {
this.props.saveProject();
} else {
this.props.showErrorModal('forceAuthentication');
}
}}
2016-08-28 03:52:00 +02:00
>
Save
</button>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.project.id && this.props.user.authenticated) {
return (
<li className="nav__item">
<button className="nav__clone" onClick={this.props.cloneProject}>
Duplicate
</button>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.project.id) {
return (
<li className="nav__item">
<button className="nav__export" onClick={() => this.props.exportProjectAsZip(this.props.project.id)}>
Download
</button>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.project.id) {
return (
<li className="nav__item">
<button onClick={this.props.showShareModal}>
Share
</button>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.user.authenticated) {
return (
<li className="nav__item">
<p className="nav__open">
<Link
to={`/${this.props.user.username}/sketches`}
>
Open
</Link>
</p>
</li>
);
}
})()}
<li className="nav__item">
<p className="nav__open">
<Link
to="/p5/sketches"
>
Examples
</Link>
</p>
</li>
<li className="nav__item">
<p className="nav__reference">
<a
href="https://p5js.org/reference/"
target="_blank"
rel="noopener noreferrer"
>Reference</a>
</p>
</li>
<li className="nav__item">
<p className="nav__about">
<Link to="/about">
About
</Link>
</p>
</li>
</ul>
<ul className="nav__items-right" title="user-menu">
{(() => {
if (!this.props.user.authenticated) {
return (
<li className="nav__item">
<p>
2017-06-06 04:33:32 +02:00
<Link to="/login">Log in</Link>
<span className="nav__item-spacer">or</span>
<Link to="/signup">Sign up</Link>
</p>
</li>
);
}
2016-08-28 02:46:20 +02:00
return (
2016-12-19 23:56:39 +01:00
<li className="nav__item">
<a>Hello, {this.props.user.username}!</a>
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<a>Hello, {this.props.user.username}!</a>
</li>
<li>
<Link to={`/${this.props.user.username}/sketches`}>
My sketches
</Link>
</li>
<li>
<Link to={`/${this.props.user.username}/account`}>
My account
</Link>
</li>
<li>
<button onClick={this.props.logoutUser} >
Log out
</button>
</li>
</ul>
2016-08-28 02:46:20 +02:00
</li>
);
})()}
</ul>
<div className="nav__announce">
This is a preview version of the editor, that has not yet been officially released.
2017-06-06 04:33:32 +02:00
It is in development, you can report bugs <a
href="https://github.com/processing/p5.js-web-editor/issues"
target="_blank"
rel="noopener noreferrer"
>here</a>.
Please use with caution.
</div>
</nav>
);
}
2016-06-24 00:29:55 +02:00
}
Nav.propTypes = {
newProject: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired,
2016-07-15 19:11:50 +02:00
exportProjectAsZip: PropTypes.func.isRequired,
2016-07-15 19:36:33 +02:00
cloneProject: PropTypes.func.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired,
username: PropTypes.string,
id: PropTypes.string
2016-08-18 00:35:15 +02:00
}).isRequired,
project: PropTypes.shape({
id: PropTypes.string,
owner: PropTypes.shape({
id: PropTypes.string
})
2016-08-28 02:46:20 +02:00
}),
2016-08-28 03:52:00 +02:00
logoutUser: PropTypes.func.isRequired,
showShareModal: PropTypes.func.isRequired,
showErrorModal: PropTypes.func.isRequired,
unsavedChanges: PropTypes.bool.isRequired,
warnIfUnsavedChanges: PropTypes.func.isRequired
};
Nav.defaultProps = {
project: {
id: undefined,
owner: undefined
}
};
2016-06-24 00:29:55 +02:00
export default Nav;