LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Packages Projects Releases 4 Wiki Activity

added controlled description component

Browse source
This commit is contained in:
bill bittner 2018-01-08 09:39:59 -08:00
parent a88459003e
commit 18ece02b57
2 changed files with 48 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
react/components/PublishForm.jsx
View file

@ -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}

45
react/components/PublishMetadataInputs.jsx
View file

@ -4,9 +4,11 @@ class MetadataInputs extends React.Component {
constructor (props) {
super(props);
this.state = {
showInputs: false,
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>
);