# All files / components/Accordion AccordionGroup.js

0% Statements 0/47
0% Branches 0/10
0% Functions 0/8
0% Lines 0/23

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82

     import React from 'react';
    import PropTypes from 'prop-types';
    import AccordionGroupContainer from './styles/AccordionGroupContainer';

    /**
     * @visibleName Accordion.Group
     */
    export default class AccordionGroup extends React.Component {
      static propTypes = {
        /**
         * Accordions to render in this group.
         */
        children: PropTypes.node.isRequired,
        /**
         * The key of the accordion (if any) to start in the expanded state.
         */
        startExpandedKey: PropTypes.any,
        /**
         * A class name to pass to the accordion group container.
         */
        className: PropTypes.string,
        /**
         * An id to pass to the accordion group container
         */
        id: PropTypes.string,
        /**
         * A component that wraps the accordions and defines layout and styling
         */
        Container: PropTypes.func,
      };

      static defaultProps = {
        startExpandedKey: null,
        className: null,
        id: null,
        Container: AccordionGroupContainer,
      };

      constructor(props) {
        super(props);
        this.state = {
          expandedKey: `${props.startExpandedKey}`,
        };
      }

      createToggleHandler = key => isAlreadyExpanded => {
        // current state is open, it will close
        if (!isAlreadyExpanded) {
          this.setState({ expandedKey: key });
          // close already open accordion
        } else {
          this.setState({ expandedKey: null });
        }
      };

      renderAccordion = accordion => {
        const { expandedKey } = this.state;
        if (!accordion.key) {
          throw new Error('All AccordionGroup accordion children must have a key');
        }
        return React.cloneElement(accordion, {
          isExpanded: expandedKey === accordion.key,
          onToggle: this.createToggleHandler(accordion.key),
        });
      };

      renderAccordions = () => {
        const { children } = this.props;
        return React.Children.map(children, this.renderAccordion);
      };

      render() {
        const { className, id, Container } = this.props;

        return (
          <Container className={className} id={id}>
            {this.renderAccordions()}
          </Container>
        );
      }
    }