Merge pull request #275 from springload/feat/reduce-bundle-size

Feature: reduce bundle size

Author: synecdokey

CHANGELOG.md

@@ -3,6 +3,12 @@
 > All notable changes to this project are documented in this file. This project
 > adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [[v3.3.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v3.3.0)
+
+### Changed
+
+-   Bundle size reduction
+
 ## [[v3.2.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v3.2.0)
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-accessible-accordion",
-    "version": "3.2.0",
+    "version": "3.3.0",
     "description": "Accessible Accordion component for React",
     "main": "dist/umd/index.js",
     "module": "dist/es/index.js",
@@ -69,6 +69,10 @@
         {
             "name": "Janzen Zarzoso",
             "url": "https://github.com/janzenz"
+        },
+        {
+            "name": "Emilia Zapata",
+            "url": "https://github.com/synecdokey"
         }
     ],
     "license": "MIT",

src/components/Accordion.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
 import { Provider } from './AccordionContext';
 import { UUID } from './ItemContext';
@@ -8,45 +7,35 @@ type AccordionProps = Pick<
     DivAttributes,
     Exclude<keyof DivAttributes, 'onChange'>
 > & {
+    className?: string;
     preExpanded?: UUID[];
     allowMultipleExpanded?: boolean;
     allowZeroExpanded?: boolean;
     onChange?(args: UUID[]): void;
 };
 
-export default class Accordion extends React.Component<AccordionProps> {
-    static defaultProps: AccordionProps = {
-        allowMultipleExpanded: undefined,
-        allowZeroExpanded: undefined,
-        onChange: undefined,
-        className: 'accordion',
-        children: undefined,
-    };
-
-    static displayName: DisplayName.Accordion = DisplayName.Accordion;
-
-    renderAccordion = (): JSX.Element => {
-        const {
-            preExpanded,
-            allowMultipleExpanded,
-            allowZeroExpanded,
-            onChange,
-            ...rest
-        } = this.props;
-
-        return <div data-accordion-component="Accordion" {...rest} />;
-    };
+const Accordion = ({
+    className = 'accordion',
+    allowMultipleExpanded,
+    allowZeroExpanded,
+    onChange,
+    preExpanded,
+    ...rest
+}: AccordionProps) => {
+    return (
+        <Provider
+            preExpanded={preExpanded}
+            allowMultipleExpanded={allowMultipleExpanded}
+            allowZeroExpanded={allowZeroExpanded}
+            onChange={onChange}
+        >
+            <div
+                data-accordion-component="Accordion"
+                className={className}
+                {...rest}
+            />
+        </Provider>
+    );
+};
 
-    render(): JSX.Element {
-        return (
-            <Provider
-                preExpanded={this.props.preExpanded}
-                allowMultipleExpanded={this.props.allowMultipleExpanded}
-                allowZeroExpanded={this.props.allowZeroExpanded}
-                onChange={this.props.onChange}
-            >
-                {this.renderAccordion()}
-            </Provider>
-        );
-    }
-}
+export default Accordion;

src/components/AccordionItem.tsx

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

src/components/AccordionItemButton.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { InjectedButtonAttributes } from '../helpers/AccordionStore';
-import DisplayName from '../helpers/DisplayName';
 import {
     focusFirstSiblingOf,
     focusLastSiblingOf,
@@ -17,19 +16,17 @@ type Props = DivAttributes & {
     toggleExpanded(): void;
 };
 
-const defaultProps = {
-    className: 'accordion__button',
-};
-
-export class AccordionItemButton extends React.PureComponent<Props> {
-    static defaultProps: typeof defaultProps = defaultProps;
-
-    handleKeyPress = (evt: React.KeyboardEvent<HTMLDivElement>): void => {
+const AccordionItemButton = ({
+    toggleExpanded,
+    className = 'accordion__button',
+    ...rest
+}: Props) => {
+    const handleKeyPress = (evt: React.KeyboardEvent<HTMLDivElement>): void => {
         const keyCode = evt.which.toString();
 
         if (keyCode === keycodes.ENTER || keyCode === keycodes.SPACE) {
             evt.preventDefault();
-            this.props.toggleExpanded();
+            toggleExpanded();
         }
 
         /* The following block is ignored from test coverage because at time
@@ -68,24 +65,21 @@ export class AccordionItemButton extends React.PureComponent<Props> {
         }
     };
 
-    render(): JSX.Element {
-        const { toggleExpanded, ...rest } = this.props;
-
-        if (rest.id) {
-            assertValidHtmlId(rest.id);
-        }
-
-        return (
-            <div
-                {...rest}
-                // tslint:disable-next-line react-a11y-event-has-role
-                onClick={toggleExpanded}
-                onKeyDown={this.handleKeyPress}
-                data-accordion-component="AccordionItemButton"
-            />
-        );
+    if (rest.id) {
+        assertValidHtmlId(rest.id);
     }
-}
+
+    return (
+        <div
+            className={className}
+            {...rest}
+            // tslint:disable-next-line react-a11y-event-has-role
+            onClick={toggleExpanded}
+            onKeyDown={handleKeyPress}
+            data-accordion-component="AccordionItemButton"
+        />
+    );
+};
 
 type WrapperProps = Pick<
     DivAttributes,
@@ -110,6 +104,4 @@ const AccordionItemButtonWrapper: React.SFC<WrapperProps> = (
     </ItemConsumer>
 );
 
-AccordionItemButtonWrapper.displayName = DisplayName.AccordionItemButton;
-
 export default AccordionItemButtonWrapper;

src/components/AccordionItemPanel.tsx

@@ -1,36 +1,31 @@
 import * as React from 'react';
-import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
 import { assertValidHtmlId } from '../helpers/uuid';
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 
-type Props = DivAttributes;
+type Props = DivAttributes & { className?: string };
 
-const defaultProps = {
-    className: 'accordion__panel',
-};
-
-export default class AccordionItemPanel extends React.Component<Props> {
-    static defaultProps: typeof defaultProps = defaultProps;
-
-    static displayName: DisplayName.AccordionItemPanel =
-        DisplayName.AccordionItemPanel;
-
-    renderChildren = ({ panelAttributes }: ItemContext): JSX.Element => {
-        if (this.props.id) {
-            assertValidHtmlId(this.props.id);
+const AccordionItemPanel = ({
+    className = 'accordion__panel',
+    id,
+    ...rest
+}: Props) => {
+    const renderChildren = ({ panelAttributes }: ItemContext): JSX.Element => {
+        if (id) {
+            assertValidHtmlId(id);
         }
 
         return (
             <div
                 data-accordion-component="AccordionItemPanel"
-                {...this.props}
+                className={className}
+                {...rest}
                 {...panelAttributes}
             />
         );
     };
 
-    render(): JSX.Element {
-        return <ItemConsumer>{this.renderChildren}</ItemConsumer>;
-    }
-}
+    return <ItemConsumer>{renderChildren}</ItemConsumer>;
+};
+
+export default AccordionItemPanel;

src/components/AccordionItemState.tsx

@@ -8,18 +8,16 @@ type Props = Pick<DivAttributes, Exclude<keyof DivAttributes, 'children'>> & {
     ): React.ReactNode;
 };
 
-export default class AccordionItemState extends React.Component<Props> {
-    renderChildren = (itemContext: ItemContext): JSX.Element => {
+const AccordionItemState = ({ children }: Props) => {
+    const renderChildren = (itemContext: ItemContext): JSX.Element => {
         const { expanded, disabled } = itemContext;
 
         return (
-            <React.Fragment>
-                {this.props.children({ expanded, disabled })}
-            </React.Fragment>
+            <React.Fragment>{children({ expanded, disabled })}</React.Fragment>
         );
     };
 
-    render(): JSX.Element {
-        return <ItemConsumer>{this.renderChildren}</ItemConsumer>;
-    }
-}
+    return <ItemConsumer>{renderChildren}</ItemConsumer>;
+};
+
+export default AccordionItemState;