Merge pull request #285 from springload/bug/accordion-item-instance-uuid

AccordionItem preserving uuid on instance

Author: Matthew Holloway

demo/src/code-examples.tsx

@@ -36,6 +36,21 @@ export const ExampleAllowMultipleExpanded = `<Accordion allowMultipleExpanded>
     ))}
 </Accordion>`;
 
+export const ExampleAllowMultipleExpandedFalse = `<Accordion allowMultipleExpanded={false}>
+    {items.map((item) => (
+        <AccordionItem key={item.uuid}>
+            <AccordionItemHeading>
+                <AccordionItemButton>
+                    {item.heading}
+                </AccordionItemButton>
+            </AccordionItemHeading>
+            <AccordionItemPanel>
+              {item.content}
+            </AccordionItemPanel>
+        </AccordionItem>
+    ))}
+</Accordion>`;
+
 export const ExampleAllowZeroExpanded = `<Accordion allowZeroExpanded>
     {items.map((item) => (
         <AccordionItem key={item.uuid}>

demo/src/index.tsx

@@ -19,6 +19,7 @@ import Code from './components/Code';
 import {
     ExampleDefault,
     ExampleAllowMultipleExpanded,
+    ExampleAllowMultipleExpandedFalse,
     ExampleAllowZeroExpanded,
     ExamplePreExpanded,
     ExampleOnChange,
@@ -95,6 +96,25 @@ const App = (): JSX.Element => (
 
         <Code code={ExampleAllowMultipleExpanded} />
 
+        <h2 className="u-margin-top">
+            Same as above except with allowMultipleExpanded=false
+        </h2>
+
+        <Accordion allowMultipleExpanded={false}>
+            {placeholders.map((placeholder: Placeholder) => (
+                <AccordionItem key={placeholder.heading}>
+                    <AccordionItemHeading>
+                        <AccordionItemButton>
+                            {placeholder.heading}
+                        </AccordionItemButton>
+                    </AccordionItemHeading>
+                    <AccordionItemPanel>{placeholder.panel}</AccordionItemPanel>
+                </AccordionItem>
+            ))}
+        </Accordion>
+
+        <Code code={ExampleAllowMultipleExpandedFalse} />
+
         <h2 className="u-margin-top">Collapsing the last expanded item</h2>
 
         <p>

src/components/AccordionItem.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
 import { assertValidHtmlId, nextUuid } from '../helpers/uuid';
 import {
@@ -9,20 +10,30 @@ import {
 } from './ItemContext';
 
 type Props = DivAttributes & {
-    className?: string;
     uuid?: UUID;
     activeClassName?: string;
     dangerouslySetExpanded?: boolean;
 };
 
-const AccordionItem = ({
-    uuid = nextUuid(),
-    className = 'accordion__item',
-    activeClassName,
-    dangerouslySetExpanded,
-    ...rest
-}: Props): JSX.Element => {
-    const renderChildren = (itemContext: ItemContext): JSX.Element => {
+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 { expanded } = itemContext;
         const cx = expanded && activeClassName ? activeClassName : className;
 
@@ -35,18 +46,26 @@ const AccordionItem = ({
         );
     };
 
-    if (rest.id) {
-        assertValidHtmlId(rest.id);
-    }
+    render(): JSX.Element {
+        const {
+            uuid = this.instanceUuid,
+            dangerouslySetExpanded,
+            ...rest
+        } = this.props;
 
-    return (
-        <ItemProvider
-            uuid={uuid}
-            dangerouslySetExpanded={dangerouslySetExpanded}
-        >
-            <ItemConsumer>{renderChildren}</ItemConsumer>
-        </ItemProvider>
-    );
-};
+        assertValidHtmlId(uuid);
+
+        if (rest.id) {
+            assertValidHtmlId(rest.id);
+        }
 
-export default AccordionItem;
+        return (
+            <ItemProvider
+                uuid={uuid}
+                dangerouslySetExpanded={dangerouslySetExpanded}
+            >
+                <ItemConsumer>{this.renderChildren}</ItemConsumer>
+            </ItemProvider>
+        );
+    }
+}