Editing playlist modal

src/js/components/Modal/EditPlaylistModal.js

@@ -0,0 +1,61 @@
+
+import React from 'react'
+
+import Icon from '../Icon'
+import * as helpers from '../../helpers'
+
+export default class EditPlaylistModal extends React.Component{
+
+	constructor(props){
+		super(props)
+		this.state = {
+			submit_enabled: true,
+			name: this.props.data.name,
+			is_public: this.props.data.is_public
+		}
+	}
+
+	setPlaylistName(name){
+		var submit_enabled = false
+		if( name && name != '' ) submit_enabled = true
+		this.setState({
+			name: name,
+			submit_enabled: submit_enabled
+		})
+	}
+
+	savePlaylist(e){		
+		e.preventDefault();
+		this.props.uiActions.savePlaylist( this.props.data.uri, this.state.name, this.state.is_public )
+		this.props.uiActions.closeModal()
+		return false;
+	}
+
+	render(){
+		return (
+			<div>
+				<h4>Edit playlist</h4>
+				<form onSubmit={(e) => this.savePlaylist(e)}>
+					<div className="field">
+						<input 
+							type="text"
+							placeholder="Playlist name"
+							onChange={ e => this.setPlaylistName( e.target.value )} 
+							value={ this.state.name } />
+					</div>
+					<div className="field checkbox white">
+						<label>
+							<input 
+								type="checkbox"
+								name="playlist_private"
+								checked={ this.state.is_public }
+								onChange={ e => this.setState({ is_public: !this.state.is_public })} />
+							<span className="label">Public</span>
+						</label>
+					</div>
+					<button type="submit" className="primary centered" disabled={!this.state.submit_enabled}>Save</button>
+				</form>
+			</div>
+		)
+	}
+}