Skip to content

Commit

Permalink
fix(Collapse): collapsed panel should be overflow hidden, close aliba…
Browse files Browse the repository at this point in the history 
…ba-fusion#1569
  • Loading branch information
@youluna
youluna committed Feb 13, 2020
1 parent b14cbcd commit c2767ec
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 19 deletions.
6 changes: 6 additions & 0 deletions src/collapse/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@
}
}

&-panel-hidden {
> #{$collapse-prefix}-panel-content {
overflow: hidden;
}
}

#{$collapse-prefix}-panel-icon {
&#{$collapse-prefix}-panel-icon-expanded {
@include icon-size($collapse-icon-size, 0, 0, rotate($collapse-icon-rotation-expanded));
Expand Down
1 change: 1 addition & 0 deletions src/collapse/panel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ class Panel extends React.Component {

const cls = classNames({
[`${prefix}collapse-panel`]: true,
[`${prefix}collapse-panel-hidden`]: !isExpanded,
[`${prefix}collapse-panel-expanded`]: isExpanded,
[`${prefix}collapse-panel-disabled`]: disabled,
[className]: className,
Expand Down
49 changes: 30 additions & 19 deletions test/collapse/index-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,19 @@ describe('Collapse', () => {
assert(wrapper.find(Panel).length === 2);
});

it('hidden panel should be hidden', () => {
const wrapper = mount(
<Collapse>
<Panel title="Pannel Title">Pannel Content</Panel>
<Panel title="Pannel Title">Pannel Content</Panel>
</Collapse>
);
const el = wrapper.find('.next-collapse-panel-hidden');
assert(el.length === 2);
});

it('Should render from dataSource', () => {
let list = [
const list = [
{
title: 'Well, hello there',
content:
Expand Down Expand Up @@ -65,7 +76,7 @@ describe('Collapse', () => {
<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>
);
Expand All @@ -74,15 +85,15 @@ describe('Collapse', () => {
.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>
);
Expand All @@ -91,15 +102,15 @@ describe('Collapse', () => {
.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>
);
Expand All @@ -109,15 +120,15 @@ describe('Collapse', () => {
.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>
);
Expand All @@ -127,7 +138,7 @@ describe('Collapse', () => {
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});

it('should open default expanded datasource using number keys', () => {
const list = [
{
Expand All @@ -149,7 +160,7 @@ describe('Collapse', () => {
.at(1);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should close default expanded datasource using number keys on click', () => {
const list = [
{
Expand Down Expand Up @@ -182,7 +193,7 @@ describe('Collapse', () => {
<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>
);
Expand All @@ -191,15 +202,15 @@ describe('Collapse', () => {
.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>
);
Expand All @@ -208,15 +219,15 @@ describe('Collapse', () => {
.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>
);
Expand All @@ -226,15 +237,15 @@ describe('Collapse', () => {
.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>
);
Expand All @@ -244,7 +255,7 @@ describe('Collapse', () => {
.simulate('click');
assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
});

it('should open default expanded datasource using number keys', () => {
const list = [
{
Expand All @@ -266,7 +277,7 @@ describe('Collapse', () => {
.at(1);
assert(el.hasClass('next-collapse-panel-expanded'));
});

it('should close default expanded datasource using number keys on click', () => {
const list = [
{
Expand Down

0 comments on commit c2767ec

Please sign in to comment.