React/Redux - publish component #323
2 changed files with 48 additions and 7 deletions
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import PreviewDropzone from './PreviewDropzone.jsx';
|
||||
import TitleInput from './PublishTitleInput.jsx';
|
||||
import PublishTitleInput from './PublishTitleInput.jsx';
|
||||
import ChannelSelector from './ChannelSelector.jsx';
|
||||
import UrlChooser from './PublishUrlInput.jsx';
|
||||
import PublishUrlInput from './PublishUrlInput.jsx';
|
||||
import PublishThumbnailInput from './PublishThumbnailInput.jsx';
|
||||
import PublishMetadataInputs from './PublishMetadataInputs.jsx';
|
||||
import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
|
||||
|
@ -25,9 +25,9 @@ class PublishForm extends React.Component {
|
|||
<div className="row row--no-bottom">
|
||||
<div className="column column--10">
|
||||
|
||||
<TitleInput
|
||||
<PublishTitleInput
|
||||
title={this.props.title}
|
||||
updateUploaderState={this.updateUploaderState}
|
||||
updateUploaderState={this.props.updateUploaderState}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
@ -47,7 +47,7 @@ class PublishForm extends React.Component {
|
|||
<div className="column column--5 column--sml-10 align-content-top">
|
||||
<div id="publish-active-area" className="row row--padded">
|
||||
|
||||
<UrlChooser
|
||||
<PublishUrlInput
|
||||
fileName={this.props.file.name}
|
||||
claim={this.props.claim}
|
||||
publishToChannel={this.props.publishToChannel}
|
||||
|
|
|
@ -5,8 +5,10 @@ class MetadataInputs extends React.Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
showInputs : false,
|
||||
description: null,
|
||||
};
|
||||
this.toggleShowInputs = this.toggleShowInputs.bind(this);
|
||||
this.handleInput = this.handleInput.bind(this);
|
||||
}
|
||||
toggleShowInputs () {
|
||||
if (this.state.showInputs) {
|
||||
|
@ -15,13 +17,52 @@ class MetadataInputs extends React.Component {
|
|||
this.setState({'showInputs': true});
|
||||
}
|
||||
}
|
||||
handleInput (event) {
|
||||
event.preventDefault();
|
||||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
this.props.updateUploaderState(name, value);
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<div className="row row--padded row--no-top row--no-bottom row--wide">
|
||||
<div className="column column--10">
|
||||
<a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.state.showInputs ? '[hide]' : '[show]'}</a>
|
||||
<a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.state.showInputs ? '[less]' : '[more]'}</a>
|
||||
</div>
|
||||
{this.state.showInputs && (
|
||||
<div id="publish-details" className="row row--padded row--wide">
|
||||
|
||||
<div className="row row--no-top">
|
||||
<div className="column column--3 column--med-10 align-content-top">
|
||||
<label htmlFor="publish-license" className="label">Description:</label>
|
||||
</div><div className="column column--7 column--sml-10">
|
||||
<textarea rows="1" id="publish-description" className="textarea textarea--primary textarea--full-width" name="description" placeholder="Optional description" onChange={this.handleInput}>{this.state.description}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row row--no-top">
|
||||
<div className="column column--3 column--med-10">
|
||||
<label htmlFor="publish-license" className="label">License:</label>
|
||||
</div><div className="column column--7 column--sml-10">
|
||||
<select type="text" id="publish-license" className="select select--primary">
|
||||
<option value=" ">Unspecified</option>
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons">Creative Commons</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row row--no-top">
|
||||
<div className="column column--3">
|
||||
<label htmlFor="publish-nsfw" className="label">Mature:</label>
|
||||
</div><div className="column column--7">
|
||||
<input className="input-checkbox" type="checkbox" id="publish-nsfw" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue