Skip to content

Commit c79c5d1

Browse files
author
Matthew Holloway
authored
Merge pull request #297 from springload/chore/hookify-AccordionItem-ItemContext
Chore/hookify accordionitem itemcontext
2 parents 98a9889 + 7222123 commit c79c5d1

File tree

4 files changed

+75
-151
lines changed

4 files changed

+75
-151
lines changed

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@
115115
"mini-css-extract-plugin": "^0.7.0",
116116
"prettier": "^2.0.5",
117117
"puppeteer": "2.0.0",
118-
"react": "16.3.2",
119-
"react-dom": "16.3.3",
118+
"react": "16.8.0",
119+
"react-dom": "16.8.0",
120120
"react-syntax-highlighter": "^12.2.1",
121121
"react-test-renderer": "^16.8.6",
122122
"rimraf": "^2.6.3",

src/components/AccordionItem.tsx

Lines changed: 27 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import { useState } from 'react';
23
import DisplayName from '../helpers/DisplayName';
34
import { DivAttributes } from '../helpers/types';
45
import { assertValidHtmlId, nextUuid } from '../helpers/uuid';
@@ -15,25 +16,17 @@ type Props = DivAttributes & {
1516
dangerouslySetExpanded?: boolean;
1617
};
1718

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 {
31-
uuid,
32-
className,
33-
activeClassName,
34-
dangerouslySetExpanded,
35-
...rest
36-
} = this.props;
19+
const AccordionItem = ({
20+
uuid: customUuid,
21+
dangerouslySetExpanded,
22+
className = 'accordion__item',
23+
activeClassName,
24+
...rest
25+
}: Props): JSX.Element => {
26+
const [instanceUuid] = useState<UUID>(nextUuid());
27+
const uuid = customUuid || instanceUuid;
28+
29+
const renderChildren = (itemContext: ItemContext): JSX.Element => {
3730
const { expanded } = itemContext;
3831
const cx = expanded && activeClassName ? activeClassName : className;
3932

@@ -46,26 +39,20 @@ export default class AccordionItem extends React.Component<Props> {
4639
);
4740
};
4841

49-
render(): JSX.Element {
50-
const {
51-
uuid = this.instanceUuid,
52-
dangerouslySetExpanded,
53-
...rest
54-
} = this.props;
55-
56-
assertValidHtmlId(uuid);
42+
assertValidHtmlId(uuid);
43+
if (rest.id) {
44+
assertValidHtmlId(rest.id);
45+
}
46+
return (
47+
<ItemProvider
48+
uuid={uuid}
49+
dangerouslySetExpanded={dangerouslySetExpanded}
50+
>
51+
<ItemConsumer>{renderChildren}</ItemConsumer>
52+
</ItemProvider>
53+
);
54+
};
5755

58-
if (rest.id) {
59-
assertValidHtmlId(rest.id);
60-
}
56+
AccordionItem.displayName = DisplayName.AccordionItem;
6157

62-
return (
63-
<ItemProvider
64-
uuid={uuid}
65-
dangerouslySetExpanded={dangerouslySetExpanded}
66-
>
67-
<ItemConsumer>{this.renderChildren}</ItemConsumer>
68-
</ItemProvider>
69-
);
70-
}
71-
}
58+
export default AccordionItem;

src/components/ItemContext.tsx

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,19 @@ export type ItemContext = {
3737

3838
const Context = React.createContext(null as ItemContext | null);
3939

40-
class Provider extends React.Component<ProviderProps> {
41-
toggleExpanded = (): void => {
42-
this.props.accordionContext.toggleExpanded(this.props.uuid);
40+
const Provider = ({
41+
children,
42+
uuid,
43+
accordionContext,
44+
dangerouslySetExpanded,
45+
}: ProviderProps): JSX.Element => {
46+
const toggleExpanded = (): void => {
47+
accordionContext.toggleExpanded(uuid);
4348
};
4449

45-
renderChildren = (accordionContext: AccordionContext): JSX.Element => {
46-
const { uuid, dangerouslySetExpanded } = this.props;
47-
50+
const renderChildren = (
51+
accordionContext: AccordionContext,
52+
): JSX.Element => {
4853
const expanded =
4954
dangerouslySetExpanded ?? accordionContext.isItemExpanded(uuid);
5055
const disabled = accordionContext.isItemDisabled(uuid);
@@ -64,25 +69,21 @@ class Provider extends React.Component<ProviderProps> {
6469
uuid,
6570
expanded,
6671
disabled,
67-
toggleExpanded: this.toggleExpanded,
72+
toggleExpanded: toggleExpanded,
6873
panelAttributes,
6974
headingAttributes,
7075
buttonAttributes,
7176
}}
7277
>
73-
{this.props.children}
78+
{children}
7479
</Context.Provider>
7580
);
7681
};
7782

78-
render(): JSX.Element {
79-
return (
80-
<AccordionContextConsumer>
81-
{this.renderChildren}
82-
</AccordionContextConsumer>
83-
);
84-
}
85-
}
83+
return (
84+
<AccordionContextConsumer>{renderChildren}</AccordionContextConsumer>
85+
);
86+
};
8687

8788
const ProviderWrapper: React.SFC<ProviderWrapperProps> = (
8889
props: ProviderWrapperProps,
@@ -100,12 +101,10 @@ type ConsumerProps = {
100101
children(container: ItemContext): React.ReactNode;
101102
};
102103

103-
export class Consumer extends React.PureComponent<ConsumerProps> {
104-
renderChildren = (container: ItemContext | null): React.ReactNode => {
105-
return container ? this.props.children(container) : null;
104+
export const Consumer = ({ children }: ConsumerProps): JSX.Element => {
105+
const renderChildren = (container: ItemContext | null): React.ReactNode => {
106+
return container ? children(container) : null;
106107
};
107108

108-
render(): JSX.Element {
109-
return <Context.Consumer>{this.renderChildren}</Context.Consumer>;
110-
}
111-
}
109+
return <Context.Consumer>{renderChildren}</Context.Consumer>;
110+
};

0 commit comments

Comments
 (0)