Skip to content

Commit

Permalink
Merge pull request #879 from jdkahn/issue/878-collapse
Browse files Browse the repository at this point in the history 
fix(Collapse): number defaultExpandKeys: fix #878
  • Loading branch information
@youluna
youluna authored Jul 15, 2019
2 parents f093363 + 56b031a commit 5c2fe4b
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 3 deletions.
7 changes: 4 additions & 3 deletions src/collapse/collapse.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,11 @@ class Collapse extends React.Component {
onItemClick(key) {
let expandedKeys = this.state.expandedKeys;
if (this.props.accordion) {
expandedKeys = expandedKeys[0] === key ? [] : [key];
expandedKeys = String(expandedKeys[0]) === String(key) ? [] : [key];
} else {
expandedKeys = [...expandedKeys];
const index = expandedKeys.indexOf(key);
const stringKey = String(key);
const index = expandedKeys.findIndex(k => String(k) === stringKey);
const isExpanded = index > -1;
if (isExpanded) {
expandedKeys.splice(index, 1);
Expand Down Expand Up @@ -127,7 +128,7 @@ class Collapse extends React.Component {
let isExpanded = false;

if (this.props.accordion) {
isExpanded = expandedKeys[0] === key;
isExpanded = String(expandedKeys[0]) === String(key);
} else {
isExpanded = expandedKeys.some(expandedKey => {
if (
Expand Down
251 changes: 251 additions & 0 deletions test/collapse/index-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ Enzyme.configure({ adapter: new Adapter() });

const Panel = Collapse.Panel;

/* global describe, it */
/* eslint-disable react/jsx-filename-extension */

describe('Collapse', () => {
describe('render', () => {
it('[normal] Should render from children', () => {
Expand Down Expand Up @@ -39,8 +42,256 @@ describe('Collapse', () => {
const wrapper = mount(<Collapse dataSource={list} />);
assert(wrapper.find(Panel).length === 2);
});

it('should default expand keys passed in `defaultExpandedKeys`', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={[]}>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<div>others</div>
</Collapse>
);
assert(wrapper.find(Collapse).length === 1);
assert(wrapper.find(Panel).length === 2);
});
});

describe('defaultExpandedKeys', () => {
describe('default mode', () => {
it('should expand panel with string key', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={["2"]}>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
const el = wrapper
.find('.next-collapse-panel')
.at(2);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should expand panel with number key', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={[2]}>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
const el = wrapper
.find('.next-collapse-panel')
.at(2);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should close default expanded string keys', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={["2"]}>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
wrapper
.find('.next-collapse-panel-title')
.at(2)
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});

it('should close default expanded number keys', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={[2]}>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
wrapper
.find('.next-collapse-panel-title')
.at(2)
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});

it('should open default expanded datasource using number keys', () => {
const list = [
{
title: 'Well, hello there',
key: 0,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
{
title: 'Well, hello there',
key: 1,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
];
const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
const el = wrapper
.find('.next-collapse-panel')
.at(1);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should close default expanded datasource using number keys on click', () => {
const list = [
{
title: 'Well, hello there',
key: 0,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
{
title: 'Well, hello there',
key: 1,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
];
const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
wrapper
.find('.next-collapse-panel-title')
.at(1)
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});
})

describe('accordian mode', () => {
it('should expand panel with string key', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={["2"]} accordion>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
const el = wrapper
.find('.next-collapse-panel')
.at(2);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should expand panel with number key', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={[2]} accordion>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
const el = wrapper
.find('.next-collapse-panel')
.at(2);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should close default expanded string keys', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={["2"]} accordion>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
wrapper
.find('.next-collapse-panel-title')
.at(2)
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});

it('should close default expanded number keys', () => {
const wrapper = mount(
<Collapse defaultExpandedKeys={[2]} accordion>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>

<div>others</div>
</Collapse>
);
wrapper
.find('.next-collapse-panel-title')
.at(2)
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});

it('should open default expanded datasource using number keys', () => {
const list = [
{
title: 'Well, hello there',
key: 0,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
{
title: 'Well, hello there',
key: 1,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
];
const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} accordion/>);
const el = wrapper
.find('.next-collapse-panel')
.at(1);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should close default expanded datasource using number keys on click', () => {
const list = [
{
title: 'Well, hello there',
key: 0,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
{
title: 'Well, hello there',
key: 1,
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
},
];
const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} accordion/>);
wrapper
.find('.next-collapse-panel-title')
.at(1)
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});
})
})

describe('event', () => {
it('Should expanded by click', () => {
const collapse = (
Expand Down

0 comments on commit 5c2fe4b

Please sign in to comment.