p5.js-web-editor/client/modules/IDE/components/ShareModal.jsx

59 lines
2 KiB
React
Raw Normal View History

2016-09-07 02:37:29 +00:00
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
2016-09-07 02:37:29 +00:00
const exitUrl = require('../../../images/exit.svg');
2016-09-28 16:09:42 +00:00
class ShareModal extends React.Component {
componentDidMount() {
this.shareModal.focus();
2016-09-28 16:09:42 +00:00
}
render() {
const hostname = window.location.origin;
return (
<section className="share-modal" ref={(element) => { this.shareModal = element; }} tabIndex="0">
2016-09-28 16:09:42 +00:00
<header className="share-modal__header">
<h2>Share Sketch</h2>
<button className="about__exit-button" onClick={this.props.closeShareModal}>
<InlineSVG src={exitUrl} alt="Close Share Overlay" />
</button>
</header>
<div className="share-modal__section">
<label className="share-modal__label" htmlFor="share-modal__embed">Embed</label>
2016-09-28 16:09:42 +00:00
<input
type="text"
className="share-modal__input"
id="share-modal__embed"
2016-09-28 16:09:42 +00:00
value={`<iframe src="${hostname}/embed/${this.props.projectId}"></iframe>`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label" htmlFor="share-modal__fullscreen">Fullscreen</label>
2016-09-28 16:09:42 +00:00
<input
type="text"
className="share-modal__input"
id="share-modal__fullscreen"
2016-09-28 16:09:42 +00:00
value={`${hostname}/full/${this.props.projectId}`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label" htmlFor="share-modal__edit">Edit</label>
2016-09-28 16:09:42 +00:00
<input
type="text"
className="share-modal__input"
id="share-modal__edit"
value={`${hostname}/${this.props.ownerUsername}/sketches/${this.props.projectId}`}
2016-09-28 16:09:42 +00:00
/>
</div>
</section>
);
}
2016-09-07 02:37:29 +00:00
}
ShareModal.propTypes = {
projectId: PropTypes.string.isRequired,
closeShareModal: PropTypes.func.isRequired,
ownerUsername: PropTypes.string.isRequired
2016-09-07 02:37:29 +00:00
};
export default ShareModal;