Created
July 22, 2014 15:54
-
-
Save bigmoves/00e8934fb3a2b920f02e to your computer and use it in GitHub Desktop.
React.js Playlist Component http://jsbin.com/xoxapako/3/edit
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @jsx React.DOM */ | |
| var Playlist = React.createClass({ | |
| getInitialState: function() { | |
| return { | |
| playlist: [], | |
| savedPlaylists: [], | |
| currentSong: 'black hole sun', | |
| playlistName: '', | |
| currentPlaylist: null, | |
| filterText: '' | |
| }; | |
| }, | |
| onSongChange: function(e) { | |
| this.setState({currentSong: e.target.value}); | |
| }, | |
| onPlaylistChange: function(e) { | |
| this.setState({playlistName: e.target.value}); | |
| }, | |
| onSearchChange: function(e) { | |
| this.setState({filterText: e.target.value}); | |
| }, | |
| addSong: function() { | |
| var currentSong = this.state.currentSong; | |
| var newPlaylist = this.state.playlist.concat([currentSong]); | |
| this.setState({ | |
| playlist: newPlaylist, | |
| currentSong: '' | |
| }); | |
| }, | |
| removeSong: function(song) { | |
| this.state.playlist.splice(this.state.playlist.indexOf(song), 1); | |
| this.setState({ | |
| playlist: this.state.playlist | |
| }); | |
| }, | |
| addPlaylist: function() { | |
| var playlist = { | |
| name: this.state.playlistName, | |
| songs: this.state.playlist | |
| }; | |
| console.log('ls') | |
| var newPlaylist = this.state.savedPlaylists.concat([playlist]); | |
| this.setState({ | |
| playlist: [], | |
| savedPlaylists: newPlaylist, | |
| playlistName: '' | |
| }); | |
| }, | |
| setCurrentPlaylist: function(playlist) { | |
| this.setState({ | |
| currentPlaylist: playlist | |
| }); | |
| }, | |
| playlistItem: function(playlist) { | |
| var self = this; | |
| function onClick() { | |
| return self.setCurrentPlaylist(playlist); | |
| } | |
| return <li onClick={onClick}>{playlist.name}</li>; | |
| }, | |
| songItem: function(song) { | |
| return ( | |
| <div> | |
| <li>{song}</li> | |
| <button onClick={this.removeSong}>Remove</button> | |
| </div> | |
| ); | |
| }, | |
| currentPlaylist: function() { | |
| if (this.state.currentPlaylist) { | |
| return this.state.currentPlaylist.songs.map(function(song) { | |
| return <li>{song}</li> | |
| }); | |
| } | |
| }, | |
| savedPlaylists: function() { | |
| var filterText = this.state.filterText; | |
| return this.state.savedPlaylists.filter(function(playlist) { | |
| return playlist.name.indexOf(filterText) > -1; | |
| }); | |
| }, | |
| render: function() { | |
| return ( | |
| <div> | |
| <h1>React.js Playlist Component</h1> | |
| <input onChange={this.onSongChange} type="text" value={this.state.currentSong}/> | |
| <button onClick={this.addSong}>Add song</button> | |
| <br/> | |
| <input onChange={this.onPlaylistChange} type="text" value={this.state.playlistName}/> | |
| <button onClick={this.addPlaylist}>Add playlist</button> | |
| <br/> | |
| Search: <input onChange={this.onSearchChange}/> | |
| <h1>New Playlist</h1> | |
| <ul> | |
| {this.state.playlist.map(this.songItem)} | |
| </ul> | |
| <h1>Saved Playlists</h1> | |
| <ul> | |
| {this.savedPlaylists().map(this.playlistItem)} | |
| </ul> | |
| <h1>Current Playlist ({this.state.currentPlaylist && this.state.currentPlaylist.name})</h1> | |
| <ul> | |
| {this.currentPlaylist()} | |
| </ul> | |
| </div> | |
| ); | |
| } | |
| }); | |
| React.renderComponent(<Playlist/>, document.body); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment