Skip to content

Commit

Permalink
refactor: update content to panel (#359)
Browse files Browse the repository at this point in the history 
* feat: add content for Semantic

* fix

* update
  • Loading branch information
@thinkasany
thinkasany authored Jan 9, 2025
1 parent cc9da67 commit 748ae23
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 45 deletions.
4 changes: 2 additions & 2 deletions assets/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
background-color: #f3f3f3;
}

&-content {
&-panel {
overflow: hidden;
color: @text-color;
padding: 0 16px;
Expand All @@ -99,7 +99,7 @@
}

&-item:last-child {
> .@{prefixCls}-content {
> .@{prefixCls}-panel {
border-radius: 0 0 3px 3px;
}
}
Expand Down
2 changes: 1 addition & 1 deletion assets/motion.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
transition: height 0.3s, opacity 0.3s;
}

&-content-hidden {
&-panel-hidden {
display: none;
}
}
2 changes: 1 addition & 1 deletion docs/examples/_util/motionUtil.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const collapseMotion: CSSMotionProps = {
onEnterEnd: skipOpacityTransition,
onLeaveEnd: skipOpacityTransition,
motionDeadline: 500,
leavedClassName: 'rc-collapse-content-hidden',
leavedClassName: 'rc-collapse-panel-hidden',
};

export default collapseMotion;
2 changes: 1 addition & 1 deletion src/Panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
</div>
<CSSMotion
visible={isActive}
leavedClassName={`${prefixCls}-content-hidden`}
leavedClassName={`${prefixCls}-panel-hidden`}
{...openMotion}
forceRender={forceRender}
removeOnLeave={destroyInactivePanel}
Expand Down
6 changes: 3 additions & 3 deletions src/PanelContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@ const PanelContent = React.forwardRef<
<div
ref={ref}
className={classnames(
`${prefixCls}-content`,
`${prefixCls}-panel`,
{
[`${prefixCls}-content-active`]: isActive,
[`${prefixCls}-content-inactive`]: !isActive,
[`${prefixCls}-panel-active`]: isActive,
[`${prefixCls}-panel-inactive`]: !isActive,
},
className,
)}
Expand Down
68 changes: 31 additions & 37 deletions tests/index.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ describe('collapse', () => {

it('panel works', () => {
expect(collapse.container.querySelectorAll('.rc-collapse-item')).toHaveLength(3);
expect(collapse.container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
expect(collapse.container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
});

it('should render custom arrow icon correctly', () => {
Expand Down Expand Up @@ -82,21 +82,21 @@ describe('collapse', () => {
const header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
fireEvent.click(header);
jest.runAllTimers();
expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
fireEvent.click(header);
jest.runAllTimers();
expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
expect(collapse.container.querySelector('.rc-collapse-panel-inactive')?.innerHTML).toBe(
'<div class="rc-collapse-body">second</div>',
);
expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active').length).toBeFalsy();
});

it('click should not toggle disabled panel state', () => {
const header = collapse.container.querySelector('.rc-collapse-header');
expect(header).toBeTruthy();
fireEvent.click(header!);
jest.runAllTimers();
expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active').length).toBeFalsy();
});

it('should not have role', () => {
Expand Down Expand Up @@ -159,12 +159,12 @@ describe('collapse', () => {

const { container } = render(<ControlledCollapse />);

expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
const header = container.querySelector('.rc-collapse-header');
expect(header).toBeTruthy();
fireEvent.click(header!);
jest.runAllTimers();
expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(2);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(2);
expect(onChangeSpy).toBeCalledWith(['2', '1']);
});
});
Expand Down Expand Up @@ -235,7 +235,7 @@ describe('collapse', () => {
);

// activeKey number 0, should open one item
expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
});

it('click should toggle panel state', () => {
Expand All @@ -255,9 +255,9 @@ describe('collapse', () => {

const header = container.querySelectorAll('.rc-collapse-header')?.[1];
fireEvent.click(header);
expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
fireEvent.click(header);
expect(container.querySelectorAll('.rc-collapse-content-inactive').length).toBeFalsy();
expect(container.querySelectorAll('.rc-collapse-panel-inactive').length).toBeFalsy();
});

function runAccordionTest(element: React.ReactElement) {
Expand All @@ -272,7 +272,7 @@ describe('collapse', () => {
});

it('accordion content, should default open zero item', () => {
expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
});

it('accordion item, should default open zero item', () => {
Expand All @@ -283,12 +283,12 @@ describe('collapse', () => {
let header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
fireEvent.click(header);
jest.runAllTimers();
expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
fireEvent.click(header);
jest.runAllTimers();
expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
});

Expand All @@ -297,12 +297,12 @@ describe('collapse', () => {
expect(header).toBeTruthy();
fireEvent.click(header!);
jest.runAllTimers();
expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
header = collapse.container.querySelectorAll('.rc-collapse-header')?.[2];
fireEvent.click(header);
jest.runAllTimers();
expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
});

Expand All @@ -322,7 +322,7 @@ describe('collapse', () => {
const header = collapse.container.querySelector('.rc-collapse-header');
expect(header).toBeTruthy();
fireEvent.click(header!);
const item = collapse.container.querySelector('.rc-collapse-content');
const item = collapse.container.querySelector('.rc-collapse-panel');
expect(item).toBeTruthy();
expect(item!.getAttribute('role')).toBe('tabpanel');
});
Expand Down Expand Up @@ -356,7 +356,7 @@ describe('collapse', () => {
</Panel>
</Collapse>,
);
expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
});

it('when forceRender is FALSE it should lazy render the panel content', () => {
Expand All @@ -370,7 +370,7 @@ describe('collapse', () => {
</Panel>
</Collapse>,
);
expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
});

it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
Expand All @@ -387,9 +387,9 @@ describe('collapse', () => {

jest.runAllTimers();

expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(1);
expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
const inactiveDom = container.querySelector('div.rc-collapse-content-inactive');
expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(1);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
const inactiveDom = container.querySelector('div.rc-collapse-panel-inactive');
expect(inactiveDom).not.toBeFalsy();
expect(getComputedStyle(inactiveDom!)).toHaveProperty('display', 'none');
});
Expand Down Expand Up @@ -420,23 +420,21 @@ describe('collapse', () => {

fireEvent.keyDown(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
jest.runAllTimers();
expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);

fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
jest.runAllTimers();

expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);

expect(container.querySelector('.rc-collapse-content')).toHaveClass(
'rc-collapse-content-active',
);
expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-active');

fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
jest.runAllTimers();

expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
expect(container.querySelector('.rc-collapse-content')!.className).not.toContain(
'rc-collapse-content-active',
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
expect(container.querySelector('.rc-collapse-panel')!.className).not.toContain(
'rc-collapse-panel-active',
);
});

Expand Down Expand Up @@ -504,19 +502,15 @@ describe('collapse', () => {
</Collapse>,
);

expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
expect(container.querySelector('.rc-collapse-content')).toHaveClass(
'rc-collapse-content-active',
);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-active');
expect(container.querySelector('.rc-collapse-header')?.textContent).toBe('collapse 1');
expect(container.querySelector('.rc-collapse-header')?.querySelectorAll('.arrow')).toHaveLength(
1,
);
fireEvent.click(container.querySelector('.rc-collapse-header')!);
expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
expect(container.querySelector('.rc-collapse-content')).toHaveClass(
'rc-collapse-content-inactive',
);
expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-inactive');
});

describe('prop: collapsible', () => {
Expand Down

0 comments on commit 748ae23

Please sign in to comment.