docbrown/app/javascript/article-form/elements/moreConfig.jsx
2019-04-16 17:28:19 -04:00

102 lines
2.5 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { h, Component } from 'preact';
import PropTypes from 'prop-types';
import { generateMainImage } from '../actions';
// const ImageManagement = ({ onExit }) => (
export default class MoreConfig extends Component {
constructor(props) {
super(props);
// this.state = {insertionImageUrl: null}
}
handleSeriesButtonClick = e => {
e.preventDefault();
this.props.onConfigChange(e);
};
render() {
const { onExit, passedData, onSaveDraft } = this.props;
let publishedField = '';
let seriesTip = (
<small>
Will this post be part of a series? Give the series a unique name.
(Series visible once it has multiple posts)
</small>
);
if (passedData.allSeries.length > 0) {
const seriesNames = passedData.allSeries.map(name => {
return (
<button
name="series"
onClick={this.props.onConfigChange}
value={name}
>
{name}
</button>
);
});
seriesTip = (
<small>
Existing series:
{seriesNames}
</small>
);
}
if (passedData.published) {
publishedField = (
<div>
<h4>Danger Zone</h4>
<button onClick={onSaveDraft}>Unpublish Post</button>
</div>
);
}
return (
<div className="articleform__overlay">
<h3>Additional Config/Settings</h3>
<button
className="articleform__exitbutton"
data-content="exit"
onClick={onExit}
>
×
</button>
<div>
<label>Canonical URL</label>
<input
type="text"
value={passedData.canonicalUrl}
name="canonicalUrl"
onKeyUp={this.props.onConfigChange}
/>
</div>
<small>
Change meta tag
<code>canonical_url</code>
{' '}
if this post was first published elsewhere
(like your own blog)
</small>
<div>
<label>Series Name</label>
<input
type="text"
value={passedData.series}
name="series"
onKeyUp={this.props.onConfigChange}
/>
</div>
{seriesTip}
<div>
<button className="articleform__donebutton" onClick={onExit}>
Done
</button>
</div>
{publishedField}
</div>
);
}
}
MoreConfig.propTypes = {
onExit: PropTypes.func.isRequired,
};