commit
48a0e1859c
|
@ -152,9 +152,12 @@ const factory = (Input) => {
|
|||
|
||||
renderValue = (item, idx) => {
|
||||
const { theme } = this.props;
|
||||
const className = item.value === this.props.value ? theme.selected : null;
|
||||
const className = classnames({
|
||||
[theme.selected]: item.value === this.props.value,
|
||||
[theme.disabled]: item.disabled
|
||||
});
|
||||
return (
|
||||
<li key={idx} className={className} onClick={this.handleSelect.bind(this, item.value)}>
|
||||
<li key={idx} className={className} onClick={!item.disabled ? this.handleSelect.bind(this, item.value) : null}>
|
||||
{this.props.template ? this.props.template(item) : item.label}
|
||||
</li>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
import expect from 'expect';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import {
|
||||
renderIntoDocument,
|
||||
scryRenderedDOMComponentsWithClass,
|
||||
Simulate
|
||||
} from 'react-addons-test-utils';
|
||||
import sinon from 'sinon';
|
||||
import theme from '../theme.scss';
|
||||
import Dropdown, { Dropdown as RawDropdown } from '../Dropdown';
|
||||
|
||||
|
||||
describe('Dropdown', function () {
|
||||
describe('#renderValue', function () {
|
||||
const source = [
|
||||
{ value: 'EN-gb', label: 'England' },
|
||||
{ value: 'ES-es', label: 'Spain', disabled: true },
|
||||
{ value: 'TH-th', label: 'Thailand', disabled: true },
|
||||
{ value: 'EN-en', label: 'USA'}
|
||||
];
|
||||
it('renders dropdown item with disabled style', function () {
|
||||
const tree = renderIntoDocument(<Dropdown theme={theme} source={source} />);
|
||||
const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
|
||||
expect(disabled.length).toEqual(2);
|
||||
});
|
||||
it('does not call onChange callback when disabled dorpdown item is clicked', function () {
|
||||
const spy = sinon.spy();
|
||||
const tree = renderIntoDocument(<Dropdown
|
||||
theme={theme}
|
||||
source={source}
|
||||
value={source[0].value}
|
||||
onChange={spy}
|
||||
/>);
|
||||
const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
|
||||
expect(spy.called).toEqual(false);
|
||||
Simulate.click(disabled[0]);
|
||||
expect(spy.called).toEqual(false);
|
||||
const selected = scryRenderedDOMComponentsWithClass(tree, theme.selected);
|
||||
Simulate.click(selected[0]);
|
||||
expect(spy.called).toEqual(true);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -1,6 +1,7 @@
|
|||
$dropdown-color-white: $color-white !default;
|
||||
$dropdown-color-primary: $color-primary !default;
|
||||
$dropdown-color-primary-contrast: $color-primary-contrast !default;
|
||||
$dropdown-color-disabled: rgba($color-black, 0.26) !default;
|
||||
$dropdown-value-hover-background: $palette-grey-200 !default;
|
||||
$dropdown-overflow-max-height: 45vh !default;
|
||||
$dropdown-value-border-radius: .2 * $unit !default;
|
||||
|
|
|
@ -128,11 +128,15 @@
|
|||
padding: $unit;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
&:hover:not(.disabled) {
|
||||
background-color: $dropdown-value-hover-background;
|
||||
}
|
||||
&.selected {
|
||||
color: $dropdown-color-primary;
|
||||
}
|
||||
&.disabled {
|
||||
color: $dropdown-color-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,17 +1,28 @@
|
|||
class DropdownTest extends React.Component {
|
||||
state = {
|
||||
selected: 3
|
||||
albumSelected: 3,
|
||||
countrySelected: 'ES-es'
|
||||
};
|
||||
|
||||
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' }
|
||||
{ value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg', disabled: true }
|
||||
];
|
||||
countries = [
|
||||
{ value: 'EN-gb', label: 'England' },
|
||||
{ value: 'ES-es', label: 'Spain'},
|
||||
{ value: 'TH-th', label: 'Thailand', disabled: true },
|
||||
{ value: 'EN-en', label: 'USA'}
|
||||
];
|
||||
|
||||
handleChange = (value) => {
|
||||
this.setState({selected: value});
|
||||
handleAlbumChange = (value) => {
|
||||
this.setState({albumSelected: value});
|
||||
};
|
||||
|
||||
handleCountryChange = (value) => {
|
||||
this.setState({countrySelected: value});
|
||||
};
|
||||
|
||||
customItem (item) {
|
||||
|
@ -48,14 +59,21 @@ class DropdownTest extends React.Component {
|
|||
|
||||
render () {
|
||||
return (
|
||||
<Dropdown
|
||||
auto={false}
|
||||
source={this.albums}
|
||||
onChange={this.handleChange}
|
||||
label='Select your favorite album'
|
||||
template={this.customItem}
|
||||
value={this.state.selected}
|
||||
/>
|
||||
<div>
|
||||
<Dropdown
|
||||
auto={false}
|
||||
source={this.albums}
|
||||
onChange={this.handleAlbumChange}
|
||||
label='Select your favorite album'
|
||||
template={this.customItem}
|
||||
value={this.state.albumSelected}
|
||||
/>
|
||||
<Dropdown
|
||||
source={this.countries}
|
||||
onChange={this.handleCountryChange}
|
||||
value={this.state.countrySelected}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue