47 lines
1.4 KiB
Plaintext
47 lines
1.4 KiB
Plaintext
|
class DropdownTest extends React.Component {
|
||
|
|
state = {
|
||
|
|
selected: null
|
||
|
|
};
|
||
|
|
|
||
|
|
albums = [
|
||
|
|
{ value: 1, artist: 'Radiohead', album: 'In Rainbows', img: 'http://www.clasesdeperiodismo.com/wp-content/uploads/2012/02/radiohead-in-rainbows.png' },
|
||
|
|
{ value: 2, artist: 'QOTSA', album: 'Sons for the Deaf', img: 'http://static.musictoday.com/store/bands/93/product_large/MUDD6669.JPG' },
|
||
|
|
{ value: 3, artist: 'Kendrick Lamar', album: 'Good Kid Maad City', img: 'https://cdn.shopify.com/s/files/1/0131/9332/products/0bd4b1846ba3890f574810dbeddddf8c.500x500x1_grande.png?v=1425070323' },
|
||
|
|
{ value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg' }
|
||
|
|
];
|
||
|
|
|
||
|
|
customItem (item) {
|
||
|
|
const style = {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
backgroundColor: '#ccc',
|
||
|
|
marginRight: 8
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div data-flex="horizontal grow" data-flex-content="center">
|
||
|
|
<img src={item.img} data-flex-grow="min" style={style} />
|
||
|
|
<div data-flex-grow="max" data-flex="vertical" >
|
||
|
|
<strong>{item.artist}</strong>
|
||
|
|
<small>{item.album}</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
render () {
|
||
|
|
return (
|
||
|
|
<Dropdown
|
||
|
|
auto={false}
|
||
|
|
dataSource={this.albums}
|
||
|
|
label='Select your favorite album'
|
||
|
|
template={this.customItem}
|
||
|
|
value={this.state.selected}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return <DropdownTest />;
|
||
|
|
|