Skip to content

Commit f477221

Browse files
thinkasanythinkasany
authored
feat: improve Semantic for collapse (#358)
* feat: improve Semantic for collapse * remove content
1 parent 14034b7 commit f477221

File tree

6 files changed

+53
-27
lines changed

6 files changed

+53
-27
lines changed

‎assets/index.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
}
6262
.@{prefixCls}-collapsible-header {
6363
cursor: default;
64-
.@{prefixCls}-header-text {
64+
.@{prefixCls}-title {
6565
cursor: pointer;
6666
}
6767
.@{prefixCls}-expand-icon {

‎src/Panel.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
5252
typeof expandIcon === 'function' ? expandIcon(props) : <i className="arrow" />;
5353
const iconNode = iconNodeInner && (
5454
<div
55-
className={`${prefixCls}-expand-icon`}
55+
className={classNames(`${prefixCls}-expand-icon`, customizeClassNames?.icon)}
56+
style={styles?.icon}
5657
{...(['header', 'icon'].includes(collapsible) ? collapsibleProps : {})}
5758
>
5859
{iconNodeInner}
@@ -74,13 +75,13 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
7475
{
7576
[`${prefixCls}-collapsible-${collapsible}`]: !!collapsible,
7677
},
77-
customizeClassNames.header,
78+
customizeClassNames?.header,
7879
);
7980

8081
// ======================== HeaderProps ========================
8182
const headerProps: React.HTMLAttributes<HTMLDivElement> = {
8283
className: headerClassName,
83-
style: styles.header,
84+
style: styles?.header,
8485
...(['header', 'icon'].includes(collapsible) ? {} : collapsibleProps),
8586
};
8687

@@ -90,7 +91,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
9091
<div {...headerProps}>
9192
{showArrow && iconNode}
9293
<span
93-
className={`${prefixCls}-header-text`}
94+
className={classNames(`${prefixCls}-title`, customizeClassNames?.title)}
95+
style={styles?.title}
9496
{...(collapsible === 'header' ? collapsibleProps : {})}
9597
>
9698
{header}

‎src/PanelContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const PanelContent = React.forwardRef<
4545
role={role}
4646
>
4747
<div
48-
className={classnames(`${prefixCls}-content-box`, customizeClassNames?.body)}
48+
className={classnames(`${prefixCls}-body`, customizeClassNames?.body)}
4949
style={styles?.body}
5050
>
5151
{children}

‎src/interface.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,17 @@ export interface CollapseProps {
3939
items?: ItemType[];
4040
}
4141

42+
export type SemanticName = 'header' | 'title' | 'body' | 'icon';
4243
export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
4344
id?: string;
4445
header?: string | React.ReactNode;
4546
prefixCls?: string;
4647
headerClass?: string;
4748
showArrow?: boolean;
4849
className?: string;
49-
classNames?: { header?: string; body?: string };
50+
classNames?: Partial<Record<SemanticName, string>>;
5051
style?: object;
51-
styles?: { header?: React.CSSProperties; body?: React.CSSProperties };
52+
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
5253
isActive?: boolean;
5354
openMotion?: CSSMotionProps;
5455
destroyInactivePanel?: boolean;

‎tests/__snapshots__/index.spec.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`collapse props items should work with nested 1`] = `
2222
/>
2323
</div>
2424
<span
25-
class="rc-collapse-header-text"
25+
class="rc-collapse-title"
2626
>
2727
collapse 1
2828
</span>
@@ -46,7 +46,7 @@ exports[`collapse props items should work with nested 1`] = `
4646
/>
4747
</div>
4848
<span
49-
class="rc-collapse-header-text"
49+
class="rc-collapse-title"
5050
>
5151
collapse 2
5252
</span>
@@ -77,7 +77,7 @@ exports[`collapse props items should work with nested 1`] = `
7777
/>
7878
</div>
7979
<span
80-
class="rc-collapse-header-text"
80+
class="rc-collapse-title"
8181
>
8282
collapse 3
8383
</span>
@@ -101,7 +101,7 @@ exports[`collapse props items should work with nested 1`] = `
101101
/>
102102
</div>
103103
<span
104-
class="rc-collapse-header-text"
104+
class="rc-collapse-title"
105105
>
106106
title 3
107107
</span>

‎tests/index.spec.tsx‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ describe('collapse', () => {
8686
fireEvent.click(header);
8787
jest.runAllTimers();
8888
expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
89-
'<div class="rc-collapse-content-box">second</div>',
89+
'<div class="rc-collapse-body">second</div>',
9090
);
9191
expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
9292
});
@@ -528,7 +528,7 @@ describe('collapse', () => {
528528
</Panel>
529529
</Collapse>,
530530
);
531-
expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
531+
expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
532532
fireEvent.click(container.querySelector('.rc-collapse-header')!);
533533
expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
534534
});
@@ -540,10 +540,10 @@ describe('collapse', () => {
540540
</Panel>
541541
</Collapse>,
542542
);
543-
expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
543+
expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
544544
fireEvent.click(container.querySelector('.rc-collapse-header')!);
545545
expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
546-
fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
546+
fireEvent.click(container.querySelector('.rc-collapse-title')!);
547547
expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
548548
});
549549
it('should work when value is icon', () => {
@@ -569,7 +569,7 @@ describe('collapse', () => {
569569
</Panel>
570570
</Collapse>,
571571
);
572-
expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
572+
expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
573573
expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
574574
fireEvent.click(container.querySelector('.rc-collapse-header')!);
575575
expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
@@ -583,7 +583,7 @@ describe('collapse', () => {
583583
</Panel>
584584
</Collapse>,
585585
);
586-
expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
586+
expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
587587

588588
expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
589589

@@ -613,7 +613,7 @@ describe('collapse', () => {
613613
</Collapse>,
614614
);
615615

616-
fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
616+
fireEvent.click(container.querySelector('.rc-collapse-title')!);
617617
expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
618618
});
619619
});
@@ -861,25 +861,48 @@ describe('collapse', () => {
861861
});
862862

863863
it('should support styles and classNames', () => {
864+
const customStyles = {
865+
header: { color: 'red' },
866+
body: { color: 'blue' },
867+
title: { color: 'green' },
868+
icon: { color: 'yellow' },
869+
};
870+
const customClassnames = {
871+
header: 'custom-header',
872+
body: 'custom-body',
873+
title: 'custom-title',
874+
icon: 'custom-icon',
875+
};
876+
864877
const { container } = render(
865878
<Collapse
866879
activeKey={['1']}
867880
items={[
868881
{
869882
key: '1',
870883
label: 'title',
871-
styles: { header: { color: 'red' }, body: { color: 'blue' } },
872-
classNames: { header: 'header-class', body: 'body-class' },
884+
styles: customStyles,
885+
classNames: customClassnames,
873886
},
874887
]}
875888
/>,
876889
);
877-
878-
expect(container.querySelector('.rc-collapse-header')).toHaveClass('header-class');
879-
expect(container.querySelector('.rc-collapse-content-box')).toHaveClass('body-class');
880-
881-
expect(container.querySelector('.rc-collapse-header')).toHaveStyle({ color: 'red' });
882-
expect(container.querySelector('.rc-collapse-content-box')).toHaveStyle({ color: 'blue' });
890+
const headerElement = container.querySelector('.rc-collapse-header') as HTMLElement;
891+
const bodyElement = container.querySelector('.rc-collapse-body') as HTMLElement;
892+
const titleElement = container.querySelector('.rc-collapse-title') as HTMLElement;
893+
const iconElement = container.querySelector('.rc-collapse-expand-icon') as HTMLElement;
894+
895+
// check classNames
896+
expect(headerElement.classList).toContain('custom-header');
897+
expect(bodyElement.classList).toContain('custom-body');
898+
expect(titleElement.classList).toContain('custom-title');
899+
expect(iconElement.classList).toContain('custom-icon');
900+
901+
// check styles
902+
expect(headerElement.style.color).toBe('red');
903+
expect(bodyElement.style.color).toBe('blue');
904+
expect(titleElement.style.color).toBe('green');
905+
expect(iconElement.style.color).toBe('yellow');
883906
});
884907
});
885908
});

0 commit comments

Comments
 (0)