Merge pull request #297 from springload/chore/hookify-AccordionItem-ItemContext

Chore/hookify accordionitem itemcontext

Author: Matthew Holloway

package.json

@@ -115,8 +115,8 @@
         "mini-css-extract-plugin": "^0.7.0",
         "prettier": "^2.0.5",
         "puppeteer": "2.0.0",
-        "react": "16.3.2",
-        "react-dom": "16.3.3",
+        "react": "16.8.0",
+        "react-dom": "16.8.0",
         "react-syntax-highlighter": "^12.2.1",
         "react-test-renderer": "^16.8.6",
         "rimraf": "^2.6.3",

src/components/AccordionItem.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useState } from 'react';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
 import { assertValidHtmlId, nextUuid } from '../helpers/uuid';
@@ -15,25 +16,17 @@ type Props = DivAttributes & {
     dangerouslySetExpanded?: boolean;
 };
 
-const defaultProps = {
-    className: 'accordion__item',
-};
-
-export default class AccordionItem extends React.Component<Props> {
-    static defaultProps: typeof defaultProps = defaultProps;
-
-    static displayName: DisplayName.AccordionItem = DisplayName.AccordionItem;
-
-    instanceUuid: UUID = nextUuid();
-
-    renderChildren = (itemContext: ItemContext): JSX.Element => {
-        const {
-            uuid,
-            className,
-            activeClassName,
-            dangerouslySetExpanded,
-            ...rest
-        } = this.props;
+const AccordionItem = ({
+    uuid: customUuid,
+    dangerouslySetExpanded,
+    className = 'accordion__item',
+    activeClassName,
+    ...rest
+}: Props): JSX.Element => {
+    const [instanceUuid] = useState<UUID>(nextUuid());
+    const uuid = customUuid || instanceUuid;
+
+    const renderChildren = (itemContext: ItemContext): JSX.Element => {
         const { expanded } = itemContext;
         const cx = expanded && activeClassName ? activeClassName : className;
 
@@ -46,26 +39,20 @@ export default class AccordionItem extends React.Component<Props> {
         );
     };
 
-    render(): JSX.Element {
-        const {
-            uuid = this.instanceUuid,
-            dangerouslySetExpanded,
-            ...rest
-        } = this.props;
-
-        assertValidHtmlId(uuid);
+    assertValidHtmlId(uuid);
+    if (rest.id) {
+        assertValidHtmlId(rest.id);
+    }
+    return (
+        <ItemProvider
+            uuid={uuid}
+            dangerouslySetExpanded={dangerouslySetExpanded}
+        >
+            <ItemConsumer>{renderChildren}</ItemConsumer>
+        </ItemProvider>
+    );
+};
 
-        if (rest.id) {
-            assertValidHtmlId(rest.id);
-        }
+AccordionItem.displayName = DisplayName.AccordionItem;
 
-        return (
-            <ItemProvider
-                uuid={uuid}
-                dangerouslySetExpanded={dangerouslySetExpanded}
-            >
-                <ItemConsumer>{this.renderChildren}</ItemConsumer>
-            </ItemProvider>
-        );
-    }
-}
+export default AccordionItem;

src/components/ItemContext.tsx

@@ -37,14 +37,19 @@ export type ItemContext = {
 
 const Context = React.createContext(null as ItemContext | null);
 
-class Provider extends React.Component<ProviderProps> {
-    toggleExpanded = (): void => {
-        this.props.accordionContext.toggleExpanded(this.props.uuid);
+const Provider = ({
+    children,
+    uuid,
+    accordionContext,
+    dangerouslySetExpanded,
+}: ProviderProps): JSX.Element => {
+    const toggleExpanded = (): void => {
+        accordionContext.toggleExpanded(uuid);
     };
 
-    renderChildren = (accordionContext: AccordionContext): JSX.Element => {
-        const { uuid, dangerouslySetExpanded } = this.props;
-
+    const renderChildren = (
+        accordionContext: AccordionContext,
+    ): JSX.Element => {
         const expanded =
             dangerouslySetExpanded ?? accordionContext.isItemExpanded(uuid);
         const disabled = accordionContext.isItemDisabled(uuid);
@@ -64,25 +69,21 @@ class Provider extends React.Component<ProviderProps> {
                     uuid,
                     expanded,
                     disabled,
-                    toggleExpanded: this.toggleExpanded,
+                    toggleExpanded: toggleExpanded,
                     panelAttributes,
                     headingAttributes,
                     buttonAttributes,
                 }}
             >
-                {this.props.children}
+                {children}
             </Context.Provider>
         );
     };
 
-    render(): JSX.Element {
-        return (
-            <AccordionContextConsumer>
-                {this.renderChildren}
-            </AccordionContextConsumer>
-        );
-    }
-}
+    return (
+        <AccordionContextConsumer>{renderChildren}</AccordionContextConsumer>
+    );
+};
 
 const ProviderWrapper: React.SFC<ProviderWrapperProps> = (
     props: ProviderWrapperProps,
@@ -100,12 +101,10 @@ type ConsumerProps = {
     children(container: ItemContext): React.ReactNode;
 };
 
-export class Consumer extends React.PureComponent<ConsumerProps> {
-    renderChildren = (container: ItemContext | null): React.ReactNode => {
-        return container ? this.props.children(container) : null;
+export const Consumer = ({ children }: ConsumerProps): JSX.Element => {
+    const renderChildren = (container: ItemContext | null): React.ReactNode => {
+        return container ? children(container) : null;
     };
 
-    render(): JSX.Element {
-        return <Context.Consumer>{this.renderChildren}</Context.Consumer>;
-    }
-}
+    return <Context.Consumer>{renderChildren}</Context.Consumer>;
+};