Merge pull request #83 from springload/feature/onchange-informative

Adds possibility of custom uuid

Author: vincentaudebert

CHANGELOG.md

@@ -5,6 +5,10 @@
 
 ## Next
 
+### Added
+
+*   Possibility to have custom uuid on `AccordionItem` - suggested by https://github.com/springload/react-accessible-accordion/issues/70
+
 ### Fixed
 
 *   Fix rollup config after version bump - https://gist.github.com/Rich-Harris/d472c50732dab03efeb37472b08a3f32

README.md

@@ -137,6 +137,12 @@ We recommend that you copy them into your own app and modify them to suit your n
           <td>null</td>
           <td>Class name for hidden body state</td>
       </tr>
+      <tr>
+          <td>uuid</td>
+          <td>String</td>
+          <td>null</td>
+          <td>Custom uuid to be passed to Accordion - onChange. Has to be unique.</td>
+      </tr>
     </tbody>
 </table>
 

demo/js/demo.js

@@ -1,3 +1,5 @@
+/* eslint no-console: 0 */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -568,6 +570,39 @@ const Example = () => (
                 </AccordionItemBody>
             </AccordionItem>
         </Accordion>
+
+        <h2 className="u-margin-top">Informative onChange</h2>
+
+        <Accordion onChange={itemUuid => console.log(itemUuid)}>
+            <AccordionItem uuid="uniqueItem-1">
+                <AccordionItemTitle>
+                    <h3 className="u-position-relative">
+                        Unique Item #1
+                        <div className="accordion__arrow" role="presentation" />
+                    </h3>
+                </AccordionItemTitle>
+                <AccordionItemBody>
+                    <p>
+                        If you open/close this item you should see
+                        `uniqueItem-1` printed in the console.
+                    </p>
+                </AccordionItemBody>
+            </AccordionItem>
+            <AccordionItem uuid="uniqueItem-2">
+                <AccordionItemTitle>
+                    <h3 className="u-position-relative">
+                        Unique Item #2
+                        <div className="accordion__arrow" role="presentation" />
+                    </h3>
+                </AccordionItemTitle>
+                <AccordionItemBody>
+                    <p>
+                        If you open/close this item you should see
+                        `uniqueItem-2` printed in the console.
+                    </p>
+                </AccordionItemBody>
+            </AccordionItem>
+        </Accordion>
     </div>
 );
 

src/AccordionItem/accordion-item-wrapper.js

@@ -13,6 +13,7 @@ type AccordionItemWrapperProps = ElementProps<'div'> & {
     disabled: ?boolean,
     expanded: ?boolean,
     accordionStore: AccordionContainer,
+    uuid?: string,
 };
 
 const defaultProps = {
@@ -21,6 +22,7 @@ const defaultProps = {
     disabled: false,
     expanded: false,
     accordionStore: new AccordionContainer(),
+    uuid: undefined,
 };
 
 class AccordionItemWrapper extends Component<AccordionItemWrapperProps> {
@@ -31,13 +33,18 @@ class AccordionItemWrapper extends Component<AccordionItemWrapperProps> {
         return (
             <Provider inject={[this.itemContainer]}>
                 <Subscribe to={[AccordionContainer, ItemContainer]}>
-                    {(accordionStore, itemStore) => (
-                        <AccordionItem
-                            {...this.props}
-                            uuid={itemStore.state.uuid}
-                            accordionStore={accordionStore}
-                        />
-                    )}
+                    {(accordionStore, itemStore) => {
+                        let uuid = itemStore.state.uuid;
+                        if (this.props.uuid) uuid = this.props.uuid;
+                        return (
+                            <AccordionItem
+                                {...this.props}
+                                uuid={uuid}
+                                accordionStore={accordionStore}
+                                itemStore={itemStore}
+                            />
+                        );
+                    }}
                 </Subscribe>
             </Provider>
         );

src/AccordionItem/accordion-item.js

@@ -5,18 +5,31 @@ import type { ElementProps } from 'react';
 
 import classNames from 'classnames';
 import AccordionContainer from '../AccordionContainer/AccordionContainer';
+import ItemContainer from '../ItemContainer/ItemContainer';
 
 type AccordionItemProps = ElementProps<'div'> & {
     uuid: string | number,
     hideBodyClassName: ?string,
     disabled: ?boolean,
     expanded: ?boolean,
     accordionStore: AccordionContainer,
+    itemStore: ItemContainer,
 };
 
 class AccordionItem extends Component<AccordionItemProps, *> {
     componentWillMount() {
-        const { uuid, accordionStore, disabled } = this.props;
+        const { uuid, accordionStore, itemStore, disabled } = this.props;
+
+        itemStore.setUuid(uuid);
+
+        const currentItem = accordionStore.state.items.find(
+            item => item.uuid === uuid,
+        );
+        if (currentItem)
+            // eslint-disable-next-line no-console
+            console.error(
+                `AccordionItem error: One item already has the uuid "${uuid}". Uuid property must be unique. See: https://github.com/springload/react-accessible-accordion#accordionitem`,
+            );
 
         accordionStore.addItem({
             uuid,
@@ -48,6 +61,7 @@ class AccordionItem extends Component<AccordionItemProps, *> {
             accordionStore,
             disabled,
             expanded,
+            itemStore,
             ...rest
         } = this.props;
 

src/AccordionItem/accordion-item.spec.js

@@ -248,31 +248,12 @@ describe('AccordionItem', () => {
             </Provider>,
         );
         resetNextUuid();
-        const wrapperTwo = mount(
-            <Provider inject={[accordionContainer]}>
-                <AccordionItem />
-            </Provider>,
-        );
-        expect(
-            wrapperOne
-                .find(Provider)
-                .last()
-                .props().uuid,
-        ).toEqual(
-            wrapperTwo
-                .find(Provider)
-                .last()
-                .props().uuid,
-        );
-    });
 
-    it('can manually reset the uuid', () => {
-        const wrapperOne = mount(
-            <Provider inject={[accordionContainer]}>
-                <AccordionItem />
-            </Provider>,
-        );
-        resetNextUuid();
+        // Needed to avoid duplicate uuid error
+        accordionContainer = new AccordionContainer();
+        accordionContainer.setAccordion(false);
+        accordionContainer.setOnChange(jest.fn());
+
         const wrapperTwo = mount(
             <Provider inject={[accordionContainer]}>
                 <AccordionItem />
@@ -318,4 +299,44 @@ describe('AccordionItem', () => {
 
         expect(wrapper.find('div').instance().lang).toEqual('en');
     });
+
+    it('supports custom uuid', () => {
+        const uuid = 'uniqueCustomID';
+        mount(
+            <Provider inject={[accordionContainer]}>
+                <AccordionItem uuid={uuid}>
+                    <AccordionItemTitle>
+                        <div>Fake title</div>
+                    </AccordionItemTitle>
+                </AccordionItem>
+            </Provider>,
+        );
+
+        expect(
+            accordionContainer.state.items.filter(item => item.uuid === uuid)
+                .length,
+        ).toEqual(1);
+    });
+
+    it('raises console error in case of duplicate uuid', () => {
+        const uuid = 'uniqueCustomID';
+        jest.spyOn(global.console, 'error');
+        mount(
+            <Provider inject={[accordionContainer]}>
+                <AccordionItem uuid={uuid}>
+                    <AccordionItemTitle>
+                        <div>Fake title</div>
+                    </AccordionItemTitle>
+                </AccordionItem>
+                <AccordionItem uuid={uuid}>
+                    <AccordionItemTitle>
+                        <div>Fake title</div>
+                    </AccordionItemTitle>
+                </AccordionItem>
+            </Provider>,
+        );
+
+        // eslint-disable-next-line no-console
+        expect(console.error).toBeCalled();
+    });
 });

src/ItemContainer/ItemContainer.js

@@ -15,6 +15,12 @@ class ItemContainer extends Container<StoreState> {
     state = {
         uuid: nextUuid(),
     };
+
+    setUuid(customUuid: string) {
+        this.setState({
+            uuid: customUuid,
+        });
+    }
 }
 
 export default ItemContainer;

src/ItemContainer/ItemContainer.spec.js

@@ -6,6 +6,14 @@ describe('ItemContainer', () => {
     it('correctly instantiates with all expected methods/state', () => {
         const itemContainer = new ItemContainer();
         expect(itemContainer.state.uuid).toBeDefined();
+        expect(itemContainer.setUuid).toBeDefined();
+    });
+
+    it('correctly sets the value', () => {
+        const itemContainer = new ItemContainer();
+        const uuid = 'uniqueID';
+        itemContainer.setUuid(uuid);
+        expect(itemContainer.state.uuid).toBe(uuid);
     });
 
     it('generated uuids are different', () => {