Skip to content

Commit 9d7e7b3

Browse files
synecdokeysynecdokey
authored
Merge pull request #275 from springload/feat/reduce-bundle-size
Feature: reduce bundle size
2 parents 5a0b7da + 9c7649a commit 9d7e7b3

7 files changed

+101
-128
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
> All notable changes to this project are documented in this file. This project
44
> adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
55
6+
## [[v3.3.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v3.3.0)
7+
8+
### Changed
9+
10+
- Bundle size reduction
11+
612
## [[v3.2.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v3.2.0)
713

814
### Added

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-accessible-accordion",
3-
"version": "3.2.0",
3+
"version": "3.3.0",
44
"description": "Accessible Accordion component for React",
55
"main": "dist/umd/index.js",
66
"module": "dist/es/index.js",
@@ -69,6 +69,10 @@
6969
{
7070
"name": "Janzen Zarzoso",
7171
"url": "https://github.com/janzenz"
72+
},
73+
{
74+
"name": "Emilia Zapata",
75+
"url": "https://github.com/synecdokey"
7276
}
7377
],
7478
"license": "MIT",

‎src/components/Accordion.tsx

+25-36
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import DisplayName from '../helpers/DisplayName';
32
import { DivAttributes } from '../helpers/types';
43
import { Provider } from './AccordionContext';
54
import { UUID } from './ItemContext';
@@ -8,45 +7,35 @@ type AccordionProps = Pick<
87
DivAttributes,
98
Exclude<keyof DivAttributes, 'onChange'>
109
> & {
10+
className?: string;
1111
preExpanded?: UUID[];
1212
allowMultipleExpanded?: boolean;
1313
allowZeroExpanded?: boolean;
1414
onChange?(args: UUID[]): void;
1515
};
1616

17-
export default class Accordion extends React.Component<AccordionProps> {
18-
static defaultProps: AccordionProps = {
19-
allowMultipleExpanded: undefined,
20-
allowZeroExpanded: undefined,
21-
onChange: undefined,
22-
className: 'accordion',
23-
children: undefined,
24-
};
25-
26-
static displayName: DisplayName.Accordion = DisplayName.Accordion;
27-
28-
renderAccordion = (): JSX.Element => {
29-
const {
30-
preExpanded,
31-
allowMultipleExpanded,
32-
allowZeroExpanded,
33-
onChange,
34-
...rest
35-
} = this.props;
36-
37-
return <div data-accordion-component="Accordion" {...rest} />;
38-
};
17+
const Accordion = ({
18+
className = 'accordion',
19+
allowMultipleExpanded,
20+
allowZeroExpanded,
21+
onChange,
22+
preExpanded,
23+
...rest
24+
}: AccordionProps) => {
25+
return (
26+
<Provider
27+
preExpanded={preExpanded}
28+
allowMultipleExpanded={allowMultipleExpanded}
29+
allowZeroExpanded={allowZeroExpanded}
30+
onChange={onChange}
31+
>
32+
<div
33+
data-accordion-component="Accordion"
34+
className={className}
35+
{...rest}
36+
/>
37+
</Provider>
38+
);
39+
};
3940

40-
render(): JSX.Element {
41-
return (
42-
<Provider
43-
preExpanded={this.props.preExpanded}
44-
allowMultipleExpanded={this.props.allowMultipleExpanded}
45-
allowZeroExpanded={this.props.allowZeroExpanded}
46-
onChange={this.props.onChange}
47-
>
48-
{this.renderAccordion()}
49-
</Provider>
50-
);
51-
}
52-
}
41+
export default Accordion;

‎src/components/AccordionItem.tsx

+22-33
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import DisplayName from '../helpers/DisplayName';
32
import { DivAttributes } from '../helpers/types';
43
import { assertValidHtmlId, nextUuid } from '../helpers/uuid';
54
import {
@@ -10,24 +9,20 @@ import {
109
} from './ItemContext';
1110

1211
type Props = DivAttributes & {
12+
className?: string;
1313
uuid?: UUID;
1414
activeClassName?: string;
1515
dangerouslySetExpanded?: boolean;
1616
};
1717

18-
const defaultProps = {
19-
className: 'accordion__item',
20-
};
21-
22-
export default class AccordionItem extends React.Component<Props> {
23-
static defaultProps: typeof defaultProps = defaultProps;
24-
25-
static displayName: DisplayName.AccordionItem = DisplayName.AccordionItem;
26-
27-
instanceUuid: UUID = nextUuid();
28-
29-
renderChildren = (itemContext: ItemContext): JSX.Element => {
30-
const { uuid, className, activeClassName, ...rest } = this.props;
18+
const AccordionItem = ({
19+
uuid = nextUuid(),
20+
className = 'accordion__item',
21+
activeClassName,
22+
dangerouslySetExpanded,
23+
...rest
24+
}: Props) => {
25+
const renderChildren = (itemContext: ItemContext): JSX.Element => {
3126
const { expanded } = itemContext;
3227
const cx = expanded && activeClassName ? activeClassName : className;
3328

@@ -40,24 +35,18 @@ export default class AccordionItem extends React.Component<Props> {
4035
);
4136
};
4237

43-
render(): JSX.Element {
44-
const {
45-
uuid = this.instanceUuid,
46-
dangerouslySetExpanded,
47-
...rest
48-
} = this.props;
38+
if (rest.id) {
39+
assertValidHtmlId(rest.id);
40+
}
4941

50-
if (rest.id) {
51-
assertValidHtmlId(rest.id);
52-
}
42+
return (
43+
<ItemProvider
44+
uuid={uuid}
45+
dangerouslySetExpanded={dangerouslySetExpanded}
46+
>
47+
<ItemConsumer>{renderChildren}</ItemConsumer>
48+
</ItemProvider>
49+
);
50+
};
5351

54-
return (
55-
<ItemProvider
56-
uuid={uuid}
57-
dangerouslySetExpanded={dangerouslySetExpanded}
58-
>
59-
<ItemConsumer>{this.renderChildren}</ItemConsumer>
60-
</ItemProvider>
61-
);
62-
}
63-
}
52+
export default AccordionItem;

‎src/components/AccordionItemButton.tsx

+21-29
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import { InjectedButtonAttributes } from '../helpers/AccordionStore';
3-
import DisplayName from '../helpers/DisplayName';
43
import {
54
focusFirstSiblingOf,
65
focusLastSiblingOf,
@@ -17,19 +16,17 @@ type Props = DivAttributes & {
1716
toggleExpanded(): void;
1817
};
1918

20-
const defaultProps = {
21-
className: 'accordion__button',
22-
};
23-
24-
export class AccordionItemButton extends React.PureComponent<Props> {
25-
static defaultProps: typeof defaultProps = defaultProps;
26-
27-
handleKeyPress = (evt: React.KeyboardEvent<HTMLDivElement>): void => {
19+
const AccordionItemButton = ({
20+
toggleExpanded,
21+
className = 'accordion__button',
22+
...rest
23+
}: Props) => {
24+
const handleKeyPress = (evt: React.KeyboardEvent<HTMLDivElement>): void => {
2825
const keyCode = evt.which.toString();
2926

3027
if (keyCode === keycodes.ENTER || keyCode === keycodes.SPACE) {
3128
evt.preventDefault();
32-
this.props.toggleExpanded();
29+
toggleExpanded();
3330
}
3431

3532
/* The following block is ignored from test coverage because at time
@@ -68,24 +65,21 @@ export class AccordionItemButton extends React.PureComponent<Props> {
6865
}
6966
};
7067

71-
render(): JSX.Element {
72-
const { toggleExpanded, ...rest } = this.props;
73-
74-
if (rest.id) {
75-
assertValidHtmlId(rest.id);
76-
}
77-
78-
return (
79-
<div
80-
{...rest}
81-
// tslint:disable-next-line react-a11y-event-has-role
82-
onClick={toggleExpanded}
83-
onKeyDown={this.handleKeyPress}
84-
data-accordion-component="AccordionItemButton"
85-
/>
86-
);
68+
if (rest.id) {
69+
assertValidHtmlId(rest.id);
8770
}
88-
}
71+
72+
return (
73+
<div
74+
className={className}
75+
{...rest}
76+
// tslint:disable-next-line react-a11y-event-has-role
77+
onClick={toggleExpanded}
78+
onKeyDown={handleKeyPress}
79+
data-accordion-component="AccordionItemButton"
80+
/>
81+
);
82+
};
8983

9084
type WrapperProps = Pick<
9185
DivAttributes,
@@ -110,6 +104,4 @@ const AccordionItemButtonWrapper: React.SFC<WrapperProps> = (
110104
</ItemConsumer>
111105
);
112106

113-
AccordionItemButtonWrapper.displayName = DisplayName.AccordionItemButton;
114-
115107
export default AccordionItemButtonWrapper;

‎src/components/AccordionItemPanel.tsx

+15-20
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,31 @@
11
import * as React from 'react';
2-
import DisplayName from '../helpers/DisplayName';
32
import { DivAttributes } from '../helpers/types';
43
import { assertValidHtmlId } from '../helpers/uuid';
54
import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
65

7-
type Props = DivAttributes;
6+
type Props = DivAttributes & { className?: string };
87

9-
const defaultProps = {
10-
className: 'accordion__panel',
11-
};
12-
13-
export default class AccordionItemPanel extends React.Component<Props> {
14-
static defaultProps: typeof defaultProps = defaultProps;
15-
16-
static displayName: DisplayName.AccordionItemPanel =
17-
DisplayName.AccordionItemPanel;
18-
19-
renderChildren = ({ panelAttributes }: ItemContext): JSX.Element => {
20-
if (this.props.id) {
21-
assertValidHtmlId(this.props.id);
8+
const AccordionItemPanel = ({
9+
className = 'accordion__panel',
10+
id,
11+
...rest
12+
}: Props) => {
13+
const renderChildren = ({ panelAttributes }: ItemContext): JSX.Element => {
14+
if (id) {
15+
assertValidHtmlId(id);
2216
}
2317

2418
return (
2519
<div
2620
data-accordion-component="AccordionItemPanel"
27-
{...this.props}
21+
className={className}
22+
{...rest}
2823
{...panelAttributes}
2924
/>
3025
);
3126
};
3227

33-
render(): JSX.Element {
34-
return <ItemConsumer>{this.renderChildren}</ItemConsumer>;
35-
}
36-
}
28+
return <ItemConsumer>{renderChildren}</ItemConsumer>;
29+
};
30+
31+
export default AccordionItemPanel;

‎src/components/AccordionItemState.tsx

+7-9
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,16 @@ type Props = Pick<DivAttributes, Exclude<keyof DivAttributes, 'children'>> & {
88
): React.ReactNode;
99
};
1010

11-
export default class AccordionItemState extends React.Component<Props> {
12-
renderChildren = (itemContext: ItemContext): JSX.Element => {
11+
const AccordionItemState = ({ children }: Props) => {
12+
const renderChildren = (itemContext: ItemContext): JSX.Element => {
1313
const { expanded, disabled } = itemContext;
1414

1515
return (
16-
<React.Fragment>
17-
{this.props.children({ expanded, disabled })}
18-
</React.Fragment>
16+
<React.Fragment>{children({ expanded, disabled })}</React.Fragment>
1917
);
2018
};
2119

22-
render(): JSX.Element {
23-
return <ItemConsumer>{this.renderChildren}</ItemConsumer>;
24-
}
25-
}
20+
return <ItemConsumer>{renderChildren}</ItemConsumer>;
21+
};
22+
23+
export default AccordionItemState;

0 commit comments

Comments
 (0)