2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2015-09-21 11:01:52 +03:00
|
|
|
import Dropdown from '../../components/dropdown';
|
|
|
|
|
2015-11-12 02:12:33 +03:00
|
|
|
const countries = [
|
|
|
|
{ value: 'EN-gb', label: 'England', img: 'http://' },
|
|
|
|
{ value: 'ES-es', label: 'Spain', img: 'http://' },
|
|
|
|
{ value: 'TH-th', label: 'Thailand', img: 'http://' },
|
|
|
|
{ value: 'EN-en', label: 'USA', img: 'http://' },
|
|
|
|
{ value: 'FR-fr', label: 'France', img: 'http://' }
|
|
|
|
];
|
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class DropdownTest extends React.Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
state = {
|
2015-11-12 02:12:33 +03:00
|
|
|
dropdown1: 'ES-es',
|
|
|
|
dropdown4: 'TH-th'
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-09-21 11:01:52 +03:00
|
|
|
|
2015-11-12 02:12:33 +03:00
|
|
|
handleChange = (dropdown, value) => {
|
|
|
|
const newState = {};
|
|
|
|
newState[dropdown] = value;
|
|
|
|
this.setState(newState);
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-09-21 11:01:52 +03:00
|
|
|
|
|
|
|
customDropdownItem (data) {
|
|
|
|
const style = {
|
|
|
|
width: 32,
|
|
|
|
height: 32,
|
|
|
|
backgroundColor: '#ccc',
|
|
|
|
marginRight: 8
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div data-flex="horizontal grow" data-flex-content="center">
|
|
|
|
<img src={data.img} data-flex-grow="min" style={style} />
|
|
|
|
<div data-flex-grow="max" data-flex="vertical" >
|
|
|
|
<strong>{data.label}</strong>
|
|
|
|
<small>{data.value}</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-21 11:01:52 +03:00
|
|
|
|
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<section>
|
2015-10-08 17:35:34 +03:00
|
|
|
<h5>Dropdown</h5>
|
2015-09-21 11:01:52 +03:00
|
|
|
<p>lorem ipsum...</p>
|
2015-11-12 02:12:33 +03:00
|
|
|
|
|
|
|
<Dropdown
|
|
|
|
onChange={this.handleChange.bind(this, 'dropdown1')}
|
|
|
|
source={countries}
|
|
|
|
template={this.customDropdownItem}
|
|
|
|
value={this.state.dropdown1}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Dropdown
|
|
|
|
label="Countries"
|
|
|
|
onChange={this.handleChange.bind(this, 'dropdown2')}
|
|
|
|
source={countries}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Dropdown
|
|
|
|
onChange={this.handleChange.bind(this, 'dropdown4')}
|
|
|
|
source={countries}
|
|
|
|
value={this.state.dropdown4}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Dropdown
|
|
|
|
source={countries}
|
|
|
|
disabled={true}
|
|
|
|
onChange={this.handleChange.bind(this, 'dropdown3')}
|
|
|
|
/>
|
2015-09-21 11:01:52 +03:00
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
2015-10-21 13:25:07 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
|
|
|
export default DropdownTest;
|