Telerik
/
kendo-react-dropdowns
зеркало из https://github.com/telerik/kendo-react-dropdowns.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

fix(dropdownlist): fix open/close behaviour when list item is clicked

This commit is contained in:
Alexander Valchev 2016-04-08 14:58:55 +03:00
Родитель 7ba297154c
Коммит 7ad2385677
8 изменённых файлов: 39 добавлений и 32 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

5
src/DropDownList.jsx
Просмотреть файл

@ -345,6 +345,7 @@ export default class DropDownList extends React.Component {
//TODO: aria attributes, title
<span className="k-widget k-dropdown k-header"
onBlur={this.onBlur}
onClick={this.toggle}
onKeyDown={this.onKeyDown}
onKeyPress={this.onKeyPress}
tabIndex={tabIndex}
@ -352,10 +353,10 @@ export default class DropDownList extends React.Component {
{...ariaAttributes}
>
<DropDownWrapper disabled={disabled}>
<span className="k-input" onClick={this.toggle} unselectable="on">
<span className="k-input" unselectable="on">
{this.renderValue()}
</span>
<span className="k-select" onClick={this.toggle} unselectable="on">
<span className="k-select" unselectable="on">
<span className="k-icon k-i-arrow-s"></span>
</span>
</DropDownWrapper>

3
src/ListDefaultItem.jsx
Просмотреть файл

@ -33,7 +33,8 @@ export default class ListDefaultItem extends React.Component {
event.preventDefault();
};
onClick = () => {
onClick = (event) => {
event.preventDefault();
const dataItem = this.props.dataItem;
this.props.onClick((typeof(dataItem) === "object" ? dataItem : null));
};

3
src/ListItem.jsx
Просмотреть файл

@ -41,7 +41,8 @@ export default class ListItem extends React.Component {
event.preventDefault();
};
onClick = () => {
onClick = (event) => {
event.preventDefault();
this.props.onClick(this.props.dataItem, this.props.index);
};

9
test/ComboBox.jsx
Просмотреть файл

@ -1,5 +1,6 @@
import * as React from 'react';
import { shallow } from 'enzyme';
import { click } from './Helpers';
import List from '../src/List';
import ListItem from '../src/ListItem';
import ComboBox from '../src/ComboBox';
@ -56,7 +57,7 @@ describe('ComboBox', () => {
expect(result.state('dataItem')).toEqual(null);
expect(result.state('value')).toEqual('');
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(result.state('dataItem')).toEqual(data[1]);
expect(result.state('value')).toEqual(data[1].value);
});
@ -67,7 +68,7 @@ describe('ComboBox', () => {
expect(result.state('dataItem')).toEqual(null);
expect(result.state('value')).toEqual('');
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(result.state('dataItem')).toEqual(primitives[1]);
expect(result.state('value')).toEqual(primitives[1]);
});
@ -77,7 +78,7 @@ describe('ComboBox', () => {
result = shallow(<ComboBoxContainer data={data} onChange={spy} textField="text" valueField="value" />);
const items = result.find(ComboBox).shallow().find(List).shallow().find(ListItem);
items.at(3).shallow().simulate('click');
click(items.at(3).shallow());
expect(spy).toHaveBeenCalledWith(data[3].value);
});
@ -86,7 +87,7 @@ describe('ComboBox', () => {
result = shallow(<ComboBoxContainer data={primitives} onChange={spy} />);
const items = result.find(ComboBox).shallow().find(List).shallow().find(ListItem);
items.at(2).shallow().simulate('click');
click(items.at(2).shallow());
expect(spy).toHaveBeenCalledWith(primitives[2]);
});
});

34
test/DropDownList.jsx
Просмотреть файл

@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import keycode from 'keycode';
import { keyPress, lastCallArgs } from './Helpers';
import { click, keyPress, lastCallArgs } from './Helpers';
import List from '../src/List';
import ListItem from '../src/ListItem';
@ -187,7 +187,7 @@ describe('DropDownList list click', () => {
);
const items = result.find(List).shallow().find(ListItem);
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(spy).toHaveBeenCalledWith({ text: "bar", value: 2 });
});
@ -197,7 +197,7 @@ describe('DropDownList list click', () => {
result = shallow(<DropDownList data={primitives} onClose={mock} onSelect={spy} />);
const items = result.find(List).shallow().find(ListItem);
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(spy).toHaveBeenCalledWith("bar");
});
@ -216,11 +216,11 @@ describe('DropDownList list click', () => {
);
const items = result.find(List).shallow().find(ListItem);
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(spy).not.toHaveBeenCalled();
});
it('should fire onOpen on arrow click', () => {
it('should fire onOpen on DropDownList click', () => {
const spy = jasmine.createSpy('spy');
const mock = function() {};
result = shallow(
@ -232,13 +232,12 @@ describe('DropDownList list click', () => {
valueField="value"
/>
);
const arrow = result.find("span.k-select");
arrow.simulate("click");
click(result);
expect(spy).toHaveBeenCalled();
});
it('should NOT fire onOpen for disabled component on arrow click', () => {
it('should NOT fire onOpen for disabled component on DropDownList click', () => {
const spy = jasmine.createSpy('spy');
result = shallow(
<DropDownList
@ -249,22 +248,20 @@ describe('DropDownList list click', () => {
valueField="value"
/>
);
const arrow = result.find("span.k-select");
arrow.simulate("click");
click(result);
expect(spy).not.toHaveBeenCalled();
});
it('should NOT fire onOpen on arrow click when the list has no data and no defaultItem', () => {
it('should NOT fire onOpen on DropDownList click when the list has no data and no defaultItem', () => {
const spy = jasmine.createSpy('spy');
result = shallow(<DropDownList data={[]} onOpen={spy} textField="text" valueField="value" />);
const arrow = result.find("span.k-select");
arrow.simulate("click");
click(result);
expect(spy).not.toHaveBeenCalled();
});
it('should fire onOpen on arrow click when the list has no data but is filterable', () => {
it('should fire onOpen on DropDownList click when the list has no data but is filterable', () => {
const spy = jasmine.createSpy('spy');
result = shallow(
<DropDownList
@ -275,9 +272,8 @@ describe('DropDownList list click', () => {
valueField="value"
/>
);
const arrow = result.find("span.k-select");
arrow.simulate("click");
click(result);
expect(spy).toHaveBeenCalled();
});
});
@ -919,7 +915,7 @@ describe('DropDownList change event', () => {
result = shallow(<StatefulDropDownList data={primitives} onChange={spy} />);
const items = result.find(DropDownList).shallow().find(List).shallow().find(ListItem);
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(spy).toHaveBeenCalledWith("bar");
});
@ -937,7 +933,7 @@ describe('DropDownList change event', () => {
);
const defaultItem = result.find(DropDownList).shallow().find(ListDefaultItem).shallow();
defaultItem.simulate('click');
click(defaultItem);
expect(spy).toHaveBeenCalledWith(null);
});
@ -947,7 +943,7 @@ describe('DropDownList change event', () => {
result = shallow(<StatefulDropDownList data={primitives} defaultItem="select..." onChange={spy} />);
const defaultItem = result.find(DropDownList).shallow().find(ListDefaultItem).shallow();
defaultItem.simulate('click');
click(defaultItem);
expect(spy).toHaveBeenCalledWith(null);
});

5
test/Helpers.jsx
Просмотреть файл

@ -1,3 +1,7 @@
function click(shallowWrapper, args) {
shallowWrapper.simulate('click', { preventDefault: function() {}, ...args });
}
function keyPress(shallowWrapper, key) {
let charCode, keyCode;
charCode = keyCode = String(key).charCodeAt(0);
@ -9,6 +13,7 @@ function lastCallArgs(spy) {
}
export {
click,
keyPress,
lastCallArgs
};

9
test/List.jsx
Просмотреть файл

@ -1,5 +1,6 @@
import * as React from 'react';
import { shallow } from 'enzyme';
import { click } from './Helpers';
import ListItem from '../src/ListItem';
import List from '../src/List';
@ -49,10 +50,10 @@ describe('List', () => {
result = shallow(<List data={data} onClick={spy} textField="text" valueField="value" />);
const items = result.find(ListItem);
items.at(0).shallow().simulate('click');
click(items.at(0).shallow());
expect(spy).toHaveBeenCalledWith({ text: 'foo', value: 1 }, 0);
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(spy).toHaveBeenCalledWith({ text: 'bar', value: 2 }, 1);
});
@ -61,10 +62,10 @@ describe('List', () => {
result = shallow(<List data={primitives} onClick={spy} />);
const items = result.find(ListItem);
items.at(0).shallow().simulate('click');
click(items.at(0).shallow());
expect(spy).toHaveBeenCalledWith("foo", 0);
items.at(1).shallow().simulate('click');
click(items.at(1).shallow());
expect(spy).toHaveBeenCalledWith("bar", 1);
});
});

3
test/ListItem.jsx
Просмотреть файл

@ -1,5 +1,6 @@
import * as React from 'react';
import { shallow } from 'enzyme';
import { click } from './Helpers';
import ListItem from '../src/ListItem';
describe('ListItem', () => {
@ -41,7 +42,7 @@ describe('ListItem', () => {
const spy = jasmine.createSpy('spy');
const index = 1;
result = shallow(<ListItem dataItem={dataItem} onClick={spy} index={index}/>);
result.simulate('click');
click(result);
expect(spy).toHaveBeenCalledWith({ text: 'foo', value: 1 }, index);
});
});